Обновлено: июнь 2026
После 10 лет «Figma — это для статики» компания в один день закрыла главную претензию дизайн-сообщества. 24 июня на Config 2026 в Сан-Франциско Дилан Филд анонсировал Figma Motion — нативную анимацию прямо на канвасе. Не плагин, не экспорт в AE, не обходное решение через Principle или Jitter. Четвёртый режим рядом с Design, Draw и Dev Mode.
Animated components, которые несут motion через всю дизайн-систему. Таймлайн с keyframes и авто-записью. AI-агент, который строит реальные анимации по промпту. Dev Mode с инспектируемым motion и копированием кода в CSS/React. MCP для кодинг-агентов.
Это тот же сдвиг, что Figma сделала с дизайном в 2016 — только теперь для motion.
Figma Motion — четвёртый режим на канвасе с таймлайном, keyframes, animated components и Figma Agent. Animated components несут анимацию через все инстансы как fill и типографика. Dev Mode отдаёт CSS/React/JSON без потерь easing и timing. MCP-совместимость для кодинг-агентов. Открытая бета с 24 июня 2026.
Ссылки:
- figma.bot/FigmaMotion — доступ к открытой бете
- Плейграунд-файл — потрогать руками
- Официальный блог: Introducing Figma Motion — полный анонс
- Config 2026 Recap — все анонсы конференции
- TechCrunch: обзор Config 2026
- The Decoder: разбор анонсов
Почему motion design раньше было так больно
29% дизайнеров называют motion одним из самых востребованных скиллов — и при этом пайплайн был сломан: Figma → AE → Lottie → разработчик → «а это можно вообще заимплементить?»
Если ты motion designer или product designer, который хочет в motion — ты знаешь этот квест наизусть. Придумал анимацию в голове или нарисовал в прототипе через Smart Animate. Потом открыл After Effects, воссоздал всё с нуля, поигрался с easing. Экспортировал Lottie или MP4. Передал разработчику. Разработчик спросил: «а какой у тебя easing? откуда timing?» — и ты смотришь в AE, пытаясь объяснить словами то, что нарисовано кривыми.
Easing и timing при handoff терялись. Каждый раз. У каждой команды.
Motion design — востребованный навык: по данным State of the Designer 2026, 29% дизайнеров называют его among most in-demand skills. Но инструментарий не менялся. Figma была для статики, анимация — отдельный специализм с отдельными инструментами.
Figma Motion ломает этот пайплайн. Анимация живёт в том же файле, что дизайн. Dev Mode читает её напрямую. Разработчик копирует CSS — и easing там уже есть.
Что такое Motion mode — четвёртый режим на канвасе
Переключаешь любой фрейм в Motion mode → появляется timeline. Это не плагин и не отдельный продукт — это Figma, в которую встроили таймлайн.
Раньше в Figma было три режима: Design (рисуешь), Draw (векторы), Dev Mode (разработчику). Теперь четвёртый — Motion.
Переключаешь фрейм в Motion mode — справа и внизу появляется таймлайн. Все слои фрейма видны как дорожки. Дальше как в нормальном анимационном инструменте:
- Keyframes на position, scale, rotation, opacity — независимо на каждом слое
- Drag layers по таймлайну — меняешь timing без полей с цифрами
- Scrub — тащишь playhead, смотришь превью любого момента
- Auto keyframing — включаешь режим, и каждое движение объекта на канвасе автоматически записывается как keyframe. Не надо помнить добавить ключ — он ставится сам
Особенно приятная деталь: time-based comments. Тыкаешь в конкретный момент на таймлайне → оставляешь комментарий, привязанный к таймкоду. «Здесь bounce слишком резкий» прямо на 0.3 секунды. Никаких «ну ты понимаешь, вот в том месте где оно прыгает» в описании.
Animation Styles и стекинг — как строить анимации быстро
Пресеты для быстрого старта, стекинг для сложных эффектов, секвенсирование через drag. Animation styles — как text styles, только для motion.
Figma не заставляет строить каждую анимацию с нуля. Есть три базовых пресета: fade, move, scale. Применяешь к слою — получаешь готовую анимацию за секунду. Хороший старт для тех, кто в motion первый раз.
Но интереснее то, как они комбинируются. Анимации можно стекать — несколько одновременно на одном слое. Fade + scale + move вместе. Или секвенсировать через drag — перетащить одну после другой.
Animation Styles работают как любые другие стили в Figma: создаёшь, именуешь, переиспользуешь. Меняешь стиль — обновляется везде, где он применён. Скоро появятся custom animation styles — сможешь добавлять свои пресеты в библиотеку команды.
Animated Components — вот где настоящий atomic motion design
Делаешь анимацию один раз на мастер-компоненте. Она путешествует по всем инстансам и файлам сама. Как fill и типографика — только для motion.
Это самое важное в Figma Motion. Не таймлайн, не пресеты — а то, как анимация живёт в дизайн-системе.
Максвелл Хэтэуэй, Lead Motion Designer в Atlassian, сформулировал точно: «Atomic design стал atomic motion design. Это последний большой пазл в интерактивном мире».
Раньше анимация была одноразовой: нарисовал для этого экрана, для другого — нарисовал снова. Никакого переиспользования. Дизайн-система описывала цвета, типографику, spacing — но не motion.
Теперь: делаешь анимацию на мастер-компоненте → она автоматически идёт во все инстансы → включая те, что в других файлах команды. Анимация стала частью компонента, как его fill или font.
Motion variables идут дальше. Создаёшь easing variable с несколькими modes — например, «snappy» для десктопа и «smooth» для мобайла. Переключаешь mode на уровне страницы или фрейма → все анимации, которые используют эту переменную, мгновенно обновляются. Один флажок меняет feel всего интерфейса.
Shader motion снимает историческое ограничение Figma на анимируемые свойства. Любой параметр шейдера — slider, input — можно поставить в keyframe. Это открывает анимацию для эффектов типа frosted glass, dithering, pixelation — прямо на таймлайне.
Figma Agent в Motion — промпт вместо ручных keyframes
Агент строит реальные keyframes на таймлайне, а не просто картинку. Несколько одновременных промптов на разных фреймах. Фидбек по существующей анимации.
AI в Figma Motion — это не «нажал кнопку, получил видео». Агент работает с настоящим таймлайном.
Пишешь текстовый промпт: «сделай плавный вход карточки снизу с небольшим bounce» — агент создаёт keyframes на таймлайне: правильный easing, timing, координаты. Ты видишь конкретные ключи, которые можешь отредактировать. Не чёрный ящик — полный контроль после генерации.
Можно запустить несколько промптов одновременно на разных фреймах. Пока агент анимирует онбординг, ты пишешь промпт для состояния загрузки — они работают параллельно.
Дэви Фанг, Lead Product Designer в Atlassian, рассказал, как использует агента иначе: не для генерации, а для фидбека. «Я попросил агента дать мне предложения по тому, что работает, а что нет» — агент анализирует существующую анимацию и комментирует.
Важная деталь для enterprise: агент генерирует внутри guardrails дизайн-системы. Он не выйдет за пределы motion variables команды. Для больших компаний это критично: скорость без потери консистентности.
Dev Mode и handoff — наконец-то без потерь
Motion tab в Dev Mode: весь таймлайн инспектируемый. Копируешь CSS, JSON, React — easing и timing внутри. Экспорт MP4/GIF/SVG/WEBM прямо из файла. MCP для кодинг-агентов.
Это то место, где motion design исторически разваливался. Дизайнер нарисовал одно, разработчик закодил другое — потому что передать easing curve словами невозможно, а Figma не давала инспектировать анимацию.
Figma Motion это фиксит системно.
Dev Mode → Motion tab: разработчик открывает фрейм, переключается на Motion tab и видит полный таймлайн. Каждый keyframe, каждое значение timing, каждая easing curve — читаемо и кликабельно. Никакой интерпретации, никаких «ну ты посмотри на MP4 и повтори».
Копирование кода: выбираешь слой с анимацией → копируешь в нужном формате:
/* Пример того, что копирует разработчик */
.card-enter {
animation: slide-up 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}Форматы: CSS, JSON, React, motion.dev. Easing curve — там. Timing — там. Ничего не потерялось.
Экспорт файлов: MP4, GIF, SVG, WEBM прямо из Figma. Для документации, для презентаций стейкхолдерам, для Lottie-пайплайнов.
MCP-совместимость — это для вайбкодеров особенно важно. Передаёшь animated frame кодинг-агенту (Claude Code, Cursor) — агент получает полный motion-контекст, а не просто статичный скриншот. Анимация в MCP работает как чертёж.
Александра Перейра, Senior Product Designer в Atlassian: «Если тиммейт может легко инспектировать и перевести анимацию в нужные форматы, это закрывает разрыв между намерением и шипингом».
3D Transforms — в роадмапе, уже можно в waitlist
Z-axis rotation для фреймов, векторов и текста. Нативные контролы + live preview. Экспорт в CSS, MCP-совместимость. Пока только waitlist.
Отдельная фича, которую показали на Config — 3D Transforms. Z-axis rotation для любых объектов на канвасе: фреймов, векторов, текста.
Нативные 3D-контролы прямо в Figma, live preview без рендера, комбинация с motion timeline. Экспортируется в CSS с сохранением перспективы. MCP-совместимо.
В продакшен ещё не вышло, но waitlist уже открыт. Для тех, кто делает лендинги с 3D-эффектами и карточками с flip — это будет большой апдейт.
Config 2026: что ещё анонсировали
Figma Motion — главный анонс, но Config 2026 был насыщенным. Кратко по остальному:
Code Layers — код как дизайн-материал. Один клик → слой на канвасе становится интерактивным code-слоем с реальным JavaScript. Early access с июля. Для тех, кто хочет протестировать интерактивность прямо в Figma без Storybook.
Shader Fills & Effects — WebGPU-эффекты на канвасе: dithering, pixelation, blur, frosted glass, polished chrome. Описываешь эффект промптом → агент генерирует параметризованный шейдер с sliders. Каждый параметр — анимируемый через Motion.
Figma Agent — апдейт агента: свои кастомные tools (skills), коннекторы к Notion, Slack, GitHub, attachments в чате, публичные чаты. Agent становится платформой, а не просто чат-ботом.
Weave Tools — нодовые генеративные воркфлоу прямо на канвасе. Как node-based editor, только в Figma.
Dev Mode one-click export — из Dev Mode в React, Vue, Svelte, Angular, SwiftUI, Flutter. Не просто CSS, а полноценный компонент в нужном фреймворке.
Physics Prototyping — Matter.js 2D physics engine в прототипах. Масса, трение, гравитация, отскок. Можно делать прототипы с физикой без кода.
Дилан Филд подвёл итог конференции точно: «AI понизил пол. Он не поднял потолок. Дизайнеры, креаторы, билдеры — вы поднимете потолок».
С чего начать — быстрый старт
- Открываешь figma.bot/FigmaMotion — попадаешь в открытую бету
- Сначала зайди в плейграунд-файл — там можно потрогать всё руками без риска сломать свой проект
- В своём файле: выбираешь фрейм → переключаешь в Motion mode → появляется таймлайн
- Добавляешь Animation Style (fade/move/scale) — быстрый первый результат за 30 секунд
- Или пишешь промпт Figma Agent — он строит keyframes сам
- Dev Mode → Motion tab — показываешь разработчику
Starter план даёт доступ к motion с ограниченным экспортом. Для полного пайплайна — платный план.
FAQ
Figma Motion — это замена After Effects?
Для product design и UI-анимации — во многом да. Для сложного motion graphics, 3D и видеопроизводства — нет. Figma Motion заточен под анимацию интерфейсов и дизайн-систем, не под киношный motion.
Чем отличается от Smart Animate?
Smart Animate — transition между фреймами в прототипе. Figma Motion — полноценный таймлайн с keyframes для production-ready анимации. Разные задачи: Smart Animate для быстрого прототипа, Motion — для анимации, которая уйдёт в прод.
Animated components работают в существующих библиотеках?
Да. Добавляешь анимацию на мастер-компонент в существующей библиотеке — она появляется во всех инстансах во всех файлах, которые публишнут обновление библиотеки.
Как разработчику получить данные анимации?
Dev Mode → Motion tab: весь таймлайн инспектируемый. Копируешь код: CSS, JSON, React, motion.dev. Экспортируешь файл: MP4, GIF, SVG, WEBM. MCP-совместимость для кодинг-агентов.
Можно ли анимировать шейдеры?
Да. Любой параметр шейдера (slider, input) можно поставить в keyframe на таймлайне. Это снимает исторические ограничения Figma на анимируемые свойства.
Когда выйдут 3D Transforms?
Пока waitlist. Записаться можно на figma.bot/FigmaMotion.
Figma Motion бесплатный?
Starter: motion с ограниченным экспортом — бесплатно. Полный пайплайн (экспорт MP4/GIF/SVG/WEBM + дизайн-системная интеграция + Figma Agent) — платные планы.
Глоссарий
Keyframe — ключевой кадр в анимации. Фиксирует значение свойства (позиция, opacity, scale) в конкретный момент времени. Между keyframes — интерполяция.
Easing curve — кривая скорости анимации. Определяет, как объект разгоняется и тормозит между keyframes. ease-in-out, cubic-bezier — это easing. Именно кривые теряются при обычном handoff.
Scrub — перемотка таймлайна вручную: тащишь playhead и смотришь анимацию в любой момент без воспроизведения.
Auto keyframing — режим, при котором каждое изменение объекта на канвасе автоматически записывается как keyframe. Как «запись» в DAW.
Stacking animations — несколько анимаций одновременно на одном слое. Fade + scale + move работают параллельно.
Motion variables — переменные для easing и timing в дизайн-системе. Как color variables, только для скорости и характера движения. Поддерживают modes: меняешь mode — меняется feel всей системы.
Shader motion — анимация параметров WebGPU-шейдера (frosted glass, dithering и т.д.) через keyframes на таймлайне.
Atomic motion design — принцип, при котором анимация встроена в компонент и путешествует с ним через всю дизайн-систему. Аналог atomic design для motion.
Guardrails — ограничения дизайн-системы, в пределах которых работает AI-агент. Агент не может сгенерировать анимацию, которая нарушает motion variables команды.
MCP (Model Context Protocol) — протокол передачи контекста между Figma и кодинг-агентами (Claude Code, Cursor). MCP-совместимость Motion означает, что агент получает анимацию как данные, а не как видео.
Открытая бета — figma.bot/FigmaMotion. Плейграунд-файл — figma.com/community/file/1647513942386018246. Полный анонс — figma.com/blog/introducing-figma-motion. Все анонсы Config 2026 — figma.com/blog/config-2026-recap.
Смотрите каталог AI-инструментов для дизайна на VibeCoderz — там собраны актуальные инструменты для вайбкодеров и дизайнеров.
Вопросы по интеграции Figma в AI-пайплайны — к Максиму.
Обновлено: июнь 2026. Источники: Figma Blog, Config 2026 Recap, TechCrunch, The Decoder.