Как использовать свойства компонентов в Figma

Недавно Figma анонсировала новые функции, одно из которых это возможность задавать свойства компонентов (Component Properties). Чтобы разобраться как его правильно использовать, я взяла существующий компонент “текстовое поле” и пересобрала его с использованием свойств.

Пример компонента

Кто уже долго пользуется Figma, должно быть помнит что раньше для навигации по компонентам нужно было задавать правильные названия и создавать вложенности (папки). Потом в Figma были добавлены варианты, что еще больше упростило навигацию и позволило с легкостью заменять один компонент на другой. Но несмотря на все преимущества этого подхода, чтобы создать сложный компонент, нужно было прорисовать каждый его вариант отдельно, а это сильно загромождает дизайн систему.

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

Пример использования свойств

Чтобы детальнее разобраться со свойствами, вы можете скопировать себе пример Figma-файла с уже готовым компонентом текстового поля.

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

Шаг 1

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

  • заголовок (label text);
  • текст (input text);
  • ошибка (error text);
  • префикс;
  • вспомогательный текст (helper text);
  • иконка.
Свойства текстового поля

Для разных вариантов может использоваться разная комбинация свойств. Например, для состояния “Empty” используется только “Label Text”, для состояния “Filled” - нужен уже “Label Text” и “Input Text”, для для состояния “Error” к предыдущим свойствам еще добавится “Error Text” и т.п.

Шаг 2

Далее зададим каждому элементу конктеное свойство. Например чтобы добавить иконку в свойства, нужно ее выделить, и боковом меню выбрать “Apply instance swap property”. После в появившемся окне задать название и выбрать отображение.

Добавление иконки в свойство компонента

Чтобы добавить возможность включать/выключать видимость иконки, для слоя необходимо задать свойство True/False. Для этого нужно снова выделить слой с иконкой и в боковой панели в блоке “Layers” выбрать “Apply instance swap property”, далее в появившемся окне задать свойства видимости этого слоя.

Включение/выключение видимости иконки

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

Далее добавим в свойства текст. Для этого нужно его выделить и в боковой панели в блоке “Content” задать название для этого текста. Все эти манипуляции необходимо проделать для каждого текcтового элемента.

Добавление текста в свойство компонента

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

Пример использования свойств

Как итог с помощью свойств сами компоненты стали выглядеть намного чище, а навигация по ним стала проще.

Спасибо, что прочитали эту статью, если было полезно, дайте знать клапсом 👏. Вы можете клапсануть до 50 РАЗ.

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Natali Vdovchenko

Natali Vdovchenko

More from Medium

Understanding artboards in Figma

Axure Advanced Tutorial: Drag Table Items to Automatically Sort

Designing Together With Figma

How Libraries work on Figma