Can I import Storybook design system components into Figma?

Yes. Storybook is an ideal source for Figma imports because each story renders a component in a controlled, isolated state. You can capture button variants, form states, card layouts, and entire page compositions. Render the exact story you need, copy the outerHTML from DevTools, and paste into html2design to get editable Figma frames that match your design system exactly.

How do I get the HTML from inside the Storybook canvas iframe?

Open Storybook in Chrome or Firefox. In DevTools, click the source selector icon next to the URL bar — you will see the page document and a nested iframe labeled 'storybook-preview-iframe'. Select that iframe context, then find your component's root element in the Elements panel, right-click, and choose Copy > Copy outerHTML. This gives you the fully rendered HTML with all computed styles.

Will Storybook's CSS addon styles be preserved in Figma?

Yes. The browser resolves all styles — including styles applied by Storybook decorators, global stylesheets, and CSS-in-JS libraries like Emotion or styled-components — before you copy the outerHTML. The html2design plugin reads computed styles, not source files, so whatever the browser renders is what lands in Figma.

Storybook to Figma — Import Storybook Components into Figma

Q: How do I import a Storybook component into Figma?

Run Storybook locally with npm run storybook, navigate to the story you want to capture, then use the Canvas view (not Docs). Open DevTools, find the root element rendered inside the Storybook iframe, right-click it, and choose Copy > Copy outerHTML. Paste that HTML into the html2design Figma plugin. The plugin converts the rendered story — with all CSS already applied — into native Figma layers.

Q: Does the html2design plugin work inside the Storybook iframe?

The html2design Figma plugin runs inside Figma, not in the browser. To import a Storybook component, you copy the rendered HTML from the browser DevTools (inside the Storybook iframe's document) and paste the raw HTML string into the plugin. You do not need to install anything in your browser or in Storybook itself.

Storybook to Figma —
In Two Minutes

Importing Storybook components into Figma means rendering the story in the browser, copying the outerHTML from DevTools, and pasting it into the html2design plugin. Every component variant, state, and design token lands in Figma as native, editable layers — no plugin installation in Storybook, no public URL, no screenshot tools.

What is "Storybook to Figma"?

"Storybook to Figma" refers to the process of taking a component story rendered in Storybook and converting it into a native Figma design. Storybook renders each component in an isolated browser environment with all its styles resolved — making it the ideal source for pixel-accurate Figma imports via the html2design plugin.

The workflow requires no Storybook addons, no Figma tokens plugin, and no public Storybook URL. You run Storybook on localhost, copy the rendered HTML from the browser's DevTools, and paste it into the html2design Figma plugin. The result is a Figma frame that exactly matches the live component — not a screenshot, not a vector trace.

The Storybook to Figma workflow

Four steps, under two minutes. Works with React, Vue, Angular, Svelte, and any Storybook framework.

Step 01

Run Storybook locally

Start your Storybook dev server with npm run storybook or npx storybook dev. Open the Storybook in your browser and navigate to the component story you want to capture.

Use the Canvas tab (not Docs) — the Canvas tab renders the component in an isolated iframe without Storybook's documentation wrapper. This gives you the cleanest HTML to import.

Step 02

Enter the Storybook iframe context

Open DevTools (F12). Storybook renders each story inside an iframe — click the context switcher (the dropdown that shows top) and select storybook-preview-iframe to enter the story's document context.

Alternatively, right-click directly on the rendered component in the Canvas panel and choose Inspect — Chrome will open DevTools already focused inside the iframe on the element you clicked.

Step 03

Copy the rendered outerHTML

In the Elements panel, find the root element of your component. Right-click it and choose Copy > Copy outerHTML. For a full component, select its top-level wrapper. For a page-level story, you can select the <body> or #storybook-root element.

The copied HTML includes all computed CSS — Tailwind utility classes resolved to their final pixel values, CSS-in-JS styles baked in, design tokens expanded. The html2design plugin will read these computed styles and translate them into native Figma fills, strokes, and typography.

Step 04

Paste into html2design and generate

Open Figma, run the HTML to Figma plugin, paste the copied HTML, and click Generate. In seconds, you will have a native Figma frame with editable text layers, fills, borders, and a layer hierarchy that mirrors the component structure.

Repeat for each component variant or state. Import the default state, hover state, disabled state, and error state as separate Figma frames — then hand them to your designer as a complete component spec.

Storybook-specific tips for better Figma output

Storybook's isolated rendering environment makes it ideal for Figma imports. These tips help you get the most from the workflow.

Use the Canvas tab, not Docs

The Docs tab wraps your component in Storybook's documentation layout — headers, description, controls table. Use the Canvas tab to get just the component itself, rendered in the exact same way it will appear in production. This keeps the imported HTML clean and avoids Storybook chrome appearing in your Figma output.

Use Storybook controls to set the exact state before copying

Storybook's Controls addon lets you adjust component props in real time. Set the exact props you want to capture — button label, color variant, disabled state, loading indicator — then copy the outerHTML from DevTools. The component will be rendered with those exact props, so the Figma import reflects the state you configured, not just the default story.

Import multiple story variants as separate Figma frames

Storybook stories are designed to showcase variants — Primary, Secondary, Destructive, Disabled, Loading. Export each story separately as a Figma frame, then group them as a component set in Figma. This gives your design system a complete component with all variants documented and visually accurate.

Storybook decorators and global styles are preserved

Storybook decorators inject wrappers — centering containers, theme providers, CSS reset files, font imports. These are all resolved by the browser before you copy the HTML. If your component uses a theme provider (Emotion ThemeProvider, styled-components ThemeProvider, Chakra UI), the resolved design tokens will be reflected in the computed CSS that the plugin reads.

What you get in Figma

Every import creates native Figma objects — not screenshots, not plugin wrappers.

Editable text layers

Every text node in the Storybook story — button labels, card titles, form field placeholders — becomes a real Figma text layer with the correct font family, size, weight, line height, and color.

Resolved design tokens as fills

If your design system uses CSS custom properties or a token library, the browser resolves var(--color-primary) to its actual hex value. Figma fills reflect your exact token values.

Accurate spacing and layout

Padding, gap, border-radius, and flex/grid layout are read from computed styles — not source files. The spacing values in Figma exactly match what the browser rendered in Storybook.

Mirrored layer hierarchy

HTML element nesting becomes Figma layer nesting. CSS class names become layer names. Your component's internal structure is preserved and navigable in Figma's layer panel.

Frequently asked questions

How do I import a Storybook component into Figma?

Run Storybook locally, open the story in Canvas view, enter the iframe context in DevTools, copy the component's outerHTML, and paste it into the html2design Figma plugin. No addons or integrations needed.

Can I import my entire design system from Storybook to Figma?

Yes, but it is done story by story — there is no batch export. The best approach is to export the most commonly referenced components first (buttons, inputs, cards, modals) and build up the Figma component library incrementally. Each export takes under two minutes.

Does the html2design plugin work inside the Storybook iframe?

The plugin runs in Figma, not in the browser. You copy the rendered HTML from DevTools and paste the raw HTML string into the plugin. You do not need to install anything in Storybook or the browser.

How do I get the HTML from inside the Storybook iframe?

In Chrome DevTools, click the context switcher dropdown (shows "top") and select storybook-preview-iframe. Then find the component element in the Elements panel, right-click, and choose Copy > Copy outerHTML.

Will CSS-in-JS styles from styled-components or Emotion be preserved?

Yes. CSS-in-JS libraries inject styles into the document's <style> tags at runtime. The browser resolves these to computed values before you copy the HTML. All generated class names and their styles are already baked into the computed CSS that html2design reads.