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

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

tesla / youtube

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

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

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

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

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

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

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

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

Чекбокс

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

Кнопка

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

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

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

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

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

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

Пункты меню

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

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

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