Design Systems with React and Storybook

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 increase the stability of your program’s appearance. In this course, you will create a system design from the ground up and learn basic design techniques along with it. You will design your own components using Figma, then turn these designs into coded components using React. Finally, animate them and record them using Storybook and develop your own Storybook program to finally share with your team.

Features of Design Systems with React and Storybook course:

• Getting to know the basics of system design, their importance, problems raised in them, team structure, their construction along with a practical example.
• Getting to know the basics of design, an overview of the use of color, technical vocabulary and semantics of colors and valuing the use of different colors.
• Typography, font selection, writing dimensions along with practical examples and solutions and discussion on other topics in design
• Designing components using Figma, styles and status of buttons as well as making them and finally designing a Modal
• Use of CSS, why it is used along with raising issues related to it and also using it in JS
• How to build an app, add functionality, create a theme, and add general styling
• Discussion of component animation, use of Micro-interactions, useSpring and useTransition
• Register components using Stroybook, add themes, plugins, actions, knobs and develop Stroybook

Course details:

Publisher: FrontendMasters
teacher: Emma Bostian
English language
Training level: introductory to advanced
Number of courses: 59
Duration: 3 hours and 31 minutes

Course topics:

Introduction

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

Pictures

Sample video

Installation guide

After Extract, view with your favorite Player.

English subtitle

Quality: 1080

download link

Download part 1 – 1 GB

Download part 2 – 518 MB

Password file(s): www.downloadly.ir

Size

1.5 GB