Как делать прототипы в Figma: анимация

Режимы анимации

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

1. Instant — анимации нет вообще, экраны сменяют друг друга моментально.

2. Linear — линейная, вся анимация протекает с одной скоростью:

3. Ease-in — анимация медленно начинается, к концу ускоряется:

4. Ease-out — анимация начинается быстро, к концу замедляется:

5. Ease-in-out — старт и конец анимации замедлены:

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

Умная анимация

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

Для примера, попробуйте заставить один модуль исчезнуть, а остальные — подтянуться на его место:

• Создайте любой макет и добавьте на него сверху модуль, который должен пропасть по клику.
• Скопируйте его и перенастройте исчезаемый модуль — сделайте его на 90% меньше и укажите непрозрачность 0%. Важно, чтобы центр модуля и его верхнее поле внутри макета не изменились, иначе анимация получится плохой.
• Подтяните остальные, неисчезаемые модули наверх.
• Зайдите во вкладку Prototype, наведите курсор на исчезаемый модуль первого макета, зажмите правой кнопкой мыши кружок на нём и ведите его ко второму макету.
• В настройках анимации укажите Smart animate.
• Нажмите кнопку и проверяйте результат.

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

Теперь попробуйте сделать анимацию удаления через свайп:

• Возьмите макет приложения и выберите на нём любой элемент, который хотите удалить. Например, карточку со статьёй.
• Добавьте в неё фрейм того же цвета, перекрасьте его в красный цвет. По желанию — добавьте в него текст «Удалить».
• Выделите ваш элемент и красный фрейм, а затем сгруппируйте их, нажав Ctrl (⌘) + G.
• Оба объекта должны стоять горизонтально. При этом красный фрейм должен быть за пределами видимой границы основного.
• Создайте копию получившегося макета.
• Сместите конструкцию с красным фреймом так, чтобы его было видно. Удаляемый элемент должен оказаться за пределами видимой границы основного фрейма.
• Создайте копию второго получившегося макета, удалите на нём конструкцию с красным фреймом и выровняйте объекты под ним.
• Перейдите во вкладку Prototype и соедините конструкции с красными фреймами с последующими копиями основных. В настройках первой анимации в качестве действия укажите On drag, а во второй — On tap. Не забудьте указать Smart animate.
• Нажмите на кнопку и проверьте получившуюся анимацию.

Теперь попробуйте сделать анимированное всплывающее окно:

• Выберите любой объект на макете, по нажатию на который будет появляться всплывающее окно. Например, карточку статьи.
• Сделайте под ним небольшой блок с текстом — это будет всплывающее окно.
• Скопируйте получившийся макет.
• В копии выделите всплывающее окно и с помощью инструмента Scale (K) уменьшите его примерно на 90%. Непрозрачность укажите 0%. Остальные объекты внутри макета подтяните, чтобы они стояли на месте всплывающего окна.
• Перейдите во вкладку Prototype и выделите фрейм с карточкой статьи на макете без всплывающего окна.
• Соедините фрейм карточки с макетом, где всплывающее окно есть.
• Выделите фрейм карточки статьи на макете уже со всплывающим окном.
• Соедините фрейм карточки с макетом, где всплывающего окна нет.
• Нажмите на кнопку и проверьте получившуюся анимацию.

Как вы уже заметили, при создании разных анимаций их суть остаётся прежней: первый макет — начальная точка, а второй — конечная. Точно так же создаются и любые другие: от анимаций кнопок до экранов загрузки. А лучший способ всё это изучить — пробовать собирать что-то самостоятельно.

Для тренировки советуем попробовать сделать следующие анимации:

• Изменение цвета и текста кнопки после клика.
• Экран загрузки с вертикальным прогресс-баром.
• Превращение кнопки в экран загрузки.