Neighborly Package Megalodon

    storybook-addon-designs
    TypeScript icon, indicating that this package has built-in type declarations

    6.3.1 • Public • Published
    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@>=6.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 main.js

    module.exports = {
      addons: ['storybook-addon-designs'],
    }

    3. Add it to story!

    import { withDesign } from 'storybook-addon-designs'
    
    export default {
      title: 'My stories',
      component: Button,
      decorators: [withDesign],
    }
    
    export const myStory = () => <Button>Hello, World!</Button>
    
    myStory.parameters = {
      design: {
        type: 'figma',
        url: 'https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File',
      },
    }

    Similar projects

    Install

    npm i storybook-addon-designs

    DownloadsWeekly Downloads

    543,757

    Version

    6.3.1

    License

    MIT

    Unpacked Size

    95.1 kB

    Total Files

    80

    Last publish

    Collaborators

    • pocka