Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

В прошлой статье Перешел в Figma и не жалею мы рассказали про путь освоения Figma, а также зачем это нужно аналитику. Эта статья продолжает цикл статей по Figma. В ней мы подробнее расскажем, что такое компоненты и UI Kit, как с ними работать и зачем они нужны. Переходить к изучению компонентов стоит, когда вы уже знаете основы работы в Figma.

Баринова Екатерина
Консультант по внедрению Directum RX

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

Любой элемент, будь то поле ввода или панель действий, повторяющийся в дизайне несколько раз – идеальный кандидат в компоненты.

Компонент – это классная штука, потому что:

  • компонент можно создать из любых слоев или других компонентов
  • компонент можно переиспользовать
  • компоненты можно менять с помощью свойств, не проваливаясь в слои

Использование компонентов экономит время, ведь они создаются один раз, а используются сразу в нескольких местах и в нескольких вариантах.

Как создать компонент

Один из способов создать компонент – выбрать нужный объект и нажать на кнопку Create component(создать компонент) в середине верхней панели – иконка с четырьмя ромбами. Слои компонента станут фиолетового цвета и возле имени слоя появится иконка компонента.

Мы получили родительский компонент, из него мы можем создать дочерний компонент или Экземпляр(Instance). Один из способов сделать это – переключиться из вкладки Layers на вкладку Assets, найти наш компонент и перетащить его в нужное место.

У компонента может быть несколько экземпляров. Я перетащила один из Assets и продублировала его ещё два раза с помощью комбинации Ctrl+D. Если теперь посмотреть на левую панель слоев, мы увидим, что слой с Компонентом возле имени содержит значок из 4-ех ромбиков. А три слоя, которые я перетащила и скопировала – значок с 1 ромбиком. Так можно различать Компоненты и Экземпляры, родительский и дочерние компоненты.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Изменение компонентов

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

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

Изменения экземпляра, называются Overrides или переопределением параметров. Они не затрагивают родительский компонент и другие его экземпляры.

Перезаписанные у дочернего компонента параметры больше не реагируют на их изменение в родительском компоненте.

Чтобы вернуть связь с родительским компонентом, нажмите на три точки возле названия экземпляра и выберите Reset all changes. Если вы наоборот хотите, чтобы изменения экземпляра применились и к родителю, выберите Push changes to main component.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Таблица с тем, что можно, а что нельзя переопределить в экземпляре:

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Если вам нужно изменить то, что нельзя, “открепите” дочерний компонент от родительского компонента. Для этого на правой панели у экземпляра, возле его названия, нажмите на три точки и выберите Detach instance.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Свойства компонентов

У Компонента могут быть Свойства(Properties) четырех видов:

  • Variant – вариант. Позволяет переключаться между вариантами одного компонента.
  • Boolean – логическое свойство. Отвечает за видимость слоев.
  • Instance swap – изменить экземпляр. Компонент может содержать внутри себя экземпляры других компонентов. Свойство используется для переключения между экземплярами разных компонентов.
  • Text – текстовое свойство. Применяется к текстовым слоям. Позволяет легко менять текст в дочерних компонентах.

Свойства связываются с параметрами слоев. На правой панели в разделе Свойства(Properties) можно добавлять, удалять и настраивать свойства Компонента.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Свойство Variant(Вариант)

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

Давайте добавим варианты в наш компонент. Если выбрать созданный компонент, в середине верхней панели будет кнопка – Добавить вариант(Add variant) – ромб с плюсом внутри.

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

Я создала 4 варианта иконок. Назвала компонент “Иконки”, свойство – “Выбор иконки” и дала вариантам соответствующие имена. Обратите внимание, что в слоях, возле названия варианта, отображается иконка ромба с заливкой.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Варианты активно используются при создании интерактивных прототипов, но это уже тема для отдельной статьи ;)

Свойство Text (Текст)

С помощью этого свойства можно легко менять все текстовые слои в компоненте.

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

Его можно задать двумя способами:

  • Сначала создать свойство на правой панели в разделе свойств, а потом связать его с нужным слоем.
  • Выбрать слой с текстом, на правой панели в разделе текста, справа от окошка ввода появится кнопка Apply/create text property – создать/выбрать текстовое свойство.

Сначала я создала текстовое свойство “Текст на кнопке”, затем выбрала слой с текстом, нажала на Apply text property и выбрала новое свойство.

Текст и свойство теперь связаны, поле ввода стало фиолетовым и показывает название свойства:

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Свойство Instance Swap(Переключить экземпляр)

Это свойство позволяет переключать экземпляры внутри компонента. Связать с этим свойством можно только слои с дочерними компонентами.

Соединим иконку и кнопку. Перетащим из вкладки Assets компонент иконки внутрь кнопки.

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

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Ещё я создала копию компонента с иконками, где перекрасила все значки в черный. Теперь есть два разных компонента – Иконки цветные и Иконки черные.

Добавим новое свойство. Выберем экземпляр иконки в слоях компонента Кнопка. На правой панели возле названия экземпляра нажимаем на кнопку Create instance swap property.

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

Открывается диалоговое окошко. Name – название свойства. Value – компонент. Preferred values – компоненты, которые будут доступны для выбора.

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

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Но как теперь нам поменять саму иконку, например, на крест? Чтобы это сделать, нужно в правой панели родительского компонента нажать на плюс и выбрать Expose properties from Nested instances.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Слева – Компонент, Справа – Экземпляр
Слева – Компонент, Справа – Экземпляр

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

Свойство Boolean(Логическое)

Данное свойство позволяет скрывать ненужные слои или группы слоев.

Нам не всегда нужна иконка в кнопке. Воспользуемся свойством Boolean.

Для этого выберем слой, который хотим скрывать. На правой панели, возле названия раздела Layer нажимаем на кнопку Create boolean property.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Появится окошко с параметрами. Name – это имя нового свойства. Value – может быть True или False.

Сейчас у нас показывается иконка, поэтому выберу значение True. Если выбрать False, то выбранный слой скроется. У экземпляра появится новое свойство с переключателем.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

То есть, когда я скрываю иконку с помощью Boolean свойства, свойства “Иконка у кнопки” и “Выбор иконки” пропадают, т.к. они связаны со скрытым слоем.

Как переключаться между компонентами и вариантами

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

Как изменить вариант

При нажатии правой кнопкой мыши на экземпляр, наведите на Change variant. Откроется список свойств с типом Variant, их может быть несколько у одного компонента. Из этого списка откроется другой, с вариантами.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Как изменить компонент

Компонент меняется также, как варианты. Только теперь нужно выбрать Swap instance, где и откроется список доступных компонент.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

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

Если вам нужен список всех компонентов, нажмите на название экземпляра на правой панели. Выйдите из текущего списка элементов, нажав на его название, к списку всех компонентов и выберите нужный.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Использование компонентов

Итак, компоненты готовы, что дальше? Дальше они собираются в наборы – UI Kit. Можно создать собственный UI Kit или взять готовый, например, из этой подборки: Add a little magic to your files – Figma. Сообщество Figma активно делится своими наработками.

Внутри UI Kit помимо компонентов могут быть правила оформления, размеры отступов, используемые шрифты, цвета. Такие правила помогают придерживаться единого стиля. Благодаря этому, разные люди могут делать каждый свои дизайны для одного и того же проекта.

Самый простой способ использовать UI Kit – скопировать нужные компоненты к себе в дизайн. Вы получите дочерние компоненты. Как вы помните, для того, чтобы внести глобальные изменения в дочерние компоненты, нужно изменить родительский компонент.

Если UI Kit принадлежит не вам и у вас нет прав на редактирование, изменить его не получится. Но все еще можно воспользоваться функцией Detach instance в его экземплярах.

Если же вы измените компонент в самом UI Kit, все его экземпляры получат эти изменения, во всех дизайнах, где они используются. Но Figma не применит эти изменения сразу, а только предложит обновить свойства дочерних компонентов. Вы по-прежнему сможете использовать их “старые” версии.

Сообщение об обновлении компонентов
Сообщение об обновлении компонентов

Это основное, что нужно знать о компонентах. Но не всё. Остальное можно узнать уже на практике. Так что дерзайте!

Используя компоненты и их свойства, можно достичь такого уровня гибкости, при котором не понадобится создавать новые элементы. Лишь вносить изменения в существующие. А сэкономленное время можно потратить на другие полезные занятия🙂

Небольшой бонус для тех, кто дочитал до конца

В Figma есть полезная функция выбора объектов с одинаковыми параметрами. Выберите какой-нибудь экземпляр. Перейдите на вкладку Edit, затем Select all with. В следующем выпадающем списке обратите внимание на 2 последние строчки: Select all with same instance и Select all with same variant. Выбрав одну из них, выделятся или все такие же экземпляры или такие же экземпляры, с тем же вариантом соответственно.

Аналитик вкатывается в Figma. Практический гайд. Часть 1 - Компоненты

Поделитесь в комментариях, интересна ли тема компонентов и какие еще аспекты использования Figma хотели бы разобрать.

55
3 комментария

Привет! Спасибо за подробный гайд! Может быть ты знаешь как добавить уже существующий элемент в компонент сет?
Кейс такой, у меня есть кнопки для андроида разной вариативности в компонент сете, сейчас я адаптирую свой дизайн под айос. Я взяла готовую айос кнопку и хочу ее добавить в свой компонент сет.

Ответить

А что происходит, если просто копировать себе? Если привязка остаётся к публичной библиотеке, то можно, к примеру, отвязаться действием Detach instance и потом создать свою компоненту из готовых элементов с необходимыми настройками.

Ответить