Видеоурок

Сергей Оршак

Время чтения 6 минут

Компоненты позволяют один раз создать элемент и затем использовать его копии по всему проекту.

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

2. Как работают компоненты

Компонент — это основной элемент, на основе которого создаются его экземпляры (instances).

В Figma главный компонент обозначается заполненным ромбиком, а его экземпляры — пустым. Изменения главного компонента автоматически распространяются на его копии.

Создать компонент можно из практически любого элемента через Create Component или сочетанием ⌥⌘K на Mac.

Главное преимущество компонентов — не просто повторное использование, а возможность централизованно управлять системой элементов.

3. Не создавайте отдельный компонент для каждого варианта

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

Например:
Жёлтая кнопка → зелёная кнопка → кнопка с обводкой → кнопка с иконкой.

Вместо этого лучше собрать все варианты кнопки в один компонентный сет.

Тогда дизайнер сможет выбирать нужный вариант через свойства компонента, а система останется компактной и понятной.

4. Автолейаут — основа хороших компонентов

Для элементов вроде кнопок особенно важно использовать Auto Layout.

Если текст кнопки изменится с «Купить» на «Подробнее», кнопка автоматически подстроится под новую ширину, сохранив заданные отступы.

Поэтому внутри компонента лучше использовать универсальный контент:
«Кнопка», а не «Жёлтая кнопка».

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

Урок по автолейаутам

5. Варианты компонентов

Внутри одного component set можно объединить разные состояния и типы элемента.

Например, для кнопки:

• Type: Filled / Outline;
• State: Default / Hover / Disabled;
• Size: S / M / L;
• Color: Green / Yellow;
• Icon: On / Off.

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

6. Иконки лучше хранить отдельно

Не стоит создавать отдельную кнопку для каждой возможной иконки.

Например:
Button + Arrow
Button + Search
Button + Download
Button + Plus

Вместо этого иконки стоит сделать отдельными мастер-компонентами. Тогда внутри кнопки можно использовать свойство Instance Swap и менять нужную иконку прямо в настройках экземпляра.

Это значительно уменьшает количество вариантов и делает UI-кит гибче.

7. Свойства видимости

Для дополнительных элементов можно использовать Boolean property.

Например, у кнопки есть иконка, но по умолчанию она выключена:
Show icon → False
При необходимости в конкретном экземпляре её можно включить.

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

8. Instance Swap

Instance Swap позволяет заменить вложенный компонент непосредственно через настройки экземпляра.

Для кнопки это особенно удобно:

1. внутри кнопки находится компонент иконки;
2. ему назначается Instance Swap;
3. в экземпляре кнопки дизайнер выбирает нужную иконку из библиотеки.

При этом не нужно заходить внутрь компонента и вручную заменять элементы.

9. Текст и другие свойства

Компонентам можно задавать свойства не только для визуальных состояний, но и для содержимого.
Например:
Text → Button

Тогда текст можно менять прямо в экземпляре, не нарушая структуру компонента.

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

10. Как собрать хорошую систему кнопок

Удобная структура может выглядеть примерно так:
Button
→ Type: Filled / Outline
→ State: Default / Hover / Disabled
→ Size: S / M / L
→ Color: Green / Yellow
→ Show icon: True / False
→ Icon: Instance Swap
→ Text: Button

При этом сама кнопка построена на Auto Layout, а иконки существуют как отдельные компоненты.
Получается одна система вместо десятков разрозненных элементов.

11. Главное

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

При создании компонентов стоит:

• объединять однотипные элементы в один component set;
• использовать Auto Layout;
• выносить иконки в отдельные компоненты;
• использовать свойства State, Type, Size и Color;
• применять Boolean properties для показа и скрытия элементов;
• использовать Instance Swap для замены вложенных компонентов;
• делать текст и другие параметры редактируемыми через свойства.

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