Ультимативный гайд по анимации в Figma: режим прототипирования, изинги, смарт-анимация, типы взаимодействия, триггеры и их свойства. Для новичков, чайников, любителей и профессионалов
За время своей работы я достаточно изучил Figma, чтобы не только хорошо ей пользоваться и получать результат, но и начать делиться своими знаниями.
В предыдущем ультимативном гайде я по полочкам разобрал нюансы работы в Figma: организация проекта, слои, автолейауты, ограничители, компоненты, варианты и стили.
Так как в этот раз ультимативный гайд по анимации, то разгуляемся не на шутку!
В данной работе затрону основные моменты и нюансы при работе с анимацией и сдобрю различными примерами, которые дадут комплексное понимание того, как, чем и для чего пользоваться.
Своей задачей вижу дать именно удочку, чтобы у читателя сформировалось полное понимание всех возможностей и функций.
Прочитав вдумчиво гайд, вы разберётесь со всеми базовыми функциями, типами и видами анимации, позволяющими оживлять сайты, приложения, внутренние сервисы и делать это в любой похожей программе.
Дисклеймер: Я работаю на «старой» UI1 версии. Некоторые советы для новой версии могут быть не актуальными или работать по-другому. Также не будет платных функций: variables, conditional (возможно, напишу про них в отдельной статье).
Статью можно читать по отдельным интересующим темам, но рекомендую прочесть полностью сверху-вниз, потому что некоторые вещи, которые показываю, могут быть разобраны ранее. Это поможет комплексно понять материал и именно так, как я его задумал.
Читать лучше с ноутбук или большого экрана. На телефоне может быть совсем мелко.
Содержание
- Кто я такой и почему мне можно доверять
- Введение, кому будет полезен гайд
- Что такое анимация и с чем её едят?
- Режим прототипирования (Prototype)
- Поведение элемента при скролле (Scroll behavior)
- Типы взаимодействий и триггеры в режиме прототипа (Interactions & Prototype triggers)
- Типы действий в режиме прототипа (Prototype action types) — Navigate to, Change to, Back, Scroll to, Open link, Open Swap & Close overlay
- Типы анимаций в режиме прототипа (Prototype animations)
- Сглаживания или плавности (Easings)
- Небольшая статистика
- Заключение
Минутка самопрезентации
Всем привет!
Меня зовут Михаил Нежник. Я — автор, творец, квалифицированный инвестор и отец-молодец. Совмещаю это всё с продуктовым дизайном, в котором уже пять лет.
За это время сделал много интересных проектов. Мой опыт можно описать так: как в Спарте со скалы скидывали детей, так и меня жизнь кидала в разные направления, в которых опыта было мало. Приходилось быстро разбираться и выживать.
Подробнее о моём опыте и проектах вы можете узнать на сайте: https://nezhnik.com,
В своём канале t.me/nezhnik_life пишу про дизайн, геральдику, статьи, мысли, интересные факты и идеи.
Расскажу всё, что знаю.
Введение
На старте карьеры в дизайне мне приходилось всё изучать самому. Пытливый ум подсказывал смотреть ютуб, читать статьи, просматривать уроки, портфолио других и повторять то, что видел.
Мы с вами разберём: виды и свойства анимации, нюансы и то, на что обращать внимание, изинги, принципы smart animate и другие важные вещи.
Так случилось, что мне периодически приходится и приходилось консультировать людей по работе в Figma. На объяснения уходило много времени и не было такого волшебного места, куда бы я мог их отправить. Поэтому решил, что пришло время зафиксировать все свои знания на бумаге и передать их миру.
Самое важно в обучении — не бездумно заучивать, а понять смысл и применять знания на практике.
Обо всем по порядку.
Статья будет полезна тем, кто:
- хочет начать применять анимацию, но не знает как или просто боится;
- выбрал тип анимации «smart animate», но не понимает, почему она не плавная;
- «правильно» слинковал экраны, но при обновлении показывается не стартовый;
- считает, что знает о Figma всё и выучил шорткаты;
- дизайнер, маркетолог, менеджер (топ и обычный), аналитик, разработчик да и просто человек.
Если вы нашли себя, то добро пожаловать! Если нет, всё равно рекомендую продолжить чтение.
После прочтения статьи у вас могут возникнуть вопросы, желание поделиться своим опытом, захотите поспорить и привести свои примеры по анимации, не стесняйтесь в комментариях.
Важно: я собрал файл со всей анимацией для того, чтобы можно было зайти, попробовать и посмотреть, как и что было сделано для гайда. Опубликую после того, как в моём канале будет как минимум 300 подписчиков: а лучше 500, ссылка на канал в конце. Расставлю всё в файле по порядку и оформлю, пока будет набираться эта цифра :)
Что такое анимация и с чем её едят?
Анимация или мультипликация — создание иллюзии движения объекта, которая получается она при последовательной смене изображений (кадров) с определённой частотой.
Для фильмов сейчас стандарт — 24 кадра в секунду.
Это количество привычно глазу и позволяет видеть плавную картинку, при этом оптимизировать вес или занимаемый объём материалов при производстве. Объём может доходить то десятков и сотен терабайт.
Попытки запечатлеть движение в рисунке начались ещё в первобытную эпоху, так называемая наскальная живопись.
В пещере Шове во Франции специалисты нашли наскальные рисунки и, при поднесении лампы с мигающим светом заметили, что сюжеты «ожили» и животные начали двигаться.
Подробнее в статье Википедии и в репортаже BBC на YouTube на английском языке.
Самый первый рисованный мультфильм — «Фантасмагория». Режиссёр, автор сценария, продюсер, художник-аниматор и оператор — Эмиль Коль. Премьера состоялась в Париже 17 августа 1908 года.
Анимация делится на виды:
- Компьютерная анимация — создание 2D и/или 3D анимации на компьютере;
- Рисованная анимация — классический вид анимации, который использует ручное рисование каждого кадра от руки на бумаге, пленке или в цифровом формате;
- Кукольная анимация — процесс создания анимации путем перемещения кукол и объектов окружения;
- Ротоскопия — техника двумерной анимации, когда сначала снимают на кинопленку (видеопленку или на любой цифровой носитель) реальных актеров и элементы декораций, а потом обводят контуры отснятого материала, превращая его в анимацию;
- Моушн-графика — процесс создания анимации путем использования компьютерных алгоритмов, которые следят за движениями объектов в реальном времени;
- Анимация стоп-кадром — метод, при котором каждый кадр анимации создается вручную путем перемещения или изменения объектов на сцене;
- Интерактивная анимация — вид анимации, который позволяет зрителю участвовать в процессе анимации и взаимодействовать с ней, изменяя направление сюжета, параметры объектов или поведение персонажей.
Вот как раз в Figme мы можем использовать интерактивную анимацию для сайтов и приложений, а кто-то даже делает игры и повторил многим известную Flappy Bird на основе variables.
Разберём всё далее.
Режим прототипирования (Prototype)
Чтобы его активировать, надо кликнуть на режим Prototype в первом верхнем углу или используйте шорткат Shift + E.
Важно: режим Present и Preview работают только на фреймах (Frame), секциях (Section) и автолейаутах (Aotu layout), а на картинках и шейпах — нет. Если у вас выбрана картинка или шейп и потом в режим Present или Preview, то на экране будет показываться другой макет во фрейме, секции или автолейауте.
Если у вас не выбран слой при переходе в режим прототипирования, то будут отображаться две настройки: Device и Background.
Разберём каждый.
Тип отображаемого устройства в Present или Preview (Device) и цвет заднего фона (Background).
В фигме за демократию, поэтому можно выбрать, каким образом будет показываться ваш макет: так, как он выглядит на рабочем столе или внутри девайса (телефон, ноутбук).
Можно выбрать: iPhone, iPad, iWatch, MacBook, TV, Google Pixel и другое. Список устройств огромный, поэтому показывать весь не буду.
Так выглядит панель, если выбрали устройство и изменили цвет заднего фона:
Я пользовался этим, когда делал приложение для IOS и презентовал сценарии заказчику.
- Лишний визуал и цвета будут смещать акцент с самого интерфейса и отвлекать, а это не цель презентации.
- У каждого устройства есть своё разрешение экрана, которое может не совпадать с макетами. Например у MacBook 16 это 1728х1117 пикселей, а у вас макеты могут быть в размере 1680х900 и придется с помощью клавиши Z или настроек справа сверху переключать режимы отображения и искать подходящий, например Responsive, что не всегда удобно.
Наглядно:
Как сделать так, чтобы сделать связь для анимации
Для того, чтобы анимация могла работать, надо связать экраны или компоненты. Для этого перейдите в режим прототипа (справа сверху Prototype или шорткат Shift + E), наведите на грань элемента и появится иконка + в кружочке. Зажмите и тяните до нужного фрейма или компонента, затем отпустите.
Сразу после этого появится окно настройки анимации, типов взаимодействия и триггеров.
Наглядно:
Пути или сценарии (Flows, Flow starting point)
Пути или сценарии — очень полезная функция при презентации и прототипировании. Она позволяет разделять сценарии и быстро к ним переключаться в режиме презентации.
Наглядно:
Чтобы понять, что на макете уже есть сценарий, то достаточно в режиме прототипирования посмотреть на верхний левый угол макета. Должен появиться светло-синий флажок с названием сценария и кнопка для превью.
Если у вас настроен сценарий (Flow) то очень удобно возвращаться в его начало по клавише R. Это позволяет обновить сценарий и пройти его ещё раз.
Наглядно:
Если же вы не добавили сценарий (Flow) к макету, то по клавише R презентация макетов может пойти не по плану и покажется другой макет.
Наглядно:
Бонус
Важно: Если сценарий предполагает, что на экран можно попасть с нескольких мест, то можно выбрать все элементы и потянуть связь до нужного. Значительно ускоряет прототипирование и облегчает настройку анимации.
Наглядно:
Если вы уже настроили анимацию и хотите сделать такую же у другого сценария или компонента, то не обязательно заново выставлять все свойства.
Можно просто скопировать анимацию и перенести на один или несколько объектов.
Для того, чтобы скопировать анимацию у другого объекта, надо кликнуть левой кнопкой мыши по области слева от названия, она подсветится голубым, и скопировать CTRL + C или command + C.
Наглядно:
Чтобы настроить одинаковую анимацию у разных элементов, надо выделить все элементы и кликнуть на саму анимацию. В окне изменить свойства и они применяется для всех элементов.
Наглядно:
Чтобы удалить все связи за один раз, выберите все элементы и нажмите на иконку — .
Наглядно:
С Flow разобрались, двигаемся дальше.
Поведение элемента при скролле (Scroll behavior)
Это очень полезная функция, которой я часто пользуюсь. С помощью неё можно легко и быстро зафиксировать шапку, кнопку чата или любые другие элементы, которые будут двигаться вслед за скроллом экрана.
Также с помощью функции Sticky можно сделать так, чтобы скролл элемента был по определенной высоте, а потом элемент уходил вслед за экраном.
Рассмотрим свойства каждого поведения отдельно.
Позиция элемента при скролле (Position)
Скролл со страницей, в которую помещён элемент (Scroll with parent).
Данная настройка устанавливается по умолчанию. Элемент будет идти или скроллиться вслед за страницей.
Наглядно:
Фиксация на месте при скролле страницы (Fixed, stay in place).
Данная настройка фиксирует элемент на своём месте экрана при скролле и элемент остаётся на месте.
Удобно для фиксации чата, шапки или кнопки возврата на самый верх экрана.
Наглядно:
«Липкая» настройка (Sticky, stop at top edge).
Она сочетает в себе Scroll with parent и Fixed.
Позволяет фиксировать элемент на экране в определённой области внутри блока и, при достижении его границ, далее скроллиться уже вместе со страницей. Звучит сложно, но на самом деле всё просто.
Русская народная мудрость: лучше 1 раз увидеть, чем 100 раз услышать.
Наглядно на вебе:
Наглядно на мобилке:
Свойство Sticky применено к цветным блокам.
Настройка скролла в самом элементе, когда его контент выходит за рамки этого элемента (Overflow)
Такое может быть в дропдауне, селектах, блоках с горизонтальными карточками, картами и других элементах.
Без скролла (No scrolling) — говорит само за себя, скролла на элементе не будет.
Горизонтальный (Horizontal) — включение горизонтального скролла.
Наглядно:
Вертикальный (Vertical) – включение вертикального скролла.
Наглядно:
В обе стороны — вертикальный и горизонтальный скролл (Both directions)
Позволяет перетаскивать контент внутри по всем направлениям.
С помощью него можно создать эффект карты или рабочего стола.
Наглядно:
Для всех типов скролла Overflow кроме no scrolling важно: чтобы скролл работал, нужно сделать так, чтобы количество элементов было больше, чем область скролла и/или сами элемент(ы) выходили за эту область.
В противном случае появится иконка с восклицательным знаком, скролла не будет и Figma будет ругаться инструкцией.
Типы взаимодействий и триггеры в режиме прототипа (Interactions & Prototype triggers)
Мы рассмотрели базу, которая поможет нам продвинуться дальше. В этот раз без достижений.
Итак, то, к чему мы так долго шли — взаимодействия (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? :)
Наглядно:
Типы действий в режиме прототипа (Prototype action types) — Navigate to, Change to, Back, Scroll to, Open link, Open Swap & Close overlay
Figma даёт возможность разгуляться и сделать всё, что душе угодно. Видов анимаций достаточно много, разберём каждый.
Нет (None) — без анимации.
Направить к (Navigate to) — Простая анимация перехода между экранами.
Наглядно:
Сменить на (Change to) — доступно только при анимации компонентов и их вариантов. Когда, например, при ховере один вариант меняется на другой.
Наглядно:
Назад (Back) — возврат на предыдущий экран, с которого мы перешли.
Помогает не делать большое количество связей и взаимодействий. Если есть несколько сценариев, как попасть на экран, то поможет возвращаться на предыдущий экран любого сценария.
Наглядно:
Вариации (Set variable), (Set variable mode) и условия (Conditional) — платные, рассматривать, как писал в самом начале, не будем.
Перемещение к (Scroll to) — перемещение экрана до объекта. Удобно для показа пользователю место нахождения какого-то блока или возврата экрана наверх.
При этом есть два свойства: изменение величины скролла по вертикали и по горизонтали.
Scroll to по вертикали
Обязательно сделать Overflow – Vertical.
Минусовое значение, например –24 означает, что скролл будет рассчитываться так: верхняя граница блока или элемента, к которому скроллится экран + ещё 24 пикселя вверх (в случае, если позволяет место).
Наглядно:
Нулевое значение — скролл будет до верхней границы блока или элемента без отступов.
Наглядно:
Положительное значение, например, 160, означает, что скролл до будет рассчитываться так: верхняя граница блока или элемента, к которому скроллится экран + ещё 160 пикселей вниз или на максимум (в случае, если позволяет место).
Наглядно:
Отступами надо пользоваться, чтобы скролл не останавливался впритык к концу экрана, а выходил чуть выше или ниже, с ним смотрится аккуратнее.
Наглядная схема, лучше приблизить:
Scroll to по горизонтали
Обязательно сделать Overflow – Horizontal.
Работает по анимации всё работает точно также (мы кликаем или тапаем и либо экран переносит нас к нужному элементу, либо элемент к нам), то в значениях инверсия.
Например, если в вертикальном варианте положительное значение переносило нас вниз, то в горизонтальном — налево (или наверх, если перевернуть экран) и наоборот: отрицательное значение в вертикальном варианте переносило нас наверх, то в горизонтальном варианте переносит направо (или вниз, если повернуть экран).
Нулевое значение — по левой границе элемента.
Положительное значение, например, 24, означает, что скролл будет до элемента + 24 пикселя влево.
Минусовое значение, например –24 означает, что скролл будет до предмета и ещё 24 пикселя вправо (в случае, если позволяет место).
Наглядно в вебе:
Бонус
С помощью Scroll to можно делать даже интерактивные карты, только надо настроить Overflow — Both directions.
Наглядно:
Открыть ссылку (Open link) — возможность открыть ссылку по клику при прототипировании.
Наглядно:
Открыть наложение (Open overlay) и Закрыть наложение (Close overlay) — накладывает или открывает выбранный элемент поверх интерфейса с возможностью закрытия. Удобно для модальных окон, боковых шторок и схожих по смыслу элементов.
Можно затемнять задний фон и выбирать расположение.
Наглядно на мобиле:
Сменить наложение (Swap overlay) — похожий принцип как и у Change to, когда меняем одно на другое. Например, если у модалки есть шаги или другой похожий сценарий.
Наглядно на вебе:
На этом блок с действиями в режиме прототипа считаю законченным.
Как вы видите, фирма даёт огромные возможности тем, кто владеет знаниями и знает, как их применять. Переходим к типам анимации в режиме прототипа.
Типы анимаций в режиме прототипа (Prototype animations)
Есть 8 типов анимации:
У всех типов есть превью и можно сразу посмотреть, как это будет выглядеть и скорость анимации. Поэтому не буду подробно на этом останавливаться:
Мгновенно (Instant) — просто переход без какой либо анимации. Происходит резко, получается рваный эффект, смотрится не очень. Не пользуюсь, лучше уж по дефолту ставить следующий тип.
Наглядно:
Растворение (Dissolve) — более плавный переход с анимацией «растворения» одного экрана или элемента и появления другого. Для меня это полная замена Instant.
Наглядно:
Умная анимация (Smart animate) — та самая анимация, которая придаст жизни и красоты вашим макетам, если уметь ей пользоваться. Я делаю это постоянно.
Примеры, которые я приводил выше в демонстрации, сделаны с помощью Smart animate, поэтому их достаточно.
Важно: фигма при смарт-анимации сканирует макеты и сравнивает, что изменилось. Если, например, один элемент с одинаковым названием изменил размер, переместился, раскрылся или наоборот скрылся, то анимация будет плавная и красивая. Если название элемента на разных экранах будет отличаться, например «Кнопка» и «кнопка», фигма всё равно анимирует, но эффект будет похожий больше на Dissolve.
Наглядно, одинаковое название слоёв ✅:
Наглядно, разное название слоёв ❌:
Движение в / Движение из (Move in / Move out) — анимация появления элемента как будто это презентация. Направления есть во все стороны.
Наглядно:
Можно активировать чек-бокс на свойстве Animate matching layers, но тогда эффект презентации и слайдов теряется. Нужно ситуативно, я не использую.
Наглядно Animate matching layers:
Толкание (Push) — название говорит само за себя. Экран, к которому привязан этот тип анимации, будет толкать текущий. Можно выбрать направление.
Наглядно:
Slide in / Slide out — похоже на Move in / Move out. Можно использовать также для презентаций или показывать дополнительные элементы, у которых есть высота и они будут двигать экран, а не висеть поверх, как, например, модальное окно.
В этом случае лучше активировать чек-бокс на свойстве Animate matching layers
Наглядно:
Осталось дело за малым — сглаживания.
Сглаживания или плавности (Easings)
Плавность (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
С вами был Михаил Нежник.
До новых встреч!
Есть множество вещей, которые помогают мне как дизайнеру в работе. Например, components и auto-layout в Figma заметно ускоряют создание макетов, а единая дизайн-система упрощает взаимодействие с разработкой. ChatGPT и вовсе я использую почти на каждом этапе. Но все это лишь инструменты. Мой главный навык заключается в другом.
Всем привет! В этой статье поговорим о процессе найма UX/UI дизайнера со стороны нанимающей стороны, на что обращаем внимание, как смотрим и каких ошибок лучше избежать. Статья будет в формате вопрос-ответ, просто потому что мне так легче думается и пишется и, надеюсь, так будет меньше воды. Поехали.
Кто, если не я, может вещать о том, как делать инфоповоды и топовые охваты?! Чек-лист уже ждёт тебя.
Сегодня я попробую ответить на первый вопрос: «С чего начать?»
Горячие клавиши в Figma, или Keyboard Shortcuts, — это мощное оружие для ускорения работы. В этой статье расскажем, где посмотреть список горячих клавиш в Figma и какое действие скрывается за каждой комбинацией.
Сегодня хочу поговорить о том, как анимации могут изменить восприятие веб-дизайна.
Анимация бывает разной. Где-то достаточно лёгкого движения, а где-то сайт должен превратиться в полноценное 3D-путешествие. В своей практике я разделяю интерактив на три уровня, каждый из которых решает свои задачи.
Идеи закончились? Бриф пуст, проект буксует, а вдохновение не приходит? Творческий кризис – реальность не только для писателей, но и для дизайнеров, художников, маркетологов и других креаторов. В этой статье я покажу, как Midjourney и ChatGPT помогают генерировать идеи, находить свежие решения и превращать творческий процесс в игру. Освойте мощный…
Motion-дизайн уверенно занимает лидирующие позиции в современной индустрии дизайна. Давайте разберемся, почему анимация становится неотъемлемой частью нашей жизни и как это влияет на рынок.