Design Systems with Storybook, v2

Steve Kinney

Steve Kinney

Temporal
4 hours, 9 minutes CC
Design Systems with Storybook, v2

Course Description

Build scalable component libraries and design systems with Storybook. Create reusable UI components with composable styles and variants using Tailwind CSS. Use MDX for documentation, set up interaction testing, and add data fetching to create a robust dev environment for your component library.

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

Preview
Close

Course Details

Published: June 5, 2024

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

Introduction

Section Duration: 5 minutes
  • Introduction
    Steve begins the course with a brief tour of the course website and resources. This course will cover everything from basic setup to advanced features like atomic design, accessibility, visual regression testing, responsive design, and dark mode implementation.

Getting Started

Section Duration: 1 hour, 14 minutes

Styling

Section Duration: 1 hour, 3 minutes
  • Adding Tailwind
    Steve demonstrates how to import third-party styles and scripts into the story. Tailwind CSS is imported into an index.css in the project. The CSS file is then imported into the preview Storybook component.
  • Adding Dark Mode Theme
    Steve configures dark theme support for Tailwind CSS. Storybook decorators are introduced and used to add a theme switcher to the preview interface. The theme switcher modifies the configured data attribute to switch themes.
  • Query Params & Overrides
    Steve uses overrides to force dark mode in a story. URL query parameters can also be used to configure the preview for stories. The defaultViewport parameter sets the preview size, making previewing stories on mobile viewport widths easy.
  • Color Naming Convention
    Steve discusses several considerations for deciding on a naming conversion for colors within them. The variables2CSS Figma plugin, which generates color variables for different formats, is demonstrated.
  • Customizing Tailwind Colors & Font
    Steve customizes the colors and fonts in the Tailwind CSS theme. The custom colors overwrite the existing Tailwind colors to prevent colors outside the design system from being used. Since the default monospace font is still needed, the fonts are extended, and only the sans font is overwritten.
  • Real-World Design Systems
    Steve shares examples from a real-world design system highlighting the number of styles and variants used in a button component. The Class Variance Authority package is introduced and compared to CLSX. The primary difference is the ability to add type safety for styles in UI components.
  • Class Variance Authority
    Steve uses the Class Variance Authority library to add type-safety to the variant styles that can be applied to the button component. This abstracts the CSS styles within the button component and centralizes them in a single variant TypeScript file.

Components Documentation & Styling

Section Duration: 39 minutes

Testing and Interactions

Section Duration: 46 minutes

APIs, Context, and External Dependencies

Section Duration: 14 minutes

Wrapping Up

Section Duration: 4 minutes
🎓 Just Completed: Design Systems with Storybook, v2 Course!
Learned some new tricks to improve how I use Storybook in projects.
Juan Terneus

Juan Terneus

Juan Terneus

I loved the course, I recently started documenting components for a project using Storybook and the course was incredibly handy.

When Steve showed how to include a color palette in Storybook, my mind just exploded 🤯
Pako

Pako

pakman198

Just finished "Design Systems with Storybook, v2" by Steve Kinney on Frontend Masters!

This course was a great journey into building scalable and maintainable design systems with Storybook. Excited to apply these new insights to my projects!
Ahmed Alwahed

Ahmed Alwahed

Ahmed Alwahed

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