Неделя в After Effects ради анимации, которая собирается за один клик

Figma это редактор дизайна прямо в браузере, в нём рисуют экраны сайтов и приложений. Макет там статичный: кнопки, картинки, текст лежат неподвижно. Magic Animator ставится внутрь Figma как плагин (маленькая надстройка, которая добавляет новую кнопку) и оживляет этот макет: ИИ сам смотрит на слои и генерирует движение, тебе остаётся нажать кнопку

Их обещание звучит как «Animate your designs in 1-click», то есть анимация в один клик. Готовое движение можно выгрузить тремя способами: MP4 (обычное видео), GIF (короткая зацикленная картинка) и Lottie (лёгкий формат для сайтов и приложений). Инструмент работает не только с Figma, но и с Canva и Adobe Express. Сейчас он бесплатный и в бете

Magic Animator живёт внутри Figma, поэтому первым делом нужна сама Figma. Это редактор дизайна, который работает прямо в браузере: на компьютер ничего скачивать и устанавливать не нужно, открыл сайт и работаешь. Регистрация бесплатная, бесплатного тарифа хватит с головой. Никакой Claude Code и терминал тут не понадобятся, весь путь идёт мышкой в браузере

Figma Community это встроенный магазин плагинов, оттуда их и ставят. Самый простой путь: зайди на magicanimator.com и нажми кнопку Get started, она сама открывает страницу плагина в Figma Community. Либо в самой Figma открой меню плагинов и в поиске набери Magic Animator. На странице плагина будет одна кнопка установки. Так выглядит его карточка:

Открой в Figma файл со своим макетом. Фрейм это как холст-экран, на котором лежит твой дизайн (одна кнопка, карточка товара, целый экран приложения, что угодно). Кликни по нужному фрейму мышкой, чтобы он выделился рамкой. Дальше запусти плагин: правая кнопка мыши по фрейму, в меню Plugins → Magic Animator. Сбоку откроется панель плагина. В ней ИИ уже видит слои твоего макета, а внизу кнопка генерации анимации:

Нажми кнопку генерации анимации в панели (на схеме выше это Animate). ИИ прочитает слои макета, поймёт, что где лежит, и соберёт движение сам: заголовок выезжает, картинка проявляется, кнопка пульсирует. Обычно он даёт несколько вариантов, ты выбираешь тот, что нравится. Это и есть та самая анимация в один клик, ради которой раньше сидели в After Effects

Есть ещё ИИ-ассистент «Chat to generate custom animations», которому анимацию можно описать словами в чате. Но честно: он помечен Coming soon, то есть на подходе, его пока не выкатили. Поэтому сейчас работаем через кнопку генерации, а тонкую настройку делаем руками на следующем шаге

Этот шаг можно пропустить, если вариант от ИИ уже устраивает. Если хочется довести под себя, у плагина есть ручной редактор (в их описании это «Edit animation keyframes for further polish»). Там ты правишь ключевые кадры: можно замедлить или ускорить движение слоя, поменять его порядок, поправить кривую, чтобы анимация шла плавнее или резче. Двигаешь ползунки, сразу видишь результат в предпросмотре. Когда нравится, идём выгружать

Анимация готова, теперь её надо забрать. В панели есть кнопка Export, там три формата под разные задачи:

Дальше самое частое: поставить Lottie на сайт. Кладёшь скачанный animation.json рядом со своей страницей и добавляешь в неё два куска кода. Первый подключает проигрыватель Lottie, второй ставит саму анимацию в нужном месте. Вставь их в свою страницу:

Оживить макет это полдела, по шагам выше ты это сделаешь сегодня. Дальше начинается интересное. Живые сайты цепляют не текстом, а мелким движением: кнопка чуть подрагивает, иконка проявляется, блок выезжает при скролле. Раньше за такими микроанимациями шли к дизайнеру-моушену или сами тонули в After Effects на неделю

Теперь ты рисуешь макет в Figma, жмёшь кнопку, забираешь Lottie и ставишь его на страницу. Один человек делает то, за что студии берут отдельные деньги, и делает это за вечер