How to import and use your design system components in Figma
Every team building a product design system runs into the same wall: code and Figma don’t stay in sync. Developers build and maintain components in code — with props, variants, and states defined in a component library. Designers work from a Figma library that’s supposed to mirror it. In practice, the two drift apart constantly, and keeping them aligned is manual, slow, and never quite finished.
story.to.design solves the root problem. It reads your component source of truth directly — your Storybook or Histoire stories — and generates native Figma components with every variant, state, and nested component intact. This guide covers exactly how.
Quick Guide: Import design system components into Figma in 5 steps
- Run story.to.design Figma plugin
- Paste your Storybook (or Histoire) URL and click Connect.
- Click Import new component, select a component and its story, configure variants, then click Import.
- Click Add to canvas to place the generated component and its full variant set onto your Figma canvas.
- As your design system gets updated, update your components
That’s the full loop. The sections below explain each step in detail, including how to set up automatic sync when your code changes.
Step-by-step: How to import design system components into Figma
What is story.to.design?
story.to.design is a Figma plugin that generates and maintains a full Figma UI library directly from your component library’s stories. It reads Storybook args — the properties that control a component’s variants and states — and uses them to build real Figma components with the correct variant structure. The result is a Figma component library that mirrors your production code, not a visual snapshot of it.
Step 1: Install the story.to.design Figma plugin
Go to the story.to.design plugin page in Figma Community and click Open in Figma. Alternatively, search for “story.to.design” directly in the Figma plugin panel from any canvas.
Open the plugin inside the Figma file and page where you want to build your design system component library.
Step 2: Connect your Storybook
Open your Storybook instance (local or hosted) and copy its URL. In the story.to.design plugin panel, paste the URL into the connection field and click Connect.
The plugin supports Storybook and Histoire. It works with components written in React, Vue, Angular, Svelte, Stencil, Lit, and plain HTML/CSS — any framework that supports stories.
Step 3: Select a component to import
Click Import new component. The plugin lists the components and stories available in your connected Storybook. Select the component you want to import — for example, a Button component — and choose which story to use as the base for the import.
This is where story.to.design reads the Storybook args: the argTypes and args defined in your story determine which variants the plugin generates in Figma.
Step 4. Configure variants
Before importing, choose which properties to include as Figma variants. The plugin surfaces pre-made properties from your story’s argTypes (such as disabled, size, type) and lets you select them from a list or add custom ones manually.
This step directly controls the variant matrix that appears in Figma. Selecting three boolean or select properties with four values each generates the corresponding grid of component variants automatically — no manual duplication required.
Step 5. Import and add to canvas
Click Import to start the generation process. Once story.to.design finishes processing the component and its variants, it appears in the plugin’s main component list with a (Synced) status, confirming it is mapped directly to the coded component in Storybook.
Click Add to canvas to place the component and its full variant set onto the Figma canvas. You can also drag and drop the component thumbnail directly from the plugin panel. If you have multiple components ready, click Add all to place the entire library at once.
Bonus: Keep it synced
As your design system gets updated, story.to.design plugin will let you know which components are outdated. Simply hit “update all” to update them automatically, or click “review and update” to review them one by one.
What gets imported: Layers, variants, and sync
Component structure in Figma
Each imported component arrives as a native Figma component with a proper variant structure. The plugin generates all variant combinations from the selected story’s args, which means a component with three properties selected — type (primary/secondary), size (small/medium/large), and disabled (true/false) — produces a complete variant set without manual work.
Nested components are also supported: if your Button uses an Icon component internally, story.to.design can import both and link them as nested Figma components. See the nested components documentation for setup details.
Keeping components in sync
This is where story.to.design goes beyond a one-time import. When a developer updates a component in Storybook — changing a prop, adding a variant, or updating visual styles — the plugin detects the change and notifies you inside Figma. A single click updates the corresponding Figma components to match the new code, without rebuilding anything manually.
This sync capability is what keeps design system components in Figma true-to-code over time, not just at the moment of first import. Learn more about bringing in Storybook updates in the official documentation.
Multi-theme and responsive support
story.to.design supports Storybook globals, which means you can import multiple brand themes as separate variants or into separate Figma files. The plugin also captures components at different viewport sizes, with configurable breakpoints — useful for design systems that define responsive behavior at the component level.
Why import design system components into Figma this way
Components arrive as real Figma components, not frames. The output of story.to.design is a native Figma component with defined variant properties — not a captured frame that has to be manually converted. Every component is immediately usable in the design library.
Variant maintenance is eliminated. A large design system can have hundreds of variants for a single component. story.to.design generates all of them automatically from argTypes and updates them when the code changes, removing the need for manual upkeep.
Designers and developers share one source of truth. When both sides reference the same component definitions, handoff gaps shrink. Designers use components that map directly to what developers will ship, and developers receive designs built with production-ready components.
Framework-agnostic by design. The plugin works with any framework that has Storybook support — React, Vue, Angular, Svelte, Stencil, Lit, and more. If your team has stories, story.to.design works.
One-click updates on code changes. When the codebase changes, the plugin flags which components are out of date. Updating takes a single click, not a manual redesign session.
Use cases: When to import design system components into Figma
- Initial design system setup: A product team building a design system from scratch uses story.to.design to generate the entire Figma component library from the first coded components, avoiding parallel maintenance from day one.
- Migration from a legacy Figma library: A team with an existing Figma UI kit that has drifted from production imports their Storybook to replace outdated components with accurate, code-generated versions.
- Multi-brand product: A company managing multiple brand themes uses Storybook globals to import each theme as a separate variant set or into dedicated Figma files, keeping all brands synchronized in one workflow.
- Rapid prototyping with real components: Designers build prototypes using components that are identical to production — not approximations — so stakeholder reviews reflect what will actually ship.
- Design system documentation: Teams use the imported Figma library as living documentation: components in Figma are always up to date because they sync directly from Storybook whenever code changes.
Conclusion
If you’re looking for a way to build and maintain the component library your entire design team works from every day, story.to.design handles it for you. It imports design system components into Figma as-is — native components, correct variant matrices, nested component links, live sync with Storybook.
If your team maintains a component library in Storybook or Histoire, install story.to.design and connect it to your Figma file. Your first import takes under five minutes.
For more guides on importing different file types and assets into Figma, explore the full anything.to.design plugin ecosystem — covering over 30 file formats, from PDFs and images to PSD files and Office documents.
FAQ
Q: Does Figma support importing components from Storybook natively? Figma does not natively import or generate components from a Storybook instance or code repository. story.to.design is the dedicated plugin for this workflow, connecting your stories directly to a Figma component library.
Q: Which frameworks does story.to.design support? The plugin works with any project that uses Storybook stories, regardless of framework. Supported frameworks include React, Vue, Angular, Svelte, Stencil, Lit, and plain HTML/CSS. It also supports Histoire as an alternative to Storybook.
Q: What happens to my Figma components when the code changes in Storybook? story.to.design detects changes in your connected Storybook and notifies you inside the Figma plugin. Clicking update fetches the new component definitions and applies them to the existing Figma components, preserving the sync between design and code. See the updates documentation for details.
👋 Hi there!
We built the Figma plugin that keeps your Figma library true-to-code.
story.to.design imports components from Storybook to Figma in seconds.
Try it for free