Как собрать прототип в Figma на variables 👨‍💻

Привет! 👋 Меня зовут Роберт Валишин и я тим-лид команды дизайна B2B проектов. В компании наш отдел занимается разработкой интерфейсов для CRM систем, которые позволяют сотрудникам взаимодействовать с пользователями и компаниями-партнерами.

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

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

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

В Figma на панели Design в разделе Local variables нажмите на кнопку Open variables. В открывшемся диалоговом окне создайте переменную String, нажав на кнопку Create variable.

Далее, соберите компонент поля суммы в двух состояниях Default и Active. Настройте, чтобы при нажатии в поле оно меняло состояние с первого на второе. Сделать это можно на панели Prototype в разделе Interactions.

Выделите текст «0,00» в поле в состоянии Active. На панели Text нажмите на кнопку Apply variable и выберите переменную Value.

Далее, нам необходимо добавить значения, которые можно вводить в поле суммы. Весь процесс будет происходить на вкладке Prototype.

Выделите текст «0,00» и на панели Prototype в разделе Interactions добавьте новое взаимодействие. В выпадающем списке выберите Key/Gamepad.

Нажмите любую цифру в поле Press key, при нажатии на которую будет стартовать сценарий. Я использовал цифру 5.

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

В блоке If мы указываем, что наш текст с именем Value будет иметь значение по умолчанию равное 0,00. Далее мы добавляем действие (кнопка Add action) и выбираем Set variable, где выбираем переменную String с именем value и указываем значение переменной равное 5.

В блоке else выбираем Set variable и переменную Value, где нужно будет указать значение, которое мы указали в блоке If – цифра 5.

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

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

В диалоговом окне Local variables добавляем необходимые переменные Boolean для элементов:

Для иконки Up указываем значение False, так как будем включать при клике в поле. Иконку Down – True, потому что она отображается по умолчанию.

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

Добавляем переменную с именем Number и значение равное 0 – оно будет отображаться в поле по умолчанию.

А теперь настроим поведение для каждого элемента. Начнем с селекта. Вам необходимо собрать компонент со всеми элементами (Label, Input, Icon) в двух состояниях Default и Active.

В состоянии Active выберите текст «Выбрано: 0» и примените к нему переменную Placeholder. После того, как вы примените переменную, текст в поле пропадет. Не переживайте, так как позже мы настроим его появление по команде.

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

Давайте создадим компонент Dropdown и наполним его данными. В нашем компоненте будут использоваться чекбоксы, поэтому их необходимо сделать заранее в двух состояниях Default и Active.

Скопируйте готовый компонент и вставьте его в нужное место вашей формы. Здесь рекомендую использовать Absolut position, чтобы настроить расположение списка вручную.

Примените к нему переменную Dropdown. После того как вы примените переменную компонент «пропадет», так как значение переменной по умолчанию False. В будущем мы настроим отображение компонента через настройки интерактивности.

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

Примените к компоненту тег переменную Tag. После того как вы назначите переменную компонент «пропадет», так как значения переменной по умолчанию False.

Теперь перейдем к настройке поведения наших компонентов. Выполните шаг за шагом следующие настройки для компонента поля с выпадающим списком. Все настройки производите на вкладке Prototype в блоке Interactions.

После настройки необходимых параметров, мы можем запустить презентацию нашего прототипа, нажав кнопку Play в правом верхнем углу на панели инструментов в Figma.

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

Создадим новую коллекцию переменных и назовем ее Selected tag. Добавьте несколько значений (Figma позволяет добавить 4 значения бесплатно) типа Boolean. В заголовке колонок вместо текста Value (или Mode, если колонок несколько) задайте названия, чтобы было проще работать с компонентами.

После добавления переменных можно закрыть таблицу. Выберите группу тегов, которая появляется под нашим полем.

Выделите на панели слоев Figma нужный компонент тега и в разделе Layer в правой части экрана кликните правой кнопкой на иконке глазика и выберите из списка переменную Sel tag, которая входит в коллекцию Selected tag созданную ранее.

После выбора переменной в разделе Layer вы увидите дополнительное поле со списком значений. Данное поле позволяет применить переменную к одному из нескольких тегов. Это даст нам возможность настроить поведение на необходимые компоненты в форме.

В форме я использовал три тега. Название тега и переменной должны совпадать, чтобы нам было проще ориентироваться в процессе работы с прототипом. Я использовал названия Bingo, Keno и Mini slots.

Теперь давайте настроим поведение для иконки крестика, который находится в теге. Выделите иконку крестика внутри компонента тега и на вкладке Prototype в разделе Interactions добавьте поведение по клику (On click).

Выберите действие Set variable, затем созданную раннее переменную Sel tag и установите значение False. Теперь при клике на иконку крестика тег будет скрываться из группы выбранных значений.

В результате сборки прототипа на Variable теперь нет смысла копировать и создавать слои и компоненты в разных состояниях в большом количестве. Теперь основная работа связана с созданием и добавлением переменных и настройкой свойств и поведения.

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

Спасибо, что дочитали до конца 😘