Design Systems with React and Storybook 2020-5

Storybook
Spread the love

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 and record them using Storybook and develop your own Storybook app to 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 types of 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
  • Use of CSS, the reason for its use along with its related problems as well as its use in JS
  • How to build an application, add functional parts, create themes and add general styles
  • Discuss component animation, Micro-interactions, useSpring, and useTransition
  • Register components using Stroybook, add themes, plugins, actions, knobs and develop Stroybook

Course details:

Publisher: FrontendMasters
Instructor: Emma Bostian
Language: English
Level: Advanced to Advanced
Number of Courses: 59
Duration: 3 hours and 31 minutes

Course 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

prerequisites

Installation guide

After Extract, watch with your favorite Player.

English subtitle

Quality: 1080

download link

Download Section 1 – 1 GB
Download Section 2 – 518 MB
file password link
follow on facebook
follow on linkedin
follow on Reddit