Как сделать прототип в Figma: интерактивные компоненты

Создаём рабочий чекбокс, радиокнопку и всплывающее меню с умной анимацией.

Иллюстрация: Полина Честнова для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Каждый элемент интерфейса по-своему даёт пользователю обратную связь: меняет цвет, форму, текст, добавляет или убирает что-либо на экране. Делать прототип без компонентов очень сложно, так как вам придётся создавать очень много копий одного и того же экрана.

С помощью функции интерактивных компонентов в Figma вы можете один раз сделать анимацию элемента и затем использовать его во всех своих макетах.

Рассказываем, как анимировать ваши компоненты для прототипа.

Это руководство по продвинутой работе с прототипами и вариантами в Figma. Если вы впервые о них слышите, советуем сначала прочитать предыдущие статьи об этих инструментах:

Базовые интерактивные элементы

Заранее настройте чекбокс, радиокнопку, обычную кнопку и переключатель. Благодаря этому у вас появится «библиотека», из которой вы сможете взять что угодно в любое время.

Чекбокс

Создайте два компонента — отмеченный и неотмеченный чекбоксы. Затем объедините их в комбайн из вариантов.
На правой панели вверху нажмите , чтобы сделать вариант компонента, — у вас появится комбайн из компонентов. Переверстайте новый чекбокс так, чтобы он был не отмечен.
Перейдите на вкладку Prototype и свяжите чекбоксы друг с другом. В параметрах анимации укажите On click и Instant.
Сделайте копию чекбокса и добавьте её в прототип, чтобы проверить, как он работает. При клике внутри чекбокса должна появляться галочка.
Точно так же сделайте радиокнопку.

Переключатель

Создайте цветной переключатель — это будет состояние «включено».
Сделайте для него второе состояние «выключено» — так же, как вы уже делали с чекбоксом и радиокнопкой.
Перейдите на вкладку Prototype и свяжите переключатели. В параметрах анимации укажите On сlick, Smart animate и Linear.
Сделайте копию переключателя и добавьте её на прототип.
Запустите прототип и проверьте переключатель. При клике он должен плавно переключаться из одного состояния в другое.

Кнопка

Создайте два компонента с кнопками — как вы уже делали с чекбоксом и радиокнопками. Первая кнопка — светлая, стандартное состояние, а вторая — тёмная, такой она становится при наведении на неё курсора.
Перейдите на вкладку Prototype и свяжите светлую кнопку с тёмной. В параметрах анимации укажите While hovering и Instant.
Сделайте копию светлой кнопки и добавьте её в свой прототип.
Запустите прототип и проверьте кнопку. При наведении курсора она должна менять цвет.

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

Всплывающее меню с умной анимацией

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

Пункты меню

Создайте белый фрейм с текстом внутри. По желанию можно добавить иконку.
Сделайте из кнопки компонент и добавьте состояние наведения курсора, как вы уже делали с кнопкой до этого.
Перейдите во вкладку Prototype и свяжите белый фрейм с цветным. В параметрах анимации укажите While hovering.

Анимация меню

Выставьте в ряд несколько копий неактивных пунктов меню.
Объедините их во фрейм и снизу добавьте кнопку, которую вы сделали раньше. Объедините всю эту конструкцию во фрейм.
Сделайте из фрейма компонент и добавьте его копию . В копии уменьшите конструкцию из пунктов меню и задайте непрозрачность 0%.
Перейдите во вкладку Prototype и свяжите «бургер» из фрейма с меню с фреймом без меню. В параметрах анимации укажите On click и Smart animate.
Теперь свяжите кнопку из фрейма без меню с фреймом с меню. В параметрах анимации укажите On click и Smart animate.
Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково.
Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом: