Design Systems with React & Storybook
Table of Contents
IntroductionEmma 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
Design Systems & Why They MatterEmma 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 SystemsEmma 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 StructureEmma 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 ExampleEmma 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 SystemsEmma 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 SystemEmma 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 ChecklistEmma 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 MistakesEmma 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 OverviewEmma reviews the two different types of color mixing, and what primary, secondary, and tertiary colors are. Palettes are also discussed.
Color TerminologyEmma 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 SemanticsEmma discusses the emotional responses colors can incite in a user, and what to avoid when using specific colors.
Color ValuesEmma reviews the definition of the different color code values, and how these values are calculated.
Creating a Color PaletteEmma demonstrates how to create an account on Figma, the design tool for the course, and how to create a monochromatic color palette.
Color Palette PracticeEmma 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.
TypographyEmma defines ascenders, descenders, cap lines, X-heights, tracking, kerning, and leading in the context of typography.
FontsEmma explores the different types of fonts, font measurements, and font accessibility.
TypescaleEmma gives a brief introduction to typescales, the different kinds of typescales, the unit they are measured in, and how to use them.
Typescale ExerciseStudents are instructed to add typography to their Figma project, and copy some of the typescales created by the instructor.
Typescale SolutionEmma 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 DesignEmma reviews what other areas of design one might want to know about when working on a design system.
Designing Components with Figma
Button States & StylesEmma 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 ExerciseStudents 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 SolutionEmma 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 ModalEmma 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 PracticeThe students are instructed to build a different modal with a different illustration, and a different icon.
Developing Styled Components
How We Apply CSS & SpecificityEmma explains how to add CSS to an application, what CSS specificity is, and how this is related to HTML.
Problems with CSSEmma 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 & PreprocessorsEmma 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 JSEmma explains that although CSS in JS is a controversial practice, it allows developers to scope styling to a single component.
Application SetupEmma demonstrates how to set up a React application, how to add CSS styling, and how to run the application.
Button Activity ExerciseStudents are instructed to build a secondary and tertiary button for their application after Emma demonstrates how to build a primary button.
Button Activity SolutionEmma live codes the solution to the button activity exercise.
Adding UtilitiesEmma demonstrates how to create a utility file that contains information about typography, themes, and colors.
Creating a ThemeEmma 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 StylesEmma 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 ExerciseStudents 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 SolutionEmma live codes the solution to the adding state exercise.
Button VariationsEmma explains what button variations are, how to add modifiers to a theme, and why modifiers are useful.
Button Variations ExerciseStudents 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 SolutionEmma explains the solution to the button variations exercise.
Making Extensible ThemesEmma 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 WrapperEmma live codes a modal wrapper that contains most of the modal's styling.
Building a ModalEmma live codes a modal by creating a basic React component, and adds an icon as a stateless React component.
Micro-interactionsEmma 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.
useSpringEmma demonstrates how to use the useSpring hook and the React spring animation library to build an animated button.
useTransitionEmma explains when to use the useTransition hook, and live codes an example demonstrating how to implement it.
Animating the ModalEmma 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 StorybookEmma introduces Storybook, and explains that developers can use it to document code or write a style guide.
Using Add-ons & ThemesEmma explains what addons are and how to use them with a theme in storybook.
ActionsEmma demonstrates how to add actions add-ons to be able to use the buttons added to the marked down file.
KnobsEmma 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 ExerciseStudents 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 SolutionEmma live codes the solution to the modal documentation exercise.
AccessibilityEmma 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 StorybookEmma demonstrates how to customize Storybook so that developers can write documentation that fits into a brand identity.
Deploying StorybookEmma 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.