How to Integrate Figma Design Systems with Storybook

When developing UI components, it’s important for the components to be consistent with your team’s design system. Anytime designers change assets in the team’s design system, you want the components to be synced with those changes. With the Storybook addon storybook-addon-designs, Figma design systems or websites can be embedded in Storybook’s addon panel to enhance your design-development workflow.

[davethorn]

Great work . I learned what all this is about and understood it too. Many thanks

[codewithnacho]

This is awesome! Thanks for sharing this!

[TofuTseng]

Hi, thanks for the cool video.
May I ask why we need to integrate Figma to Storybook?
I guess that it's simple to know when Figma design changing, then developers could see the changing immediately.
And the edit logs can record what is changed, then developers take action to edit the code in project.
Just want to confirm the goal and usage. Thank you.

[cdecisco]

I see the color values as #hex, does this also show variables?

[jarek]

isn't the output of this whole operation is the same as what developer get from Figma's 'Dev mode'?

[battleevio]

I am using Storybook v7.6.7 and I followed the step but he showed the error "Please call `__updateTree/1` method with a valid parameter." Can you please help

[lavosbit]

Trying to get this to work with react ts + vite and looks like like the decorators.tsx is missing from .storybook as well as no ../src/styles/ for importaning in GlobalStyles. Not sure how to complete the addon now.

[gmjitendra]

it works with storybook v6.5 but doesn't work with storybook v7? Any help appreciate please.

[ElTebe]

There is a highlight+fade animation while you edit a line in VSCode. I like it. Is it an addon? Which one?

[TahirKhan]

Can someone answer, please?
Why do we need to integrate Figma into Storybook even though we can directly extract fonts, colors, and elements from Figma?