Figma plugin for Storybook

Integrate design and code to speed up your team

One of the top challenges in frontend is keeping designers in sync with what’s in production. UI implementation and design are expressed in separate places — design tools and code — which naturally diverge over time. This leads to confusion around the source of truth.

I’m stoked to launch Storybook Connect for Figma, a plugin that links Storybook stories to Figma designs. It helps you compare implementation vs design specs to speed up handoff and UI review.

• 🔗 Link stories to component variants
• 🕹 Play with live implementation in Figma
• 📌 Highlight components to reuse
• 📐 Compare story to spec
• 🔐 Setup private projects with access control

Why we’re partnering with Figma

We believe integrations help teams ship UIs with less work. Storybook is an industry standard because it is built to be interoperable. So far, we focused on technical integrations like Testing Library, TypeScript, Webpack, Vite, and more.

Earlier this year, we began researching design integrations. Components are core to both Storybook and many design tools. Our goal was to bring designers closer to the development workflow to improve communication.

Meanwhile, Figma was exploring the same space from a design point of view. So who better to partner with? We worked with folks at Figma to map out the plugin functionality and build the initial proof of concept.

Connect Storybook and Figma

Storybook Connect for Figma links stories to their corresponding variants. That helps teams resolve inconsistencies earlier in the design process and identify reusable components.

Link stories to component variants

Link assets once and they’ll automagically stay up to date with the latest versions of the design or implementation. What’s more, that link propagates to all component instances and across your team so folks don’t have to link components over and over.

Click on the component in Figma then paste the story URL that matches the design.

Open the plugin to reference the live story. Designers can check how a component works before using it in their designs.

Handoff designs to developers

Design handoff is the process of “handing off” specs to developers for implementation. Unfortunately, this is a lossy process, design details get lost in implementation –especially when there’s a tight deadline.

The plugin streamlines handoff by calling out which design components have already been implemented in the Figma sidebar.

During handoff, click “Open story in browser” to jump into the complete Storybook environment with addons, tests, and API docs.

Review UI implementation with designers

UI Review is a process for gathering feedback on UI implementation from designers. It’s used to flush out non-obvious design details, technical hurdles, and sign off that the implementation meets the design spec.

The plugin helps designers check that the rendered UI matches the design via Storybook addons. Use the Measure addon to compare dimensions and spacing of DOM elements vs design specs.

Outline addon visualizes the boundaries of each DOM element for debugging CSS alignment.

Verify whether a component’s color palette is accessible by toggling the Accessibility addon’s visual filters to simulate different forms of colorblindness.

Try the plugin now

Storybook Connect for Figma is powered by Storybook embeds and Chromatic, a publishing tool created by the Storybook team. Follow the instructions below to get setup!

Prerequisites

• Your Storybook project is published on Chromatic
• Figma editor role
• Listed as a collaborator in Chromatic

Link the Storybook URL to Figma components

1. Install the Storybook Connect plugin from the Figma community here
2. Open the plugin. Use the command palette in Figma CMD + / then type Storybook Connect.

3. Select a Figma component to link. The plugin supports linking stories to Figma components, variants, and instances. It does not support linking stories to layers.

4. Paste the URL to the story into the plugin’s form field to link the story to your figma component, variant, or instance.

5. Once linked, the component and its instances will all have links in the sidebar to view the corresponding story.

Open a story in Figma

1. Select the component that you’ve previously linked in Figma.
2. Then navigate to Figma’s Design sidebar tab and click the “View story” action. Alternatively, open the plugin by using the command palette command + / then type the name Storybook Connect.

Learn more

• Install the plugin from Figma community
• Full setup guide in Figma community
• Overview of design integrations for Storybook

What’s next?

Our goal is to unite component-driven tools like Storybook and Figma into one seamless workflow. That starts with establishing a persistent link between design and development components.

With the plugin, you can now view stories in Figma. We hope to make that component link omni-directional, allowing you to embed Figma back into Storybook (via an addon) or any other tool (via an API).

We need your help to dream up new workflows and give feedback. Get insider access to the maintainers by joining us on Discord #figma-plugin.

🙏 Shoutouts: The plugin was developed by Jono Kolnik, Michael Arestad, Gert Hengeveld, Zoltan Olah, and Dominic Nguyen (me!). Much appreciation to early access users kaelig, yngvenilson, michalzadkowski, oogo, pilotconway, rikot, w-a-t-s-o-n, reony, webhode, and hundreds more. Special thanks to Figma’s Emil Sjölander and Emily Brody for supporting our open source community.