Переменные и условия в прототипах

Переменные и условия превращают прототип в почти настоящее приложение: счётчик корзины, формы, ветвление по логике.

Раньше счётчик товаров или валидацию формы можно было показать только в коде. Теперь — прямо в прототипе Figma, через переменные и условия.

Переменные в прототипах хранят и меняют значения во время прохождения сценария, а условия (conditionals) с if/else-логикой решают, какое действие выполнить. Это открывает то, что раньше требовало разработчика.

Переменные в действиях прототипа

В прототипе можно создать переменную (например число cartCount = 0) и менять её по клику:

1. Создайте number-переменную cartCount со значением 0.
2. На кнопке «В корзину» добавьте действие Set variable: cartCount = cartCount + 1.
3. В тексте бейджа примените эту переменную — он будет показывать актуальное число.
4. Запустите Play: каждый клик увеличивает счётчик.

Счётчик корзины через переменную

  cartCount = 0
   клик «В корзину» -> Set variable: cartCount + 1
   текст бейджа     -> показывает {cartCount}

  клик, клик, клик -> бейдж: 1, 2, 3

Условия (conditionals)

Условие — это правило if/else: действие выполняется, только если условие истинно. Пример — форма входа:

Условный переход (if / else)

  при клике «Войти»:
    IF  password == 1234
        -> Navigate to «Главная»
    ELSE
        -> показать ошибку «Неверный пароль»

1. На кнопке добавьте действие с типом Conditional.
2. Задайте условие, например email не пусто.
3. В ветку If положите переход на успех, в Else — показ ошибки.

Множественные действия

Одна связь может выполнять несколько действий подряд: изменить переменную, переключить вариант и сделать переход — всё по одному клику. Действия добавляются списком в панели связи.

Откуда берутся переменные прототипа

В прототипах используются те же переменные, что и в дизайне (типы number, string, boolean, color), плюс возможность их менять действиями. Поэтому счётчик корзины — это number-переменная, переключатель тёмной темы — boolean, а поле ввода логина можно завязать на string-переменную. Действие Set variable присваивает новое значение, причём значение может быть выражением: cartCount + 1, !darkMode (инверсия), конкатенация строк.

Чтобы показать значение переменной пользователю, привяжите её к тексту слоя через ту же иконку переменной у поля содержимого текста. Тогда при изменении переменной в прототипе текст обновится сам. Так бейдж корзины, поле суммы заказа или приветствие «Привет, {имя}» оживают прямо в режиме Play.

Что реально можно собрать

С переменными и условиями в прототипе реально воспроизвести: рабочий счётчик и корзину, переключатель светлой/тёмной темы (через смену режима переменных), валидацию формы (если поле пусто — ошибка), многошаговый онбординг, реагирующий на ответы, лайк-кнопку с подсчётом. Но помните меру: прототип нужен, чтобы проверить идею и протестировать на пользователях, а не заменить разработку. Делайте ровно столько логики, сколько требует ваша гипотеза, иначе поддержка прототипа съест больше времени, чем сам дизайн.

Горячие клавиши

Частые ошибки

• Забывают применить переменную к тексту. Менять cartCount мало — нужно привязать её к текстовому слою бейджа.
• Путают типы переменных в условии. Сравнивайте число с числом, строку со строкой, иначе условие не сработает.
• Городят сложную логику ради демо. Прототип — не приложение. Делайте ровно столько логики, сколько нужно для теста гипотезы.

Совет профи: ровно столько логики, сколько нужно гипотезе

Переменные и условия открывают соблазн собрать в Figma почти настоящее приложение — со счётчиками, формами, ветвлениями. Это мощно, но коварно: чем сложнее логика прототипа, тем дольше его поддерживать, и тем легче он ломается при правках. Поэтому всегда спрашивайте: «какую именно гипотезу я проверяю этим интерактивом?» Нужно протестировать, понятен ли счётчик корзины — сделайте счётчик, и не больше. Нужно проверить флоу входа — добавьте простую проверку пароля. Не превращайте прототип в second job по программированию без кода. Прототип — это быстрый и дешёвый способ узнать правду о вашем дизайне до разработки. Держите его ровно настолько умным, насколько требует вопрос, на который вы хотите ответить, — и ни на грамм сложнее.

Чек-лист

• Создал переменную прототипа и меняю её по клику.
• Привязал переменную к тексту бейджа.
• Сделал условный переход if/else.
• Собрал связь с несколькими действиями.

Итоги. Переменные хранят состояние, а условия ветвят логику — вместе они дают счётчики, формы и адаптивные сценарии без кода. Это потолок интерактива в Figma. Дальше упаковываем всё в дизайн-систему.