Design Systems with React & Storybook
Learning Paths:
Topics:
Table of Contents
Introduction
Foundations of Design Systems
Design Systems & Why They Matter
Emma explains that there is no clear definition of a design system, and adds that the definition of a design system might vary if an engineer is asked to define it versus a designer. Design systems matter because they determine if an application is accessible, consistent, responsive, well documented, flexible, and easy to update.
Drawbacks of Design Systems
Emma explains that building a design system is time consuming, and always evolving. Without teamwork to implement and follow the chosen system, the system fails. Teamwork is necessary to consistently follow the design system blueprint.
Team Structure
Emma explains that there are different possible models to follow when forming the core team that builds the design system. The model can be centralized, which gives veto power to the team about any component added to the design system, it can be a distributed model with no centralized core team, or it can be a hybrid model that combines both a centralized and distributed model.
Who are Design Systems For?
Emma explains that the primary purpose of a design system is to function and be useful to the company it was designed by.
A Practical Example
Emma gives the example of buttons, and explains that making decisions about buttons can be harder than one might originally think because of all of the parameters one has to think about when designing a simple button. A design system would simplify the process and provide guidelines for all teams involved.
The Three Pillars of Design Systems
Emma defines the three pillars of design systems, namely, the design language, the component library, and the style guide, and explains why these pillars are essential to design systems.
Building a Design System
Emma gives the different steps to follow in order to build a design system, explains why each step is essential to create a design system, and how to implement them.
Design System Checklist
Emma explains that a design checklist can help define the essential parts of a design system by providing rules and a blueprint a team can follow.
Common Mistakes
Emma reviews the common mistakes made when choosing and developing a design system, and how they can impact a team's workflow, and the product.
Foundations of Design
Color Overview
Emma reviews the two different types of color mixing, and what primary, secondary, and tertiary colors are. Palettes are also discussed.
Color Terminology
Emma explains that, to ensure better communication with designers, it is important for developers to learn some of the commonly used language when it comes to color terminology, and reviews the main terms used.
Color Semantics
Emma discusses the emotional responses colors can incite in a user, and what to avoid when using specific colors.
Color Values
Emma reviews the definition of the different color code values, and how these values are calculated.
Creating a Color Palette
Emma demonstrates how to create an account on Figma, the design tool for the course, and how to create a monochromatic color palette.
Color Palette Practice
Emma demonstrates how to copy palettes from one document to another in Figma, how to create a color palette on Figma, and how to update the colors within the color palette.
Typography
Emma defines ascenders, descenders, cap lines, X-heights, tracking, kerning, and leading in the context of typography.
Fonts
Emma explores the different types of fonts, font measurements, and font accessibility.
Typescale
Emma gives a brief introduction to typescales, the different kinds of typescales, the unit they are measured in, and how to use them.
Typescale Exercise
Students are instructed to add typography to their Figma project, and copy some of the typescales created by the instructor.
Typescale Solution
Emma demonstrates how to add typography and typescales to the project started in the previous section, and answers questions about the use of different fonts within the same project.
Other Areas of Design
Emma reviews what other areas of design one might want to know about when working on a design system.
Designing Components with Figma
Button States & Styles
Emma reviews a few different kinds of buttons and button styles, what types of buttons are accessible, and what type of buttons are used for specific functionalities.
Building a Button Exercise
Students are instructed to create a few buttons, implement some of the color styles chosen in a previous section, and add a text style.
Building a Button Solution
Emma demonstrates how to build a primary and a secondary button. Primary buttons are for the most important actions on a form, secondary buttons are for less importants ones.
Designing a Modal
Emma demonstrates how to design a modal, how to add a button to a modal, and how to add illustrations to the modal.
Designing a Modal Practice
The students are instructed to build a different modal with a different illustration, and a different icon.
Developing Styled Components
How We Apply CSS & Specificity
Emma explains how to add CSS to an application, what CSS specificity is, and how this is related to HTML.
Problems with CSS
Emma reviews the difficulties developers face when using CSS and the main issues they can lead to when working on an application, and mentions that an overall lack of knowledge about CSS can be one of the biggest barriers a team faces.
CSS Naming Architectures & Preprocessors
Emma reviews CSS naming architectures, and explains that these methods are not cure alls, and do not prevent leaked styling. Preprocessors and nesting are also discussed in this section.
CSS in JS
Emma explains that although CSS in JS is a controversial practice, it allows developers to scope styling to a single component.
Application Setup
Emma demonstrates how to set up a React application, how to add CSS styling, and how to run the application.
Button Activity Exercise
Students are instructed to build a secondary and tertiary button for their application after Emma demonstrates how to build a primary button.
Button Activity Solution
Emma live codes the solution to the button activity exercise.
Adding Utilities
Emma demonstrates how to create a utility file that contains information about typography, themes, and colors.
Creating a Theme
Emma creates a theme for the React application with specific typography, colors and typescales, and demonstrates how to replace hard coded values with styled components in a theme.
Adding Global Styles
Emma explains that in some cases developers need to reset or normalize their UI, and therefore need a global style, after demonstrating how to set up a global style.
Adding State Exercise
Students are instructed to add the focused, active and disabled state to the secondary and tertiary buttons after Emma demonstrates how to add states to a button.
Adding State Solution
Emma live codes the solution to the adding state exercise.
Button Variations
Emma explains what button variations are, how to add modifiers to a theme, and why modifiers are useful.
Button Variations Exercise
Students are instructed to add success, failure, and warning buttons using button modifiers, after Emma demonstrates how to add button modifiers to change the style of a button within a theme.
Button Variations Solution
Emma explains the solution to the button variations exercise.
Making Extensible Themes
Emma demonstrates how to create an extensible theme by introducing the React hook useState, and explains how to modify the state and use properties.
Building a Modal Wrapper
Emma live codes a modal wrapper that contains most of the modal's styling.
Building a Modal
Emma live codes a modal by creating a basic React component, and adds an icon as a stateless React component.
Animating Components
Micro-interactions
Emma explains the benefits of micro-interactions in an application, and shares best practices about how to build useful animations. A micro-interaction can give the user information about a task, lead the user to remain longer on a page thanks to perceived performance, state stanges, or forming user habits.
useSpring
Emma demonstrates how to use the useSpring hook and the React spring animation library to build an animated button.
useTransition
Emma explains when to use the useTransition hook, and live codes an example demonstrating how to implement it.
Animating the Modal
Emma demonstrates how to add animations to the modal started in the previous sections by using the react-spring library, and creating animations with the useSpring hook.
Documenting Components with Storybook
Documenting Components with Storybook
Emma introduces Storybook, and explains that developers can use it to document code or write a style guide.
Using Add-ons & Themes
Emma explains what addons are and how to use them with a theme in storybook.
Actions
Emma demonstrates how to add actions add-ons to be able to use the buttons added to the marked down file.
Knobs
Emma demonstrates how to add knobs add-ons to be able to use the buttons added to the marked down file. Knobs allow developers to edit the props of an element. In this segment, the example of disabling a button is given.
Modal Documentation Exercise
Students are instructed to create documentation about the modals built in a previous section using storybook, and to use a knob to toggle the modals' visibility.
Modal Documentation Solution
Emma live codes the solution to the modal documentation exercise.
Accessibility
Emma demonstrates how to add an accessibility add-on, and explains that the add-on allows developers to check if a given application has accessibility violations.
Customizing Storybook
Emma demonstrates how to customize Storybook so that developers can write documentation that fits into a brand identity.
Deploying Storybook
Emma explains that in order for the Storybook documentation to be available online, it needs to be deployed, and demonstrates how to use Storybook and Netlify to publish documentation online.
