Как сделать прототип в 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.

Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково:

Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:
