Цифровой элемент
5 минут на чтение
1718
Отправь статью на почту?

Как работать с компонентами в 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

13.11.2023
294
Новый закон о запрете регистрации на российских сайтах с помощью иностранных электронных почтовых сервисов

Новый закон о запрете регистрации на российских сайтах с помощью иностранных электронных почтовых сервисов

Давайте разберемся, что это значит для владельцев сайтов и пользователей.

Что именно предписывает закон

С 1 декабря ...

09.11.2023
772
Провели курсы «Управленческие вызовы цифровой среды: инструменты для эффективного управления проектами» для госсектора

Провели курсы «Управленческие вызовы цифровой среды: инструменты для эффективного управления проектами» для госсектора

В октябре наша компания провела ряд онлайн-интенсивов «Современные навыки цифрового лидера» для сектора государственного управления Росс...

26.10.2023
502
Перевод сайта на 1C-Битрикс на PHP 8.x: пошаговая инструкция

Перевод сайта на 1C-Битрикс на PHP 8.x: пошаговая инструкция

Вначале года компания 1С-Битрикс выпустила обновления для всех модулей и штатных компонентов, чтобы они могли работать с PHP 8. Пару месяцев на...

16.10.2023
2732