Skip to content
A Storybook addon that embed Figma, websites, PDF or images in the addon panel.
TypeScript JavaScript HCL HTML
Branch: master
Clone or download
1
Latest commit 995dfed Jan 22, 2020
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github [chore] Fix automated publish fails Mar 23, 2019
packages v5.1.2 Jan 22, 2020
.editorconfig [feat] Initial commit! Mar 20, 2019
.gitignore [feat] Initial commit! Mar 20, 2019
.nvmrc [feat] Initial commit! Mar 20, 2019
LICENSE [chore] Add LICENSE Mar 23, 2019
README.md Update README.md Dec 7, 2019
lerna.json v5.1.2 Jan 22, 2020
now.json [chore] Add Now config Mar 22, 2019
package.json misc: Update examples to use latest SB features Jan 22, 2020
yarn.lock misc: Update Storybook Jan 22, 2020

README.md

logo

npm version Monthly download GitHub license code style: prettier


storybook-addon-designs

A Storybook addon that embed Figma or websites in the addon panel for better design-development workflow.

Requirements

  • Storybook@>=5.0.0

This addon should work well with any framework: If you find the case the addon not works, please open an issue.

Getting started

1. Install

npm install --save-dev storybook-addon-designs
# yarn add -D storybook-addon-designs

2. Register the addon in addons.js

// .storybook/addons.js

import 'storybook-addon-designs/register'

3. Add it to story!

CSF (Component Story Format)

import { withDesign } from 'storybook-addon-designs'

export default {
  title: 'My stories',
  component: Button,
  decorators: [withDesign]
}

export const myStory = () => <Button>Hello, World!</Button>

myStory.story = {
  name: 'My awesome story',
  parameters: {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
  }
}

storiesOf API

import { withDesign } from 'storybook-addon-designs'

storiesOf('My stories', module)
  .addDecorator(withDesign)
  .add('My awesome story', () => <Button>Hello, World!</Button>, {
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
  })

MDX

import { Meta, Story } from '@storybook/addon-docs/blocks'

<Meta title="My stories"/>

<Story
  name="My awesome story"
  parameters={{
    design: {
      type: 'figma',
      url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
    }
  }}
/>

Usage

Add withDesign decorator then put design parameter to your story.

NOTE: If you omit design parameter, the addon does nothing.

The type of design parameter is differ by embed type. For more detailed information, see type definition file.

Available types

  • iframe ... Embed <iframe/>.
  • figma ... Embed Figma Live Embed Kit.
  • pdf ... Embed PDF document.
  • image ... Embed image.

Utility function

If you want type support for type checking or IDE auto completion, use exported config function.

import { config } from 'storybook-addon-designs'

storiesOf('foo', module).add('bar', () => <Button>Hello, World!</Button>, {
  design: config({
    // IDE would auto complete keys and `type` values!
    type: 'iframe',
    url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File'
  })
})

Multiple designs for single story

You can attach more than one designs by passing array of config to design parameter.

design: [
  {
    type: 'pdf',
    url: 'https://my-pdf'
  },
  {
    // Specify tab name by passing "name" prop
    name: 'Image Preview',
    type: 'image',
    url: 'https://my-image'
  }
]

Similar projects

You can’t perform that action at this time.