Лучшие практики создания компонентов: Именование и структура

Курс: Figma: От Атомарного Дизайна до Дизайн-Систем12+

Мы уже освоили основы Figma: научились организовывать файлы, работать со стилями и иконками. Теперь ныряем в самое сердце любой дизайн-системы — компоненты. Именно они позволяют создавать масштабируемые, гибкие и легко поддерживаемые интерфейсы.

Что такое компоненты и зачем они нужны?

Компоненты в Figma — это многоразовые элементы интерфейса. Вы создаёте их один раз, а затем используете по всему проекту или даже между проектами. Представьте кнопку, поле ввода, карточку товара или целую навигационную панель. Вместо того чтобы каждый раз рисовать их с нуля, вы создаёте один "мастер-компонент" и используете его "экземпляры" (instances) везде, где нужно.

Почему это так важно, особенно для дизайн-систем?

Единообразие: Изменили цвет кнопки в мастер-компоненте — он изменился везде. Это гарантирует консистентность интерфейса.
Скорость: Не нужно перерисовывать элементы. Просто вставляйте готовые компоненты и настраивайте их.
Масштабируемость: Дизайн-система растёт, и компоненты позволяют легко добавлять новые элементы, не нарушая структуру.
Поддержка: Обновлять дизайн становится гораздо проще и быстрее.

Важно: Компоненты — это не просто группы слоёв. Это динамические объекты, которые могут иметь свои свойства, варианты и быть интерактивными.

Как называть компоненты: лучшие практики

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

Мы уже сталкивались с принципами именования, когда работали со стилями цвета и типографики. Для компонентов эти принципы становятся ещё важнее.

1. Группировка с помощью слешей (`/`)

Figma автоматически организует компоненты в выпадающем списке по группам, если вы используете слеши в их именах. Это создаёт логичную иерархию.

Пример:

Button/Primary/Default
Button/Primary/Hover
Button/Secondary/Default
Input/Text/Default
Input/Text/Error
Card/Product/Default
Card/Product/Small

В Figma это будет выглядеть так:

Button
  ├── Primary
  │     ├── Default
  │     └── Hover
  └── Secondary
        └── Default
Input
  └── Text
        ├── Default
        └── Error
Card
  └── Product
        ├── Default
        └── Small

2. Функциональное и семантическое именование

Называйте компоненты так, чтобы их имя отражало назначение (что это?) и состояние/тип (какой это?).

Плохо: Кнопка1, Поле, Карточка
Хорошо: Button/Primary/Default, Input/Text/Active, Card/Product/Compact

3. Единый порядок именования

Старайтесь придерживаться единого порядка в именовании:

[Категория]/[Тип]/[Состояние]/[Размер]/[Дополнительно]

Не все части нужны для каждого компонента, но придерживайтесь этой логики.

Примеры:

Button/Primary/Default/Large
Checkbox/Unchecked/Disabled
Avatar/Small/Placeholder
Modal/Confirmation/Success

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

Мастер-компоненты и экземпляры: как они работают

Понимание связи между мастер-компонентом и его экземплярами критически важно.

Мастер-компонент (Master Component): Это "оригинал" компонента. Он обозначается фиолетовым ромбом в слоях. Все изменения, внесённые в мастер-компонент, автоматически применяются ко всем его экземплярам.
Экземпляр (Instance): Это копия мастер-компонента, которую вы используете в своих макетах. Экземпляр обозначается пустым ромбом. Вы можете переопределять (override) некоторые свойства экземпляра (например, текст, цвет, видимость слоёв), не затрагивая мастер-компонент.

Создаём мастер-компонент

Создайте нужный элемент (например, кнопку) из фигур, текста и Auto Layout.
Выделите его.
Нажмите на иконку "Create Component" в тулбаре (или используйте горячую клавишу Ctrl + Alt + K / Cmd + Option + K).
Ваш элемент станет мастер-компонентом, а его копия на холсте — экземпляром.

Работаем с экземплярами

Вставка: Чтобы вставить экземпляр, перетащите мастер-компонент из панели "Assets" на холст.
Отключение от мастера: Если вам нужно полностью отделить экземпляр от мастер-компонента и превратить его в обычный фрейм, выделите экземпляр и нажмите Ctrl + Alt + B / Cmd + Option + B (Detach instance). Используйте это крайне редко, так как это нарушает связь с дизайн-системой.
Сброс переопределений: Если вы изменили свойства экземпляра и хотите вернуть их к значениям мастер-компонента, выделите экземпляр, кликните правой кнопкой мыши и выберите "Reset all overrides".

Организация слоёв внутри компонента

Даже внутри самого компонента важно поддерживать порядок.

Используйте Auto Layout: Почти все компоненты должны быть построены с использованием Auto Layout. Это обеспечивает их адаптивность и гибкость.
Семантическое именование слоёв: Называйте слои внутри компонента так, чтобы было понятно их назначение: Icon, Label, Background, Divider.
Группируйте слои: Используйте фреймы или группы для логического объединения связанных элементов внутри компонента.
Скрывайте неиспользуемые слои: Если у компонента есть опциональные элементы (например, иконка, которая не всегда нужна), не удаляйте их, а скрывайте. Позже мы узнаем, как управлять их видимостью через свойства компонентов.

Пример структуры кнопки с Auto Layout:

Button (Master Component, Auto Layout)
  ├── Background (Rectangle/Fill)
  ├── Icon (Component instance, optional)
  └── Label (Text layer)

Теперь, когда мы понимаем, как создавать и называть компоненты, а также как они структурированы, мы готовы к следующему шагу: организации этих компонентов в библиотеки и их публикации для совместного использования. Это позволит всей команде работать с единым источником правды.