Как сделать анимацию в фигме
Перейти к содержимому

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

  • автор:

Как в Figma сделать изометричную анимацию

Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

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

Перед чтением инструкции скачайте и установите плагин SkewDat.

Подготовка объектов

1. Для удобства создайте большой фрейм чёрного цвета — внутри него будут все ваши компоненты для будущей анимации.

2. Создайте круг размером примерно 450×450 пикселей. На боковой панели настроек в блоке Fill удалите его заливку. В блоке Stroke добавьте обводку белого цвета, вместо Inside выберите Center и укажите толщину 13 пикселей.

3. В блоке Stroke нажмите на иконку. В появившемся окне вместо Solid выберите Dash, в поле Dash введите 1, в Gap — 20, в Dash Cap выберите круглые края. В итоге у вас должна получиться фигура с круглыми точками — если круги не получились, попробуйте поменять значения Dash и Gap.

4. Выделите получившуюся фигуру и нажмите . Затем сделайте копию компонента, кликните по ней правой кнопкой мыши и выберите Frame Selection.

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

6. Сделайте то же самое ещё два раза — создавайте варианты и крутите фреймы с кругом на 90 градусов. В итоге у вас получится основа для анимации вращения.

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

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

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Попробуйте поработать в Blender

  • Анимация из пластилина
  • Стеклянные цветы
  • Скрученный параллелепипед из стекла
  • Паттерн из объёмных шестиугольников
  • Фигуры из бетона с круглыми отверстиями
  • Стеклянное мороженое на палочке
  • Объёмные фигуры из SVG-иконок

Анимация в Фигме. Как сделать из вашего сайта видеоигру

Добавление анимации и движущихся объектов несомненно выглядит крайне завораживающе при первом посещении сайта, но если перед твоими глазами постоянно скачет нечто, то это как минимум начинает вызывать дискомфорт, как минимум. Поэтому добавлять анимацию нужно очень аккуратно и точечно. О том где это делать и в каких объемах, мы и постараемся выяснить в этой статье. А поможет нам в этом Фигма. За одно выясним, нужно ли добавлять анимацию в макет или достаточно описать состояния Hover, Active и Focus.

Инструментарий

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

Как многие знают, видео и различные анимационные мультфильмы создаются(раньше создавались) последовательной сменой кадров, где каждый новый кадр показывает измененное состояние текущей сцены.

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

Скажем, мы хотим, чтобы по клику на кнопку появлялся sidebar. Для этого нам нужно создать 2 макета одной и тойже страницы. На первом sidebar отсутствует, на втором он есть. Тем самым мы описываем 2 состояния нашей будущей анимации.

Далее нам нужно задать 2 параметра: Порядок в котором будут меняться состояния и то каким образом одно состояние будет сменять другое.

Для того чтобы задать последовательность состояний, нужно:

1) Сделать каждую и страничку (состояние) фреймом.

2) Выбрать КНОПКУ на фрейме, с которого будет начинаться анимация.

3) Перейти на вкладку Prototype и добавить Interaction(плюсиком).

4) В настройках Interaction выбрать событие, которое будет тригером начала анимации (по умолчанию On click) и фрейм, на который мы перейдем, когда событие произойдет.

На этом всё. Теперь если вы нажмете на play и в открывшемся окне нажмёте на кнопку, то появится sidebar. Вот только появление будет резким. Для того чтобы добавить плавности переходу из одного состояния в другое, нужно задать тип перехода.

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

Специально для этих целей есть особый вид перехода Smart Animate.

Давайте немного изменим наши состояния.

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

Механика работы Smart Animate

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

Похожим образом мы можем создать и другие типы анимации (бегущую строку, анимацию текста или движения катера на вашем лендинге). Нужно просто представить все как последовательность состояний.

Когда нужно добавлять анимацию на макет

Анимация добавляется по 2-м главным причинам:

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

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

Альтернативы анимации

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

А вот что касается анимации в целом на сайте, здесь дела обстоят несколько иначе.

Когда нужна анимация на сайте

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

Основное предназначение анимации – это привлечение внимания. То есть вы можете сфокусировать взгляд пользователя контрастными изображениями или большими объектами. А можете двигающимися элементами. В идеале эти двигающиеся элементы должны привести взгляд пользователя по нужному вам пути в целевую точку (к кнопке купить или еще куда. ). То есть анимации это в первую очередь инструмент UX, а не UI.

И как обычно о своих вариантах использования анимации приглашаю высказаться в комментариях ниже.

Анимация интерфейсов в Фигме

В вакансиях на ui-ux-web-digital дизайнера часто встречается требование «анимация интерфейса», а начинающие дизайнеры иногда даже не подаются на такие вакансии, потому что считают, анимация интерфейса — это что-то сложное и вообще моушн-дизайн.

В этой статье я собрала всю важную информацию про анимацию интерфейсов с акцентом на самый простой и самый востребованный сейчас способ работы с анимацией — штатные средства Фигмы.

В статье много картинок и примеры с живым Фигма файлом. Получилось много букв, поэтому держите оглавление:

  1. Зачем вообще нужна анимация в интерфейсе
  2. С помощью каких инструментов делают анимацию, в том числе красивую из кейсов dribbble
  3. Создание анимации в Фигме. Основы, нюансы и много гифок
  4. Примеры, краткий разбор и ссылка на исходник
  5. Заключение (призыв подписаться на мой канал ��)

Зачем нужна анимация

Если от дизайнеров требуется этот скилл, значит он важен.

Первое, что приходит в голову — создание вау-эффекта, шоу, яркого впечатления для посетителей сайта. Ни один победитель awwwards не обходится без эффектной анимации.

Но на самом деле анимация используется практически в любом интерфейсе. Просто она не такая броская. Основные её функции:

  1. Привлечь внимание в определенному месту на экране. Пример: баннеры и карусели с акциями на сайтах магазинов.
  2. Дать пользователю обратную связь о происходящем в интерфейсе. Пример: прелоадер, который сообщает, что процесс идёт, надо только подождать.
  3. Показать структуру, возможность взаимодействия, жесты. Пример: плавный скролл от якорной ссылки до нужного места на экране показывает, что мы всё ещё остаемся на странице, просто сместились чуть ниже. Выплывающее сбоку меню показывает, как можно вызвать его жестом. А увеличивающиеся по наведению иконки говорят о том, что это кнопки и их можно нажать.

Бывает ли плохая анимация?

С чем угодно можно переборщить, анимация — не исключение. Если на сайте всё постоянно движется, подскакивает, плавает и живёт своей жизнью, пользователь очень быстро устанет от этого мельтешения.

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

Если анимация получилась сложной, ресурсоёмкой, если из-за неё всё тормозит и вылезают ошибки, её нужно упрощать. Плохо работающее приложение не спасут никакие спецэффекты.

Какие инструменты использовать

Способов создания анимированных интерфейсов много. Рассмотрим основные.

  1. Конструкторы сайтов типа Тильды и Редимага предлагают даже в стандартных блоках довольно неплохую базовую анимацию, а если поработать с настройками, можно сделать сложные спецэффекты.
  2. Можно создавать анимацию с помощью кода. Просто берёте и пишете html, css, js �� Если серьёзно, даже если вы совсем не программист, можно брать понравившуюся анимацию, например, с codepen.io и изменять под свои нужды. Для этого достаточно базовых знаний css и понимания работы javascript (он, кстати, не всегда нужен, на чистом css можно анимировать довольно интересные штуки).
  3. Сложная красивая анимация в кейсах на dribbble и behance с большой вероятностью сделана в After Effects и существует только для красоты портфолио. Есть способы переносить анимацию из After Effects, но они сложные, дорогие и ненадежные, поэтому в реальной разработке лучше обойтись без таких спецэффектов, по крайней мере, пока вы на 200% не уверены в обратном.
  4. Principle, Framer, Invision, Ptoropie, Marvel и все их аналоги. Про каждую можно смело писать серию статей, но даже если вы ни одной из них не знаете, это не помешает вам включить анимацию интерфейса в скиллы в резюме.
  5. Фигма. Собственно, о ней и говорим дальше.

Анимация в Фигме

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

Плагин довольно интересный, но советую переходить к его использованию, когда штатных средств Фигмы станет недостаточно для вашей задумки 🙂

Штатные средства Фигмы

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

1. Общая информация

Анимации в Фигме доступны для прототипов: они настраиваются на вкладке Prototype и просмотреть их можно только в режиме просмотра прототипа (треугольник справа сверху рядом с кнопкой Share).

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

Можно анимировать фреймы внутри фрейма, компоненты и варианты компонентов.

2. Параметры анимации

Панель настройки интерактива очень маленькая, не запутаться. В ней всего 3 раздела: триггеры, события, настройки анимации.

Триггеры

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

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

Остановлюсь на одной детали, вопрос с которой я решала в начале собственного обучения — разница между «while hovering» и «mouse enter» + «mouse leave».

Наглядной становится эта разница при проектировании выпадающих меню. Если поставить триггер while hovering, довести курсор до пунктов меню не получится. Поэтому делаем 2 отдельных события, mouse enter и mouse leave.

Действие

По умолчанию у нас стоит Navigate to — перейти к другому фрейму (объекту). Тут все просто, нажал на А, перешел к Б.

Change to позволяет переключаться между вариантами компонента (доступно, естественно, только для компонентов).

Например, у нас есть компонент чекбокса, у него два варианта — нажат или нет. Создадим прямо в компоненте анимацию, чтобы по нажатию на пустой чекбокс в нём появлялась галочка, а по нажатию на чекбокс заполненный — галочка пропадала. Для этого будем использовать Change to.

Чтобы посмотреть результат, нужно поместить на фрейм копию компонента и запустить режим просмотра прототипа.

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

Следующий блок действий посвящен работе с оверлеями. Они нужны для показа разных всплывашек.

Оверлей (всплывающее окно) нужно создать отдельным фреймом. Его положение относительно основного фрейма (страницы) можно настроить вручную (manual) или выбрать одно из предустановленных выравниваний.

Действие Open overlay покажет всплывающее окно на выбранном месте на странице. Change overlay по клику внутри одного всплывающего окна может открыть вместо него другое всплывающее окно (тоже должно быть отдельным фреймом). Чекбокс «Add background behind overlay» позволит создать затенение под всплывающим окном.

Последний блок — это стандартные элементы навигации: назад, скроллить и открыть ссылку (внешнюю ссылку типа http://…).

Вы можете настроить переход на один фрейм с нескольких других фреймов. И back вернет вас именно на тот фрейм, с которого вы перешли — работает как кнопка «назад» в браузере.

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

Instant — это когда никакой анимации нет, есть только действие по триггеру.

Анимации Dissolve (растворение) и всё, что под чертой (Move in и другие), имеют много общего. Превью каждой анимации показывает Фигма самостоятельно. Для каждой можно указать длительность в милисекундах и выбрать тип изинга (немного про изинги будет дальше).

Для Move in и прочих можно выбрать направление движения анимации.

Для Dissolve можно указать галочку Preverse scroll position — тогда фрейм, на который мы перешли, будет показан не с самого верха, а с той же позиции, где мы были на исходном фрейме:

Изинги

Когда речь идёт об анимации, нельзя не упомянуть изинги. Изинги (от англ. easing — «ослабление», «смягчение») — это настройки ускорения и замедления анимации. Настройка изингов позволяет анимировать объекты на экране так, чтобы они вели себя, как мы привыкли в жизни.

Вот какие изинги есть в Фигме:

  • Linear — движение будет равномерным
  • Ease in — анимация начнется медленно и будет ускоряться к концу
  • Ease out — анимация начнется быстро и будет замедляться к концу
  • Ease in and out — анимация начнется медленно, ускорится и затем снова замедлится
  • Ease in back — анимация отскакивает назад от исходной точки, а затем ускоряется
  • Ease out back — анимация начинается быстро, затем замедляется и проскакивает вперед от конечной заданной точки
  • Ease in and out back — анимация медленно отскакивает назад от исходной точки, ускоряется и снова замедляется, проскакивая вперед от конечной точки
  • Custom — можно настроить ускорения самостоятельно, потянув за точки на кривой
  • Дальше идут настройки подпружинивания (Spring, если знаете, как лучше сказать по-русски, напишите в комменты)) анимации в конце.

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

Smart Animate

Мы просто выбираем Smart Animate и Фигма сама подбирает оптимальную анимацию! И это очень удобно.

Но при использовании Smart Animate очень важно следить, чтобы, во-первых, слои (фреймы, шейпы и т.д.), которые мы анимируем, назывались на всех фреймах одинаково. И во-вторых, чтобы имели одинаковый уровень вложенности. Иначе Фигма не поймёт, что мы от неё хотим.

А теперь к примерам

Живой файл с этими примерами тут.

Кнопки, чекбоксы, дропдаун меню

Простые компоненты, которые приходится делать чаще всего

А вот кстати человек заморочился и сделал 25 вариантов анимации кнопки по наведению, можно утащить в проект или просто посмотреть, как всё устроено

Галерея

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

Если мы просто сделаем три слайда и настроим между ними анимацию Smart Animate, то Фигма преложит вот такую анимацию:

То есть верх и низ остаются неизменными, а фотографии трансформируются одна в другую. Так происходит, потому что Фигма на каждой фрейме ищет одинаково названные объекты и настраивает анимацию между ними. Она «видит», что объекты header и bottom повторяются, поэтому оставляет их неизменными, а slide1 превращается в slide 2.

Если мы выберем анимацию Move in, то листаться будет весь фрейм, включая верх и низ:

Поэтому применим хитрость. Скопируем slide 2 и поместим его в первый фрейм, но при этом выведем его за границы фрейма. Тогда он для Фигмы там будет, хотя нам он будет не виден. А во второй фрейм так же скопируем и спрячем slide 1. Проделаем то же самое для каждого фрейма.

И вот какая галерея тогда получится:

Слайдер

Тут тоже есть нюанс. При Smart Animate Фигма учитывает не только начальное и конечное положение объекта, но и тот способ, которым мы эти положения получили.

Для создания слайдера я скопировала фрейм, на новом фрейме перетащила фотографии и маркер слайдера. Всё работает, как надо.

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

Как передавать в разработку

К сожалению или к счатью нет единого стандарта передачи настроек анимации разработчикам.

Самый лучший способ — спросить непосредственно у разработчиков, как им удобнее получать от вас информацию.

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

1.В расшариваемом макете пишем коммент (прямо текстом рядом с нужным местом на макете, не через инструмент комментирования), что нам тут нужна анимация. Описываем, какая, призываем разработчика смотреть на вкладке Prototype и Inspect.

2.Проигрываем анимацию в режиме просмотра, записываем экран, сохраняем видео и/или делаем гифку, прикладываем к макету и/или письму (сообщению в мессенджере). На Маке запись экрана вызывается кнопками cmd+shift+5, на Винде — через game center, например, как в этом видео. Получившееся видео можно перегнать в гиф в любом онлайн-конвертере, можно оставить в формате видео. Ещё могу посоветовать бесплатную и простую программу Giphy, но она только под мак.

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

Заключение

Самое главное для освоения анимации в Фигме — больше практиковаться. Фигма, к счастью, в отличие от большинства серьёзных программ для анимации, интуитивно понятна в большинстве случаев.

Подписывайтесь на мой телеграм, там пишу всякое о дизайне ��

Всё об анимации в Figma — создание, редактирование и работа с плагинами

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

В Фигме есть несколько инструментов для создания анимации — прототипирование, простая и умная анимация.

Освоить навыки графического дизайна и сразу начать работать в Figma можно на онлайн-курсах от Логомашины, Pentaschool, Нетологии, Contented и Eduson Academy. Ещё больше курсов по направлению дизайна на нашем портале.

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

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

Первый шаг — создание нового фрейма. На него нужно добавить стандартную фигуру Rectangle или прямоугольник. Далее — скопировать готовую фигуру и уменьшить её размер вдвое. Выделите первый прямоугольник и найдите в меню справа пункт Prototype — вам нужна графа Interaction. Нажмите плюсик, которые поможет расширить настройки взаимодействия с фигурами.

Создание анимации в Figma

Перед вами появится цепочка «Click- None». Она означает, что при нажатии на фигуру автором никаких действий происходить не будет. Мы решили делать анимацию, поэтому нужно кликнуть на эту строку и в меню слева выбрать On click.

Создание анимации в Figma

В списке можно отметить, в каком именно случае будет возникать анимация: например, On drag — при перетаскивании, Mouse down — в начале клика, а Mouse up — в конце клика. Всего Фигма на выбор предлагает 10 вариантов.

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

Создание анимации в Figma

  • Navigate to — к следующему объекту/фрейму
  • Open overlay — наложение поверх текущего фрейма
  • Scroll to — пролистывание до другого объекта в рамках одного фрейма
  • Swap overlay — замена одного фрейма другим
  • Back — назад
  • Open link — по ссылке

Если объектов больше, чем два, дополнительные пункты нужно также выбрать самостоятельно. Затем нажать на точку на боковой стенке и в углу, а после перетащить стрелку к фрейму, по отношению к которому нужно совершить действие.

В общем меню, где вы выбирали действие и момент, когда оно будет происходить, есть ещё один пункт — Animation. Он нужен для того, чтобы понять, как именно будет выглядеть отдельный анимационный эффект. Это считается набором стандартных переходов для различных кейсов, которых всего восемь. Самые популярные — Dissolve — растворение, Move in — перемещение внутрь, Move out — перемещение наружу, Push — смахивание. Для каждого из вариантов, кроме Instant — без анимации, есть свои надстройки и набор клавиш.

Создание анимации в Figma

Вы можете работать с плавностью, стилем, шрифтами, устанавливать продолжительность мобильной анимации, менять её начало и конец. Например, если отметить параметр Ease out, анимация кадров будет быстро начинаться и замедляться во времени к концу. Ease in даст обратный эффект — медленное начало и ускоренный конец. Есть ещё такие варианты, как Ease in back или отскок от исходной точки, а затем свойство ускорения, Liner — линейное плавное движение.

Создание анимации в Figma

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

Умная анимация в Фигме

Режим Smart animate разработан специально для более сложных переходов, добавления большего количества элементов, увеличения или же уменьшения объектов, их удобного размещения. Figma автоматически распознаёт особенности выбранных настроек и предлагает, как должна выглядеть анимация. Опцию удобно использовать, когда хочется посмотреть, какие ещё интерактивные способы добавления объектов существуют. А также в моментах, когда действовать нужно быстро, но хочется добавить креатива. Многообразие анимации в веб-дизайне велико, но для начала стоит попробовать сделать обычный smart переход с одной карточки на другую.

Вам достаточно выделить с помощью мыши уже используемый ранее прямоугольник в центре и связать его со второй такой же фигурой, но меньше размером. В пункте Animations щёлкните на строку Smart animate — Фигма самостоятельно предложит возможность перехода для такого сочетания фигур. На первых этапах стоит попробовать поменять цвет, поставить другую фигуру или добавить ещё несколько кадров и посмотреть, какие варианты ещё существуют. Если вы хотите погрузиться в изучение программы Figma, обратите внимание на онлайн-курс от Pentaschool. В нём вы не только с нуля изучите основы дизайна и веб-аналитики, прокачаете скиллы, но и соберёте полное портфолио, научитесь правильно откликаться на вакансии.

Другой не менее классный курс с обширными уроками для 3D- и веб-дизайнеров — «3D-дженералист» от Нетологии.

Создание анимации в Figma

Функционал умной анимации широк — вы можете создать цельные похожие страницы для сайтов со сложной анимацией, где будут разные эффекты. Например, вам необходимо изменить цвет темы при работе пользователя с экраном. Одно из главных правил разработки smart animate — у объектов должно быть одинаковое расположение и наименование, иначе функция просто не сработает. Итак, нужно создавать два блока или слайдера с разной информацией — пусть один будет чуть меньше, а другой — основной. У каждого из элементов должен быть свой цвет. Здесь важно отдельно создать кнопку, смены темы, при нажатии на которую оттенок будет меняться со светлого на тёмный или наоборот. Далее — копируем макет и задаём ему другие цвета. Перед вами снова должно располагаться два одинаковых шаблона с координатами, но с разными цветами — это нужно для того, чтобы при нажатии на данную кнопку цвет темы менялся.

Теперь нужно соединить части пазла и сделать так, чтобы анимация запустилась. Для этого зайдите в раздел Prototype и наведите курсор на элемент, при нажатии на который будет происходить анимация — в нашем случае это кнопка смены темы. Кстати, вы можете подобрать любую фигуру — например, круг, квадрат или же вовсе сделать иконку прозрачной в качестве интересного элемента дизайна. На этом этапе стрелка перехода от одного макета к другому немного подсветится, так и должно быть. Её нужно направить от первого объекта ко второму. В действиях необходимо указать on click и Navigate to — при нажатии пользователь перейдёт к следующему объекту. Так как мы делаем умную анимацию в Figma, в разделе Animation пункт Instant меняем на Smart Animate. В плавности можно выбрать настройки Ease out или попробовать ручной режим Custom. Дублировать настройку с анимацией нужно на второй макет так, чтобы стрелка перехода вела от одной кнопки к другой. В режиме изменяющегося просмотра два объекта соединятся в один и вы увидите красивый непрозрачный переход с одной темы на другую. Это хорошая возможность для частичной презентации или добавления страницы для сайта.

Как сделать простую анимацию в Фигме?

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

Тем, кто хочет прокачать свои навыки в создании интерфейсов и анимаций, рекомендуем пройти курс по UX/UI-дизайну от Contented.

Анимация при наведении

Создайте новый фрейм и добавьте в него кнопку. Вам нужен Rectangle — напишите любой текст, например, «Подписаться», и выберите подходящий цвет. Копируйте фрейм и сделайте второй вариант чуть больше, как и текст внутри. Можно изменить и цвет — здесь будет уместен небольшой градиент. Теперь во вкладке Prototype в верхнем правом меню нужно выбрать While hovering, событие устанавливаем — Open overlay, чтобы перекрыть одну кнопку другой. Соединить два блока также просто с помощью стрелки. Блок Animation — на ваше усмотрение. Также не забывайте давать имя проекту.

Создание анимации в Figma Создание анимации в Figma

Ползунок

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

Создание анимации в Figma

Элементы здесь будут округлой формы — строка в форме вытянутого овала и окружность, которую мы будет двигать. Внизу овала разместите несколько фигур любой формы — лучше, чтобы они были одинаковые. Внутри можно написать любой текст или же оставить точные данные. Скопируйте макет, высоту фигур поменяйте, ползунок переместите в конец овала и соедините два объекта друг с другом. Выделите окружность выпадающего ползунка и в Prototype выберите On drug, событие — Navigate to. Необходимо скопировать настройки для второго фрейма и поставить умную анимацию.

Создание анимации в Figma

Прокрутка

Запустить скроллинг или прокрутку выбранной части экрана довольно просто. Нужно выделить один из фреймов, в котором нужна прокрутка. Обязательно, чтобы высота изображения была больше самого экрана — только так вы сможете листать картинку. Во вкладке Prototype нужен пункт Overflow scrolling — выберите горизонтальный или вертикальный тип. Для телефона нужен второй вариант, для ПК — первый. Чтобы верх и низ сайта оставались на месте, их нужно зафиксировать. Для этого стоит выбрать пункт Design и в блоке Constraints поставить галочку напротив Fix position when scrolling. Для запуска прокрутки к нужной части экрана перенесите кнопку запуска и попробуйте посмотреть, что получается в результате.

Создание анимации в Figma

Полезные плагины для анимации в Figma

Мы собрали несколько популярных и полезных плагинов для анимации, которые пригодятся для разных целей, и онлайн-курсов по Фигме, который усилят ваши навыки — курс «Figma» от Pentaschool и «Старт практики в граф-дизайне» от Логомашины.

Теперь подробнее о плагинах.

  • Aninix — хороший вариант для качественных анимаций интерфейса с возможностью экспорта в различных форматах.
  • SUPA — плагин для превращения макетов в видео.
  • Flipbook Animator GIF — для тех, кто хочет заняться анимацией фреймов и создать файл в формате GIF. Здесь, кстати, также доступен быстрый экспорт проекта и отдельная работа со статьями.
  • Motion — универсальный плагин для создания плавных анимаций, добавления интересных эффектов и взаимодействий.
  • Export to GIF/Video — разработан специально для того, чтобы экспортировать анимацию из Фигмы без использования сторонних инструментов.

Погружение в Figma

Изучайте Figma прямо из дома с помощью онлайн-курсов. Лучшие варианты обучения ищите в подборке, курсы в которой мы сравнили по разным показателям для вашего удобства.

Добавить комментарий

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