Can I import Storybook design system components into Figma?

Yes, one rendered state at a time. Capture public story URLs or prepare complete documents for the important variants. Editable output is a best-effort visual baseline; Figma Components, Variants, Variables, and Auto Layout must be created or applied afterward.

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

Open the isolated Storybook story. Use public URL capture when that story is remotely accessible. For localhost, export a complete HTML document that includes Storybook's global, decorator, and component CSS, plus required assets. Copying the component's outerHTML alone does not include those stylesheets.

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

Yes, when the required CSS is available to html2design. Use a public Storybook URL or export a complete HTML document that includes decorator styles, global stylesheets, and generated CSS-in-JS rules. Editable mode is a best-effort translation and should be compared with the browser.

Storybook to Figma — Import Storybook Components into Figma

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

Use the isolated public story URL when it is remotely accessible. For localhost, export a complete HTML document that includes Storybook's global, decorator, component, and runtime CSS plus required assets. Verify the document in a browser, then load it through manual input.

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

No browser addon is required. html2design runs in Figma. Use a public isolated-story URL for URL capture, or prepare a complete HTML/CSS document from the iframe for manual input.

Storybook to Figma —
Public Story or Complete HTML

Import the isolated story with its complete styles. Use a public Storybook story URL, or export a complete document with global, decorator, component, and runtime CSS. Editable mode creates supported native layers; Pixel mode is available for public URLs.

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 its styles resolved — making it a useful source for measured, best-effort editable Figma imports via the html2design plugin.

A public isolated-story URL is the simplest source because URL capture can load its styles and assets. For localhost, export a complete iframe document with Storybook's global, decorator, component, and runtime CSS. Isolated outerHTML does not include those stylesheets. Fonts, effects, and layout behavior can still require cleanup.

The Storybook to Figma workflow

Four manual steps. 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

Choose a public story or complete document

Use the public isolated-story URL when the Storybook is remotely reachable. For local work, export a complete document from the storybook-preview-iframe with global styles, decorator wrappers, generated CSS, fonts, and images.

Open the exported file independently and verify that it matches the intended Canvas state. If styles disappear outside Storybook, the document is not complete enough for manual input.

Step 03

Import the verified source

In html2design, paste the public story URL and choose Pixel or Editable. For local Storybook, load the verified complete HTML file through manual input. Manual input creates best-effort editable layers.

Tailwind, CSS-in-JS, theme providers, decorators, and design tokens only contribute when their generated CSS is present in or reachable from the source document. Their class names alone are not visual styles.

Step 04

Compare each imported state

Compare text wrapping, fonts, fills, borders, effects, and measured geometry with the Storybook Canvas. Separate conversion differences from intentional component changes before using the frame for review.

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 export

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 capture the public story or export its complete document. The Figma import should reflect 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.

Include Storybook decorators and global styles

Storybook decorators inject wrappers — centering containers, theme providers, CSS reset files, font imports. A public story can load them normally. A manual export must include those wrappers and generated styles. Theme-provider class names without their runtime CSS will produce incomplete output.

What you get in Figma

Pixel mode creates raster tiles. Editable and manual input map supported content to native Figma objects.

Editable text layers

Supported text can become editable Figma text. Missing fonts and differences in browser and Figma text metrics can change wrapping, line height, or spacing.

Resolved design tokens as fills

If your design system uses CSS custom properties or a token library, the browser resolves var(--color-primary) to a rendered color. Supported values can inform Figma fills, but token names do not become Variables automatically.

Accurate spacing and layout

Padding, gap, border-radius, and flex/grid layout are read from computed styles — not source files. Figma spacing is derived from the browser's computed values and should be reviewed after import.

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?

Use a public isolated-story URL, or export a complete HTML document from the Storybook state with all required CSS and assets. Verify the document, then load it through manual input.

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 requires a few manual steps.

Does the html2design plugin work inside the Storybook iframe?

The plugin runs in Figma, not in the browser. Use a public story URL or load a complete HTML/CSS document. You do not need to install an addon in Storybook or the browser.

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

Prefer the isolated-story URL. For localhost, package the storybook-preview-iframe document together with global, decorator, component, and runtime CSS plus required assets.

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

Yes, when the generated rules are included. CSS-in-JS libraries inject styles into the document's <style> tags at runtime. A complete export must retain those style tags and theme wrappers; isolated component markup does not.