Figsight #7: Добавляем логику. Часть 1

Сегодня мы обсудим интересную задачу: как воссоздать булеву логику для Component property в Figma, если её там нет? Давайте разберёмся в этом исследовании.

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

Предположим, что нам необходимо реализовать следующее поведение: верхний и нижний отступ всегда включены, когда включен хотя бы один из текстовых слоёв (логическое OR), а отступ между слоями включен, если оба слоя включены (логическое AND).

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

У нас есть два булевых значения: видимость слоя Headline и Body. Нужно придумать такие конструкции, которые будут иметь заданную высоту при определённых значениях и нулевую в других случаях.

Начнем с конструкции, соответствующей логической операции OR. В случае вертикального отступа такой вентиль можно реализовать с помощью горизонтального автолэйаута (АЛ), включающего три слоя: два нулевых фрейма с необходимой высотой отступа (соответствующие двум входам) и полностью нулевой фрейм для компенсации изначальной высоты (трюк AL Size Compensation). Этот отступ становится нулевым только если оба входа выключены (равны нулю), и равен заданной высоте во всех других случаях.

Отлично! Теперь переходим к вентилю AND. С ним оказалось всё не так просто. Напомню, что этот отступ всегда нулевой, кроме случая, когда оба входа включены. Это значит, что нам нужно создать необходимый барьер. Возьмем вертикальный АЛ, в котором будут два фрейма-входа с нужной высотой и нулевой фрейм-компенсатор. Но этого недостаточно для корректной работы отступа. Нужно добиться нулевого значения при активации только одного из отступов, добавив отрицательный паддинг снизу или сверху. Мы можем сделать это с помощью трюка Negative Paddings из первой статьи.

Неплохо! Остался только вентиль NOT. Как мы уже знаем, АЛ в Figma сохраняет свои первоначальные значения высоты и ширины, даже если внутри него находится объект с выключенной видимостью.

Можем ли мы использовать это свойство? Конечно! Создадим фрейм с нужной высотой отступа, обернём его в АЛ, выставим у АЛ Hug, затем отключим видимость фрейма и сделаем его нулевым. Мы перехитрили Figma — отступ появляется, только если фрейм внутри «выключен». Однако при повторном включении/выключении фрейма первоначальный эффект не воспроизводится. Но и это можно решить, сделав такой отступ компонентом — тогда его инстанс всегда будет следовать первоначальной логике.

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

Пример в фигме доступен по ссылке