Magic Animator: анимация из Figma одной кнопкой в 2026

Раньше, чтобы оживить макет, дизайнер сидел днями в After Effects и вручную двигал каждый слой. Magic Animator убирает эту неделю работы: это ИИ-плагин для Figma, который берёт твой статичный макет, сам читает слои и одной кнопкой собирает готовую анимацию. На выходе Lottie, GIF или видео.

Ниже разложу по шагам всё, что нужно новичку: что нужно до старта, куда нажать, что увидишь на экране и как потом вставить анимацию на сайт. Без After Effects и без дизайнера, понятно человеку, который открывает Figma впервые.

Что такое Magic Animator и как он работает

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

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

Что нужно до старта

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

Регистрация бесплатная, бесплатного тарифа хватит с головой. Никакой терминал и Claude Code тут не понадобятся, весь путь идёт мышкой в браузере.

Если аккаунта Figma ещё нет, зайди на figma.com, нажми кнопку Sign up и заведи бесплатный аккаунт через почту или Google. Это пара минут, карта не нужна. Аккаунт уже есть и Figma открыта - тогда идём ставить плагин. Весь путь от плагина до готовой анимации выглядит так.

Шаг 1. Ставим плагин Magic Animator

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

На странице плагина будет одна кнопка установки Install. Жмёшь её, плагин встаёт в Figma и появляется в меню плагинов. Всё, надстройка на месте.

Шаг 2. Открываем свой макет

Открой в Figma файл со своим макетом. Фрейм - это холст-экран, на котором лежит твой дизайн: одна кнопка, карточка товара, целый экран приложения, что угодно. Кликни по нужному фрейму мышкой, чтобы он выделился рамкой.

Дальше запусти на нём плагин: правая кнопка мыши по фрейму, в меню выбери Plugins → Magic Animator. Сбоку откроется панель плагина. В ней ИИ уже видит слои твоего макета: заголовок, картинку, кнопку. Внизу панели - кнопка генерации анимации.

Шаг 3. Жмём генерацию анимации

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

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

Шаг 4. По желанию правим анимацию руками

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

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

Как выгрузить анимацию: MP4, GIF и Lottie

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

Формат	Что это	Куда ставить
MP4	Обычный видеофайл	Рилз, презентация, пост, любое место, куда можно залить ролик
GIF	Лёгкая зацикленная картинка, крутится по кругу	Письма и мессенджеры, где видео не вставишь
Lottie	Анимация в виде маленького файла .json	Сайт и приложение: весит копейки, не пикселит, играется прямо в браузере

Для видео бери MP4, для письма GIF, для сайта Lottie. Файл Lottie скачается под именем вроде animation.json.

Как поставить Lottie на сайт

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

Первый кусок вставляешь один раз, обычно перед закрывающим тегом </body>:

<!-- ставим в страницу один раз, обычно перед </body> -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Второй кусок ставишь там, где анимация должна появиться на странице:

<!-- src = имя твоего скачанного файла из Magic Animator -->
<lottie-player src="animation.json" background="transparent" speed="1" loop autoplay style="width:320px;height:320px"></lottie-player>

На странице в этом месте появится живая анимация из твоего макета. loop значит крутить по кругу, autoplay значит запускать сразу, а размер меняешь в width и height. Первоисточник и сам плагин - magicanimator.com.

Три вещи, на которых застревают новички

Первая: нужен именно макет с нормальными слоями. ИИ оживляет то, что видит. Одна сплошная картинка без слоёв не оживёт, потому что элементов для движения нет. Собери макет из отдельных слоёв заранее.

Вторая: чат-ассистент пока на подходе. Кнопка «описать анимацию словами» помечена Coming soon, её ещё не выкатили. Не жди её, работай через кнопку генерации, а точечно доводи руками в редакторе ключевых кадров.

Третья: Lottie кладётся на сайт как обычный файл. Файл animation.json должен лежать там же, где страница, а в коде выше в src стоять его точное имя. Не подключил строку с проигрывателем или ошибся в имени файла, и анимация не покажется. Проверь оба куска кода и имя файла.

Зачем это на самом деле: микроанимации для лендинга

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

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

Есть только один нюанс. Lottie сам по себе - украшение. Вопрос в том, куда его ставить. Оживлённый макет играет, когда стоит на нормальном продающем сайте: где правильная структура экранов, где текст ведёт к действию, где анимация подсвечивает главное, а не мельтешит ради красоты. Собрать такой сайт с нуля, без дизайнера и без верстальщика, это уже не один плагин, а система.

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

Чек-лист: что у тебя теперь есть

• Бесплатный аккаунт Figma и установленный плагин Magic Animator
• Макет, собранный из отдельных слоёв, который ИИ может оживить
• Готовая анимация из одного клика, при желании доведённая руками в редакторе ключевых кадров
• Файл animation.json в формате Lottie, скачанный через Export
• Два куска кода на странице: проигрыватель Lottie и сама анимация в нужном месте
• Понимание, какой формат брать под задачу: MP4 для видео, GIF для писем, Lottie для сайта