Как сделать или убрать компонент в фигме

Что такое компоненты в фигме

Компоненты — одна из главных особенностей фигмы, сделавших эту программу главным инструментов современных UX/UI и веб-дизайнеров. Если говорить простым языком, компонент — это шаблон какого-то элемента или блока в дизайне, который можно редактировать в одном месте, а изменения будут автоматически применяться везде, где этот шаблон используется. Это очень удобно, особенно на больших проектах.

Как в фигме сделать фрейм компонентом горячими клавишами

Для этого нужно выделить фрейм и нажать комбинацию Ctrl Alt K (Windows) или Option Command K (Mac). Также создать новый компонент можно через контекстное меню или с помощью специальной кнопки на панели справа.

При добавлении нового компонента в любом случае будет создан мастер-компонент — то есть главный, от которого в дальнейшем все остальные его копии будут перенимать свойства. Для создания дочернего компонента нужно просто создать копию основного (Ctrd D на Windows или Cmd D на Mac). При этом, вы сможете независимо редактировать некоторые параметры дочерних компонентов, например тексты, изображения и цвета. Другие же свойства — например компоновку, размеры и отступы, можно будет изменить только в мастер-компоненте, и эти изменения также применятся и ко всем его дочерним копиям.

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

Как убрать (удалить, отменить) компонент в фигме

Дочерний компонент можно отвязать от его родительского мастера. Для этого выберите пункт Detach instance в меню правой кнопки мыши или нвжмите горячие клавиши Ctrl Alt B (на Windows) или Option Command B (на Mac OS).

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

Расформировать главный мастер-компонент в фигме нельзя. Если вы хотите удалить компонент, но оставить при этом его содержимое, придется сначала создать копию этого компонента, отменить привязку дочернего компонента к основному (Detach instance) и после этого удалить мастер.

Также разобрать мастер-компонент и сделать из него обычный фрейм можно с помощью специальных плагинов, например DETACH THEM ALL!

Как добавить варианты компонента и зачем это нужно

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

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

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

Таким образом можно создать полноценную библиотеку компонентов для своего проекта.