cell_tower Broadcast Station
visibility 2.7K views schedule 3 years ago
CULCHR.TV Vintage Exclusive
Vintage Sneakers Streetwear +37

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/AOoXVuvGsEaIjlxAWAlT41/Storybook-to-Figma-w%2Fstory.to.design?node-id=0%3A1 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-learn-design-systems https://status.figma.com/ https://www.learnwithjason.dev/ https://twitter.com/th4is_ds https://story.to.design/ https://www.learnwithjason.dev/build-your-own-design-system https://divriots.typeform.com/storytodesign https://www.learnwithjason.dev/introduction-to-figma-for-developers https://backlight.dev/blog https://backlight.dev/mastery/ Watch future episodes live at https://twitch.tv/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/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012 Artist: http://incompetech.com/ Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Artist: http://audionautix.com/ Additional sound effects obtained from https://www.zapsplat.com

0:00 / 0:00
visibility 2,749 views thumb_up 63 comment 1 schedule 1:25:49 2022 3 years ago
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/AOoXVuvGsEaIjlxAWAlT41/Storybook-to-Figma-w%2Fstory.to.design?node-id=0%3A1 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-learn-design-systems https://status.figma.com/ https://www.learnwithjason.dev/ https://twitter.com/th4is_ds https://story.to.design/ https://www.learnwithjason.dev/build-your-own-design-system https://divriots.typeform.com/storytodesign https://www.learnwithjason.dev/introduction-to-figma-for-developers https://backlight.dev/blog https://backlight.dev/mastery/ Watch future episodes live at https://twitch.tv/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/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1300012 Artist: http://incompetech.com/ Busybody by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Artist: http://audionautix.com/ Additional sound effects obtained from https://www.zapsplat.com