An intro to Storybook with Figma and React. In this Storybook tutorial, learn how to make building beautiful UI from Figma to React in an organized and efficient way for your team.

In this React Storybook tutorial, the design and development team from Headway talk about how designers and developers can use Storybook to build bulletproof UI components from Figma faster. Nico and Billy walk through how you can begin to assemble a Storybook design system using components from Figma to React.

In this React Storybook example, they use a simple to-do list app as an example so you can learn how Storybook works between Figma and React.

What is Storybook?
Storybook is an open-source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

https://storybook.js.org/

Here’s the finished todo-list app we built, for those who wanted to compare/wrap up their own: https://glitch.com/~reactjs-todolist

A big thank you to Sergio Márquez for sharing this info below in reference to a question in the presentation in our comments!

More info about the question asked at 18:50: What is “module” the second argument of storiesOf?
https://github.com/storybookjs/storybook/issues/2022

#react #figma #javascript