Emma Bostian
Spotify
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.
Preview
CloseLearn 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
Table of Contents
Introduction
Section Duration: 4 minutes
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
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.
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.
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.
Emma explains that the primary purpose of a design system is to function and be useful to the company it was designed by.
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.
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.
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.
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.
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
Section Duration: 29 minutes
Emma reviews the two different types of color mixing, and what primary, secondary, and tertiary colors are. Palettes are also discussed.
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.
Emma discusses the emotional responses colors can incite in a user, and what to avoid when using specific colors.
Emma reviews the definition of the different color code values, and how these values are calculated.
Emma demonstrates how to create an account on Figma, the design tool for the course, and how to create a monochromatic color palette.
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.
Emma defines ascenders, descenders, cap lines, X-heights, tracking, kerning, and leading in the context of typography.
Emma explores the different types of fonts, font measurements, and font accessibility.
Emma gives a brief introduction to typescales, the different kinds of typescales, the unit they are measured in, and how to use them.
Students are instructed to add typography to their Figma project, and copy some of the typescales created by the instructor.
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.
Emma reviews what other areas of design one might want to know about when working on a design system.
Designing Components with Figma
Section Duration: 15 minutes
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.
Students are instructed to create a few buttons, implement some of the color styles chosen in a previous section, and add a text style.
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.
Emma demonstrates how to design a modal, how to add a button to a modal, and how to add illustrations to the modal.
The students are instructed to build a different modal with a different illustration, and a different icon.
Developing Styled Components
Section Duration: 1 hour, 23 minutes
Emma explains how to add CSS to an application, what CSS specificity is, and how this is related to HTML.
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.
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.
Emma explains that although CSS in JS is a controversial practice, it allows developers to scope styling to a single component.
Emma demonstrates how to set up a React application, how to add CSS styling, and how to run the application.
Students are instructed to build a secondary and tertiary button for their application after Emma demonstrates how to build a primary button.
Emma live codes the solution to the button activity exercise.
Emma demonstrates how to create a utility file that contains information about typography, themes, and colors.
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.
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.
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.
Emma live codes the solution to the adding state exercise.
Emma explains what button variations are, how to add modifiers to a theme, and why modifiers are useful.
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.
Emma explains the solution to the button variations exercise.
Emma demonstrates how to create an extensible theme by introducing the React hook useState, and explains how to modify the state and use properties.
Emma live codes a modal wrapper that contains most of the modal's styling.
Emma live codes a modal by creating a basic React component, and adds an icon as a stateless React component.
Animating Components
Section Duration: 18 minutes
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.
Emma demonstrates how to use the useSpring hook and the React spring animation library to build an animated button.
Emma explains when to use the useTransition hook, and live codes an example demonstrating how to implement it.
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
Section Duration: 35 minutes
Emma introduces Storybook, and explains that developers can use it to document code or write a style guide.
Emma explains what addons are and how to use them with a theme in storybook.
Emma demonstrates how to add actions add-ons to be able to use the buttons added to the marked down file.
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.
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.
Emma live codes the solution to the modal documentation exercise.
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.
Emma demonstrates how to customize Storybook so that developers can write documentation that fits into a brand identity.
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.
Wrapping Up
Section Duration: 1 minute
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