Learn how to use Storybook with Figma and React so you can make building beautiful user interfaces an organized and efficient process for you and your team.The design and development team from headway talk about how designers and developers can use Storybook to build bulletproof UI components faster.

Nico and Billy walk through how you can begin to assemble a Storybook design system using components from Figma to use in React.They use a simple to do list app as an example so you can learn how Storybook works between figma and react.

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.

Segments

00:00 - Intro
00:48 - What is Storybook?
03:45 - Figma with Storybook
06:02 - Basic Setup of Storybook with React App
25:14 - Setting Up Figma File for Storybook
33:13 - Referencing Designs from Figma in Storybook
38:45 - Design and Dev Team Communication Tips
42:50 - Live Q&A
56:16 - Storybook Addons and Actions

Resources and tools

Storybook and Figma

Storybook for React

‍