Каталог бесплатных курсов по it-специальностям freetutorials.ru!

х
Наверх

Создание компонентов в Figma

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

Прежде чем рассмотрим эту тему, необходимо разобраться в концепции компонентов в Фигме. Они бывают родительскими (главными). Это те, что создаются при первоначальном создании элемента. В них определяются основные свойства. И второй компонент – дочерний (копия главного компонента). Его вы можете использовать повторно в разных проектах в большом количестве.      

Как это работает? Давайте рассмотрим на примере создания кнопки. Для этого нарисуем прямоугольник и сделаем закругление углов на 20. Далее сделаем из него компонент при помощи горячих клавиш «Ctrl+Alt+K», или через главное меню в разделе «Object», пункте «Create component».  

создание компонента в Figma После этого переименуем этот компонент и назовем его «Shape». Это необходимо для того чтобы вам было проще понимать, что это основной Shape, из которого вы будете делать все элементы в дизайне.   

переименование компонента в FigmaЗатем копируем Shape при помощи клавиши «Alt». Создадим две копии для двух разных кнопок.

копирование компонента в FigmaВы можете добавить текст, а также использовать заливку цветом. Назовем первую кнопку «entrance», а вторую «exit».

создание кнопок в FigmaДалее выделите отдельно каждую кнопку и нажмите на клавиши «Ctrl+Alt+K», чтобы создать из них отдельные компоненты. Кроме того, переименуем эти компоненты в левой панели.  

создание компонентов в FigmaПосле этого, можно скопировать каждый компонент при помощи «Alt» и создать несколько образцов этих кнопок.

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

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

родительский и дочерний компонты в FigmaТеперь, при внесении изменений в родительском компоненте, все дочерние также будут принимать эти изменения. Например, можно изменить расположение текста в кнопке, или сам текст, изменить размер кнопки или радиус закругления углов. Все эти изменения будут касаться дочерних компонентов. Как видно на иллюстрации кнопка «Exit» (родительский компонент) была изменена по размеру, и все остальные дочерние компоненты также изменились в размере.  

изменение дочерних компонентов через родительский компонент в FigmaТеперь, что касается изначального Shape, то при редактировании этого компонента, вы сможете применять настройки ко всем кнопкам. 

быстрое редактирование объектов во всех компонентах в FigmaЧтобы дать название компонентам необходимо использовать слеш (косая черта). Это позволит создать организованную иерархию все ваших компонентов, что может упростить работу. Ниже представлены шаблоны названий компонентов со слешем:

  • 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».

Итак, вы узнали, как устроены компоненты в Фигме, и как их создавать. Для работы с большими проектами без данной функции просто не обойтись. Она позволит вам экономить массу времени, а также упростит работу верстальщика.    

Полезные ссылки:


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Пройдите, пожалуйста, защиту от спама.