Лекция 2. Компоненты и дизайн-системы

Введение

В первой лекции мы познакомились с интерфейсом Figma, фреймами, сеткой и базовыми принципами мобильного UI. В этой лекции мы перейдём от «рисования отдельных экранов» к системному подходу — научимся строить интерфейс из переиспользуемых блоков и описывать его языком дизайн-системы.

Главная идея проста: профессиональный дизайнер не рисует каждую кнопку заново. Он один раз создаёт компонент, описывает правила (токены), а затем собирает экраны как из конструктора. Это ускоряет работу, гарантирует одинаковый вид во всём продукте и упрощает передачу макетов разработчикам.

К концу лекции вы будете понимать, что такое дизайн-система, из чего она состоит, и как собрать её с нуля. Практическим закреплением станет работа №2 — компоненты Button, Input, Product Card и экран «Каталог».

1. Дизайн-система: что это и из чего состоит

1.1. Определение

Дизайн-система (Design System) — это набор стандартизированных компонентов, правил и принципов, которые обеспечивают консистентность (единообразие) и масштабируемость дизайна продукта.

Дизайн-систему можно сравнить с конструктором LEGO: есть набор деталей с заранее определёнными размерами и способами соединения, и из них можно собрать сколько угодно разных моделей, не выходя за рамки единого стиля.

1.2. Из чего состоит дизайн-система

Любая дизайн-система собирается из четырёх крупных блоков:

Дизайн-токены (Design Tokens) — атомарные значения:
- цвета (Primary, Secondary, Neutral, Semantic);
- типографика (размеры, веса, межстрочные интервалы);
- отступы (Spacing scale);
- радиусы скругления (Border radius);
- тени (Elevation levels).
Базовые компоненты (Base Components) — простые элементы:
- Button (кнопки), Input (поля ввода), Card (карточки), Navigation (навигация), Feedback (Toast, Modal, Tooltip).
Композитные компоненты (Composite Components) — сложные блоки из базовых:
- Header (шапка), Product Grid (сетка товаров), User Profile, Search Results.
Документация — правила использования, примеры применения, гайдлайны (что можно и чего нельзя).

1.3. Зачем это нужно

Преимущество	Что даёт на практике
Консистентность	Кнопки и тексты выглядят одинаково на всех экранах
Скорость	Не нужно перерисовывать элементы заново
Поддержка	Изменение в одном месте применяется ко всему продукту
Масштабируемость	Легко добавлять новые экраны и функции
Командная работа	Единый источник истины для дизайнеров и разработчиков

2. Дизайн-токены (Design Tokens)

2.1. Понятие

Дизайн-токены — это атомарные (наименьшие, неделимые) значения дизайна, которые определяют визуальные свойства элементов интерфейса. Это «единицы измерения» дизайн-системы.

Вместо того чтобы в макете писать «здесь синий #2196F3», мы заводим токен Primary/500 и ссылаемся на него. Если бренд решит сменить синий на бирюзовый — мы меняем значение одного токена, и все элементы обновляются автоматически.

2.2. Типы токенов с примерами

Цветовые токены:
- Primary/500: #2196F3
- Neutral/900: #212121
- Error/500: #F44336
Типографические токены:
- Heading/H1: 32px, Bold, Line Height 40px
- Body/Large: 16px, Regular, Line Height 24px
Spacing-токены:
- Spacing/4: 4px, Spacing/8: 8px, Spacing/16: 16px, Spacing/24: 24px
Border Radius токены:
- Radius/Small: 4px, Radius/Medium: 8px, Radius/Large: 12px
Elevation-токены:
- Elevation/1: 0px 1px 3px rgba(0,0,0,0.12)
- Elevation/2: 0px 2px 6px rgba(0,0,0,0.15)

В Figma токены реализуются через Styles (Color Styles, Text Styles, Effect Styles) и Variables (переменные).

2.3. Передача токенов разработчикам

Токены ценны тем, что легко превращаются в код. Это «мост» между дизайнером и программистом.

JSON-формат (универсальный, читается любыми инструментами):

{
  "colors": {
    "primary": {
      "500": "#2196F3",
      "700": "#1976D2"
    }
  },
  "spacing": {
    "4": "4px",
    "8": "8px",
    "16": "16px"
  }
}

CSS-переменные (для веб-разработки):

:root {
  --color-primary-500: #2196F3;
  --spacing-8: 8px;
}

Процесс передачи обычно состоит из трёх шагов:

Экспорт из Figma — плагином (Figma Tokens), вручную или через Figma API.
Преобразование — конвертация в нужный формат (например, через Style Dictionary).
Интеграция — импорт в код проекта и использование при разработке.

Что это даёт разработке: единый источник истины, автоматизацию (генерация кода), типобезопасность (автодополнение в IDE), лёгкую поддержку тем (light/dark mode).

3. Цвета в дизайн-системе

3.1. Типы цветов

В дизайн-систему включают четыре типа цветов, каждый со своим назначением:

Тип	Назначение	Где применяется
Primary	Основной цвет бренда, главные действия	Главные кнопки, ссылки, активные элементы
Secondary	Дополнительный цвет для разнообразия	Вторичные кнопки, дополнительные акценты
Neutral	Фоны, текст, границы, разделители	Фоны экранов, текст, обводки
Semantic	Передача состояния/смысла	Успех, ошибка, предупреждение, информация

3.2. Шкала оттенков (50–900)

Каждый цвет обычно представлен не одним значением, а шкалой оттенков:

50 — самый светлый (для фонов, hover-состояний);
500 — основной оттенок (главное значение цвета);
900 — самый тёмный (для текста, насыщенных акцентов).

Меньшие числа — светлее, большие — темнее. Например: Primary/50, Primary/100, Primary/500, Primary/700, Primary/900.

3.3. Семантические цвета (Semantic Colors)

Семантические цвета — это цвета, которые несут смысл и сообщают пользователю о состоянии или типе сообщения.

Цвет	Значение	Пример hex	Где используется
Success	Успех	#4CAF50	Подтверждения, статусы «Доступно», галочки
Warning	Предупреждение	#FF9800	Важная информация, требующая внимания
Error	Ошибка	#F44336, #FF3B30	Валидация полей, кнопки удаления, критические сообщения
Info	Информация	#2196F3	Подсказки, тултипы, нейтральные уведомления

Принципы использования семантических цветов:

Консистентность — одинаковые цвета для одинаковых состояний во всём продукте.
Доступность — достаточный контраст для читаемости.
Ясность — цвет должен дополнять текст, а не заменять его (нельзя полагаться только на цвет — часть пользователей не различает оттенки).

4. Типографическая шкала

Типографическая шкала — это система размеров, весов и межстрочных интервалов (line height), которая обеспечивает визуальную иерархию и единообразие текста.

4.1. Структура шкалы

Стиль	Размер	Вес	Line Height	Назначение
Heading/H1	32px	Bold	40px	Главный заголовок страницы
Heading/H2	24px	SemiBold	32px	Заголовки разделов
Heading/H3	20px	SemiBold	28px	Подзаголовки
Heading/H4	18px	Medium	24px	Мелкие заголовки
Body/Large	16px	Regular	24px	Основной текст, параграфы
Body/Medium	14px	Regular	20px	Вторичный текст
Body/Small	12px	Regular	16px	Мелкий текст
Button/Large	16px	Medium	20px	Текст крупных кнопок
Button/Medium	14px	Medium	18px	Текст средних кнопок
Caption	12px	Regular	16px	Подписи, метки, цены

4.2. Принципы типографики

Иерархия — чёткое визуальное различие между уровнями текста.
Читаемость — для мобильных устройств минимум 16px для основного текста.
Line Height — обычно 1.2–1.5× от размера шрифта (например, 16px текст → 24px интервал).
Консистентность — одинаковые типы текста имеют одинаковые стили.
Масштабируемость — шкалу легко расширять новыми размерами.

Пример применения: H1 — заголовок «Добро пожаловать»; H2 — «Популярные товары»; Body/Large — описание товара; Caption — цена и метки.

5. Elevation (уровни поднятия) и тени

Elevation — это система теней, создающая ощущение глубины и иерархии. Она имитирует физическое «поднятие» элемента над поверхностью: чем выше элемент, тем больше его тень.

5.1. Уровни Elevation

Уровень	Тень (CSS)	Где используется
Elevation/1	0px 1px 3px rgba(0,0,0,0.12)	Карточки, кнопки, мелкие элементы
Elevation/2	0px 2px 6px rgba(0,0,0,0.15)	Выпадающие меню, тултипы, нав-меню
Elevation/3	0px 4px 12px rgba(0,0,0,0.18)	Модальные окна, диалоги
Elevation/4	0px 8px 24px rgba(0,0,0,0.20)	Полноэкранные модалки, важные уведомления

5.2. Принципы использования

Иерархия — более важные элементы имеют большую тень.
Интерактивность — элементы с тенью воспринимаются как «нажимаемые».
Группировка — элементы с одинаковой тенью читаются как одна группа.
Фокус — активные элементы могут получать увеличенную тень (например, кнопка на hover поднимается с Elevation/1 до Elevation/2).
Консистентность — одинаковые типы элементов используют одинаковый уровень.

В Figma тени задаются через Effect Styles (тип эффекта — Drop Shadow), что позволяет применять их как токены.

6. Базовые и композитные компоненты

6.1. Базовые компоненты (Base)

Базовые компоненты — простые, неделимые (атомарные) элементы, которые служат строительными блоками. Их нельзя разбить на более мелкие осмысленные части.

Простые и атомарные;
универсальные, не привязаны к конкретному экрану;
легко настраиваются;
основа для сложных компонентов.
Примеры: Button, Input, Icon, Badge, Avatar.

6.2. Композитные компоненты (Composite)

Композитные компоненты — сложные блоки, собранные из нескольких базовых, которые решают конкретную задачу интерфейса.

Состоят из базовых компонентов;
решают конкретные задачи;
более сложная структура;
специфичны для контекста.
Примеры: Header, ProductCard, SearchBar, UserProfile.

6.3. Сравнение

Базовые компоненты	Композитные компоненты
Простые элементы	Сложные структуры
Универсальные	Контекстно-специфичные
Атомарные	Составные
Button, Input, Icon	Header, ProductCard
Основа дизайн-системы	Решение конкретных задач

Пример иерархии: SearchBar = Input + Icon + Button, а Header = Logo + Navigation + SearchBar + UserMenu. Это похоже на принцип «атомарного дизайна»: атомы → молекулы → организмы.

7. Переиспользуемые компоненты

Переиспользуемый компонент — это элемент, созданный один раз (мастер-компонент) и применяемый многократно через экземпляры (instances).

7.1. Как это работает в Figma

Мастер-компонент создаётся один раз (горячая клавиша ⌘/Ctrl + Alt + K).
В макетах используются экземпляры — копии, связанные с мастером.
Изменение мастера автоматически применяется ко всем экземплярам.
Экземпляры можно настраивать через свойства компонента (текст, иконка, цвет) и варианты (variants).

7.2. Почему это важно

Консистентность — единый вид и предсказуемое поведение во всём продукте.
Экономия времени — не нужно создавать элементы заново.
Лёгкость обновлений — правка в одном месте влияет на все экземпляры.
Масштабируемость — легко добавлять новые экземпляры и расти.
Командная работа — единый источник истины, простая передача разработчикам.
Качество — проверенные компоненты, соответствие стандартам доступности.

Ключевое правило практики №2: компоненты должны действительно переиспользоваться как инстансы, а не копироваться как «сырые» фреймы.

8. Компонент кнопки с вариантами (Primary / Secondary / Ghost)

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

Шаг 1. Базовая кнопка.

Прямоугольник с горизонтальным автолэйаутом;
Padding: 12px 16px (Medium) или 16px 24px (Large);
Border Radius: 8px;
Текст «Button», стиль Button/Medium.

Шаг 2. Вариант Primary (главное действие):

Background: Primary/500 (#2196F3);
Text: White;
Shadow: Elevation/1.

Шаг 3. Вариант Secondary (альтернативное действие):

Background: Transparent;
Border: 1px Primary/500;
Text: Primary/500;
тень убрать.

Шаг 4. Вариант Ghost (наименее заметное действие):

Background: Transparent;
Border: нет;
Text: Primary/500.

Шаг 5. Объединение в компонент с вариантами:

выделить три кнопки → Create Component;
в панели Properties добавить свойство Variant со значениями Primary, Secondary, Ghost.

Шаг 6. Дополнительные свойства (опционально): Size (Small/Medium/Large), State (Default/Hover/Pressed/Disabled), Icon (с иконкой/без).

Шаг 7. Состояния:

Hover — лёгкое изменение цвета или тени;
Pressed — Scale 0.98, уменьшение тени;
Disabled — Opacity 0.5, отключение интерактивности.

Результат: один компонент, у которого вариант выбирается через панель свойств; все варианты связаны и обновляются вместе.

9. Состояния компонента Input

Поле ввода должно отражать своё текущее состояние — это важно для понятности и доступности.

Состояние	Border	Background	Текст	Визуально
Default	1px Neutral/300 (#E9ECEF)	Neutral/50 (#F8F9FA)	Neutral/900	Нейтральный, готов к вводу
Focus	2px Primary/500 (#2196F3)	White	Neutral/900	Синяя рамка + подсветка outline
Error	2px Error/500 (#F44336)	White	Error/500	Красная рамка, текст ошибки под полем
Disabled	1px Neutral/300	Neutral/100 (#F5F5F5)	Neutral/500	Серый, неактивный, недоступен
Success (опц.)	2px Success/500 (#4CAF50)	White	Neutral/900	Зелёная рамка + галочка

Ключевые визуальные различия:

Цвет рамки: серый (Default) → синий (Focus) → красный (Error).
Толщина рамки: 1px (Default) → 2px (Focus, Error).
Тень/подсветка: отсутствует (Default) → есть outline (Focus, например 0 0 0 3px Primary/50).
Цвет текста: тёмный (Default) → красный (Error) → серый (Disabled).

Placeholder — текст-подсказка серого цвета (#8E8E93), который исчезает при вводе. Дополнительно у Input бывают варианты Filled (с введённым текстом) и With Icon (иконка слева/справа с учётом padding).

10. Auto Layout: адаптивные компоненты

Auto Layout (автолэйаут) — механизм Figma, который автоматически меняет размеры контейнера и расположение элементов в зависимости от содержимого и настроек. Это основа адаптивных компонентов.

10.1. Основные параметры

Direction (направление): Horizontal (в ряд) или Vertical (в столбец).
Padding (внутренние отступы): расстояние от границы контейнера до содержимого.
Gap (промежуток): расстояние между дочерними элементами.
Alignment (выравнивание): Left / Center / Right / Space between, Top / Center / Bottom.
Resizing (изменение размера):
- Hug Contents — контейнер подстраивается под содержимое;
- Fill Container — заполняет доступное пространство;
- Fixed — фиксированный размер.

10.2. Padding vs Gap

Это разные виды отступов, их часто путают:

Параметр	Padding	Gap
Где применяется	Внутри контейнера, от краёв	Между элементами
Что создаёт	Поля внутри элемента	Промежутки между элементами
Влияние	Меняет размер контейнера	Не меняет размер контейнера

Пример для кнопки с иконкой: Padding: 12px 16px (поля кнопки) + Gap: 8px (между иконкой и текстом).

10.3. Параметры адаптивности

Главный инструмент адаптивности — Resizing:

Hug Contents — для кнопок, бейджей (подстраиваются под текст);
Fill Container — для карточек, контейнеров (растягиваются на доступную ширину);
Fixed — использовать осторожно, только когда размер действительно фиксирован.

Дополнительно работают Constraints (привязка к краям родителя: Left/Right, Top/Bottom, Center, Scale) — они управляют позиционированием относительно родителя, тогда как Auto Layout управляет внутренней структурой.

Примеры настроек:

Компонент	Direction	Padding	Gap	Resizing
Кнопка	Horizontal	12×16	8	Hug Contents (+ min-width 120px)
Карточка	Vertical	16	12	Fill Container
Сетка	—	—	16	Fill Container + Space between

11. Spacing Scale

Spacing Scale — система стандартизированных значений отступов, обеспечивающая визуальный ритм и единообразие. Все отступы выбираются из шкалы, а не «на глаз».

11.1. Значения шкалы (база 4px)

Токен	Значение	Типичное применение
Spacing/4	4px	Между иконкой и текстом
Spacing/8	8px	Между элементами в списке
Spacing/12	12px	Между связанными элементами
Spacing/16	16px	Базовый padding, отступы карточек
Spacing/24	24px	Между секциями
Spacing/32	32px	Между крупными блоками

(Дополнительно встречается 48px — между основными разделами. Альтернативная база — 8px: 8/16/24/32/48/64.)

11.2. Принципы

Консистентность — используем только значения из шкалы.
Ритм — кратность базовому значению создаёт визуальную гармонию.
Математическая логика — все значения кратны 4 (или 8).
Упрощение решений — не нужно выбирать «13 или 15px», есть готовый набор.

12. Карточка товара (Product Card) как компонент

Product Card — это композитный компонент: он собирается из изображения, текстов и инстанса кнопки. Разберём процесс.

Шаг 1. Структура (контейнер):

фрейм с вертикальным автолэйаутом;
Padding: 16px;
Border Radius: 12px;
Background: White;
Shadow: Elevation/1.

Шаг 2. Изображение:

прямоугольник сверху, соотношение 1:1;
размер 200×200px или Fill Container для адаптивности;
Border Radius у верхних углов 12px (или заглушка-цвет).

Шаг 3. Контент:

Название — стиль Heading/H4, Max lines: 2 (обрезка длинных названий), gap 8px от изображения;
Описание (опц.) — Body/Medium, Max lines: 2–3, gap 4px;
Цена — Heading/H3, цвет Primary/500, gap 12px.

Шаг 4. Кнопка:

инстанс компонента Button (Primary, Medium) с текстом «Добавить»;
gap 16px от цены;
Resizing: Fill Container (на всю ширину карточки).

Шаг 5. Настройка автолэйаута: Direction Vertical, Padding 16, Gap 8, Alignment Left, Resizing Fill Container.

Шаг 6. Создание компонента: выделить фрейм → Create Component → назвать «Product Card».

Шаг 7. Варианты и свойства (опц.): Size (Small/Medium/Large), State (Default/Hover/Selected), With Badge («Новинка», «Скидка»); настраиваемые свойства Image, Title, Price, Button Text.

Результат: один переиспользуемый компонент, который раскладывается в сетку каталога и адаптируется под ширину колонки (в практике №2 — около 167px при 2 колонках на iPhone 13).

13. Организация библиотеки дизайн-системы

Чтобы дизайн-системой было удобно пользоваться, компоненты нужно аккуратно структурировать.

13.1. Структура страниц и групп

Design System — основная страница (токены и компоненты);
Components/Base — базовые компоненты;
Components/Composite — композитные компоненты;
Screens — готовые экраны (отдельная страница).

13.2. Пример структуры

Design System Page
├── Colors
│   ├── Primary
│   ├── Secondary
│   ├── Neutral
│   └── Semantic
├── Typography
│   ├── Headings
│   ├── Body
│   └── UI Elements
├── Components
│   ├── Base
│   │   ├── Button
│   │   ├── Input
│   │   └── Icon
│   └── Composite
│       ├── Header
│       ├── ProductCard
│       └── SearchBar
└── Spacing & Elevation

13.3. Правила именования

Названия понятные и описательные;
единый стиль через слэши для категоризации: Button/Primary, Input/Text;
все варианты одного компонента — рядом, визуально сгруппированы;
группировать фреймами, оставлять воздух между группами, добавлять заголовки и описания, поддерживать актуальность и версионировать изменения.

14. Создание дизайн-системы с нуля (пошагово)

Соберём всё вместе — общий маршрут построения дизайн-системы.

Исследование и планирование: анализ бренда/продукта, цели и требования, изучение лучших практик, план структуры.
Создание дизайн-токенов:
- Цвета: Primary/Secondary, нейтральная палитра, семантические цвета → Color Styles;
- Типографика: выбор шрифтов, размеры и веса, line height → Text Styles;
- Spacing: база (4 или 8px), шкала отступов;
- Прочее: Border Radius, Elevation (Effect Styles), иконки.
Базовые компоненты: Button (варианты, размеры, состояния), Input (типы и состояния), Icon, Badge, Avatar.
Композитные компоненты: Header, Footer, ProductCard, Navigation, Modal, Toast.
Организация в Figma: структура страниц, группировка, понятные имена, документация.
Документирование: описания, примеры, принципы, Do’s and Don’ts.
Тестирование и итерации: применение в реальных проектах, обратная связь, улучшения.
Версионирование: отслеживание изменений, сохранение версий, миграционные гайды.

Ключевые принципы: начинать с малого и расширять постепенно; фокус на переиспользовании; консистентность во всём; документирование важно; итеративный подход.

Краткие итоги

Дизайн-система — это токены + базовые компоненты + композитные компоненты + документация; она даёт консистентность, скорость и масштабируемость.
Дизайн-токены — атомарные значения (цвета, типографика, отступы, радиусы, тени), которые легко превращаются в код (JSON, CSS-переменные) и служат мостом к разработчикам.
Цвета делятся на Primary, Secondary, Neutral и Semantic; семантические цвета (Success/Warning/Error/Info) несут смысл и должны дополнять текст, а не заменять его.
Типографическая шкала и Spacing Scale (4/8/12/16/24/32) задают иерархию и ритм; значения берутся из шкалы, а не «на глаз».
Elevation через тени создаёт глубину и иерархию: чем важнее элемент, тем больше тень (Elevation/1 → Elevation/4).
Базовые компоненты (Button, Input) атомарны и универсальны; композитные (ProductCard, Header) собираются из базовых под конкретную задачу.
Переиспользуемые компоненты (мастер + инстансы) и Auto Layout (Direction, Padding, Gap, Resizing) — основа быстрой и адаптивной работы.
Дизайн-систему строят итеративно: от токенов к базовым компонентам, затем к композитным, с организацией библиотеки и документацией.

Контрольные вопросы

Для самопроверки и подготовки к экзамену ответьте на вопросы 16–30 из списка экзаменационных вопросов (exam_questions.md):

Что такое дизайн-система и из каких основных компонентов она состоит? (вопрос 16)
Объясните понятие «дизайн-токены» и приведите примеры. (вопрос 17)
Какие типы цветов включаются в дизайн-систему и каково их назначение? (вопрос 18)
Что такое семантические цвета и где они применяются? (вопрос 19)
Опишите структуру типографической шкалы. (вопрос 20)
Что такое Elevation и как он используется? (вопрос 21)
В чём разница между базовыми и композитными компонентами? (вопрос 22)
Опишите процесс создания кнопки с вариантами Primary/Secondary/Ghost. (вопрос 23)
Какие состояния должен иметь Input и как они различаются визуально? (вопрос 24)
Что такое переиспользуемые компоненты и почему они важны? (вопрос 25)
Как организовать компоненты в библиотеке дизайн-системы? (вопрос 26)
Объясните принцип работы Auto Layout для адаптивных компонентов. (вопрос 27)
Какие параметры Auto Layout влияют на адаптивность? (вопрос 28)
Что такое Spacing Scale и какие значения используются? (вопрос 29)
Опишите процесс создания компонента Product Card. (вопрос 30)

Дополнительно (бонус): вопрос 54 — Design Tokens в контексте передачи разработчикам; вопрос 55 — процесс создания дизайн-системы с нуля.

Практическое закрепление: выполните практическую работу №2 — создайте компоненты Button, Input и Product Card, соберите экран «Каталог» на iPhone 13 (375×812) с Auto Layout и сделайте мини-прототип с одним переходом.