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

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

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

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

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

Сейчас мы дарим 10 000 ₽ на обучение в любой из школ-партнёров, представленных на сайте tutortop.

Получите промокод 10 000 ₽ на обучение и курсы стоимостью 20 000 ₽ в подарок!

Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.

Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Мы дарим 10 000 ₽ на обучение в любой из школ-партнёров, представленных на сайте tutortop.

на покупку курсов в любой из школ-партнёров

Нажимая на кнопку «Получить», я соглашаюсь на обработку моих персональных данных.

Спасибо! Мы получили вашу заявку. Скоро с вами свяжемся.

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

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

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

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

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

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

Ползунок

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

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

Прокрутка

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

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

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

Aninix — хороший вариант для качественных анимаций интерфейса с возможностью экспорта в различных форматах.

SUPA — плагин для превращения макетов в видео.

Flipbook Animator GIF — для тех, кто хочет заняться анимацией фреймов и создать файл в формате GIF. Здесь, кстати, также доступен быстрый экспорт проекта и отдельная работа со статьями.

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

Export to GIF/Video — разработан специально для того, чтобы экспортировать анимацию из Фигмы без использования сторонних инструментов.

КАК СДЕЛАТЬ В ФИГМЕ АНИМАЦИЮ КНОПКИ

Для создания анимации кнопки в Figma нужно использовать плагин, например, Anima Toolkit или Figma Motion. Оба плагина позволяют создавать анимацию нажатия на кнопку.

Для начала нужно нарисовать кнопку в Figma и выбрать объект, который будет анимироваться. Затем нужно выбрать тип анимации и настроить параметры.

Например, в Anima Toolkit можно выбрать тип анимации «Hover» и настроить параметры, например, изменить цвет или размер кнопки при наведении на неё курсора.

В Figma Motion можно выбрать тип анимации «Tap» и задать параметры для анимации при нажатии на кнопку, например, сделать легкое пульсирование при нажатии.

После того, как анимация будет готова, её можно экспортировать и добавить на свой сайт или приложение.

Как сделать красивую кнопку в Figma за 1 минуту?

Как Сделать в Фигме АНИМАЦИЮ КНОПКИ // Figma Уроки

5 Easy Animations in Figma — Smart Animate

Анимация кнопки переключения в фигме #figma #shorts #figmatips #animation

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

9. Теперь нам нужно, чтобы при нажатии у нас отображался pressed кнопка. Для этого нам нужно остаться в Prototype кнопки hover и добавить к ней еще одну интерактивность. Нажимаем на кружок с плюсом справа от кнопки hover и перетягиваем его к кнопке pressed. Далее вместо «On click» ставим «While pressing» (при нажатии). И вместо «Navigate to» выбираем «Open overlay». Также не забываем поставить для оверлея положение Manual, о котором я писал выше в пункте 5. И также для него ставим анимацию Dissolve.




Важно! Также не забыть проверить pressed кнопку в панели Prototype. В ней должна быть интерактивность, которую я описывал в 8 пункте. Подробный скриншот оставлю ниже.

3) Теперь перемещаем static кнопку на наш макет и проверяем все ли работает правильно

*Типа уходит проверять*
Да, все работает верно. Добавляем интерактивность в остальные варианты кнопок и размещаем их на макете.

Не переживайте, я оставлю свою работу, если что вы сможете посмотреть как у меня все работает.
Вы можете перенести мой проект себе в Drafts. Для этого нажмите сверху на название проекта и выберите «Duplicate to your Drafts». После чего у вас в Drafts появляется копия моего проекта, с которым вы можете взаимодействовать.

Также оставлю ссылку по созданию вариантов кнопок от разработчиков фигмы:
https://www.figma.com/community/file/903303571898472063

Надеюсь я помог вам своим подробным ответом, ради которого мне пришлось создать второй аккаунт (●’◡’●).
Удачи!

• Facebook
• Вконтакте
• Twitter

Здравствуйте, Katy93!
Очень интересный вопрос!
*Я спустя 4 часа .·´¯`(>▂<)´¯`·. *

Я знаю три варианта создания таких кнопок. Первый вы узнали из видеороликов. Я расскажу про второй, которым я пользуюсь и чуть-чуть про третий.

Второй вариант:
1) С помощью оверлея (Open overlay/Close overlay)
+ Можно задать простую анимацию.
— Не работает SmartAnimate. Например плавные линии не будут вырисовываться, как показано в роликах в вашем вопросе.

• Статичная кнопка (static);
• При наведении (hover);
• При нажатии (pressed).

2) Теперь настраиваем Prototype у кнопок
1. Вызываем еще несколько кнопок из панели Assets (я рассказывал как это делать в 8 пункте предыдущего раздела). И ставим им подходящие свойства в правой панели.


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



3. У нас справа появляется небольшая панель в которой мы настроим что при наведении мышкой на static у нас постепенно появлялся hover.
Сейчас настройки тут такие: При клике (On click) навигация к (Navigate to) «Название фрейма»(в нашем случае, он будет отображать название группы кнопок, т.е. Buttons) с анимацией Мгновенно (Instant).

4. Нажимаем на On click и меняем этот параметр на Mouse enter (я знаю что есть вариант While hovering (когда наводят), но разницы в них не вижу, поэтому пользуюсь Mouse enter (когда наводится мышка)).

5. Далее нажимаем на Navigate to и меняем на «Open overlay». Это нужно как раз для появления нашей hover кнопки. Но это еще не все, потом нужно установить где будет появляться этот оверлей кнопки. На данный момент у меня стоит настройка появления этого оверлея по центру фрейма, это не то что нам нужно. Меняем этот параметр на «Manual». Это нужно для более детальной настройки появления кнопки hover. В нашем случае мне нужно, чтобы она появлялась на месте static, поэтому, после того как я нажму «Manual» у меня появится hover с кружком по центру и диагональными линиями. Беремся за этот hover, который с кружком по центру и перетаскиваем его на место кнопки static. Таким образом мы настроили появление hover кнопки на месте static.






6. И вместо анимации Instant (Мгновенно) ставим Dissolve (постепенно).


7. Готово. Мы настроили первую кнопку, теперь перейдем к настройке кнопки hover. Для этого нажмем на нее, чтобы далее настраивать в панели Prototype.

8. Текущая проблема состоит в том, что если мы наводим мышку, то static превращается в hover, но если отводим мышку, то у нас остается hover. Сейчас это исправим. Мы нажимаем на плюс в правой панели выбираем параметр «Click» и меняем его на «Mouse leave» (мышка уходит). И задаем действие, которое будет происходить, а нам нужно чтобы отображался вновь static, поэтому ставим вместо «None» параметр «Close overlay».

Анимация в фигме: как сделать анимацию слайдера со Smart animate

Анимация в фигме на практике с функцией «Smart animate». В этом уроке вы научитесь анимировать слайдер с отзывами и узнаете как сделать анимацию кнопки при наведении.

Пример анимации слайдера в Figma

Выше пример слайдера, который вы сможете сделать в этом уроке. Покликайте на кнопки внизу и посмотрете как он работает.

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

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

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

Чтобы сделать анимацию кнопок при наведении в фигме (Figma), нужно их дублировать.

Затем выделите их и создайте из них компоненты с помощью надписи «Create multiple components».

Объедините компоненты в варианты.

Копируйте кнопки с зажатой клавишей «Alt».

Измените прозрачность или цвет у копий. Задайте любое изменение, которое хотите видеть при наведении.

Перейдите в раздел «Prototype» и создайте связь между первой кнопкой и кнопкой при наведении. Поставьте следующие параметры анимации: «Mouse enter» и значение Animate «Instant».

Аналогичную операцию проделайте с прозрачной кнопкой. Поставьте значение «Mouse leave» и анимацию «Instant»

Ту же операцию сделайте с кнопкой, которая показывает вправо.

Копируйте 2 кнопки в нормальном состоянии во фрейм.

Анимация слайдера в фигме с функцией «Smart animate»

Чтобы создать анимацию в слайдере с помощью фунции «Smart animate» необходимо сделать 3 копии отзывов, как на примере выше и вставить туда фотографии (как это сделать смотрите в видео уроке).

Теперь создадим связи между фреймами, чтобы анимация работала. Для этого выберите стрелку направо, перейдите в раздел «Prototype» и свяжите стрелку с фреймом №2. В параметрах анимации поставьте следующие зданчения:

• On click — означает, что анимация будет действовать при клике на элемент.
• Smart animate — умная анимация. Перестраивает элементы на основании имени в слоях.

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

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

Левая стрелка в третьем фреме связывается со вторым фреймом.

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

Левую стрелку в первом фрейме, свяжите с третьим.

Если посмотреть анимацию, то сейчас отзывы не перемещаются. Для того, чтобы они перемещались, необходимо определенным образом назвать слои.

Сделаю отзывы по бокам прозрачностью 20%. Затем выберу в трех фреймах отзывы с одинаковыми фотографиями.

Чтобы массово их переименовать нажму на комбинацию 2 клавиш «Ctrl» + «R». Назовем эти слои «otziv1». Таким образом при анимации figma поймет, что это одни элементы и будет их перемещать.

Переименовываем отзывы с женщиной. Выделяем их, как показано выше на скриншоте.

Переименовываем слои на «otziv2».

Ту же операцию проделываем с отзывами с мужчиной. Выделяем их с зажатой клавишей «Shift» и кликаем правой клавишей мыши.

Переименовываем слои на «otziv3». Включаем режим презентации и проверяем нашу анимацию.

Если вам, что-то было непонятно из статьи, то лучше посмотрите видео выше и все станет на свои места.