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

В статье рассмотрим только инструменты для моушн-дизайна. Если вы никогда раньше не открывали программу, не знаете, как создавать фреймы и добавлять объекты, советуем сначала ознакомиться с нашим базовым гидом по Figma для маркетологов.

Что такое режим прототипа

Режим прототипа позволяет связать несколько фреймов (экранов) в Figma и задать анимированные переходы между ними. Для этого нужно переключиться на вкладку Prototype в правой панели.

Переключение из режима дизайна в режим прототипа в Фигме

Далее необходимо соединить два фрейма стрелкой, вот так:

Как соединять фреймы в Фигме

Когда вы протянете стрелку, появится меню настроек анимации перехода. В нем вы найдете:

Триггер — событие, по которому происходит переход.

Меню триггеров анимации перехода в Фигме

Анимация может запускаться по клику, наведению, нажатию клавиши, самопроизвольно — все триггеры можно увидеть, открыв меню. В этой статье мы рассмотрим:

  • On Click — анимация будет начинаться по клику;
  • After Delay — анимация начнется по таймеру — через заданное количество миллисекунд.
Все варианты триггеров для анимации перехода в Фигме

Тип анимации — эта настройка отвечает за характер движения.

Среди типов анимации можно выбрать:

  • Dissolve — плавное появление;
  • Move in и Move out — выезд с одной из сторон;
  • Push — выталкивание предыдущего экрана;
  • Slide in и Slide Out — соскальзывание в разных направлениях.

Эти эффекты будут выглядеть так:

6 video figma

Направление движения. У плавного появления никакого направления не будет. А если фрейм выдвигается, выскальзывает или выталкивается, с помощью стрелок можно задать, откуда и куда он будет двигаться.

Настройки направления движения анимации в Фигме

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

Настройки скорости и плавности движения в Фигме

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

Варианты настроек плавности в Фигме

После настройки всех переходов вы можете протестировать анимацию, нажав на кнопку Present в правом верхнем углу интерфейса Figma.

Кнопка проигрывания анимации в Фигме

Помимо стандартных типов анимации существует опция Smart Animate для более продвинутых настроек. С помощью Smart Animate можно автоматически создавать взаимодействие между несколькими объектами, используя для этого разные фреймы. На начальном и конечном фреймах объекты должны иметь одинаковое название, но отличаться положением, размером, цветом, содержимым или другими свойствами. Функция Smart Animate автоматически будет двигать их одного заданного положения в другое и менять параметры.

Настройки анимации Smart Animate

Итоговый результат работы со Smart Animate

Эти инструменты позволяют быстро создать базовую анимацию в Figma. Посмотрим, для чего они могут пригодиться.

Создаем анимированную презентацию

По сравнению с Google Slides или PowerPoint, Figma дает более широкие возможности для тонкой настройки анимации. В Figma Community можно найти много готовых шаблонов, адаптировать их под свои задачи, а потом задать нужные эффекты движения. Рассмотрим подробнее процесс создания презентации.

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

Для каждого слайда у вас должен быть отдельный фрейм в Figma. При этом размеры всех фреймов должны быть одинаковые. Убедитесь, что в вашем шаблоне именно так, а если создаете слайды с нуля, не забывайте об этих правилах.

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

Перейдите в режим прототипа в Figma и соедините все слайды стрелками. Настройте триггеры перехода: по клику мыши или автоматически (по таймеру).

Настройка переходов между слайдами презентации в Фигме

Далее нужно выбрать тип перехода и длительность. Можно поэкспериментировать с настройками и подобрать переходы, которые подойдут под стиль презентации:

Для последовательного появления списка или диаграммы можно использовать Move in или Dissolve. Это поможет управлять вниманием слушателей и анимировать по клику тот график, о котором говорит спикер. 

Чтобы сделать анимированным не весь слайд, а только нужные части (в нашем случае это будет график), нужно поставить галочку Animate matching layers. Эта функция позволяет анимировать не переход между фреймами, а сами элементы. Чтобы анимация работала корректно, важно дать объектам (прямоугольникам в графике) одинаковые названия на обоих слайдах. 

Функция Animate Matching Layers в Фигме

Так будет выглядеть эффект Move in для графика:

Анимация графика в презентации с помощью Move In

Instant мгновенно поменяет слайд без плавного перехода.

Анимация слайдов с помощью Instant

Для привлечения внимания к определенному элементу используйте анимацию Push. Можно задать направление и характер «выталкивания».

Анимация слайдов с помощью Push

Здесь, как и при анимации графика, важно поставить галочку Animate Matching Layers. Иначе анимироваться будет переход, а не объекты на слайде.

Для переключения между двумя состояниями элемента (например, До/После) подойдет анимация Smart animate. Ее мы уже рассматривали, когда знакомились с режимом прототипа: Smart animate меняет местоположение или настройки объектов на слайдах.

Эффекты меню Overlay

Для изменения состояния элемента можно использовать эффект Overlay. В нашем примере мы поменяем цвет кнопки. Для этого нужно сделать несколько шагов.

Поместить кнопку внутрь отдельного фрейма.

Кнопка внутри фрейма в Фигме

Скопировать объект и убрать его за пределы слайда. У копии можно менять параметры: цвет, размер, шрифт и надпись. 

Копия кнопки с другими параметрами в Фигме

В меню настроек анимации необходимо выбрать Overlay. Важно указать в Overlay Settings позицию Manual, чтобы измененная кнопка встала на то же место, на котором была раньше.

Настройка эффекта Overlay в презентации Фигмы

Просмотр и запись презентации

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

Пример анимированной презентации

Показывать готовую презентацию на выступлении можно прямо в режиме прототипа в Figma.

Создаем анимированный баннер

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

Когда дизайн готов, можно его «оживлять». Процесс аналогичен созданию анимированной презентации. Статичные элементы размещаются на фрейме, а анимация настраивается через наложение (Overlay) и переходы между фреймами. Для постов и сторис в социальных сетях отлично подойдут эффекты:

  • Move In / Slide In для появления текста и графики;
  • Dissolve для плавной смены кадров;
  • Smart animate для создания иллюзии движения персонажей и объектов.

Пошагово разберем, как анимировать простой баннер.

Шаг 1. Работа с контентом. Нужно создать один или несколько фреймов и разместить на них все, что вам нужно: текст, картинки и остальную информацию. Это будет основой баннера.

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

Баннер с элементами, убранными за границы фрейма

Шаг 3. Настройка анимации. Чтобы настроить анимацию, необходимо перейти в режим прототипа и соединить два фрейма. После нужно выбрать в выпадающем меню Smart Animate. Для более плавной анимации мы будем использовать тип Gentle и время 800 миллисекунд.

Настройка перехода между состояниями баннера

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

Добавление финальных переходов в баннере

Шаг 6. Экспорт анимации. Готовую анимацию можно экспортировать в видео или GIF, используя инструменты записи экрана. Один из самых популярных — Loom. Также есть удобный плагин Vimeo для Figma: с ним можно делать запись получившейся анимации, не выходя из приложения.

Эффекты Figma хороши тем, что их легко настраивать, если вы хоть немного знакомы с интерфейсом и логикой программы. Но если вам нужна более сложная анимация, например, для персонажей, изучите другие онлайн-инструменты. А также расширить возможности программы помогут плагины.

Полезные плагины

Устанавливайте и пробуйте:

  • Figmotion — плагин с расширенными настройками для различных эффектов анимации
  • Supa — инструмент, который позволит превратить любой макет из Figma в видео
  • Bannerify Banner Studio — плагин для экспорта анимации прототипа в GIF, видео или HTML-код.
  • SVG motion — с его помощью можно создавать анимации из векторных элементов.

Сообщение Как сделать анимацию в Figma появились сначала на Блог Unisender.

Читать далее

©

Смотрите также/You may also like