Guide

How to turn Storybook into Figma component sets.

Capture your Storybook with Twinfig and every story becomes a variant in a Figma component set, with themes and viewports as extra variant properties.

Download for FigmaDownload for Chrome

Updated

The short answer

Open your Storybook in Chrome and click the Twinfig extension. It reads the story index, you pick components, and every story is captured and combined into a Figma component set with one variant per story. Extra themes or viewports become additional variant properties.

Before you start

  • A running Storybook, local or deployed
  • Google Chrome with the Twinfig extension
  • The Twinfig plugin open in Figma

Steps

  1. Open your Storybook

    Run Storybook locally or open a deployed one in Chrome.

  2. Click Twinfig

    The extension reads the story index and lists your components.

  3. Pick components

    Select the components and the themes or viewports you want.

    The Chrome extension on a Storybook at localhost:6006 showing Storybook found: 4 components, 10 stories to component sets. In the Figma plugin, Button (Primary, Secondary, Ghost, Destructive), Input (Default, Error, Disabled) and Card (Default, Media) are selected, with auto layout, design tokens, reference screenshot and mock data turned on, and a Create components button for 9 variants in 3 component sets.
    Storybook to component setsEvery story becomes a variant of one component set.

  4. Paste into Figma

    Each story becomes a variant in a component set; themes and viewports become variant properties.

  5. Tidy properties

    Rename properties and refine variants in Figma as your library needs.

What the component sets contain

One variant per story, combined per component. Capture more than one theme or viewport and those appear as extra variant properties, such as Theme=Light and Theme=Dark.

Tokens come with it

Colors used more than once become variables and type becomes text styles. Capture in both themes and each color becomes one variable with Light and Dark modes.

FAQ

Questions, answered.

Does it work with any framework’s Storybook?

Yes. Twinfig works from the story index and the rendered output, so it is not tied to one framework.

Can I update the library when code changes?

Yes. Recapture a frame in place rather than rebuilding it.

Keep exploring

Start from what’s live.
Finish it in Figma.

Install the Figma plugin Add to Chrome