обзор самых востребованных
дизайн-профессий в 2024 году

Как сделать анимацию в Figma

Как сделать анимацию в Figma
21 февраля, 2024
9 мин

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

Создание прототипа

Инструментом для создания анимации в Figma является прототип. Перейдя во вкладку Prototype, вы увидите основные настройки:

  • Device — выбор устройства, на котором будет отображаться прототип.
  • Background — цвет фона.
Как сделать анимацию в фигма

Триггеры — взаимодействия в Figma указывают, как пользователь должен воздействовать на элемент интерфейса. Клик, наведение курсора и другие действия нужны для того чтобы вызвать события, связанные с этим элементом, такие как переход на другую страницу или демонстрация стиля наведения курсора.

триггеры для анимации в фигме

Триггеры активируются в разные временные промежутки:

  • On click / On tap — нажатие на точку доступа в прототипе.
  • On drag — перетаскивание элемента на экран.
  • While hovering — наведение курсора мыши на точку доступа.
  • Keyboard / Gamepad shortcuts — считывание нажатий клавиатуры, в том числе сочетаний.
  • Mouse enter — показывает фрейм назначения, если мышь наведена в специальную область.
  • Mouse leave — показывает целевой кадр, когда курсор покидает специальную область.
  • Mouse down (Touch down) — запускает целевой фрейм при первом нажатии мыши или сенсорной панели.
  • Mouse up (Touch up) — запускает целевой кадр, когда вы отпускаете мышь или сенсорную панель.
  • After delay — позволяет запускать событие спустя указанное время.

Анимация прототипа

Помимо триггеров, мы можем выбирать разную анимацию:

  • Instant — мгновенно отображает фрейм назначения.
  • Dissolve — фрейм назначения будет плавно показан поверх исходного (Fade in).
  • Smart animate — ищет совпадающие слои, распознает различия и анимирует слои между кадрами в прототипе.
  • Move in / Move out — фрейм назначения будет выезжать и перекрывать исходный фрейм.
  • Push — фрейм назначения будет выталкивать исходный фрейм.
  • Slide in / Slide out — перемещение с растворением.
анимация прототипа в фигме

Виды взаимодействий

Вид взаимодействия определяет, что именно произойдет после события, вызванного одним из триггеров:

  • Navigate to — переход от одного фрейма к другому.
  • Change to — смена одного элемента на другой.
  • Back — переход назад.
  • Set variable — установка переменной.
  • Conditional — добавление условия.
  • Scroll to — пролистывает текущую страницу до вложенного элемента или фрейма.
  • Open link — открытие ссылки.

Open / Swap / Close overlay — открывает/меняет/закрывает целевой фрейм, который был открыт поверх исходного.

настройка анимации при наведении курсора

Разберем пример анимации наведения курсора на кнопку и последующее нажатие на нее (Hover effect).

кнопка в фигме

Создание кнопки 

Начнем с создания кнопки и одного эллипса размером 1×1 px. У эллипса будет белая заливка Fill, а у кнопки — белая обводка Stroke с закругленными углами. Эллипс мы поместим в центре кнопки таким образом, чтобы его не было видно.

создание кнопки в фигме, которую будем анимировать

Далее нужно обернуть нашу кнопку и эллипс во фрейм. Для этого выделяем кнопку и эллипс, нажимаем правой кнопкой мыши в левой области слоев и выбираем из списка Frame selection или нажимаем Ctrl + Alt + G.

обертка кнопки во фрейм

Закругляем углы у фрейма, как и у самой кнопки. Поставим галочку Clip content для того, чтобы содержимое фрейма не выходило за его границы.
Первое состояние кнопки готово; переименуем фрейм на Default и сделаем копию этой кнопки с помощью сочетания горячих клавиш Ctrl + D.

скругление углов кнопки

Копию переименуем в Hover и переместим эллипс в слоях под кнопку. Размер эллипса увеличиваем до тех пор, пока он не заполнит все пространство фрейма — в нашем случае это значение 270×270 px. Выравниваем его по центру по вертикали и горизонтали.

окружность фигма

Также нам нужно поменять цвет заливки текста в кнопке. Ранее он был белым, меняем на черный. Второе состояние кнопки тоже готово.

цвет заливки текста в кнопке

Снова делаем копию кнопки с помощью сочетания горячих клавиш Ctrl + D. Назовем ее Pressed и поменяем цвет заливки (Fill) у эллипса на более темный оттенок, чтобы при нажатии на кнопку она немного потемнела. Это будет подсказывать пользователю то, что он действительно на нее нажал.

На этом этапе мы сделали оформление трех кнопок, которые будут показывать разные состояния: обычное, при наведении и при нажатии.

Настройка действий кнопки 

Переходим в раздел Prototype для того, чтобы настроить триггеры между кнопками.

настройка действий кнопки в фигме

Выделяем три кнопки вместе и нажимаем на иконку компонента. Из меню выбираем функцию Component set для создания библиотеки с вариантами кнопок.

создаем библиотеку вариантов кнопки

Нам остается только связать эти кнопки между собой.
Для этого выделяем первую кнопку Default и тянем от нее связь до второй кнопки Hover.

связь между состоянием кнопки в фигме

У вас появится окно с настройками перехода. По умолчанию установлено значение On click — переход через клик. Нам нужно поменять это значение на While hovering — переход при наведении курсора.

Выделяем вторую кнопку Hover и тянем от нее связь до третьей кнопки Pressed. Значение On click меняем на While pressing — это переход при удержании нажатия курсором. Мы настроили связь между кнопками. Осталось только посмотреть, что у нас получилось, в режиме анимации.

эффект при удержании нажатия курсором фигма

Анимация кнопки 

Для этого с помощью инструмента Frame создадим фрейм любого размера — мы выбрали размер 1280 x 832 px. Также важно добавить кнопку Default внутрь этого фрейма.

фреймы в фигма

Во вкладке Prototype выбираем в Device такой же пресет.

выбор device в фигме

Выделяем фрейм и запускаем прототип, нажав на иконку Present.

запуск анимации в фигме

Открывается дополнительное окно прототипа, где мы сможем посмотреть анимацию кнопки. 

получилась анимации кнопки в фигма в разных состояниях

Создание слайдера 

Мы сделали несложную анимацию кнопки.А теперь давайте разберем анимацию слайдера. Пример, который мы покажем, — это переключатель темной и светлой темы в мобильном приложении.

Начнем с первого состояния слайдера — активная светлая тема.

переключатель темной и светлой темы в figma

Состоять слайдер будет из:

  • векторной иконки полумесяца;
  • векторной иконки солнца;
  • эллипса;
  • прямоугольника с закругленными углами.

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

второе состояние кнопки-слайдера в фигме

Поменяем цвет заливки фонового прямоугольника на более светлый оттенок.

Делаем еще одну копию и те же действия, смещая вправо слайдер и осветляя фон.

добавили 3 состояния слайдера

Снова копируем фрейм и показываем второе состояние слайдера.

и четвертое состояние кнопки слайдера

Во втором состоянии у нас будет активна темная тема. Здесь мы меняем фон на белый, иконку солнца на темный, а эллипс будет в правом положении с полумесяцем.

Ранее мы делали Component set для кнопок, сейчас сделаем библиотеку вариантов для наших фреймов.

Component set для кнопок

Остается только настроить связи — тянем связь от первого фрейма ко второму, триггер выстраиваем по нажатию (On click).

настройка связей

Далее тянем связь от второго фрейма к четвертому, но триггер будет уже не по нажатию, а спустя время — After delay 1 ms.

корректируем триггеры и нажатия

На этом этапе при нажатии слайдер начнет движение и переходит во второе состояние. 

После этого нужно показать, как будет происходить переход обратно. Поэтому тянем связь от четвертого фрейма с третьему с триггером по нажатию — On click.

что происходит при повторном нажатии на кнопу слайдер

А от третьего фрейма снова возвращаемся к первому через триггер спустя время — After delay 1 ms. Связи для слайдера настроены.

триггер спустя время After delay

Теперь поработаем с примером, на котором покажем анимацию. У нас есть макет главной страницы мобильного приложения, она оформлена в светлой и темной темах.

пример светлой и темной темы в фигме

Давайте внедрим в этот макет наш получившийся слайдер. В светлую тему вставим первый фрейм, а в темную — четвертый.

внедряем слайдер переключения режима в фигме

Теперь привяжем переходы от слайдера к соседнему фрейму и обратно.Триггер будет On drag — при перетаскивании.

привязка переходов от слайдера к соседнему фрейму

Теперь посмотрим что у нас получилось, но перед этим поставим девайс в прототипе на iPhone 13 mini и перейдем в презентацию.

запуск и проверка добавленного слайдера

Вот такая анимация у нас получилась. 

кнопка слайдер переключения режима приложения в фигме

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Читайте также

Подпишитесь сейчас на нашу рассылку

Мы присылаем отличные материалы и никогда не спамим. Отписаться можно в любой момент