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
Anima - Vibe Coding for Product Teams
Build websites and apps with AI that understands design.
Promoted

What do you think? ā€¦

Georges Gomes
figma.to.website
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
Bunkr
@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
figma.to.website
Maker
@steve_rst Thanks! It does help quite a lot indeed and indirectly makes developers and designers work closer together.
Georges Gomes
figma.to.website
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
Bunkr
@georges_gomes we definitely should try it at Magma. Good job guys! Another french šŸ‡«šŸ‡· mafia isn't it?
Jonas Ulrich
kickstartDS
Great job on the launch, was already really impressed on the beta! Keep it up! šŸ‘šŸ™Œ
Georges Gomes
figma.to.website
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
figma.to.website
Maker
@binay_singh2 Many thanks for the kind words!
Binay Singh
@georges_gomes all the best :)
Daniel T
@georges_gomes I love the idea :-) Normally a project starts with the design so
Georges Gomes
figma.to.website
Maker
@daniel_tch And it does start at design! But Figma libraries of components are reusable elements that are expensive to maintain. You can have way more variants and true-to-code variants with minimal effort. More time to design magical experiences with these atomic elements.
ThaĆ­s Santos
html.to.design
@georges_gomes @daniel_tch Indeed Daniel, designers (like me) tend to define how components look and behave first, but once it gets coded the end product really only uses the code part... It's such a hassle now a days to keep the designer resources in parity with code... I'm excited this plugin eliminates all the double work...
Romaric PhilogĆØne
Qovery
Wow it's neat! I can't wait to give it a try with my team. Thanks for sharing this @georges_gomes and good job to the whole team!!
gregory quinio
figma.to.website
Maker
@georges_gomes @romaric_philogene Hey! How are you ? Thanks for the kind words for the team. Happy to help if you need anything
Georges Gomes
figma.to.website
Maker
@romaric_philogene I think Qovery absolutely needs this tool šŸ˜˜
Eduardo Ronzano
At last! This is long overdue...thank you so much for this great contribution!
Georges Gomes
figma.to.website
Maker
@eronzano Thanks Eduardo!
ThaĆ­s Santos
html.to.design
@eronzano I knooow, right?! I'm super excited!
Loukas gaming
Amazing product
Georges Gomes
figma.to.website
Maker
@loukas_gaming šŸ™‡ā€ā™‚ļø
123
ā€¢ā€¢ā€¢
Next
Last