Как в Figma использовать компоненты и для чего они нужны

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

Как создать компонент

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

Итак, чтобы создать компонент:

Выбираем группу элементов или элемент.
Жмём CTRL+ALT+K либо открываем меню правой кнопкой мыши и выбираем Create Component

Всё, компонент готов. В окне навигатора слоёв состояние значка изменится на синюю иконку из четырёх ромбов, цвет названия элемента также станет синим.

Список компонентов в Figma

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

Как создать экземпляр компонента

Есть несколько способов:

Сделать копию компонента: либо дублированием (CTRL+D), либо через CTRL+C > CTRL+V. Очевидным неудобством способа является то, что вы либо создаёте копию вообще там же, либо вставляете её почти наугад. Но имеет право на жизнь.
Переключаем окно навигатора на Assets и перетаскиваем из него элемент в нужное нам место на макете

Компоненты в Фигме - Assets

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

Как сделать экземпляр обычным элементом

Если вы решили, что какой-то экземпляр компонента более не должен зависеть от родительского компонента, вы можете сделать его обычным элементом (либо группой). Для этого: