story.to.design

Keep your Figma components up to date with code

399 followers

Keep your Figma components up to date with code

399 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

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!

Report

3yr ago

Edouard PETIT

Bunkr

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

Report

3yr ago

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!

Report

3yr ago

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.

Report

3yr ago

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.

Report

3yr ago

Edouard PETIT

Bunkr

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

Report

3yr ago