Программа Figma является удобным и универсальным приложением, с помощью которого web-дизайнеры создают сайты с яркой и интересной визуализацией. Однако особый интерес представляет анимация, которая с каждым годом становится все более актуальной, так как позволяет «оживлять» картинку или текст. Это делает его более привлекательным, завлекающим и запоминающим, формируя положительное впечатление у посетителя.
Опытные эксперты отмечают, что грамотная анимация наилучшим образом дополняет визуальную составляющую любого интерфейса. Ведь помимо красоты, при помощи motion-дизайна можно облегчить посетителю навигацию, сделав ее проще и удобней. Более того, в реальности жизни мы постоянно наблюдаем движение и динамику, поэтому анимированный интерфейс как нельзя лучше «заходит» каждому посетителю.
Современные web-дизайнеры стараются с самого начала изучать основы анимации и особенности ее применения, поскольку такие сайты лучше воспринимаются посетителями, формируя их лояльность. Согласно исследованиям, проведенным сервисом Canva, анимация наряду с 3D-элементами и градиентами является сегодня ведущим трендом в дизайне.
Главное достоинство анимированных картинок - имитация взаимодействия объекта с реальным миром, что делает интерфейс намного удобнее, нежели статическая картинка. Smart animate вполне может быть реализована в Фигме, поскольку приложение обладает для этого всем необходимым функционалом. С помощью определенных команд можно легко анимировать макет, создать интерактивный текст и картинки, которые будут «живыми», поэтому рассмотрим их более подробно.
Для лучшего понимания того, как работает анимация в принципе, стоит рассмотреть его главные элементы: тайминг, кривая и изменяющийся параметр.
1. Тайминг. Чтобы картинка «ожила», ей требуется задать временные параметры, причем в очень малом диапазоне взаимодействия. Обычно анимация в Фигме замеряется в диапазоне от 100 ms (0.1s) до 1000 ms (1s), поэтому измеряется в миллисекундах. Важно добавить, что при использовании задержки больше 1 секунды у любого пользователя неизбежно возникает ощущение задержки. Ведь появление объекта происходит медленнее, нежели его исчезновение, а здесь важно соблюсти правило: чем меньше объект по размеру, тем быстрее он появляется.
2. Кривая. Здесь действуют законы физики, который характеризуются тем, что каждый объект имеет определенный момент замедления и ускорения. Его можно изобразить на графике в виде определенной кривой, параметры которой задает сам web-разработчик. Для этого в программе Figma имеются соответствующие команды:
При помощи таких простых команд можно настроить анимационную картинку или текст таким образом, который требуются веб-дизайнеру наилучшим образом.
3. Изменяющийся параметр. Здесь речь идет о функциях, которые задает способ изменения текста или изображения. К числу наиболее востребованных можно отнести такие:
Это далеко не все параметры и функции, которые можно использовать в Фигме, чтобы сделать интересную анимацию при создании сайта. Однако чаще всего разработчики используют их, чего зачастую оказывается вполне достаточным.
Для создания интерактивного изображения или текста можно использовать прототип, с помощью которого обеспечивается взаимодействие с интерфейсом. Данная функция позволяет создавать схематичный макет сайта или же мобильного приложения путем создания нескольких экранов и последующей настройки анимационного перехода.
За счет прототипа можно открыть будущий проект прямо в браузере, после чего проверить, насколько он удобен и функционален для конечного пользователя. Таким образом, все эти операции можно провести еще на этапе разработки дизайна, так что это отличный способ для демонстрации своей работы как клиентам, так и коллегам.
Для примера можно создать обычный фрейм, нарисовав квадрат и обозначив его как Rectangle. Далее следует продублировать фрейм и в 2 раза уменьшить габариты нашей фигуры. После этого выделяем Rectangle и переходим на Prototype, который располагается с правой стороны. Здесь находим опцию interaction и жмем на «+», что позволит создать связь между двумя состояниями будущего анимационного элемента. Благодаря этому будет создана определенная связь, вследствие чего web-разработчик сможет уже выбрать то моушн-действие, которое требуется.
Как можно увидеть, разработчик может задать тот параметр, который требуется, начиная от перетаскивания (on drag) и заканчивая покиданием курсора (mouse leave). К вариантам также можно отнести удержание клика, наведение, нажатие горячей клавиши, при появлении курсора и так далее.
Следующий шаг – выбор самого действия, то есть того, что именно будет происходить с объектом после наведения на него мыши. Здесь также представлен широкий список вариантов, в числе которых следующее:
Если выбрать параметр None, то при наведении на объект ничего происходить не будет. Принимая во внимание тот факт, что на любом сайте присутствует огромное количество кнопок меню и различных иконах специалисту следует каждому из них задать переключение при помощи стрелок. Таким образом, в результате получается сложная логическая цепочка взаимодействий.
Чтобы определить, каким именно образом будет выполнен переход, нужно зайти в пункт Animation, где представлены разные варианты. Между прочим, отличительной характеристикой программы Фигма является возможность выбрать тот переход, который требуется из большого числа возможных. К наиболее популярным вариантам относят растворение (Dissolve), смахивание (Push), перемещение вовнутрь (Move in), перемещение наружу (Move out), а также варианты Slide in / Slide out, которые обозначают перемещение с растворением.
Одним из вариантов является функция Smart Animate, которая также активно применяется в программе Figma. Главной особенностью данной опции является возможность самостоятельного (автоматического) анимирования объектов, которые являются схожими по функциональности. При этом программа учитывает имена объектов, а также их место в определенной иерархии, что говорит об использовании Artificial Intelligence (искусственного интеллекта).
Для примера возьмем тот же квадрат, который использовался нами в предыдущем примере, после чего сделаем его зеленым и повернем на угол в 45°. При помощи опции
Smart Animate устанавливается связь, после чего программа сама предлагает оптимальный вариант перехода квадрата из одного состояния в другое. Любой текст анимируется аналогичным образом, что очень удобно и занимает минимум времени разработчика.
Чтобы расширить возможности web-дизайнера можно установить плагин Figmotion, что позволит получить новые функции в анимировании объектов. Сделать этого можно прямо в онлайн приложении Figma, для чего потребуется щелкнуть по опции гамбургер-меню, зайти в Plugins и выбрать Figmotion. Вместе с этим будет полезным инсталлировать также шрифты Google Sans или Product Sans, поскольку это даст возможность использовать наиболее интересные из них.
Примечательно, что плагин Figmotion функционирует как After Effects, поэтому для анимирования изображения создавать разные артборды не требуется. В примере с квадратом выше можно увидеть, что в ходе анимации фигура перемещается, но при этом во время движения не видим два отдельных квадрата. Просто один из них переходит в другой, что говорит о смене состояния. Теперь рассмотрим популярные примеры анимации, которые активно используются при разработке сайтов и мобильных приложений:
1. Появление боковой панели. Это эффект, при котором пользователь, кликая на меню, получает выплывающую боковую панель.
Для реализации создаем артборд и добавляем сюда элементы, которые будут располагаться в боковой панели. Затем уменьшаем непрозрачность прямоугольника (черного цвета) до 50%. Далее через плагин Figmotion создаем 3 варианта состояний времени (0, 300 и 7000 миллисекунд). Последние действия – указание параметров круга, в который будет преобразовываться иконка меню на несколько миллисекунд.
2. Появление выпадающего меню. Чтобы создать анимацию такого типа, нам также потребуется создать артборд, после чего добавить компонент More из раздела Assets. Здесь разработчик задает положение иконки, определяя также ее форму, высоту и ширину.
Отдельно преобразуется группа Icons в компонент, для чего задаются параметры по осям X и Y и тайминг (0, 300 и 700 мс). Следующий шаг – создание формы выпадающего меню, где также задается степень прозрачности фона.
Создание анимированного текста и разных изображений является очень перспективным направлением, которое активно развивается. Программа Figma открывает отличные возможности для самых разных видов анимации, где разработчик может гибко задавать требуемые настройки. Благодаря дополнительным плагинам функции Animation значительно расширяются, что открывает практически безграничный простор для творчества.