Upcoming Event

Better UI Workflows with Storybook

Event details

November 12, 2019
6:00 pm
Headway HQ
520 N Broadway Suite 390 · Green Bay, WI

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

Presenters

Billy Sweetman
Head of Design
Nico Glennon
Developer

Reserve your spot

By filling out this form you agree to receive super helpful updates about this event and newsletter updates on future events from Headway.
Past Event

Better UI Workflows with Storybook

November 12, 2019
Watch the recording

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

Presented by
Billy Sweetman
Head of Design
Nico Glennon
Developer

Get updates on future events

The next event is in the works! Sign up to be notified for the next event.