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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итак, компоненты готовы, что дальше? Дальше они собираются в наборы – 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 хотели бы разобрать.