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.
Yann Braga (@yannbf on Twitter) teaches newline's course, "Storybook for React Apps":
www.newline.co...
Download our free "30 DAYS OF REACT" book here to advance your knowledge of React.js and JavaScript:
www.newline.co...

[@c0decisco859]

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

[@davethorn9423]

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

[@user-fl8qm7dz3w]

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.

[@TahirKhan001]

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?

[@boluabiola7981]

You already mentioned some good points. Another point would be that in a Figma file with lots of pages and components, for example in a company like Google, It might be hard to find some components and so having storybook and Figma will be easier Basically, it's for ease of use for the developers

[@battleevio2939]

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

[@HaiTran-vg7bj]

I also have this problem, you haven't solved it yet

[@varies.]

@@HaiTran-vg7bj Change api key permissions :) You're Welcome.

[@jarek3573]

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

[@codewithnacho]

This is awesome! Thanks for sharing this!

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

[@DaveFallows]

I think this guide might be outdated by now. :(

[@gmjitendra]

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

[@theouterspace5285]

in the docs theres "To install v7 beta, use below command instead" try using that it works for me.

[@prashantindurkar1457]

Great Thanks

[@0hfoxyroxy]

wow I am new to this thanks

[@newlinedotco]

You’re welcome 😊

[@yassineel6123]

That's amazing 😍

[@newlinedotco]

Thank you! We are glad you enjoyed this.

[@TahirKhan001]

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?

[@baowarrior4892]

You don’t…

[@ElTebe]

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

[@theouterspace5285]

me too like it. Please share info

[@newlinedotco]

Actually, it's just video highlighting magic.