Главная страницаКатегория react.jsДизайн-системы с Storybook и React

Дизайн-системы с Storybook и React

Name: Дизайн-системы с Storybook и React
Rating: 4.7 (39 reviews)

Design Systems with Storybook & React

frontendmasters

★4.7 (всего оценок - 39)

Продолжительность

3 ч 31 мин

Категория

React.js

Количество уроков

59 Видео

Дата добавления

14 мар. 2020 г., 19:51

Язык

Английский

Дата выхода

12 мар. 2020 г., 21:46

Дата обновления

29 апр. 2026 г., 06:57

Дизайн-системы сегодня находятся в центре внимания digital‑продуктов: они помогают ускорять разработку, улучшать консистентность интерфейсов и упрощать масштабирование проектов. В этом материале вы узнаете, чему вы научитесь на курсе «Дизайн-системы с Storybook и React», и какие практические навыки сможете применить сразу после обучения.

Что представляет собой дизайн‑система и зачем она нужна

Дизайн‑система — это единая экосистема правил, компонентов и подходов, которая помогает командам создавать интерфейсы быстрее и предсказуемее. На курсе вы разберётесь в ключевых принципах её построения и узнаете, почему крупные компании инвестируют в такие системы.

Понимание ролей: кто участвует в создании дизайн‑системы и как выстроить эффективное взаимодействие.
Преимущества и ограничения: когда дизайн‑система действительно ускоряет процессы, а когда может замедлить команду.

Основы UI‑дизайна для создания дизайн‑системы

Вы освоите фундаментальные знания интерфейсного дизайна, которые необходимы для формирования визуального языка будущей системы.

Теория цвета, типографика и интервалы

Курс научит работать с цветовой палитрой, шрифтами, сетками и отступами — базовыми элементами стабильного Design Kit в Figma.

Сборка дизайн‑комплекта в Figma

Вы создадите свой набор стилей и подготовите основу для дальнейшей разработки UI‑компонентов.

Создание компонентов на React

В практической части вы перейдёте от дизайна к разработке и создадите набор повторно используемых компонентов, опираясь на принципы доступности и масштабируемости.

Работа с styled‑components

Вы научитесь стилизовать компоненты гибко и эффективно, используя современный подход CSS‑in‑JS.

Добавление микро‑взаимодействий через React Spring

Анимации помогают сделать интерфейс живым и отзывчивым. На курсе вы добавите плавные эффекты в созданные компоненты.

Документирование и развитие дизайн‑системы

Чтобы дизайн‑система была полезной команде, её необходимо правильно документировать и поддерживать. В этом вам поможет Storybook.

Документация компонентов в Storybook

Вы узнаете, как структурировать сторис, описывать пропсы и состояния, а также визуализировать варианты использования компонентов.

Инструменты для масштабирования дизайн‑системы

Вы познакомитесь с наборами инструментов и методологий, которые помогут поддерживать дизайн‑систему по мере роста продукта.

Итоги курса

После прохождения курса вы получите целостное понимание того, как создаются современные дизайн‑системы, и сможете применять эти навыки в реальных проектах — от прототипирования до полноценной разработки и документирования компонентов.

Удален по просьбе правообладателя

Урок 1.00:04:16
Introduction
Урок 2.00:03:24
Design Systems & Why They Matter
Урок 3.00:01:08
Drawbacks of Design Systems
Урок 4.00:01:29
Team Structure
Урок 5.00:00:34
Who are Design Systems For?
Урок 6.00:01:53
A Practical Example
Урок 7.00:02:08
The Three Pillars of Design Systems
Урок 8.00:06:58
Building a Design System
Урок 9.00:02:12
Design System Checklist
Урок 10.00:02:46
Common Mistakes
Урок 11.00:03:02
Color Overview
Урок 12.00:03:07
Color Terminology
Урок 13.00:02:46
Color Semantics
Урок 14.00:01:07
Color Values
Урок 15.00:03:21
Creating a Color Palette
Урок 16.00:03:55
Color Palette Practice
Урок 17.00:01:55
Typography
Урок 18.00:02:46
Fonts
Урок 19.00:00:35
Typescale
Урок 20.00:04:14
Typescale Exercise
Урок 21.00:01:56
Typescale Solution
Урок 22.00:00:47
Other Areas of Design
Урок 23.00:03:55
Button States & Styles
Урок 24.00:02:18
Building a Button Exercise
Урок 25.00:01:13
Building a Button Solution
Урок 26.00:07:00
Designing a Modal
Урок 27.00:00:58
Designing a Modal Practice
Урок 28.00:01:37
How We Apply CSS & Specificity
Урок 29.00:01:22
Problems with CSS
Урок 30.00:01:40
CSS Naming Architectures & Preprocessors
Урок 31.00:00:46
CSS in JS
Урок 32.00:10:47
Application Setup
Урок 33.00:03:43
Button Activity Exercise
Урок 34.00:02:16
Button Activity Solution
Урок 35.00:03:17
Adding Utilities
Урок 36.00:05:35
Creating a Theme
Урок 37.00:05:30
Adding Global Styles
Урок 38.00:02:27
Adding State Exercise
Урок 39.00:05:09
Adding State Solution
Урок 40.00:03:41
Button Variations
Урок 41.00:06:43
Button Variations Exercise
Урок 42.00:00:59
Button Variations Solution
Урок 43.00:11:35
Making Extensible Themes
Урок 44.00:06:45
Building a Modal Wrapper
Урок 45.00:09:45
Building a Modal
Урок 46.00:02:46
Micro-interactions
Урок 47.00:04:47
useSpring
Урок 48.00:05:59
useTransition
Урок 49.00:04:55
Animating the Modal
Урок 50.00:04:44
Documenting Components with Storybook
Урок 51.00:13:21
Using Add-ons & Themes
Урок 52.00:01:37
Actions
Урок 53.00:03:49
Knobs
Урок 54.00:00:30
Modal Documentation Exercise
Урок 55.00:00:49
Modal Documentation Solution
Урок 56.00:02:25
Accessibility
Урок 57.00:02:36
Customizing Storybook
Урок 58.00:06:11
Deploying Storybook
Урок 59.00:01:48
Wrapping Up

Автор - frontendmasters

frontendmasters

FrontendMasters — одна из ведущих онлайн-платформ для изучения фронтенд- и веб-разработки. Курсы представлены в формате видеоворкшопов и преподаются практикующими экспертами из крупных технологических компаний. Платформа охватывает широкий спектр современных технологий (JavaScript, React, TypeScript и др.) и делает упор на глубокое понимание и применение знаний на практике.

+795

Комментарии