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

Создать компонент можно двумя способами:

Выделить элемент -> нажать ПКМ -> найти пункт "Create component" Использовать горячие клавиши: Ctrl + Alt + K После создания компонента мы увидим, что вокруг появилась фиолетовая рамочка.

Работа с созданным компонентом:

Компоненты в Figma могут иметь различные состояния и варианты, которые удобно переключать прямо в рамках программы. Вы можете создавать компоненты-кнопки с разными стилями наведения, компоненты-карты с различными версиями информации и многое другое.

Когда элемент интерфейса становится компонентом, создается мастер-компонент, который определяет его свойства, такие как:

• Размер и расположение элементов внутри компонента. • Основной стиль (цвет, шрифт, тень и прочее) элементов компонента. • Эффекты и переходы, применяемые к компоненту.

Автоматически повторяющиеся элементы или группы элементов. Взаимодействие (interactivity) элементов внутри компонента, если это необходимо.

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

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

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

Варианты компонентов

Перед созданием вариантов, необходимо правильно назвать компоненты, чтобы иметь возможность быстро переключаться между вариантами. Для этого используется /. Название будет выглядеть следующим образом:

Название элемента/Значение первого свойства/Значение второго свойства/…/

Например: Button/Hover/Icon

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

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

В данном после мы разобрали лишь базовую настройку компонентов, которая позволит вам не только ускорить работу, при создании дизайна, но и создать правильный UI-кит, что при сдаче проекту на верстку, значительно упростит понимание вашего дизайна