Как делать прототипы в Figma: анимация
Рассказываем, как сделать красивые переходы в макете приложения для презентации клиенту.
![](https://248006.selcdn.ru/main/iblock/090/0905b107337cb1acc52f05a4ec444f68/2e54496eaf258d2319418417ac0187cf.png)
![](https://248006.selcdn.ru/main/iblock/090/0905b107337cb1acc52f05a4ec444f68/2e54496eaf258d2319418417ac0187cf.png)
tesla / youtube
Описать анимацию на словах или в техническом задании иногда очень сложно: можно забыть о каких-то переходах, не учесть скорость, не так описать динамику. В итоге клиент и разработчики поймут вас не так и проект может растянуться.
Благодаря встроенным функциям Figma, вы можете сами собрать любую анимацию в своём макете и сразу показать идею, а не объяснять всё «на пальцах».
Рассказываем, как сделать анимацию для вашего приложения в Figma.
Это руководство по продвинутой работе с прототипами в Figma. Если вы о них слышите в первый раз, советуем прочитать нашу статью об основах работы с ними.
9 мая 2022 года разработчики Figma выпустили обновление. В графическом редакторе изменился интерфейс и появились новые функции. Эта инструкция всё ещё может помочь вам освоить работу с анимацией, но если вы только начали пользоваться Figma, советуем прочитать обзор последних обновлений.
Режимы анимации
В Figma есть набор стандартных переходов, которые в прототипе помогают плавно менять один экран на другой. Всего их девять, но пользоваться вы будете, скорее всего, только пятью из них:
1. Instant — анимации нет вообще, экраны сменяют друг друга моментально.
2. Linear — линейная, вся анимация протекает с одной скоростью:
![](/upload/setka_images/10474828102021_f8e2668d468d0a83016bd9d8a261b330ff850882.gif)
3. Ease-in — анимация медленно начинается, к концу ускоряется:
![](/upload/setka_images/10481028102021_7e362904b7d857173ea1dbafb405ab1977cbbb2a.gif)
4. Ease-out — анимация начинается быстро, к концу замедляется:
![](/upload/setka_images/10481028102021_b1f5fb33da8f50f319a53de56ac6374150b960ea.gif)
5. Ease-in-out — старт и конец анимации замедлены:
![](/upload/setka_images/10481028102021_9f4177150537e15f4549b4114125e7b7fd1ba2c4.gif)
Вы можете пользоваться только переходами, но для полноценной анимации этого недостаточно. Чтобы делать красивые всплывающие окна и изменения в кнопках, воспользуйтесь ещё одной функцией Figma — умной анимацией.
Умная анимация
В этом режиме можно делать более сложные переходы — увеличивать и уменьшать объекты, двигать их, добавлять новые. Исходя из пользовательских настроек и организации слоёв внутри фреймов, Figma сама понимает, как именно должна проходить анимация.
Общий принцип создания анимации: первый макет — начальная точка, а второй — конечная. Между ними Figma сама достраивает промежуточные кадры.
Для примера, попробуйте заставить один модуль исчезнуть, а остальные — подтянуться на его место:
- Создайте любой макет и добавьте на него сверху модуль, который должен пропасть по клику.
- Скопируйте его и перенастройте исчезаемый модуль — сделайте его на 90% меньше и укажите непрозрачность 0%. Важно, чтобы центр модуля и его верхнее поле внутри макета не изменились, иначе анимация получится плохой.
- Подтяните остальные, неисчезаемые модули наверх.
- Зайдите во вкладку Prototype, наведите курсор на исчезаемый модуль первого макета, зажмите правой кнопкой мыши кружок на нём и ведите его ко второму макету.
- В настройках анимации укажите Smart animate.
- Нажмите кнопку
и проверяйте результат.
![](/upload/setka_images/10494828102021_67577da4d8977ebae7bbc26fe09eaca85147b425.gif)
Следите за названиями и вложенностью слоёв внутри фреймов. Если вы хотите, чтобы объекты не просто исчезали, а красиво анимировались, на панели слоёв они должны называться и располагаться везде. Иначе Figma не поймёт, что вам нужно сделать, и в прототипе вместо анимации вы увидите просто затухание объекта.
Обратите внимание на то, как работают переходы в режиме умной анимации. Они задают не обычный переход, а именно скорость анимации. Например, в режиме Ease-out анимация начинается быстро и к концу замедляется.
Теперь попробуйте сделать анимацию удаления через свайп:
- Возьмите макет приложения и выберите на нём любой элемент, который хотите удалить. Например, карточку со статьёй.
- Добавьте в неё фрейм того же цвета, перекрасьте его в красный цвет. По желанию — добавьте в него текст «Удалить».
- Выделите ваш элемент и красный фрейм, а затем сгруппируйте их, нажав Ctrl (⌘) + G.
- Оба объекта должны стоять горизонтально. При этом красный фрейм должен быть за пределами видимой границы основного.
- Создайте копию получившегося макета.
- Сместите конструкцию с красным фреймом так, чтобы его было видно. Удаляемый элемент должен оказаться за пределами видимой границы основного фрейма.
- Создайте копию второго получившегося макета, удалите на нём конструкцию с красным фреймом и выровняйте объекты под ним.
- Перейдите во вкладку Prototype и соедините конструкции с красными фреймами с последующими копиями основных. В настройках первой анимации в качестве действия укажите On drag, а во второй — On tap. Не забудьте указать Smart animate.
- Нажмите на кнопку
и проверьте получившуюся анимацию.
![](/upload/setka_images/10494928102021_11a1d33ad10be24be98dc84cf3f4c2293103c450.gif)
Теперь попробуйте сделать анимированное всплывающее окно:
- Выберите любой объект на макете, по нажатию на который будет появляться всплывающее окно. Например, карточку статьи.
- Сделайте под ним небольшой блок с текстом — это будет всплывающее окно.
- Скопируйте получившийся макет.
- В копии выделите всплывающее окно и с помощью инструмента Scale (K) уменьшите его примерно на 90%. Непрозрачность укажите 0%. Остальные объекты внутри макета подтяните, чтобы они стояли на месте всплывающего окна.
- Перейдите во вкладку Prototype и выделите фрейм с карточкой статьи на макете без всплывающего окна.
- Соедините фрейм карточки с макетом, где всплывающее окно есть.
- Выделите фрейм карточки статьи на макете уже со всплывающим окном.
- Соедините фрейм карточки с макетом, где всплывающего окна нет.
- Нажмите на кнопку
и проверьте получившуюся анимацию.
![](/upload/setka_images/10494828102021_d5f448b1d45447906b1518b24eb2cf2b32fb1aed.gif)
Как вы уже заметили, при создании разных анимаций их суть остаётся прежней: первый макет — начальная точка, а второй — конечная. Точно так же создаются и любые другие: от анимаций кнопок до экранов загрузки. А лучший способ всё это изучить — пробовать собирать что-то самостоятельно.
Для тренировки советуем попробовать сделать следующие анимации:
- Изменение цвета и текста кнопки после клика.
- Экран загрузки с вертикальным прогресс-баром.
- Превращение кнопки в экран загрузки.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
![](/upload/setka_images/14193802062022_93332d2c63ae51fe843eb0192ae360f05bf930b6.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.