FrontendMasters – Design Systems with React and Storybook 2020-5

Description

Design Systems with React and Storybook, a training course published by FrontendMasters, is for system design training. System design can improve the speed of development among your team and at the same time increase the stability of the appearance of your program. In this course, you will build a system design from scratch and learn basic design techniques alongside it. You will design the components yourself using Figma, then convert these designs into coded components using React. Finally, animate them and record them using Storybook and develop your own Storybook app to eventually share with your team.

Features of Design Systems with React and Storybook

Familiarity with the basis of system design, their importance, problems in them, team structure, their construction with a practical example

Familiarity with the basis of design, overview of the use of color, technical vocabulary and semantics of colors and evaluation of the use of different colors

Typography, font selection, text dimensions with practical examples and solutions, and discussion of other design topics

Design components using Figma, styles and buttons status as well as build them and finally design a Modal

The use of CSS, the reason for its use, along with the problems associated with it, as well as its use in JS

How to build an application, add functional parts, create themes and add general styles

Discuss component animation, use of Micro-interactions, useSpring and useTransition

Register components using Stroybook, add themes, plugins, actions, knobs and develop Stroybook

Course information

Publisher: FrontendMasters Instructor: Emma Bostian English language Level of training: basic to advanced Number of courses: 59 Duration: 3 hours and 31 minutes

Topics

Introduction

Introduction 00:00:00 – 00:04:22 Foundations of Design Systems

Design Systems & Why They Matter 00:04:23 – 00:07:46

Drawbacks of Design Systems 00:07:47 – 00:08:54

Team Structure 00:08:55 – 00:10:23

Who are Design Systems For? 00:10:24 – 00:10:57

A Practical Example 00:10:58 – 00:12:50

The Three Pillars of Design Systems 00:12:51 – 00:14:58

Building a Design System 00:14:59 – 00:21:56

Design System Checklist 00:21:57 – 00:24:08

Common Mistakes 00:24:09 – 00:26:54

Foundations of Design

Color Overview 00:26:55 – 00:29:56

Color Terminology 00:29:57 – 00:33:03

Color Semantics 00:33:04 – 00:35:49

Color Values 00:35:50 – 00:36:56

Creating a Color Palette 00:36:57 – 00:40:17

Color Palette Practice 00:40:18 – 00:44:12

Typography 00:44:13 – 00:46:07

Fonts 00:46:08 – 00:48:53

Typescale 00:48:54 – 00:49:28

Typescale Exercise 00:49:29 – 00:53:42

Typescale Solution 00:53:43 – 00:55:38

Other Areas of Design 00:55:39 – 00:56:25

Designing Components with Figma

Button States & Styles 00:56:26 – 01:00:20

Building a Button Exercise 01:00:21 – 01:02:38

Building a Button Solution 01:02:39 – 01:03:51

Designing a Modal 01:03:52 – 01:10:51

Designing a Modal Practice 01:10:52 – 01:11:49

Developing Styled Components

How We Apply CSS & Specificity 01:11:50 – 01:13:26

Problems with CSS 01:13:27 – 01:14:48

CSS Naming Architectures & Preprocessors 01:14:49 – 01:16:28

CSS in JS 01:16:29 – 01:17:14

Application Setup 01:17:15 – 01:28:01

Button Activity Exercise 01:28:02 – 01:31:44

Button Activity Solution 01:31:45 – 01:34:00

Adding Utilities 01:34:01 – 01:37:17

Creating a Theme 01:37:18 – 01:42:52

Adding Global Styles 01:42:53 – 01:48:22

Adding State Exercise 01:48:23 – 01:50:49

Adding State Solution 01:50:50 – 01:55:58

Button Variations 01:55:59 – 01:59:39

Button Variations Exercise 01:59:40 – 02:06:22

Button Variations Solution 02:06:23 – 02:07:21

Making Extensible Themes 02:07:22 – 02:18:56

Building a Modal Wrapper 02:18:57 – 02:25:41

Building a Modal 02:25:42 – 02:35:26

Animating Components

Micro-interactions 02:35:27 – 02:38:12

UseSpring 02:38:13 – 02:42:59

UseTransition 02:43:00 – 02:48:58

Animating the Modal 02:48:59 – 02:53:53

Documenting Components with Storybook

Documenting Components with Storybook 02:53:54 – 02:58:37

Using Add-ons & Themes 02:58:38 – 03:11:58

Actions 03:11:59 – 03:13:35

Knobs 03:13:36 – 03:17:24

Modal Documentation Exercise 03:17:25 – 03:17:54

Modal Documentation Solution 03:17:55 – 03:18:43

Accessibility 03:18:44 – 03:21:08

Customizing Storybook 03:21:09 – 03:23:44

Deploying Storybook 03:23:45 – 03:29:55

Wrapping Up

Wrapping Up 03:29:56 – 03:31:43

Installation

After Extract, watch with your favorite Player.

English subtitle

Quality: 1080