Как работать с компонентами в Figma

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

С введением санкций у российских бизнес-аккаунтов больше нет доступа к корпоративным тарифам Professional Organization и Enterprise. Остались только базовая и бесплатная версии программы.

Если кратко, то Figma это как Sketch или Adobe XD, но с небольшими нюансами. Основная особенность этого редактора – технология облачного хранения и многопользовательский режим доступа. Таким образом, над макетом могут работать одновременно несколько человек, вносить правки, оставлять комментарии. Скачивать при этом ничего не нужно – макет открывается по ссылке. А еще в Figma есть много удобных функций, которые делают работу над проектом быстрее и проще. Одной из таких функций является библиотека компонентов. Рассказываем, что это и зачем, а также о том, как компоненты Figma сделают вашу работу над проектом продуктивнее.

Что есть компоненты и зачем они нужны

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

Пример: вы рисуете кнопку, создаете компонент и копируете его. Если вы поменяете параметры основного компонента, это же случится и с копией.

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

Изменения компонентов одномоментно модифицируют составляющие проекта.

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

Мастер и экземпляр-компоненты

Мастер-компонент (master component) появляется, когда один из элементов интерфейса становится компонентом и приобретает определенные свойства. Копии таких компонентов имеют больше слоев и называются экземплярами (component instances). При изменении мастер-компонентов экземпляры тоже меняются.

На панели слоев по иконке можно определить, какие из элементов – главные компоненты, а какие – экземпляры. Для главных компонентов применяется кнопка с 4 ромбами. Экземпляры обознаются кнопкой только с одним ромбом.

К экземплярам переходят все изменения мастер-компонентов, кроме переопределения свойства и наполнения. При нарушении связи свойств и наполнения можно воспользоваться панелью свойств и восстановить ее.

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

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

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

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

Построение структуры вариантов

Структуру вариантов по свойствам можно создать в настройках компонентов и выбрать нужный вид компонента.

Название блоков

Важно: чтобы наполнение было неизменно, следите за тем, чтобы элементы в вариантах мастер-компонентов в списке слоев были подписаны правильно.

Таким образом, если вариант меняется в свойствах экземпляра, то наполнение компонента можно не менять. Например, если меняется состояние в свойствах компонента, подпись кнопки «Вход» будет неизменной.

Атомарные компоненты

Атомарные компоненты состоят из других компонентов – полностью либо частично. Их также называют вложенными. С их помощью проектирование становится быстрее и удобнее.

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

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

Как создать 0px фрейм

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

• ограничение минимальных размеров элемента;
• вынесение элементов за пределы autolayout;
• наслоение элементов друг на друга.

Здесь пригодится нулевой фрейм. Его можно сделать всего за 3 шага:

1. Создать простой фрейм.
2. Установить высоту и ширину 0,001 [или и то, и другое].
3. Снять галочку с Clip content [если внутри нужно размещать какие-либо объекты].

Готово!

Важно: вводите только 0,001. Figma автоматически округляет значения 0 и 0,01 до единицы, и фрейм создать не получится.

• Наслоение элементов

Добавьте 0px-фрейм в autolayout в ту часть контейнера, которая будет удобной для перемещения блока. Выделите элемент внутри фрейма, затем разместите его в нужном месте.

Наслоение элементов друг на друга готово!

• Вынос фрейма за границы

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

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

Следующим этапом становится создание библиотеки компонентов – ее можно использовать для хранения заготовок интерфейсов. Библиотека интерфейсов оптимизирует труд дизайнера. Общие элементы можно использовать вновь.

Настройка системы компонентов – сложная задача для начинающих работу с Figma. Однако ее решение значительно упростит дальнейшую работу и сэкономит ваше время.

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