Как работать с компонентами в Figma
Цифровой элемент
5 минут на чтение
2574
Отправь статью на почту?

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

Подписаться

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

Figma компоненты
Figma компоненты

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

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

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

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

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

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

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

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

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

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

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

Демонстрация обновления цвета фона кнопки.gif
Демонстрация обновления цвета фона кнопки

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

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

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

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

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

Создание вариативных компонентов.gif
Создание вариативных компонентов

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

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

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

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

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

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

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

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

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

Простейший пример – список с буллитами.gif
Простейший пример – список с буллитами

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

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

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

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

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

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

Готово!

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

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

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

image010.gif
Наложение элементов

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

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

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

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

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

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

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

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


Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Читайте в нашем блоге

Все статьи
Обзор ключевых инструментов digital-маркетинга

Обзор ключевых инструментов digital-маркетинга

В digital-маркетинге существует множество инструментов, которые помогают специалистам достигать своей целевой аудитории. Давайте рассмотрим как...

29.03.2024
648
Что будет, если не продлить лицензию Битрикс24?

Что будет, если не продлить лицензию Битрикс24?

Битрикс24 – это платформа, которая помогает организовать и автоматизировать бизнес-процессы компании, обеспечивая удобство использ...

04.03.2024
498
Как настроить редирект через .htaccess

Как настроить редирект через .htaccess

Редирект можно настроить разными способами: в панели управления хостингом, через код HTML, через PHP, с помощью web.config, через .htaccess, а ...

04.03.2024
485
Как восстановить доступ в панель администрирования сайта на 1С-Битрикс?

Как восстановить доступ в панель администрирования сайта на 1С-Битрикс?

Через панель администратора сайта на 1С-Битрикс можно управлять настройками сайта, менять контент и так далее. Также там можно заводить новых п...

21.12.2023
1242
Как создать аккаунт разработчика в App Store, Google Play, AppGallery

Как создать аккаунт разработчика в App Store, Google Play, AppGallery

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

08.12.2023
3349
Файлы-куки: как правильно информировать пользователей и избежать штрафов

Файлы-куки: как правильно информировать пользователей и избежать штрафов

Веб-аналитика и маркетинг сегодня немыслимы без использования куки-файлов (cookies) - небольших фрагменты данных, которые веб-сайты сохраняют в...

06.12.2023
917
Безопасность сайта: поиск вирусов и троянов

Безопасность сайта: поиск вирусов и троянов

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

20.11.2023
1029
«Цифровой Элемент» принял участие в Русском Экономическом Форуме

«Цифровой Элемент» принял участие в Русском Экономическом Форуме

Форум посвящен масштабным вопросам развития суверенной экономики России в XXI веке. Среди основных тем: импортозамещение, технологическое разви...

13.11.2023
480