Как сделать прототип в 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.
• Добавьте своё меню на прототип и проверьте результат. Даже если разместить его на нескольких фреймах прототипа, работать оно везде будет одинаково.
• Также из вашего меню можно сделать ссылку на внешний фрейм прототипа. Для этого свяжите любой из пунктов меню прямо из комбайна с внешним фреймом:

Самоучитель по Figma

Как в Figma сделать что угодно