How to create pixel-perfect UIs with Storybook & Figma - Varun Vachhar (Config 2023)"

Speaker:
Varun Vachhar - DX Engineer, Chromatic
Converting designs into actual coded UI is like playing a game of telephone. Designer sign-off is critical to catching UI bugs before shipping-but with thousands of possible variants, it becomes overwhelming. Thankfully, there's a better way. Thousands of companies use Storybook to develop components and capture their states as stories. Meanwhile, designers model the exact same states as variants in Figma. Connecting Storybook and Figma lets you speed up design sign-off and ship pixel-perfect UIs with less grunt work. In this talk, Varun will show you how to embed Figma files into Storybook and vice versa so that your code and designs are always available side-by-side.
Please visit config.figma.com/video-on-dem... to view ASL version of this Config 2023 session.
Figma is free to use. Sign up here: bit.ly/3msp0OV
____________________________________________________
Find us on ⬇️
Twitter: / figma
Instagram: / figma
LinkedIn: / figma
Figma forum: forum.figma.com/
____________________________________________________
#Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems #Config2023

[@natanwilliams7957]

Great talk! Helped and greatly inspired both me as a developer as my fellow design colleagues! Great work!

[@Hillelize]

Ok. I linked all the components from Figma to Storybooks. (It's not mapping out perfectly because we don't live in a perfect world, there are countless example where this is not working). Now the QA and dev team is aligned. Then what? That's it? That's just a workflow enhancements? What am I missing?

[@TravisHi_YT]

Yeah pretty much, it's another way to catch the "this is wrong" before it gets to the production server.

[@sebastianmedina5106]

@@TravisHi_YT good answer

[@TravisHi_YT]

Nice presentation, very distracting use of "folks" though, and I wish you emphasised that Chromatic is a paid service, whereas storybook is not.

[@Underhills]

Couldn't get the plugin to work, but what's new with Figma 🤣

[@Ashtonscreative]

They may need to check their storybook for any issues with storybook! ;)

[@alberafzalkhan5]

great video but as unfortunate that would be more great if your focus more on the tech side than making accent

[@miromuller4849]

What about showing the real use case of this product? I tried chromatic, its useless for me as a designer, and its useless for developers as well.

[@blaineschwab7432]

Reeeee