Компоненты в Фигме – это элементы интерфейса, которые используются повторно в дизайне сайта. Компонентом может быть таблица данных, иконка, кнопка, форма, и другие сложные объекты. Благодаря этому при внесении изменений в компонент, все экземпляры будут изменяться автоматически, что сэкономит ваше время.
Прежде чем рассмотрим эту тему, необходимо разобраться в концепции компонентов в Фигме. Они бывают родительскими (главными). Это те, что создаются при первоначальном создании элемента. В них определяются основные свойства. И второй компонент – дочерний (копия главного компонента). Его вы можете использовать повторно в разных проектах в большом количестве.
Как это работает? Давайте рассмотрим на примере создания кнопки. Для этого нарисуем прямоугольник и сделаем закругление углов на 20. Далее сделаем из него компонент при помощи горячих клавиш «Ctrl+Alt+K», или через главное меню в разделе «Object», пункте «Create component».
После этого переименуем этот компонент и назовем его «Shape». Это необходимо для того чтобы вам было проще понимать, что это основной Shape, из которого вы будете делать все элементы в дизайне.
Затем копируем Shape при помощи клавиши «Alt». Создадим две копии для двух разных кнопок.
Вы можете добавить текст, а также использовать заливку цветом. Назовем первую кнопку «entrance», а вторую «exit».
Далее выделите отдельно каждую кнопку и нажмите на клавиши «Ctrl+Alt+K», чтобы создать из них отдельные компоненты. Кроме того, переименуем эти компоненты в левой панели.
После этого, можно скопировать каждый компонент при помощи «Alt» и создать несколько образцов этих кнопок.
Например, первый вариант – это дизайн кнопки в интерфейсе, второй вариант – это изменение цвета кнопки при наведении на нее курсора мыши, и третий вариант – это внешний вид кнопки при нажатии на нее. Вы можете задавать эти оттенки самостоятельно выбирая подходящий цвет для каждого варианта.
Обратите внимание как обозначается в левой панели родительский и дочерний компонент. Дочерний компонент выгляди как пустой ромб, а родительский заполненный.
Теперь, при внесении изменений в родительском компоненте, все дочерние также будут принимать эти изменения. Например, можно изменить расположение текста в кнопке, или сам текст, изменить размер кнопки или радиус закругления углов. Все эти изменения будут касаться дочерних компонентов. Как видно на иллюстрации кнопка «Exit» (родительский компонент) была изменена по размеру, и все остальные дочерние компоненты также изменились в размере.
Теперь, что касается изначального Shape, то при редактировании этого компонента, вы сможете применять настройки ко всем кнопкам.
Чтобы дать название компонентам необходимо использовать слеш (косая черта). Это позволит создать организованную иерархию все ваших компонентов, что может упростить работу. Ниже представлены шаблоны названий компонентов со слешем:
- button/primary/text — active;
- button/primary/text — default;
- button/primary/text — disabled;
- button/secondary/text — active;
- button/secondary/text — default;
- button/secondary/text — disabled.
В том случае, если какой-то элемент необходимо отделить от родительского компонента, вы можете сделать его обычным элементом, или отдельной группой. Для этого выделите компонент кликнув на него и нажмите «Ctrl+Alt+B», или просто кликните по нему правой кнопкой мыши и выберите опцию «Detach Instance».
Итак, вы узнали, как устроены компоненты в Фигме, и как их создавать. Для работы с большими проектами без данной функции просто не обойтись. Она позволит вам экономить массу времени, а также упростит работу верстальщика.
Сообщить об ошибке