Впечатляющие эффекты движения для рекламных баннеров и презентаций
В Figma есть инструменты для создания интерактивных прототипов — с их помощью можно делать анимацию в несколько кликов. Обычно этот функционал используют дизайнеры интерфейсов, чтобы презентовать работу клиенту, проводить тестирования и согласовывать эффекты с разработчиками. Но мы разберемся, как применять режим прототипа для более широкого спектра маркетинговых задач: анимации баннеров, постов для соцсетей и презентаций.
В статье рассмотрим только инструменты для моушн-дизайна. Если вы никогда раньше не открывали программу, не знаете, как создавать фреймы и добавлять объекты, советуем сначала ознакомиться с нашим базовым гидом по Figma для маркетологов.
Режим прототипа позволяет связать несколько фреймов (экранов) в Figma и задать анимированные переходы между ними. Для этого нужно переключиться на вкладку Prototype в правой панели.
Далее необходимо соединить два фрейма стрелкой, вот так:
Когда вы протянете стрелку, появится меню настроек анимации перехода. В нем вы найдете:
Триггер — событие, по которому происходит переход.
Анимация может запускаться по клику, наведению, нажатию клавиши, самопроизвольно — все триггеры можно увидеть, открыв меню. В этой статье мы рассмотрим:
Тип анимации — эта настройка отвечает за характер движения.
Среди типов анимации можно выбрать:
Эти эффекты будут выглядеть так:
Направление движения. У плавного появления никакого направления не будет. А если фрейм выдвигается, выскальзывает или выталкивается, с помощью стрелок можно задать, откуда и куда он будет двигаться.
Скорость и плавность движения. Когда вы будете менять эти параметры, сможете сразу же смотреть превью в меню: квадраты будут двигаться с той скоростью и плавностью, которую вы зададите.
Плавность движений обеспечивают разные варианты замедления и ускорения в процессе. В жизни объекты редко перемещаются с одной скоростью, и в анимации принято делать процесс движения более сложным, естественным. В Figma для вас уже есть готовые настройки с ускорениями и замедлениями, их разработали профессионалы. Пробуйте, смотрите и выбирайте.
После настройки всех переходов вы можете протестировать анимацию, нажав на кнопку Present в правом верхнем углу интерфейса Figma.
Помимо стандартных типов анимации существует опция Smart Animate для более продвинутых настроек. С помощью Smart Animate можно автоматически создавать взаимодействие между несколькими объектами, используя для этого разные фреймы. На начальном и конечном фреймах объекты должны иметь одинаковое название, но отличаться положением, размером, цветом, содержимым или другими свойствами. Функция Smart Animate автоматически будет двигать их одного заданного положения в другое и менять параметры.
Эти инструменты позволяют быстро создать базовую анимацию в Figma. Посмотрим, для чего они могут пригодиться.
По сравнению с Google Slides или PowerPoint, Figma дает более широкие возможности для тонкой настройки анимации. В Figma Community можно найти много готовых шаблонов, адаптировать их под свои задачи, а потом задать нужные эффекты движения. Рассмотрим подробнее процесс создания презентации.
Для каждого слайда у вас должен быть отдельный фрейм в Figma. При этом размеры всех фреймов должны быть одинаковые. Убедитесь, что в вашем шаблоне именно так, а если создаете слайды с нуля, не забывайте об этих правилах.
Перейдите в режим прототипа в Figma и соедините все слайды стрелками. Настройте триггеры перехода: по клику мыши или автоматически (по таймеру).
Далее нужно выбрать тип перехода и длительность. Можно поэкспериментировать с настройками и подобрать переходы, которые подойдут под стиль презентации:
Для последовательного появления списка или диаграммы можно использовать Move in или Dissolve. Это поможет управлять вниманием слушателей и анимировать по клику тот график, о котором говорит спикер.
Чтобы сделать анимированным не весь слайд, а только нужные части (в нашем случае это будет график), нужно поставить галочку Animate matching layers. Эта функция позволяет анимировать не переход между фреймами, а сами элементы. Чтобы анимация работала корректно, важно дать объектам (прямоугольникам в графике) одинаковые названия на обоих слайдах.
Так будет выглядеть эффект Move in для графика:
Instant мгновенно поменяет слайд без плавного перехода.
Для привлечения внимания к определенному элементу используйте анимацию Push. Можно задать направление и характер «выталкивания».
Здесь, как и при анимации графика, важно поставить галочку Animate Matching Layers. Иначе анимироваться будет переход, а не объекты на слайде.
Для переключения между двумя состояниями элемента (например, До/После) подойдет анимация Smart animate. Ее мы уже рассматривали, когда знакомились с режимом прототипа: Smart animate меняет местоположение или настройки объектов на слайдах.
Для изменения состояния элемента можно использовать эффект Overlay. В нашем примере мы поменяем цвет кнопки. Для этого нужно сделать несколько шагов.
Поместить кнопку внутрь отдельного фрейма.
Скопировать объект и убрать его за пределы слайда. У копии можно менять параметры: цвет, размер, шрифт и надпись.
В меню настроек анимации необходимо выбрать Overlay. Важно выбрать в Position настройку Manual, чтобы измененная кнопка встала на то же место, на котором была раньше.
После настройки всех переходов переключитесь в режим просмотра прототипа. Кликайте на слайды или дождитесь автоматического перехода, чтобы увидеть анимацию. При необходимости на этом этапе можно вносить правки и редактировать переходы.
Показывать готовую презентацию на выступлении можно прямо в режиме прототипа в Figma.
Виды анимации, которые мы рассмотрели, можно использовать при создании баннеров и постов для соцсетей. Так вы сможете быстро заанимировать готовый макет от вашего дизайнера или же собрать простой баннер с нуля и задать настройки движений. Благодаря анимации даже с простой картинкой можно добиться вау-эффекта. Если планируете создавать статичную версию баннера собственноручно, загляните в нашу подборку шрифтов и элементов, там много полезного.
Когда дизайн готов, можно его «оживлять». Процесс аналогичен созданию анимированной презентации. Статичные элементы размещаются на фрейме, а анимация настраивается через наложение (Overlay) и переходы между фреймами. Для постов и сторис в социальных сетях отлично подойдут эффекты:
Пошагово разберем, как анимировать простой баннер.
Шаг 1. Работа с контентом. Нужно создать один или несколько фреймов и разместить на них все, что вам нужно: текст, картинки и остальную информацию. Это будет основой баннера.
Шаг 2. Копирование первого фрейма и настройка элементов. Теперь нужно скопировать первый фрейм и убрать за его рамки те элементы, которые должны будут появляться на баннере в процессе анимации. В нашем примере это иллюстрации и текст. Для создания интересного эффекта можно также увеличить заголовок и разместить его по центру.
Шаг 3. Настройка анимации. Чтобы настроить анимацию, необходимо перейти в режим прототипа и соединить два фрейма. После нужно выбрать в выпадающем меню Smart Animate. Для более плавной анимации мы будем использовать тип Gentle и время 800 миллисекунд.
Поскольку баннер не задуман интерактивным, эффекты должны переключаться не по клику, а после задержки на заданное количество миллисекунд. А чтобы сделать «отбивку» между анимацией разных объектов, мы добавили один пустой фрейм. Важно не удалять элементы, а убирать их за границы фрейма.
Шаг 6. Экспорт анимации. Готовую анимацию можно экспортировать в видео или GIF, используя инструменты записи экрана. Один из самых популярных — Loom. Также есть удобный плагин Vimeo для Figma: с ним можно делать запись получившейся анимации, не выходя из приложения.
Эффекты Figma хороши тем, что их легко настраивать, если вы хоть немного знакомы с интерфейсом и логикой программы. Но если вам нужна более сложная анимация, например, для персонажей, изучите другие онлайн-инструменты. А также расширить возможности программы помогут плагины.
Устанавливайте и пробуйте:
В Unisender есть всё для быстрого старта в email-маркетинге: блочный редактор, 200+ шаблонов, ИИ-помощник.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
