Figma plugin for Storybook

Integrate design and code to speed up your team

loading
Dominic Nguyen
@domyen

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
Integrate Storybook & Figma

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.

Brex, Microsoft, Rabobank, The Washington Post

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.

Link to a story

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

Interact with live implementation

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.

Links to View Story in Figma sidebar
Components with links to stories are called out in the Figma sidebar.

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

Open Storybook in new browser

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.

Measure addon for Storybook

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

Outline addon for Storybook

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

Accessibility addon for Storybook

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

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

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.

Select component in Figma

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

Link to a story window

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

Links to View Story in Figma sidebar

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.
Open story in Figma

Learn more

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.

Join the Storybook mailing list

Get the latest news, updates and releases

5,526 developers and counting

We’re hiring!

Join the team behind Storybook and Chromatic. Build tools that are used in production by 100s of thousands of developers. Remote-first.

View jobs

Popular posts

Storybook Performance: Vite vs Webpack

We benchmarked both builders to see which is faster.
loading
Ian VanSchooten
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify