Компоненты в фигме

Компоненты в фигме

31.07.2019
Рейтинг: 5/5 - 1 голосов

 

Если вы знакомы с фотошопом, то знаете, что такое смарт объекты. Смарт-объекты могут наследовать свойства своим копиям. Роль своего рода смарт-объектов в Figma выполняют компоненты. Это этакие парни, которые умеют изменять набор свойств у дочерних компонентах.

 

Компонент создается на основе родительского узла, с помощью иконки в верхней части панелей фигмы, горячим сочетанием клавиш CTRL+Alt+K или через правую клавишу мышки (ПКМ).

 Компоненты в фигме

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

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

 select figma component

 

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

 

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

 parent and child components in figma

 

 Где удобно использовать компоненты.

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

Комментарии

коммент.

Написать комментарий

Ваш email не будет опубликован. Обязательные поля отмечени символом *


Участие у онлайн-интенсиве Design Line
27.09.2019
Рейтинг: 5/5 - 1 голосов
Какие бывают иконки для сайтов
27.05.2019
Рейтинг: 5/5 - 1 голосов
Стоки, стоки, стоки
20.05.2019
Рейтинг: 5/5 - 1 голосов