Лекция №6: Компонентный подход и Атомарный дизайн (Design Systems)

Курс: Веб-дизайн и проектирование интерфейсов

Связь с практикой: Углубление понимания Лабораторной №4 и база для масштабирования проекта.

Ключевая мысль: Дизайн-система — это библиотека классов (Framework). Проектирование без системы — это генерация технического долга.

1. Управление сложностью и Технический долг (The Scale Problem)

В программировании существует фундаментальный принцип DRY (Don’t Repeat Yourself — не повторяйся). Если логика дублируется в нескольких местах, система становится хрупкой. В проектировании интерфейсов работает тот же закон.

Представьте, что вы разрабатываете фронтенд крупного SaaS-продукта и в 50 разных файлах написали хардкод: background-color: #3B82F6. Завтра отдел маркетинга проведет ребрендинг и потребует изменить оттенок синего. Разработчику (или дизайнеру) придется вручную искать и править этот цвет в 50 местах. Вероятность того, что вы пропустите пару экранов, стремится к 100%.

Если в Figma вы просто копируете кнопки и карточки товаров (Ctrl+C, Ctrl+V), вы не проектируете систему, вы генерируете технический долг. Ваш макет невозможно поддерживать.

Инженерное решение: Внедрение принципа Single Source of Truth (SSOT — Единый источник истины). В коде это реализуется через глобальные переменные и импорт компонентов. В UI/UX дизайне роль SSOT выполняет Design System (Дизайн-система). Если нам нужно изменить радиус скругления кнопок с 4px на 8px во всем приложении из 300 экранов, мы меняем ровно одно значение в одном корневом файле библиотеки.

2. Атомарный дизайн: Компонентный фреймворк

Чтобы собрать сложную систему, её нужно декомпозировать на простейшие элементы. Брэд Фрост (Brad Frost) разработал методологию Atomic Design, взяв за основу законы химии. Эта ментальная модель идеально описывает структуру современного компонентного фронтенда (React, Vue, Angular).

Интерфейсная материя делится на 5 иерархических уровней. Мы строим архитектуру строго снизу-вверх (Bottom-Up).

Уровень 1. Atoms (Атомы)

Базовые, фундаментальные, неделимые строительные блоки. Сами по себе в отрыве от контекста они не несут функциональной пользы.

• Аналогия с кодом: Базовые HTML-теги (<button>, <input>, <label>), а также глобальные переменные стилей (цвета, шрифты, тени).
• Примеры в Figma: Иконка лупы, цветовой стиль “Primary Blue”, текстовый стиль “H1”, пустой инпут (поле ввода), базовая кнопка.

Уровень 2. Molecules (Молекулы)

Группа из нескольких атомов, соединенных вместе, чтобы выполнять одну конкретную функциональную задачу (UI logic).

• Аналогия с кодом: Простой React-компонент, принимающий базовые пропсы.
• Примеры в Figma: Поле поиска сайта. Это молекула, собранная из трех атомов: Атом «Поле ввода» + Атом «Иконка лупы» + Атом «Кнопка Найти». Или карточка пользователя (Атом «Аватар» + Атом «Имя» + Атом «Роль»).

Уровень 3. Organisms (Организмы)

Сложные, самостоятельные блоки интерфейса, которые состоят из молекул и атомов. Организмы формируют основные смысловые секции приложения.

• Аналогия с кодом: Модули или Layout-компоненты фронтенда, которые могут иметь собственное внутреннее состояние.
• Примеры в Figma: Глобальный Хедер (шапка) сайта. В него входят: Молекула «Навигация» + Атом «Логотип» + Молекула «Поиск» + Молекула «Профиль пользователя».

Уровень 4. Templates (Шаблоны / Каркасы)

Уровень абстракции, где мы собираем организмы в единую структуру страницы, но еще не подключаем реальную базу данных.

• Аналогия с кодом: Страничный компонент (Page Component), где расставлены все импорты, но в который еще не прокинуты данные из API.
• Примеры в Figma: Вайрфреймы (Wireframes) — серые блоки с Placeholder-контентом, описывающие сетку (Grid) и расположение организмов.

Уровень 5. Pages (Страницы)

Финальный этап сборки. Шаблоны, заполненные реальным контентом (High-fidelity Mockups).

• Аналогия с кодом: Отрендеренная страница в браузере после успешного fetch-запроса к серверу.
• На этом этапе мы тестируем жизнеспособность нашей системы: не ломается ли Молекула «Карточка товара», если сервер вернет нам заголовок длиной в 5 строк?

3. Компоненты в Figma: Объектно-ориентированное программирование в графике

Современная Figma — это не графический редактор, это визуальная среда разработки, которая строго реализует принципы объектно-ориентированного программирования (ООП).

Ключевой механизм здесь — разделение сущностей на Классы и Объекты.

A. Main Component (Мастер-компонент / Класс)

• Техническая суть: Это определение Класса. Если провести аналогию с кодом, это объявление class Button { ... } или написание базовой функции компонента в React.
• Визуальный маркер: В дереве слоев обозначается иконкой с 4 заполненными ромбиками.
• Механика: Мастер-компонент — это источник истины. Любое изменение в его структуре (добавили скругление углов, изменили отступ) мгновенно рендерится во всех его копиях во всем проекте.

B. Instance (Инстанс / Экземпляр)

• Техническая суть: Это конкретный Объект, инстанцированный от базового Класса. В коде это выглядит как вызов const myBtn = new Button() или <Button /> в JSX-разметке.
• Визуальный маркер: Обозначается иконкой одного полого ромба.
• Механика (Наследование): Инстанс наследует абсолютно все свойства от своего Мастера. Однако он поддерживает механизм Overrides (переопределений), который позволяет адаптировать инстанс под локальный контекст.

Overrides (Полиморфизм и Переопределения)

Инстанс не является жестко заблокированной картинкой. Вы можете точечно изменять его свойства, не разрывая связь с Мастер-компонентом.

Что разрешено переопределять (Overrides):

• Текстовое содержимое (String data).
• Видимость слоев (Boolean: скрыть/показать иконку).
• Заливку изображений (Image fill).
• Цвета заливки и обводки.

Что запрещено (Константы структуры):

Вы не можете менять позиционирование слоев внутри Инстанса или добавлять в него новые узлы DOM-дерева (новые слои), если это не заложено в структуру Мастера. Структура компонента инкапсулирована.

4. Component Properties: Проектирование API компонента

Инженерия интерфейсов требует гибкости. Если вам нужна кнопка с иконкой и кнопка без иконки, создавать под них два разных Мастер-компонента — это раздувание библиотеки.

Для решения этой задачи используются Component Properties (Свойства компонента). Это прямой аналог передачи props в фреймворках вроде React или Vue. Вы проектируете интерфейс взаимодействия с вашим компонентом — его API.

Типы передаваемых свойств (Figma Props):

1. Variant Property (Вариативность состояний):
   • Суть: Работает как перечисление (enum) в TypeScript. Используется для переключения глобальных состояний компонента.
   • Применение: State (Default, Hover, Disabled, Active), Size (Small, Medium, Large), Type (Primary, Secondary, Ghost).
2. Boolean Property (Переключатель True/False):
   • Суть: Условный рендеринг (if (showIcon) return <Icon />). Позволяет мгновенно скрывать или показывать слои внутри компонента одним тумблером в панели настроек.
   • Применение: Включить/выключить иконку в кнопке (hasIcon: true/false), показать/скрыть кнопку закрытия в модальном окне.
3. Instance Swap Property (Подмена вложенного инстанса):
   • Суть: Передача компонента в качестве пропса (например, icon={<SearchIcon />}).
   • Применение: Позволяет выбрать Инстанс и через выпадающее меню заменить вложенную в него иконку на любую другую из вашей библиотеки (например, поменять иконку «Домой» на иконку «Корзина», не ломая сам компонент кнопки).
4. Text Property (Текстовое поле):
   • Суть: Проброс свойства children или label.
   • Применение: Вывод текстового поля прямо в панель настроек Инстанса. Проектировщику больше не нужно делать двойной клик, чтобы провалиться сквозь слои DOM-дерева до текстового узла — он меняет текст кнопки напрямую через удобный инпут (API).

5. Design Tokens (Дизайн-токены) и Variables (Переменные)

Долгое время дизайн-системы страдали от рассинхронизации с кодом. Разработчикам приходилось вручную переносить цвета и отступы из Figma в CSS. Появление Variables (Переменных) в Figma устранило этот разрыв, сделав макеты полноценными базами данных.

• Что такое Variables: Это хранилище «сырых» скалярных значений (Values), жестко привязанных к семантическим именам (Names).
• Доступные типы данных: Color (HEX/RGB), Number (размеры шрифтов, радиусы скруглений, спейсинги), String (текстовые константы), Boolean (переключатели).

Многоуровневая архитектура токенов (Алиасы)

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

1. Global Tokens (Примитивы / Core): Базовая палитра, где значения захардкожены.
   • Пример: Blue-500 = #3B82F6. Мы обращаемся к цвету по его физическому свойству.
2. Semantic Tokens (Алиасы / Смысловые токены): Токены, которые не хранят HEX-код, а ссылаются на Global Tokens, объясняя зачем этот цвет нужен.
   • Пример: Button-Bg-Primary = {Blue-500}.
3. Component Tokens (Специфичные токены): Узконаправленные переменные для сложных организмов (используются в крупных Enterprise-системах).

Режимы переменных (Modes) и Темная тема

Главное инженерное преимущество Variables — поддержка Режимов (Modes). Это механизм, позволяющий одной семантической переменной возвращать разные значения в зависимости от контекста среды.

Если вы проектируете сложный веб-портал с поддержкой Темной темы, вам не нужно перекрашивать макеты вручную. Вы просто меняете режим фрейма с Light на Dark.

• В режиме Light: Алиас Button-Bg-Primary ссылается на {Blue-500}.

• В режиме Dark: Тот же самый алиас Button-Bg-Primary переключает ссылку на {Blue-300}.

  Система перестраивает весь интерфейс за миллисекунды, используя ту же математику, что и провайдеры тем (Theme Providers) в React. (Этот инструмент мы будем затрагивать факультативно, но инженерам знать архитектуру переключения тем необходимо).

---

6. Глоссарий лекции

Для успешной защиты лабораторных работ вы обязаны владеть профессиональной терминологией:

• Design System (Дизайн-система): Единый набор стандартов, технической документации и библиотеки UI-компонентов для масштабируемой разработки продукта.
• Atomic Design: Архитектурная методология декомпозиции интерфейса на Атомы, Молекулы, Организмы, Шаблоны и Страницы.
• Master Component: Исходный, эталонный компонент (Класс).
• Instance (Инстанс): Зависимая копия компонента (Объект).
• Props (Properties): Настраиваемые свойства компонента (Текст, Boolean-переключатели видимости, подмена иконок), формирующие его API.
• Overrides: Локальные, точечные переопределения параметров внутри инстанса (без разрушения связи с Мастером).
• Single Source of Truth (SSOT): Фундаментальный принцип проектирования — единый источник правды (значение меняется в одном месте и реплицируется везде).

---

7. Домашнее задание (Инженерный аудит перед Лаб №5)

Перед тем как приступить к сборке финальных макетов в Лабораторной работе №5, вы обязаны провести рефакторинг своей локальной библиотеки.

Чек-лист самопроверки UI Kit:

1. Оптимизация сущностей: Откройте свой UI Kit. Проверьте архитектуру кнопок. Если у вас лежат два независимых Мастер-компонента Button with Icon и Button without Icon — это архитектурный брак. Инкапсулируйте логику: объедините их в один компонент, настроив Boolean Property (Has Icon: true/false).
2. Аудит нейминга: Проверьте структуру папок. Удобно ли вам вызывать иконки из панели Assets через систему слэшей (Slash Naming)?
3. Устранение Magic Numbers: Проведите жесткую проверку макета. Убедитесь, что 100% используемых цветов привязаны к Styles (Стилям) или Variables (Переменным), а не вбиты вручную через HEX в панели инспектора.
4. Проверка связей: Выделите весь макет и убедитесь, что вы нигде не использовали анти-паттерн Detach Instance. Все повторяющиеся элементы должны быть Инстансами.

---

Проверь себя!

Что из нижеперечисленного позволяет переключать глобальные состояния компонента (например: Default, Hover, Disabled) в Figma?

Boolean PropertyVariant PropertyInstance Swap PropertyText Property

Проверить ответ

Какой анти-паттерн разрушает связь между мастер-компонентом и его экземпляром?

OverrideBoolean PropertyMagic NumberDetach Instance

Проверить ответ