story.to.design is a Figma plugin that transforms and imports coded components into Figma. - Works with any framework - Sync components when stories change - Simulate states - Only sync visual updates - Components properties variants supported
Hi Hunters šø!
Maintaining Figma components aligned with code is a daunting task... Are you spending hours updating your Figma libraries, taking up all your valuable design time?
Struggle no more!
story.to.design generates a Figma library of components from Storybook.
You read correctly: this is code-to-design and not the other way around.
Of course, products always start with design before being coded. But why laboriously maintain tens of thousands of variants in your Figma library when the code can generate and update them in a few seconds?
Benefits:
- Always true-to-code components.
- No maintenance.
- Code and design use the same names for components and properties.
- Find mistakes in code as you inspect the generated result in Figma.
Maintain less, design more!
Here are some of the features available today:
- Works with any framework.
- Auto-layout support.
- Generates simulated states like hover, focus, tap and active.
- Binds hover and focus states to Figma prototypes.
- Updates variants when Storybook is updated.
- Detects sub-components (React and WebComponents only for the moment)
And so much more coming up!
Learn more: https://story.to.design/
or try the plugin yourself: https://www.figma.com/community/...
Enjoy!
@georges_gomes Looks like a very promising product to better align designers and developers and drastically improve the workflows. Keep up the good work!
@edouardpetit Specify is your repository of design tokens and can sync design tokens in code and Figma (aka styles). story-to-design generate and maintain full native Figma variants from code.
figma.to.website
Bunkr
figma.to.website
figma.to.website
Bunkr
kickstartDS
figma.to.website
Scalenut
figma.to.website
Scalenut