Привет! 👋 Меня зовут Роберт Валишин и я тим-лид команды дизайна 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 для элементов:
- Placeholder в поле
- Dropdown (список значений для выбора)
- Tag (список выбранных значений под полем)
- иконки, которые обозначают состояние поля Default или Active
Для иконки 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.
- Настройте изменение состояния (Change to) при нажатии (On click) .
- Так же в настройках интерактивности на нужное количество чекбоксов добавляем действие (Add action) Set variable, где выбираем переменную «Number» to «Number + 1». Теперь при клике на чекбокс в поле появится счетчик выбранных значений, а каждое нажатие на чекбокс в списке будет увеличивать или уменьшать значение счетчика.
- Добавьте действие Set variable для переменной Placeholder и выберите значение True. При активации чекбокса вы увидите в поле количество выбранных значений в выпадающем списке.
- Добавьте последнее действие Set variable для переменной Tag и выберите значение True. Теперь при активации чекбокса под полем появится выбранное значение в виде тега.
После настройки необходимых параметров, мы можем запустить презентацию нашего прототипа, нажав кнопку 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 и которые позволят облегчить пользователю понимание того, как будет работать будущая форма.
Спасибо, что дочитали до конца 😘
