Ультимативный гайд по анимации в Figma: режим прототипирования, изинги, смарт-анимация, типы взаимодействия, триггеры и их свойства. Для новичков, чайников, любителей и профессионалов

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

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

Так как в этот раз ультимативный гайд по анимации, то разгуляемся не на шутку!

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

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

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

Дисклеймер: Я работаю на «старой» UI1 версии. Некоторые советы для новой версии могут быть не актуальными или работать по-другому. Также не будет платных функций: variables, conditional (возможно, напишу про них в отдельной статье).

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

Читать лучше с ноутбук или большого экрана. На телефоне может быть совсем мелко.

Всем привет!

Меня зовут Михаил Нежник. Я — автор, творец, квалифицированный инвестор и отец-молодец. Совмещаю это всё с продуктовым дизайном, в котором уже пять лет.

За это время сделал много интересных проектов. Мой опыт можно описать так: как в Спарте со скалы скидывали детей, так и меня жизнь кидала в разные направления, в которых опыта было мало. Приходилось быстро разбираться и выживать.

Подробнее о моём опыте и проектах вы можете узнать на сайте: https://nezhnik.com,

В своём канале t.me/nezhnik_life пишу про дизайн, геральдику, статьи, мысли, интересные факты и идеи.

Расскажу всё, что знаю.

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

Мы с вами разберём: виды и свойства анимации, нюансы и то, на что обращать внимание, изинги, принципы smart animate и другие важные вещи.

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

Самое важно в обучении — не бездумно заучивать, а понять смысл и применять знания на практике.

Обо всем по порядку.

Если вы нашли себя, то добро пожаловать! Если нет, всё равно рекомендую продолжить чтение.

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

Анимация или мультипликация — создание иллюзии движения объекта, которая получается она при последовательной смене изображений (кадров) с определённой частотой.

Для фильмов сейчас стандарт — 24 кадра в секунду.

Это количество привычно глазу и позволяет видеть плавную картинку, при этом оптимизировать вес или занимаемый объём материалов при производстве. Объём может доходить то десятков и сотен терабайт.

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

В пещере Шове во Франции специалисты нашли наскальные рисунки и, при поднесении лампы с мигающим светом заметили, что сюжеты «ожили» и животные начали двигаться.

Подробнее в статье Википедии и в репортаже BBC на YouTube на английском языке.

Анимация делится на виды:

Вот как раз в Figme мы можем использовать интерактивную анимацию для сайтов и приложений, а кто-то даже делает игры и повторил многим известную Flappy Bird на основе variables.

Разберём всё далее.

Чтобы его активировать, надо кликнуть на режим Prototype в первом верхнем углу или используйте шорткат Shift + E.

Если у вас не выбран слой при переходе в режим прототипирования, то будут отображаться две настройки: Device и Background.

Разберём каждый.

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

Можно выбрать: iPhone, iPad, iWatch, MacBook, TV, Google Pixel и другое. Список устройств огромный, поэтому показывать весь не буду.

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

Я пользовался этим, когда делал приложение для IOS и презентовал сценарии заказчику.

В остальных случаях всегда Device — None, Background #000 или #FFF и на это есть как минимум две причины:

Наглядно:

Для того, чтобы анимация могла работать, надо связать экраны или компоненты. Для этого перейдите в режим прототипа (справа сверху Prototype или шорткат Shift + E), наведите на грань элемента и появится иконка + в кружочке. Зажмите и тяните до нужного фрейма или компонента, затем отпустите.

Сразу после этого появится окно настройки анимации, типов взаимодействия и триггеров.

Наглядно:

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

Наглядно:

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

Если у вас настроен сценарий (Flow) то очень удобно возвращаться в его начало по клавише R. Это позволяет обновить сценарий и пройти его ещё раз.

Наглядно:

Если же вы не добавили сценарий (Flow) к макету, то по клавише R презентация макетов может пойти не по плану и покажется другой макет.

Наглядно:

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

Наглядно:

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

Можно просто скопировать анимацию и перенести на один или несколько объектов.

Для того, чтобы скопировать анимацию у другого объекта, надо кликнуть левой кнопкой мыши по области слева от названия, она подсветится голубым, и скопировать CTRL + C или command + C.

Наглядно:

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

Наглядно:

Чтобы удалить все связи за один раз, выберите все элементы и нажмите на иконку — .

Наглядно:

С Flow разобрались, двигаемся дальше.

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

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

Рассмотрим свойства каждого поведения отдельно.

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

Наглядно:

Фиксация на месте при скролле страницы (Fixed, stay in place).

Данная настройка фиксирует элемент на своём месте экрана при скролле и элемент остаётся на месте.

Удобно для фиксации чата, шапки или кнопки возврата на самый верх экрана.

Наглядно:

«Липкая» настройка (Sticky, stop at top edge).

Она сочетает в себе Scroll with parent и Fixed.

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

Русская народная мудрость: лучше 1 раз увидеть, чем 100 раз услышать.

Наглядно на вебе:

Наглядно на мобилке:

Свойство Sticky применено к цветным блокам.

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

Без скролла (No scrolling) — говорит само за себя, скролла на элементе не будет.

Горизонтальный (Horizontal) — включение горизонтального скролла.

Наглядно:

Вертикальный (Vertical) – включение вертикального скролла.

Наглядно:

В обе стороны — вертикальный и горизонтальный скролл (Both directions)

Позволяет перетаскивать контент внутри по всем направлениям.

С помощью него можно создать эффект карты или рабочего стола.

Наглядно:

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

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

Итак, то, к чему мы так долго шли — взаимодействия (Interactions).

Если у вас в устройстве (Device) ничего не выбрано или установлены веб-девайсы, то названия взаимодействий будут как слева, если выбран телефон — как справа.

На компьютерах мы кликаем мышкой, на телефонах — тапаем по экрану, всё логично.

Нет (None) — сама простое взаимодействие, а именно без какого либо взаимодействия. Эффект такой же, как у большинства от диплома о высшем образовании.

По клику или тапу (On click / On tap) — взаимодействие с элементом по клику или тапу по нему. Один из самых простых видов взаимодействия.

Наглядно:

По перетаскиванию (On drag) — взаимодействие при зажатии левой кнопки мыши и перетаскивании элемента. Подходит для скролла карточек, чипсов, параллакс-эффектов и другого.

Покажу свой пример из 2020 года. Да, тогда уже так можно было.

Наглядно:

Во время ховера (White hovering) — старт взаимодействия с элементом, когда курсор мыши появляется в поле элемента. Использую для кнопок, чек-боксов, радио-кнопок, разделов, карточек и многого другого.

Наглядно:

Во время долгого нажатия (While pressing) —вид взаимодействия, когда кликаешь клавишей мыши и держишь. Например с помощью него можно повторить анимацию нажатия кнопки.

Наглядно:

Клавиша или геймпад (Key / Gamepad) — можно назначить анимацию на определенные клавиши клавиатуры или геймпада.

Чаще используется, если у вас в продукте есть горячие клавиши, но больше подходит для игровых интерфейсов. Сделал игровой пример на основе всем известной матрицы :)

Наглядно:

Когда курсор внутри элемента (Mouse enter) — похоже на While hovering, только с тем отличием, что, если на элементе не будет Mouse leave, то анимация не вернется в начальное состояние, а останется. Удобно для показа боковых меню, игр и других схожих сценариев.

Понятней всего будет через сравнение, наглядно While hovering, Mouse enter без Mouse leave и Mouse enter + Mouse leave.

Наглядно с кнопками:

Наглядно с сайдбаром:

Думаю, тут требуются небольшие пояснения:

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

Сайдбар при типе анимации While hovering реагирует на ховер только в области или ширине изначального размера и, при выходе из него, элемент возвращается в изначальное или дефолтное состояние., не очевидно и плохо, не надо так ❌.

При типе анимации Mouse enter без Mouse leave я навожу курсор на элемент, воспроизводится анимация и не возвращается при выходе курсора за элемент. Можно этот тип анимации считать билетом в один конец — воспроизвелась и всё на этом, отката нет.

При типе анимации Mouse enter на свёрнутом сайдбаре + Mouse leave на раскрытом пока курсор находится внутри элемента сне сворачивается и работает, как и должно. Так делают дизайнеры и наши бро ✅

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

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

Когда курсор выходит из элемента (Mouse leave) — Можно сказать, что это прекращение анимации как у While hovering после выноса курсора из элемента.

Выше показал различия для полного понимания. Курсор уходит из элемента и возвращает этот элемент в дефолтное состояние.

Кликнули или тапнули и зажали (Mouse down / Touch down) и отпустили (Mouse up / Touch up)

Можно подумать, что тачдаун — это что-то связанное с американским и канадским футболом и будете в чём-то правы.

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

Наглядно:

Похожий принцип взаимодействия у Mouse enter и Mouse leave. То есть, если не добавить взаимодействие Mouse up / Touch up, то элемент останется и не вернётся в дефолтное состояние.

Наглядно:

После задержки (After delay) — тут всё просто. Воспроизведение анимации после задержки.

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

Сделал пример по игре God of War Ragnarok загрузки рун. Какие ещё типы взаимодействий помимо After delay? :)

Наглядно:

Figma даёт возможность разгуляться и сделать всё, что душе угодно. Видов анимаций достаточно много, разберём каждый.

Нет (None) — без анимации.

Направить к (Navigate to) — Простая анимация перехода между экранами.

Наглядно:

Сменить на (Change to) — доступно только при анимации компонентов и их вариантов. Когда, например, при ховере один вариант меняется на другой.

Наглядно:

Назад (Back) — возврат на предыдущий экран, с которого мы перешли.

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

Наглядно:

Вариации (Set variable), (Set variable mode) и условия (Conditional) — платные, рассматривать, как писал в самом начале, не будем.

Перемещение к (Scroll to) — перемещение экрана до объекта. Удобно для показа пользователю место нахождения какого-то блока или возврата экрана наверх.

При этом есть два свойства: изменение величины скролла по вертикали и по горизонтали.

Обязательно сделать Overflow – Vertical.

Минусовое значение, например –24 означает, что скролл будет рассчитываться так: верхняя граница блока или элемента, к которому скроллится экран + ещё 24 пикселя вверх (в случае, если позволяет место).

Наглядно:

Нулевое значение — скролл будет до верхней границы блока или элемента без отступов.

Наглядно:

Положительное значение, например, 160, означает, что скролл до будет рассчитываться так: верхняя граница блока или элемента, к которому скроллится экран + ещё 160 пикселей вниз или на максимум (в случае, если позволяет место).

Наглядно:

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

Наглядная схема, лучше приблизить:

Обязательно сделать Overflow – Horizontal.

Работает по анимации всё работает точно также (мы кликаем или тапаем и либо экран переносит нас к нужному элементу, либо элемент к нам), то в значениях инверсия.

Например, если в вертикальном варианте положительное значение переносило нас вниз, то в горизонтальном — налево (или наверх, если перевернуть экран) и наоборот: отрицательное значение в вертикальном варианте переносило нас наверх, то в горизонтальном варианте переносит направо (или вниз, если повернуть экран).

Нулевое значение — по левой границе элемента.

Положительное значение, например, 24, означает, что скролл будет до элемента + 24 пикселя влево.

Минусовое значение, например –24 означает, что скролл будет до предмета и ещё 24 пикселя вправо (в случае, если позволяет место).

Наглядно в вебе:

С помощью Scroll to можно делать даже интерактивные карты, только надо настроить Overflow — Both directions.

Наглядно:

Открыть ссылку (Open link) — возможность открыть ссылку по клику при прототипировании.

Наглядно:

Открыть наложение (Open overlay) и Закрыть наложение (Close overlay) — накладывает или открывает выбранный элемент поверх интерфейса с возможностью закрытия. Удобно для модальных окон, боковых шторок и схожих по смыслу элементов.

Можно затемнять задний фон и выбирать расположение.

Наглядно на мобиле:

Сменить наложение (Swap overlay) — похожий принцип как и у Change to, когда меняем одно на другое. Например, если у модалки есть шаги или другой похожий сценарий.

Наглядно на вебе:

На этом блок с действиями в режиме прототипа считаю законченным.

Как вы видите, фирма даёт огромные возможности тем, кто владеет знаниями и знает, как их применять. Переходим к типам анимации в режиме прототипа.

Есть 8 типов анимации:

У всех типов есть превью и можно сразу посмотреть, как это будет выглядеть и скорость анимации. Поэтому не буду подробно на этом останавливаться:

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

Наглядно:

Растворение (Dissolve) — более плавный переход с анимацией «растворения» одного экрана или элемента и появления другого. Для меня это полная замена Instant.

Наглядно:

Умная анимация (Smart animate) — та самая анимация, которая придаст жизни и красоты вашим макетам, если уметь ей пользоваться. Я делаю это постоянно.

Примеры, которые я приводил выше в демонстрации, сделаны с помощью Smart animate, поэтому их достаточно.

Наглядно, одинаковое название слоёв ✅:

Наглядно, разное название слоёв ❌:

Движение в / Движение из (Move in / Move out) — анимация появления элемента как будто это презентация. Направления есть во все стороны.

Наглядно:

Можно активировать чек-бокс на свойстве Animate matching layers, но тогда эффект презентации и слайдов теряется. Нужно ситуативно, я не использую.

Наглядно Animate matching layers:

Толкание (Push) — название говорит само за себя. Экран, к которому привязан этот тип анимации, будет толкать текущий. Можно выбрать направление.

Наглядно:

Slide in / Slide out — похоже на Move in / Move out. Можно использовать также для презентаций или показывать дополнительные элементы, у которых есть высота и они будут двигать экран, а не висеть поверх, как, например, модальное окно.

В этом случае лучше активировать чек-бокс на свойстве Animate matching layers

Наглядно:

Осталось дело за малым — сглаживания.

Плавность (Easing) — это замедление или ускорение анимации элемента в рамках одного движения.

По количеству их достаточно много, но в целом разбиты на три группы:

Линейная (Linear) — просто плавная анимация без рывков и ускорений. Можно представить на примере автомобиля: если всё время ехать 100 км/ч, то за один час автомобиль проедет 100 км.

Наглядно:

Переводил термины сам с упором на их сущность. Гугл перевёл Ease in and out как Легкость входа и выхода, и, хоть он мне очень нравится, будем пользоваться моим. Он точнее атомных часов.

Сглаженная в начале (Ease in) — анимация начинается медленно и ускоряется к концу.

Наглядно:

Сглаженная в конце (Ease out) — анимация начинается быстро и замедляется к концу.

Наглядно:

Сглаженная в начале и в конце (Ease in and out) — анимация начинается медленно, ускоряется в середине и замедляется к концу. Пользуюсь чаще всего.

Наглядно:

Сглаженная в начале и назад (Ease in back) — анимация начинается с того, что элемент отходит назад, а потом будто выстреливает и ускоряется к концу.

Наглядно:

Сглаженная в конце и назад (Ease out back) — анимация начинается быстро, элемент уходит дальше за край и возвращается назад.

Наглядно:

Сглаженная в начале, в конце и назад (Ease in and out back) — совмещение предыдущих анимаций. анимация начинается с того, что элемент отходит назад, а потом будто выстреливает и ускоряется к середине, потом уходит дальше за край и возвращается назад.

Наглядно:

Настроенная кривая (Custom bezier) — появляется настраиваемая кривая анимации, которую вы можете сделать под себя, в том числе и с помощью цифр.

Наглядно:

Нежная (Gentle) — анимация преднастроена так, что элемент ускоряется вначале, замедляется к концу и вылетает немного за пределы, как в Back, и возвращается.

Наглядно:

Быстрая (Quick) — быстрее и мощнее, чем Gentle.

Наглядно:

Прыгающая (Bouncy) — ещё мощнее, даже по сравнению с Quick.

Наглядно:

Медленная (Slow) — нежнее и медленнее, чем Gentle.

Наглядно:

Настроенная пружина (Custom spring) —название говорит само за себя. Анимация происходит так, будто бы сначала натянули пружину, а потом отпустили. Настраивается по графику или с помощью цифр.

Наглядно:

Ну что, гайд подошёл к концу.

Гайд содержит 65 868 символов без пробелов, 4 100 слов, 41 изображение, 58 видео-демонстраций.

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

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

Конечно, я мог что-то упустить и, если вспомню или меня поправят по делу в комментариях, то дополню статью.

На этом всё.

Приходите в мой канал — t.me/nezhnik_life

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

Пишите в личку — t.me/nezhnik

По делу, за советом, созвоном-знакомством (первая встреча бесплатно для новых подписчиков в канале😼), менторством, критикой, предложениями, идеями, комментариями и другим.

Смотрите сайт-портфолио — https://nezhnik.com

С вами был Михаил Нежник.

До новых встреч!