Intro to Storybook for React with Figma - [React Storybook Tutorial]

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.

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

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/storyb...

________________________

📺 Premium Design Systems in Figma Course (2023 Update)
https://bit.ly/shipwright-design-syst...

➡️ Wisconsin UX is a monthly series for entrepreneurs, designers, and developers that care about creating amazing experiences, solving problems, and fighting for their users.

➡️ React JS is a monthly series for front-end developers that use React and JavaScript to build products. Learn about new tools, better workflows, and discuss ideas with a growing community!

🎟 Upcoming WI-UX events
https://bit.ly/wiux-meetup

🎟 Upcoming React JS events
https://bit.ly/react-js-events


🎥 Recordings from past WI-UX events
https://bit.ly/wiux-recordings

🎥 Recordings from past React JS events
https://bit.ly/react-js-recordings


📚 FREE Resources
🚢 Shipwright UI Kit - A fully editable design system built in Figma
https://bit.ly/shipwright-ui-kit
⬇️ Icon Pack - Get a jump start on your own collection by downloading this pack
https://bit.ly/download-iconpack

Thanks for watching!

#reactjs #ui #storybook