Design Systems with React & Storybook

3 hours, 31 minutes CC
Design Systems with React & Storybook

Course Description

Design systems increase the speed of development across teams, as well as make your applications look and feel consistent. In this course, you'll create a design system from scratch and learn the foundational design concepts that go into one. You'll design your components using Figma, then take those designs and turn them into coded components using React. Finally, you'll animate those components, document them with Storybook, and deploy your Storybook application so you can share it with your team!

This course and others like it are available as part of our Frontend Masters video subscription.


Course Details

Published: May 12, 2020

Learning Paths

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents


Section Duration: 4 minutes
  • Introduction
    Emma Bostian outlines what will be discussed during this course, namely what design systems are, basic rules in design, the design tool Figma, styled components, and animations. Also discussed is how design systems allows for building modularly.

Foundations of Design Systems

Section Duration: 22 minutes

Foundations of Design

Section Duration: 29 minutes

Designing Components with Figma

Section Duration: 15 minutes

Developing Styled Components

Section Duration: 1 hour, 23 minutes

Animating Components

Section Duration: 18 minutes

Documenting Components with Storybook

Section Duration: 35 minutes

Wrapping Up

Section Duration: 1 minute
  • Wrapping Up
    Emma wraps up the course and shares additional resources, namely information about frontend engineers with knowledge about design systems, conferences about design systems, and existing design systems to learn from.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now