реклама
разместить

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

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

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

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

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

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

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

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

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

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

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

Содержание

Минутка самопрезентации

Всем привет!

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

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

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

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

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

Введение

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

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

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

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

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

Статья будет полезна тем, кто:

  • хочет начать применять анимацию, но не знает как или просто боится;
  • выбрал тип анимации «smart animate», но не понимает, почему она не плавная;
  • «правильно» слинковал экраны, но при обновлении показывается не стартовый;
  • считает, что знает о Figma всё и выучил шорткаты;
  • дизайнер, маркетолог, менеджер (топ и обычный), аналитик, разработчик да и просто человек.

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

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

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

Материалы для гайда, остальное за кадром
Материалы для гайда, остальное за кадром

Что такое анимация и с чем её едят?

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

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

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

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

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

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

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

Самый первый рисованный мультфильм — «Фантасмагория». Режиссёр, автор сценария, продюсер, художник-аниматор и оператор — Эмиль Коль. Премьера состоялась в Париже 17 августа 1908 года.

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

  • Компьютерная анимация — создание 2D и/или 3D анимации на компьютере;
  • Рисованная анимация — классический вид анимации, который использует ручное рисование каждого кадра от руки на бумаге, пленке или в цифровом формате;
  • Кукольная анимация — процесс создания анимации путем перемещения кукол и объектов окружения;
  • Ротоскопия — техника двумерной анимации, когда сначала снимают на кинопленку (видеопленку или на любой цифровой носитель) реальных актеров и элементы декораций, а потом обводят контуры отснятого материала, превращая его в анимацию;
  • Моушн-графика — процесс создания анимации путем использования компьютерных алгоритмов, которые следят за движениями объектов в реальном времени;
  • Анимация стоп-кадром — метод, при котором каждый кадр анимации создается вручную путем перемещения или изменения объектов на сцене;
  • Интерактивная анимация — вид анимации, который позволяет зрителю участвовать в процессе анимации и взаимодействовать с ней, изменяя направление сюжета, параметры объектов или поведение персонажей.

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

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

Режим прототипирования (Prototype)

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

Важно: режим Present и Preview работают только на фреймах (Frame), секциях (Section) и автолейаутах (Aotu layout), а на картинках и шейпах — нет. Если у вас выбрана картинка или шейп и потом в режим Present или Preview, то на экране будет показываться другой макет во фрейме, секции или автолейауте.

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

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

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

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

Тип отображаемого устройства в Present или Preview (Device) и цвет заднего фона (Background).

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

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

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

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

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

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

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

  1. Лишний визуал и цвета будут смещать акцент с самого интерфейса и отвлекать, а это не цель презентации.
  2. У каждого устройства есть своё разрешение экрана, которое может не совпадать с макетами. Например у MacBook 16 это 1728х1117 пикселей, а у вас макеты могут быть в размере 1680х900 и придется с помощью клавиши Z или настроек справа сверху переключать режимы отображения и искать подходящий, например Responsive, что не всегда удобно.

Наглядно:

Как сделать так, чтобы сделать связь для анимации

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

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

Наглядно:

Пути или сценарии (Flows, Flow starting point)

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

Наглядно:

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

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

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

Наглядно:

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

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

Наглядно:

Сценарий (Flow) у макетов НЕ включен и обновление или возврат в начальную точку по клавише R переносит нас на другой макет с белым фоном, которого нет в нашей цепочке.

Бонус

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

Наглядно:

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

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

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

Наглядно:

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

Наглядно:

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

Наглядно:

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

Поведение элемента при скролле (Scroll behavior)

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

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

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

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

Позиция элемента при скролле (Position)

Скролл со страницей, в которую помещён элемент (Scroll with parent).

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

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

Наглядно:

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

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

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

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

Наглядно:

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

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

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

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

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

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

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

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

Настройка скролла в самом элементе, когда его контент выходит за рамки этого элемента (Overflow)

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

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

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

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

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

Наглядно:

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

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

Наглядно:

Вот такие интерактивные компоненты можно легко собирать с помощью вариантов и умной анимации

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

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

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

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

Наглядно:

Что бы не делал, это демонстрация загружается как видео, а не Gif-анимация

Для всех типов скролла Overflow кроме no scrolling важно: чтобы скролл работал, нужно сделать так, чтобы количество элементов было больше, чем область скролла и/или сами элемент(ы) выходили за эту область.

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

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

Типы взаимодействий и триггеры в режиме прототипа (Interactions & Prototype triggers)

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

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

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

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

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

Нет (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? :)

Наглядно:

Типы действий в режиме прототипа (Prototype action types) — Navigate to, Change to, Back, Scroll to, Open link, Open Swap & Close overlay

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

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

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

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

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

Наглядно:

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

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

Наглядно:

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

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

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

Наглядно:

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

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

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

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

Scroll to по вертикали

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

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

Наглядно:

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

Наглядно:

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

Наглядно:

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

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

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

Scroll to по горизонтали

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

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

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

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

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

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

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

Бонус

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

Наглядно:

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

Наглядно:

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

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

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

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

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

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

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

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

Типы анимаций в режиме прототипа (Prototype animations)

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

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

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

Сделал на smart animate, а не просто записал экран :)

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

Наглядно:

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

Наглядно:

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

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

Важно: фигма при смарт-анимации сканирует макеты и сравнивает, что изменилось. Если, например, один элемент с одинаковым названием изменил размер, переместился, раскрылся или наоборот скрылся, то анимация будет плавная и красивая. Если название элемента на разных экранах будет отличаться, например «Кнопка» и «кнопка», фигма всё равно анимирует, но эффект будет похожий больше на Dissolve.

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

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

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

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

Наглядно:

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

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

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

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

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

Наглядно:

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

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

Наглядно:

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

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

Сглаживания или плавности (Easings)

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

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

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

Линейная анимация

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

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

Наглядно:

Фанатам Need for Speed: Most Wanted посвящается

Сглаженная анимация

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

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

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

Наглядно:

Специально сделал помедленнее, чтобы была видна разница

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

Преднастроенная анимация

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

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

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

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

Наглядно:

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

Небольшая статистика

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

Заключение

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

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

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

На этом всё.

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

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

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

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

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

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

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

1919
реклама
разместить
Начать дискуссию
Главный навык в карьере дизайнера

Есть множество вещей, которые помогают мне как дизайнеру в работе. Например, components и auto-layout в Figma заметно ускоряют создание макетов, а единая дизайн-система упрощает взаимодействие с разработкой. ChatGPT и вовсе я использую почти на каждом этапе. Но все это лишь инструменты. Мой главный навык заключается в другом.

Главный навык в карьере дизайнера
44
22
реклама
разместить
Найм UX/UI дизайнера глазами нанимающей стороны

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

1616
15 Способов разозлить аудиторию и поднять охваты. Табличка с пояснениями и примерами. Забирай бесплатно от гуру провокации Батюшки Бизнесменского!

Кто, если не я, может вещать о том, как делать инфоповоды и топовые охваты?! Чек-лист уже ждёт тебя.

15 Способов разозлить аудиторию и поднять охваты. Табличка с пояснениями и примерами. Забирай бесплатно от гуру провокации Батюшки Бизнесменского!
66
44
22
Время идёт, а ничего не меняется. Самыми популярными вопросами среди начинающих дизайнеров остаются...
Время идёт, а ничего не меняется. Самыми популярными вопросами среди начинающих дизайнеров остаются...

Сегодня я попробую ответить на первый вопрос: «С чего начать?»

66
22
Основные горячие клавиши в фигма на русском языке на Windows и Mac

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

Горячие клавиши для переключения между инструментами в Figma на русском языке
22
Роль анимаций в веб-дизайне: как и когда использовать анимации на сайте.

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

Роль анимаций в веб-дизайне: как и когда использовать анимации на сайте.
Как анимации и WebGL делают бизнес успешнее: взгляд изнутри

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

11
Как Midjourney и ChatGPT помогают писателям преодолеть ТВОРЧЕСКИЙ КРИЗИС

Идеи закончились? Бриф пуст, проект буксует, а вдохновение не приходит? Творческий кризис – реальность не только для писателей, но и для дизайнеров, художников, маркетологов и других креаторов. В этой статье я покажу, как Midjourney и ChatGPT помогают генерировать идеи, находить свежие решения и превращать творческий процесс в игру. Освойте мощный…

33
Применение моушн-дизайна в работе it компаний
Применение моушн-дизайна в работе it компаний
11
реклама
разместить
Motion-дизайн: новая эра визуального повествования
Motion-дизайн: новая эра визуального повествования

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

Дизайн и разработка — как передать макеты чтобы не было слёз
Дизайн и разработка — как передать макеты чтобы не было слёз
От хаоса к структуре. Как организовать взаимодействие дизайнера и фронтов.
Делюсь приемами, которые работают.
[]