Логические характеристики в компонентах Figma

Привет! Давайте разберемся, что такое логические параметры (Boolean properties) в компонентах Figma. 

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

Для чего нужны boolean properties

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

При этом если в компоненте включен Auto Layout, то при изменении логического параметра все правила будут работать.

Пример работы с логическим параметром

Например, мы делаем кнопку, у которой должны быть:

• Текст (обязательно)
• Стрелочка (опционально)
• Маркировка (тоже опционально)

Ховер и другие состояния мы не учитываем.

Рассмотрим три стратегии для создания этого ассета.

Делаем каждую кнопку отдельным компонентом

Так как мы используем только отдельные компоненты, нам надо предусмотреть каждый вариант исполнения кнопки. Для нашего задания мы получаем 4 отдельных компонента. 

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

Недостатки:

1. Это не системный подход
2. Много дополнительной работы
3. Замена дольше, чем при использовании вариантов или логики

 

Делаем один компонент с вариантами

В данном случае Figma позволяет нам объединить разные элементы в набор вариантов одного компонента. Как видите, нам всё равно надо создать 4 кнопки, но при работе с макетом выбор состояния становится гораздо удобнее.

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

 

С логической переменной

Итак, как видите, у нас всего один вариант одного компонента! Для получения других состояний надо лишь выключить чекбоксы прямо в макете в сайдбаре справа. 

Как использовать Boolean properties

1. Создайте компонент, добавив в него все возможные элементы. Иными словами базовый компонент должен быть в самой максимальной комплектации. Используйте Auto Layout и выравнивание по стороне, где это нужно
2. Выделите слой внутри компонента, перейдите в раздел Layer, найдите там иконку (Apply boolean property) и нажмите на неё. В модальном окне задайте понятное вам название. Состояние флага можно не менять.
3. Выберите Create property чтобы создать новый параметр. Если вы уже создавали логические параметры, то вы можете выбрать существующий
4. Когда вы добавили экземпляр в макет, выделите его. В правом сайдбаре вы увидите чекбоксы — переключите их для изменения

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

Как посмотреть, какие переменные у компонента

1. Выделите компонент
2. В сайдбаре найдите область Properties
3. В списке вы можете отредактировать название или переключить флаг

 

Как поменять/удалить логический параметр для слоя

1. Выделите слой внутри компонента
2. Наведите на тег с названием переменной
3. Чтобы удалить, нажмите на иконку справа
4. Чтобы заменить на существующий или новый, кликните на этот тег
5. В окне выберите/создайте новый

 

Что нам говорит инспектор?

В инспекторе вы также можете посмотреть наличие логических переменных.

 

Помогла ли вам эта статья?