Conditional в Figma: if/else, переменные и несколько действий
Кликабельный прототип обычно линейный: экран, кнопка, следующий экран.
Как только появляется «если товар дороже — доставка бесплатная», нужна условная логика.
Что это
Документация: conditional — действие, которое проверяет условие и выполняет другие действия в зависимости от результата.
Логика стандартная: if/else.
Практика: условие — это булево выражение, у него ровно два исхода.
Где найти
Документация: выберите триггер, затем в списке Actions выберите Conditional.
Появляются поля If и Else.
Практика: в новых версиях интерфейса это же действие подписано «Check if/else».
Выражения
Документация: в поле If пишется булево выражение, которое вычисляется в true или false.
Если true — срабатывают действия из блока If, если false — из блока Else.
Практика: выражения используют переменные: счётчики, переключатели, строки.
Переменные
Документация: переменные задаются в файле, а действие Set variable меняет их значение в прототипе.
Есть типы: число, строка, булево значение, цвет.
Практика: без переменных условия бессмысленны — проверять нечего.
Несколько действий
Документация: на один триггер можно навесить неограниченное число действий.
Они выполняются по порядку.
Практика: это позволяет в одном клике и записать значение, и перейти на экран, и показать оверлей.
Порядок
Практика: порядок действий критичен.
Если сначала проверить условие, а потом изменить переменную, условие увидит старое значение.
Практика: сначала Set variable, потом Conditional — если логика зависит от нового значения.
Else можно оставить пустым
Практика: это штатный приём.
Пустой Else означает «ничего не делать»: например, кнопка не работает, пока чекбокс не отмечен.
Практика: так делают валидацию форм без единого дополнительного экрана.
Вложенность
Практика: вложенных условий в одном действии нет.
Вместо этого ставят несколько отдельных условий подряд: каждое проверяет своё.
Практика: и помните, что Figma прогоняет все условия при каждом срабатывании — порядок важен.
Пример
Практика: сценарий с корзиной.
Клик по кнопке «Оформить»: Conditional — если сумма больше порога, Set variable «доставка» = 0, иначе Set variable «доставка» = стоимость. Затем переход на экран итога.
Практика: две переменные и одно условие — этого достаточно для рабочей демонстрации.
Отладка
Практика: проверяйте оба исхода.
Пройдите сценарий с выполнением условия и без него. Если второй путь не проверен, вы не знаете, работает ли Else.
Практика: для наглядности выведите значения переменных в текстовый слой.
Ограничения
Практика: прототип — не код.
Циклы, сложные вычисления и работа с массивами здесь не предусмотрены. Если логика требует большего, её показывают отдельными экранами.
Практика: не пытайтесь воспроизвести в прототипе весь бэкенд.
Порядок работы
- Заведите переменные.
- Соберите экраны.
- Добавьте триггер.
- Вставьте Conditional.
- Напишите выражение.
- Опишите действия If.
- Опишите действия Else.
- Проверьте оба пути.
Практика: шаг 8 отличает прототип от картинки.
Где ломается
Условие всегда false. Переменная не задана или задана в другом наборе.
Действия не срабатывают. Условие стоит раньше изменения переменной.
Несколько условий конфликтуют. Порядок проверок не продуман.
Прототип «застревает». Else пуст, а путь без условия не предусмотрен.
Значение не обновилось. Set variable стоит на другом экземпляре.
FAQ
Как добавить условие?
Выбрать триггер и действие Conditional.
Нужны ли переменные?
Да, условие проверяет их значения.
Можно ли несколько действий сразу?
Да, без ограничений, по порядку.
Можно ли оставить Else пустым?
Да, тогда при false ничего не произойдёт.
Есть ли вложенные условия?
Нет, вместо них ставят несколько условий подряд.
Зачем это нужно
Практика: условная логика делает демонстрацию убедительной.
Без неё клиент видит линейный клик-путь и не понимает, как продукт поведёт себя при ошибке, пустом поле или другом выборе. Одно условие закрывает этот пробел без разработки.
Практика: одной-двух проверок достаточно, чтобы показать сценарий.
Типы значений
Практика: переменные бывают числовые, строковые, булевы и цветовые.
Для условий чаще всего нужны булевы: «отмечено» или «нет». Числовые используют для порогов: сумма, количество, шаг. Строковые — для выбранного варианта.
Практика: чем проще тип, тем меньше ошибок при демонстрации.
Проверка выражения
Практика: синтаксис похож на код, но прощает меньше.
Сравнение — двойное равно, строки в кавычках, переменные по имени. Опечатка в имени даёт не ошибку, а тихо ложное условие.
Практика: если условие не срабатывает, первым делом проверьте написание переменной.
Демонстрация клиенту
Практика: подготовьте два прохода.
Первый — «всё правильно»: чекбокс отмечен, данные введены. Второй — «пользователь ошибся»: пустое поле, неподходящая сумма. Показать оба пути важнее, чем отполировать анимацию.
Практика: запишите оба прохода коротким видео — пригодится для обсуждения.
Практический пример: чекбокс
Практика: самый наглядный случай — согласие с условиями и кнопка «Продолжить». Заводится булева переменная со значением false. Клик по чекбоксу меняет её на true. У кнопки стоит Conditional: если переменная true — переход на следующий экран, иначе ничего. Дальше добавляется визуальная обратная связь: неактивное состояние кнопки связано с той же переменной через вариант компонента. В результате прототип ведёт себя как форма, хотя в нём нет ни строчки кода, а клиент видит ровно тот сценарий, который потом будет реализован.
Практический пример: корзина
Практика: второй случай — порог бесплатной доставки. Переменная «сумма» задаётся числом, условие сравнивает её с порогом. Если сумма больше — Set variable делает доставку нулевой и показывает зелёную плашку, иначе оставляет стоимость и показывает обычный текст. Важно, что обе ветки проверяются вручную: пройдите сценарий с маленькой суммой, потом с большой. Если вторая ветка не проверена, вы не знаете, работает ли Else, и на демонстрации это выяснится в самый неподходящий момент.
Что проверять перед показом
Практика: перед демонстрацией пройдите сценарий на свежую голову. Перезапустите прототип, проверьте начальные значения переменных, убедитесь, что кнопки не «залипли» в состоянии после прошлого прохода. Добавьте экран сброса, если прототип будут показывать много раз подряд. И держите под рукой заметку со списком условий и переменных: на встрече это быстрее, чем искать их по слоям, пока клиент ждёт.