Все знают (надеемся), что Figma подходит не только для дизайна интерфейсов, но и позволяет работать с базовыми анимациями. С помощью неё можно визуализировать свои представления о проектов не только для команды разработки, но и заказчика. Чем раньше все выровняют свои ожидания конечного результата, тем легче пройдёт проект.
В figma можно реализовать многое, но база, которую важно делать всегда:
- Понятные переходы между экранами
- Показывать анимации интерактивных элементов
Основные фичи для анимации:
- 🐱 Переходы между кадрами — легко настраиваются, чтобы показать, как элементы перемещаются или исчезают при взаимодействии.
- ☝️ Smart Animate — автоматом анимирует изменения свойств между экранами, делая переходы плавными и естественными.
- 🖤 Триггеры — клики, наведение и удержание. Можно задать анимацию, чтобы кнопка меняла цвет или «утопала» при нажатии.
- 🐈 Тайминг — гибкая настройка времени и задержек, позволяющая варьировать скорость анимации.
- 😀 Интерактивные компоненты — можно создавать анимации для повторяющихся элементов, чтобы не настраивать их каждый раз.
Отличное решение для базовых анимаций, которые нужны для быстрой визуализации и передачи идеи разработчикам. Но инструмент ограничен в возможностях и если нужно больше динамики, то стоит использовать что-то вроде After Effects.
Прикладываем примеры анимаций макетов, которые сделаны в Figma + скринкаст сборки подобной анимации на примере концепта игры 😸
