После 10 лет «Figma — это для статики» компания в один день закрыла главную претензию дизайн-сообщества. 24 июня на Config 2026 в Сан-Франциско Дилан Филд анонсировал Figma Motion — нативную анимацию прямо на канвасе. Не плагин, не экспорт в AE, не о…
400 000+ органических переходов за 3 месяца. Со-основатель GoBanana (231K пользователей, 12+ млн ₽ без рекламы) и NeuroScribe (65K пользователей). SEO/GEO-стратегии для AI-поисковиков, 1 700+ единиц контента, 17+ реализованных стратегий.
Об авторе →Claude Code: новый CLI-агент от Anthropic
Anthropic выпустила Claude Code — терминальный AI-агент для разработчиков. Инструмент работает прямо в командной строке и умеет писать, редактировать и запускать код.
Zcode AI: Полный гид по визуальному интерфейсу для Claude Code и AI-агентов
Узнайте, как использовать Zcode для управления Claude Code, Gemini и Codex в едином GUI. Настройка провайдеров, MCP-серверов и визуальный вайбкодинг.
YouTube-канал с монетизацией из любой точки мира: Пошаговый гайд 2026
Инструкция по созданию YouTube-канала: обход блокировок SMS, настройка расширенных функций через виртуальные номера и правила безопасности для монетизации.
Windsurf Code Maps: Как глубоко понимать архитектуру проекта перед написанием кода
Полный гайд по Windsurf Code Maps, модели Sway 1.5 и Sway Grep. Узнайте, как визуализировать архитектуру кода и ускорить разработку в 13 раз.
Vk Fast Cash Strategy
Аудитория ВКонтакте — это те же люди, что и в Instagram, но 'социальный контракт' площадки другой. Если Instagram — это 'дорогой ресторан' с демонстрацией успеха, то VK — это 'душевная шашлычная'. Здесь не работает глянцевый 'успешный успех
Обновлено: июнь 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.
Ссылки:
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 → появляется timeline. Это не плагин и не отдельный продукт — это Figma, в которую встроили таймлайн.
Раньше в Figma было три режима: Design (рисуешь), Draw (векторы), Dev Mode (разработчику). Теперь четвёртый — Motion.
Переключаешь фрейм в Motion mode — справа и внизу появляется таймлайн. Все слои фрейма видны как дорожки. Дальше как в нормальном анимационном инструменте:
Особенно приятная деталь: time-based comments. Тыкаешь в конкретный момент на таймлайне → оставляешь комментарий, привязанный к таймкоду. «Здесь bounce слишком резкий» прямо на 0.3 секунды. Никаких «ну ты понимаешь, вот в том месте где оно прыгает» в описании.
Пресеты для быстрого старта, стекинг для сложных эффектов, секвенсирование через drag. Animation styles — как text styles, только для motion.
Figma не заставляет строить каждую анимацию с нуля. Есть три базовых пресета: fade, move, scale. Применяешь к слою — получаешь готовую анимацию за секунду. Хороший старт для тех, кто в motion первый раз.
Но интереснее то, как они комбинируются. Анимации можно стекать — несколько одновременно на одном слое. Fade + scale + move вместе. Или секвенсировать через drag — перетащить одну после другой.
Animation Styles работают как любые другие стили в Figma: создаёшь, именуешь, переиспользуешь. Меняешь стиль — обновляется везде, где он применён. Скоро появятся custom animation styles — сможешь добавлять свои пресеты в библиотеку команды.
Делаешь анимацию один раз на мастер-компоненте. Она путешествует по всем инстансам и файлам сама. Как 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 — прямо на таймлайне.
Агент строит реальные keyframes на таймлайне, а не просто картинку. Несколько одновременных промптов на разных фреймах. Фидбек по существующей анимации.
AI в Figma Motion — это не «нажал кнопку, получил видео». Агент работает с настоящим таймлайном.
Пишешь текстовый промпт: «сделай плавный вход карточки снизу с небольшим bounce» — агент создаёт keyframes на таймлайне: правильный easing, timing, координаты. Ты видишь конкретные ключи, которые можешь отредактировать. Не чёрный ящик — полный контроль после генерации.
Можно запустить несколько промптов одновременно на разных фреймах. Пока агент анимирует онбординг, ты пишешь промпт для состояния загрузки — они работают параллельно.
Дэви Фанг, Lead Product Designer в Atlassian, рассказал, как использует агента иначе: не для генерации, а для фидбека. «Я попросил агента дать мне предложения по тому, что работает, а что нет» — агент анализирует существующую анимацию и комментирует.
Важная деталь для enterprise: агент генерирует внутри guardrails дизайн-системы. Он не выйдет за пределы motion variables команды. Для больших компаний это критично: скорость без потери консистентности.
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: «Если тиммейт может легко инспектировать и перевести анимацию в нужные форматы, это закрывает разрыв между намерением и шипингом».
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 — это будет большой апдейт.
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 понизил пол. Он не поднял потолок. Дизайнеры, креаторы, билдеры — вы поднимете потолок».
Starter план даёт доступ к motion с ограниченным экспортом. Для полного пайплайна — платный план.
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.