В этом видео уроке и статье вы узнаете про компоненты в фигме. Разбираемся что это такое, зачем они нужны, как сделать, убрать, отменить и разломать компоненты в Figma. Это поможет вам работать намного быстрее и упростить вашу работу.
Что такое компоненты в Figma и зачем они нужны?
![Родительский и дочерний компонент в фигме](https://web-design.center/wp-content/uploads/2021/04/01-komponenti-1024x600.jpg)
Компоненты в figma — это элементы, которые можно редактировать массово.
![Изменение цвета компонента](https://web-design.center/wp-content/uploads/2021/04/02-komponenti-1024x600.jpg)
Например если вы создадите кнопку, сделаете из неё компонент, а затем скопируете, то при изменении цвета, размера, текста у главного компонента копии также будут меняться.
Как сделать компонент в фигме?
![](https://web-design.center/wp-content/uploads/2021/04/image-10-1024x601.png)
Чтобы сделать компонент в фигме выберите любой элемент и сверху по центру нажмите на иконку для создания компонента «Create component». Также можно нажать на комбинацию горячих клавиш «Ctrl + Alt + K». На примере выше показано, как сделать компонент из кнопки.
![Отображение компонентов в панели Accets в figma](https://web-design.center/wp-content/uploads/2021/04/04-komponenti-1024x600.jpg)
Если перейдете во вкладку «Accets», то увидите созданные вами ранее компоненты. Их можно перетаскивать в ваш проект и использовать повторно.
![Отображение компонентов в слоях](https://web-design.center/wp-content/uploads/2021/04/14-komponenti-1024x601.jpg)
Главный компонент в слоях отображается иконкой с 4 ромбами. Дочерние компоненты (копии) обозначены одним ромбом.
Как работать с компонентами в фигме?
![Изменение дочернего компонента](https://web-design.center/wp-content/uploads/2021/04/05-komponenti-1024x601.jpg)
Если вы скопируете компонент, а затем измените что-то в копии (например зададите обводку, измените надпись, цвет, размер и т.д.), то при изменении этих параметров в главном компоненте, они не будут изменяться в копии.
![Изменение родительского компонета в фигме](https://web-design.center/wp-content/uploads/2021/04/06-komponenti-1024x599.jpg)
Изменяю размер главного компонента, как показано на примере выше. Нижний компонент (копия) не изменяет свои размеры, потому, что ранее я уменьшил эту кнопку.
![Отмена размера в дочернем компоненте](https://web-design.center/wp-content/uploads/2021/04/07-komponenti-1024x600.jpg)
Чтобы размер дочернего компонента снова изменялся, нужно нажать на 3 иконки справа и выбрать «Reset size».
![Изменение компонентов в фигме](https://web-design.center/wp-content/uploads/2021/04/08-komponenti-1024x602.jpg)
Теперь при изменении главного компонента копия тоже будет менять размер.
![Отмена обводки в компоненте](https://web-design.center/wp-content/uploads/2021/04/09-komponenti-1024x603.jpg)
Чтобы убрать обводку у дочернего компонента, выбрите его и нажмите на иконку с 3 точками справа. Выберите из списка «Reset stroke».
![Отмена всех изменений в дочернем компоненте](https://web-design.center/wp-content/uploads/2021/04/10-komponenti-1024x601.jpg)
Чтобы убрать все изменения в дочернем компоненте (для того, чтобы к нему применялись изменения главного компонента), нажмите на иконку с 3 точками справа и выберите пункт «Reset all overrides».
Как убрать компонент в фигме?
![Как разломать компонент](https://web-design.center/wp-content/uploads/2021/04/11-komponenti-1024x601.jpg)
Чтобы убрать (отменить, разгруппировать, разломать) компонент в фигме, выберите копию компонента и нажмите на иконку с тремя точками в правой панели. Выберите пункт «Detach instance» или нажмите на горячие клавиши «Alt + Ctrl + B». В этом случае вы сделаете из компонента простой элемент. Это сработает только для дочерних элементов (копий). Разломать главный компонент обычным способом в фигме нельзя.
Как применить стиль дочернего компонента к главному
![Применение стилей дочернего компонента к главному](https://web-design.center/wp-content/uploads/2021/04/12-komponenti-1024x601.jpg)
Представим ситуацию, что у вас есть несколько кнопок в формате компонентов. Вы выбрали дочерний компонент и изменили в нём цвет с оранжевого на синий. Если нажать справа на иконку с тремя точками и выбрать пункт «Push overrides to main component», то главный компонент примет стиль дочернего и все копии также изменят свой стиль.
![Изменения компонентов в фигме](https://web-design.center/wp-content/uploads/2021/04/13-komponenti-1024x603.jpg)
Как найти главный компонент в фигме?
![Вернуться к главному компоненту в фигме](https://web-design.center/wp-content/uploads/2021/04/15-komponenti-1024x602.jpg)
Найти главный компонент в фигме можно с помощью дочернего. Выберите копию компонента и в правой панели нажмите на иконку с четырьмя ромбами «Go to main component». Вас перенаправит к главному компоненту.
Как создать компоненты в фигме массово?
![Как создать массово компоненты в фигме](https://web-design.center/wp-content/uploads/2021/04/16-komponenti-1024x599.jpg)
Если вам потребовалось создать сразу несколько компонентов, то выделите нужные элементы и сверху по центру (напротив иконки создания компонентов) нажмите на стрелку и выберите пункт «Create multiple components», что переводится как «Создать несколько компонентов».
![Изменение компонентов в фигме](https://web-design.center/wp-content/uploads/2021/04/17-komponenti-1024x601.jpg)
На примере выше я выбрали 4 кнопки и создал из них компоненты.
Создадим фрейм вокруг этих кнопок и назовем этот фрейм например «Buttons». Если сделаю копию какой-то кнопки, то справа появится возможность менять стиль этой кнопки на другой компонент.
Заключение
Итак, вы этой инструкции вы узнали о том, как работать с компонентами в фигме. Это поможет вам работать быстрее, поскольку не нужно будет менять несколько элементов.
P.S. Если хотите получить бонусные материалы по быстрому созданию дизайна сайтов в Figma, то переходите по этой ссылке.
Автор статьи: Владимир Чернышов
![Дизайн генератор — комплект figma](https://web-design.center/wp-content/uploads/2021/09/banner-design-generator.png)
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).