Всем привет! В этой статье я хочу рассказать о том, как сделать простую анимацию и оживить логотип в Figma. В Figma есть несколько способов сделать анимацию, но я остановлюсь на том, с которого начала сама. И расскажу на своем примере как это сделать.
Для начала нужно придумать логическую последовательность действий и разбить логотип на части. И хотя бы примерно представить конечный результат.
Далее создаем несколько одинаковых фреймов (в моем случае их 4) и помещаем в них элементы логотипа.
Как это выглядит можно посмотреть на картинке.
Чтобы перейти к следующему этапу нужно нажать на первый фрейм и зайти во вкладку Prototype. В графе Interaction выбираем кнопку с плюсиком — это необходимо для того, чтобы создать новые взаимодействия с фигурой. Далее нажимаем на кружочек на боковой стенке объекта, после чего перетаскиваем появившуюся синюю стрелочку к следующему (нужному) фрейму.
Мои настройки:
On click — при клике на объект (если выбран весь фрейм, а не объект, – то при клике на любую область фрейма).
Navigate to — перейти к (другому объекту/фрейму).
Smart animate — один из типов переходов, который самостоятельно анимирует схожие объекты.
Ease out — анимация начнется быстро и будет замедляться к концу.
Далее последовательно соединяем все фреймы синей стрелкой и проверяем настройки во вкладке Interaction details.
Чтобы запустить анимацию нажимаем на синюю стрелочку Flow 4 рядом с фреймом.
Для того, чтобы записать и сохранить анимацию я скачала программу ScreenToGif . Открываем программу, нажимаем запись и растягиваем окно записи под нашу анимацию.
Горячие клавиши:
F7 — начать запись
F8 — остановить запись
Записываем и сохраняем. Вот и всё.
Анимация готова!
