Generate Figma UI kits from code
We've all seen components go from Figma to code, but what about from code to Figma? Thaís Santos will teach us how story.to.design can generate a Figma UI kit directly from your code
0:00:00 - Welcome
0:01:19 - Guest introduction
0:02:44 - Why have design systems seen such rapid growth?
0:08:53 - What is Backlight?
0:23:25 - The growing conversation around design tokens
0:28:06 - What is Story.to.design?
0:46:54 - Working with the assets
1:03:45 - Naming things syncs as well
1:11:46 - Designs drift over time
1:18:28 - Where can people find out more?
Links
demo: https://www.figma.com/file/AOoXVuvGsE...
https://getbootstrap.com/2.0.2/
https://material.io/design
https://jina.design/
https://superfriendly.com/
https://backlight.dev/
https://storybook.js.org/
https://www.learnwithjason.dev/let-s-...
https://status.figma.com/
https://www.learnwithjason.dev/
/ th4is_ds
https://story.to.design/
https://www.learnwithjason.dev/build-...
https://divriots.typeform.com/storyto...
https://www.learnwithjason.dev/introd...
https://backlight.dev/blog
https://backlight.dev/mastery/
Watch future episodes live at / jlengstorf
This episode was sponsored by:
Netlify (https://lwj.dev/netlify)
Nx (https://lwj.dev/nx)
Backlight (https://lwj.dev/backlight)
Live transcription by White Coat Captioning (https://whitecoatcaptioning.com/)
Credits:
Local Elevator by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Source: http://incompetech.com/music/royalty-...
Artist: http://incompetech.com/
Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Artist: http://audionautix.com/
Additional sound effects obtained from https://www.zapsplat.com