story.to.design

story.to.design

Keep your Figma components up to date with code

399 followers

Visit website
ā€¢
ā€¢
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
story.to.design gallery image
story.to.design gallery image
story.to.design gallery image
story.to.design gallery image
Free Options
Launch tags:
Design Toolsā€¢Developer Tools
Launch Team

What do you think? ā€¦

Georges Gomes
Maker
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!
Edouard PETIT
@georges_gomes very interesting! What are the differences with Specifyapp.com?
Steve Rst
@georges_gomes Looks like a very promising product to better align designers and developers and drastically improve the workflows. Keep up the good work!
Georges Gomes
Maker
@steve_rst Thanks! It does help quite a lot indeed and indirectly makes developers and designers work closer together.
Georges Gomes
Maker
@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.
Edouard PETIT
@georges_gomes we definitely should try it at Magma. Good job guys! Another french šŸ‡«šŸ‡· mafia isn't it?
Jonas Ulrich
Great job on the launch, was already really impressed on the beta! Keep it up! šŸ‘šŸ™Œ
Georges Gomes
Maker
@tsnmp Thanks Jonas! This new version is so much more polished āœØ Talk to you soon!
Binay Singh
Nice one guys!! Congratulations on the launch!!
Georges Gomes
Maker
@binay_singh2 Many thanks for the kind words!
Binay Singh
@georges_gomes all the best :)