Meet FigJam, our new online whiteboard for teams to explore ideas together. Learn more.

···

    Storybook and Figma

    Storybook is an open source tool for developing UI components across many different frameworks. Use Storybook to:

    • Create code-based components that can be used across different platforms and devices.
    • Collaborate with designers, engineers, and product managers.
    • Showcase components in an interactive development environment, without all the distractions.
    • Show different use cases and examples for implementing components.
    • Connect addons for prototyping, testing, and documentation.

    Connect Storybook to Figma to embed Figma files and components within Storybook. This allows you to see your designs from your design system or library in Figma alongside your code-based components.

    Learn more about Storybook in their docs and tutorials.

    Connect Storybook to Figma

    To connect Storybook to Figma, you will need to install the Figma addon.

    1. Install the addon:

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

    2. Register the addon in your .storybook/main.js file:

       // .storybook/main.js
 module.exports = { addons: ['storybook-addon-designs']
 }

      If you're using Storybook@5.0.x, use this module instead.

       // .storybook/addons.js
 import 'storybook-addon-designs/register'

    For detailed instructions, check out the Figma addon readme on GitHub.

    Embed files or frames in Storybook

    Figma Live Embeds allow you to add live Figma files or prototypes into other websites or apps.

    Embed files or prototypes in Storybook, regardless of the file's sharing settings. Share private files within a team, or public files with the world.

    Collaborators can interact with embeds based on their team or Organization permissions.

    In Figma

    Copy the URL for the file or frame you’d like to embed in your story.

    1. Open your Figma file in the Editor
    2. Click the Share button.
    3. Click the Copy link button. If you're using the Figma web app, copy the URL from the browser’s address bar.

    Tip! You also have the option to select a specific Frame to embed. From the share modal, check Link to selected frame.

    In Storybook

    Use a parameter to associate Figma files and frames to your story.

    1. Open your stories file (in many cases, it’s named like *.stories.js)

    2. Add a story parameter named design:

       export const myStory = () => <Button>Hello, World!</Button>myStory.story = {
    parameters: {
       design: {
          type: 'figma',
          url: ''
       }
    }
 }

    3. Paste the copied URL to the url field

    Related Videos

    See more