Дизайн
#Руководства

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

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

tesla / youtube

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

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

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

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

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

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

Чекбокс

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

Кнопка

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

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

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

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

Изображение: Skillbox Media

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

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

Пункты меню

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

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

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

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

Изображение: Skillbox Media

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

Изображение: Skillbox Media

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать

Курс

Figma с нуля до PRO

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

Узнать про курс
Обучение: Figma с нуля до PRO Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована