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

[@vs5198]

How using a Storybook vs. Figma dev mode is different for developers?

[@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

[@alberafzalkhan5]

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

[@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! ;)

[@susa5045]

Figma feels more like a casting agency for new-age tech enthusiasts than a tool designed for real professionals. It lacks the depth and functionality required to address the challenges faced by seasoned experts in the industry. Even its core feature-creating clickable prototypes-falls short of basic expectations, offering an insufficient and frustrating experience. Where do they find these “stage actors” who claim to understand professional workflows but seem entirely disconnected from real-world needs?

[@mirabletest]

People that don't drink before presentations so you hear the mouth clicking ughh

[@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.

[@baowarrior4892]

This doesnt improve adoption at all

[@blaineschwab7432]

Reeeee