How to Integrate Figma Design Systems with Storybook

Подписаться 8 тыс.

Просмотров 25 тыс.

50% 1

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/courses/storyb...
Download our free "30 DAYS OF REACT" book here to advance your knowledge of React.js and JavaScript:
www.newline.co/fullstack-reac...

Наука

Опубликовано:

13 апр 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 20

@codewithnacho 8 месяцев назад

This is awesome! Thanks for sharing this!

@yassineel6123 Год назад

That's amazing 😍

@newlinedotco Год назад

Thank you! We are glad you enjoyed this.

@user-fl8qm7dz3w 6 месяцев назад

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 5 месяцев назад

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 4 месяца назад

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

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

@c0decisco859 Месяц назад

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

@battleevio2939 4 месяца назад

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 5 месяцев назад

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.

@jarek3573 8 месяцев назад

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

@TahirKhan001 5 месяцев назад

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?