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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. Выделите этот элемент
  2. Либо нажмите CRTL+ALT+B, либо нажмите правой кнопкой мыши и выберите Detach Instance

Убрать компонент в Фигме

Как быстро перейти от элемента к родительскому компоненту

Чтобы не вспоминать, где лежит сам компонент, кликните на элемент правой кнопкой мыши и выберите Master Component > Go to Master Component

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<