Keep your Figma
libraries true-to-code in a single click.

Generate and sync a full Figma library from Storybook.
Less grunt work, more design time.

1533

Installations

100000

Variants generated so far

Connect Storybook to Figma in 3 steps

100+ components to create in Figma? Thousands of variations to maintain? story.to.design does all the work, generating your UI kit for you.

1 Connect your Storybook

screenshot of the story.to.design plugin showing the field where to paste your Storybook link to connect to it

2 Select components and their options

screenshot of the story.to.design plugin showing the list of the components found in the provided Storybook, with some selected for import

3 Generate components in Figma

screenshot of Figma with the UI kit result from the import

Don’t use Storybook? We also support Backlight.dev and soon custom servers, too!

Keep Figma in sync with Storybook,
no maintenance required

Want to upgrade your hundreds of variants with the latest changes? story.to.design brings all code updates from Storybook into Figma in a click.

Quick updates

Get notified any time the code changes in Storybook and update your Figma designs in one click.

Screenshot of the story.to.design plugin showing an outdated checkbox component

Always aligned

Generate design components that are true-to-code and updated with every code change.

Screenshot of the story.to.design plugin showing synced checkbox component and its variants

Features our users love

Lit, React, Angular, Stencil, HTML, CSS, Svelte and Vue logos

Works with any story framework

HTML/CSS, React, Vue, Angular, Svelte, Stencil, Lit... If you have stories, it works.

screenshot of story.to.design plugin showing a list of synced components

Sync components when stories change

Update and keep components in sync whenever your coded stories change.

hand pointer over a button labelled 'Primary'

Simulate states

Simulate your components’ pseudo-states automatically: hover, tap, active and focus.

screenshot of Figma showing the visual difference between two versions of a checkbox component

Only sync visual updates

Select and edit only the properties that impact components visually, keeping variants in Figma clean.

screenshot showing an icon button component and its searchbox sub component

Import sub-components

story.to.design automatically detects and links sub-components for you. Your UI kit has never been so complete.

screenshot of the properties and variants of a component

Component properties and variants supported

story.to.design supports all component properties and variants.

What people are saying

Testimonials from users around the world.

Aligns design and code

“We want to align design and code and story.to.design looked like the perfect tool for us to use from the ground up.”

Joshua Hailpern

Head of Design at Neo.Tax

Mind-blowing

“I’m blown away... Exactly what I and many on my team have been looking for.”

Quentin Renard

Engineering Director at AREA 17

Single source-of-truth

“My team believes our code is the source-of-truth and that story.to.design can help our design process to realize this.”

Dag Frode Solberg

Senior Developer at Bekk

Interesting workflow

“The workflow is interesting, especially for teams with no designers or when they’re misaligned with development.”

Laís Kantor

Senior Product Designer at Covantis

Powerful

“I didn’t know story.to.design would be that powerful.”

Alfredo Perez

UI Engineer at SailPoint

Impressive

“story.to.design looks impressive to me.”

Marija Silinska

Senior Product Designer at Emergn

Exceeds expectations

“It’s doing even more than I was expecting.”

Amanda Bloomfield

Senior UI Team Lead at SproutLoud

So impressive

“It’s so impressive to see the components coming through, I’m over the moon!”

Brent Schneider

Senior UX Designer at Ad Hoc

Spot-on

“What div<Riots> is doing with story.to.design is really spot-on! The code to design approach is gutsy.”

Magnus Brodén

Design system PM at Arbetsförmedlingen

Pricing

Monthly

Yearly

Team

$99 per month

One licence for the whole team.

1 design system
For everybody on the team
Faster processing
Unlimited components
Legendary support

Try for free

No credit card required

Agency

Tailor-made pricing for your need.

2+ design systems
For everybody on the team
Faster processing
Unlimited components
Legendary support

Get started with story.to.design

Screenshots of a component in Storybook and in Figma