story.to.design

Keep your Figma components up to date with code

398 followers

Keep your Figma components up to date with code

398 followers

Visit website

Interface design tools

•

Figma Plugins

•

Design resources

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

Free Options

Launch tags:Design Tools•Developer Tools

Launch Team

Tines The single, secure environment for agents, apps, and automations.

Promoted

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!

Report

4yr ago

Bunkr

@georges_gomes very interesting! What are the differences with Specifyapp.com?

Report

4yr ago

@georges_gomes Looks like a very promising product to better align designers and developers and drastically improve the workflows. Keep up the good work!

Report

4yr ago

figma.to.website

Maker

@steve_rst Thanks! It does help quite a lot indeed and indirectly makes developers and designers work closer together.

Report

4yr ago

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.

Report

4yr ago

Bunkr

@georges_gomes we definitely should try it at Magma. Good job guys! Another french 🇫🇷 mafia isn't it?

Report

4yr ago

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!!

Report

4yr ago

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

Report

4yr ago

figma.to.website

Maker

@romaric_philogene I think Qovery absolutely needs this tool 😘

Report

4yr ago

Legendary idea, can't wait to try it out! This will save boat loads of time and ensure design and development parity!

Report

4yr ago

figma.to.website

Maker

@dan_dudel Thanks for the adjective :) Yes you will be way closer to the dev team; designer and dev will finally speak the same language visually.

Report

4yr ago

html.to.design

@dan_dudel Can you imagine not having to chase after the developed components anymore? Dream come true!

Report

4yr ago

OneCal

@georges_gomes I've been developing design systems for a while and dealt a lot with Figma <-> Storybook. Really like the idea, can't wait to try it in action 💯

Report

4yr ago

figma.to.website

Maker

@eraldo_forgoli Hi Eraldo! Thanks for the kind words! We here for you! Don't hesitate to talk to the team on discord if you need 👉 https://discord.gg/XkQxSU9

Report

4yr ago

OneCal

@georges_gomes thanks, appreciate it 💯

Report

4yr ago

html.to.design

I'm super excited about the possibilities that this plugin gives to me as a designer 🤩 I've spent countless hours trying to match my Figma components to what the developers had and I felt that I was always behind. To think that story.to.design can just hand over all those coded components to me, in a matter of clicks, that's just mind blowing! 🤯🎉 Not only I get the components ready made to be used in my product designs but I also have them always in sync with any code changes. This saves me so much time, I love it!

Report

4yr ago

At last! This is long overdue...thank you so much for this great contribution!

Report

4yr ago

figma.to.website

Maker

@eronzano Thanks Eduardo!

Report

4yr ago

html.to.design

@eronzano I knooow, right?! I'm super excited!

Report

4yr ago

Congratulations on the launch! Such an amazing product 🤩

Report

4yr ago

figma.to.website

Maker

Thanks for the kind words @paulette 🙏

Report

4yr ago

html.to.design

@paulette We think so too! Thanks a lot ❤️

Report

4yr ago

1 2 3

•••

Reviews