Figma 24 июня 2026 года показала на конференции Config большой набор обновлений для дизайнеров, продуктовых команд и разработчиков: Figma Motion для анимации прямо на холсте, AI-шейдеры, code layers для работы с кодом внутри Figma Design, генеративные плагины и более умного Figma-агента. Это не новая отдельная «нейросеть», а расширение самой Figma: сервис постепенно превращается из редактора макетов в общую рабочую среду, где можно проектировать интерфейс, оживлять его, подключать код и автоматизировать рутинные операции без постоянного прыгания между инструментами.
Главная идея анонса простая: Figma хочет, чтобы дизайн, движение, визуальные эффекты, код и AI-инструменты жили в одном файле. Раньше типичный процесс выглядел так: дизайнер собирает макет в Figma, анимацию делает в After Effects, Rive или Principle, сложные эффекты просит у моушн-дизайнера или разработчика, а код уходит в отдельную среду. После этого команда синхронизирует правки через комментарии, экспорт, спеки и ручные договоренности. Теперь Figma пытается сократить эту дистанцию: часть того, что раньше было «вне макета», появляется прямо на холсте.
Что именно анонсировали
Самое заметное обновление — Figma Motion. Это режим для создания анимаций прямо внутри Figma Design. У него есть таймлайн, keyframes, пресеты, easing-кривые, spring-анимации и экспорт в форматы вроде MP4, GIF, WebM и Animated SVG. В будущем Figma обещает добавить новые варианты экспорта, включая Lottie.
Для обычного пользователя это значит, что кнопку, карточку, экран онбординга или переход между состояниями можно не просто описать словами в комментарии, а реально собрать и показать в том же файле, где лежит дизайн-система. Если у команды есть компонент, его можно анимировать как часть системы, а не как разовый ролик где-то отдельно.
Второе важное обновление — AI-генерация анимаций. Дизайнер может описать агенту, что нужно: например, «сделай мягкое появление карточек с задержкой», «добавь эффект раскрытия меню», «анимируй переход между двумя состояниями экрана». Агент создает стартовый вариант на таймлайне, после чего человек может вручную поправить ключевые кадры, длительность, кривые и детали. Это важный момент: Figma не обещает, что AI заменит моушн-дизайнера. Скорее она убирает пустую работу на первом шаге, когда нужно быстро получить черновик и понять, в какую сторону двигаться.
Третье обновление — custom shader effects and fills. Если объяснять без технического жаргона, шейдеры — это программируемые визуальные эффекты: размытия, искажения, пикселизация, зерно, dither, светящиеся частицы, градиентные карты и другие обработки, которые раньше чаще жили в графических редакторах, WebGL/WebGPU-коде или плагинах. Теперь Figma дает возможность создавать такие эффекты через промпт. Пользователь описывает результат, агент генерирует шейдер, а Figma показывает параметры эффекта как обычные настройки на холсте.
Это особенно интересно для брендинга, лендингов, промо-страниц, презентаций и интерфейсов, где визуальный язык важнее сухой утилитарности. Например, можно быстро собрать фирменный фон с легкой пикселизацией, сделать эффект «ризографической» печати, добавить шум, световые частицы или необычную заливку без перехода в отдельный редактор.
Четвертый блок — code layers. Это закрытая бета, но сама идея крупная: Figma добавляет на холст слой, внутри которого находится рабочий код. Такой слой можно дублировать, сравнивать разные направления, обсуждать с командой и при необходимости превращать в редактируемые дизайн-слои. Также заявлена возможность подключать локальную кодовую базу или клонировать GitHub-репозиторий, чтобы прототипировать на основе реальных компонентов и страниц.
Проще говоря, Figma хочет стереть границу между «это макет» и «это уже почти интерфейс». Сейчас многие команды используют Figma для дизайна, Dev Mode для передачи разработчикам и отдельные AI-инструменты для генерации кода. Code layers двигают это в сторону общего пространства: дизайнер видит рабочий интерактивный фрагмент, разработчик видит, как он связан с макетом, а команда обсуждает не абстрактный скриншот, а более живой прототип.
Пятый пункт — generative plugins. Это плагины, которые можно создавать через Figma-агента без локальной разработки, настройки окружения и знания plugin API. Пользователь описывает нужный инструмент: что он должен делать, какие параметры показывать, как вести себя на холсте. Figma генерирует плагин, который работает внутри файла. На старте такие плагины доступны в вашем файле и в ваших собственных дизайн-файлах, а позже Figma планирует расширить публикацию для команд, организаций и сообщества.
Шестой блок — Figma Weave tools. Weave — это платформа Figma для генеративных AI-процессов с изображениями, видео, анимацией и визуальными эффектами. Теперь часть Weave-инструментов появляется в Figma Design. Смысл в том, чтобы не писать сложные промпты каждый раз заново, а использовать готовые повторяемые workflow: поменять фон, применить стиль с одного изображения к другому, подготовить визуальные варианты, адаптировать ассеты под разные форматы.
Что изменилось по сравнению с прежней Figma
До этого Figma уже была сильной средой для UI-дизайна, прототипирования, дизайн-систем и совместной работы. Но ее основные возможности были сосредоточены вокруг статичных макетов, компонентов, вариантов, переменных, прототипных переходов и передачи разработчикам через Dev Mode. Да, в Figma можно было делать прототипы и простые анимации, но полноценная работа с таймлайном и keyframes обычно требовала других инструментов.
Теперь Figma Motion закрывает этот пробел. Это не просто «переход по клику между экранами», а отдельный слой работы с движением. Важное отличие от прежних прототипов: анимация становится частью дизайн-файла и дизайн-системы. Ее можно инспектировать, переиспользовать, обсуждать, передавать в Dev Mode и экспортировать. Для продуктовых команд это снимает типичную проблему, когда дизайнер пишет «анимация плавная, примерно 300 мс», а разработчик потом интерпретирует это на глаз.
С шейдерами похожая история. Раньше сложные визуальные эффекты в Figma были либо ограничены стандартными настройками, либо зависели от плагинов, растровых экспортов и ручной подготовки ассетов в других редакторах. Теперь Figma добавляет эффект как нативный объект с параметрами. Это удобнее для итераций: можно менять настройки прямо в макете, комбинировать эффекты, сохранять их и использовать повторно.
Code layers меняют другую часть процесса. Раньше код в Figma в основном существовал как результат инспекта, как подсказка для разработчика или как отдельная логика в Figma Make и похожих инструментах. Новый подход делает код материалом на холсте. Это не значит, что Figma превращается в полноценную IDE и заменяет Cursor, VS Code или GitHub. Но для раннего этапа, когда команда ищет интерфейсное решение, проверяет интерактивность и сравнивает варианты, это может быть полезно.
AI-агент тоже стал ближе к реальной командной работе. Figma говорит о skills, подключении внешнего контекста, файлах, веб-поиске, коннекторах к сторонним сервисам вроде GitHub, Notion, Slack, Atlassian и других. Это важнее, чем просто «сделай красивую кнопку». Агенту пытаются дать контекст проекта, чтобы он работал не как генератор случайных идей, а как помощник, который понимает правила команды.
Для кого это важно
В первую очередь обновление важно для продуктовых дизайнеров. Если вы делаете интерфейсы, где микровзаимодействия влияют на восприятие продукта, Figma Motion может стать обычной частью рабочего процесса. Анимация состояния кнопки, появление нижней панели, движение карточки, переход между шагами формы — все это можно будет не только описывать, но и собирать в том же файле.
Для моушн-дизайнеров обновление спорное, но полезное. С одной стороны, часть простых задач уйдет к продуктовым дизайнерам и AI. С другой — Figma дает способ быстрее встраивать motion в дизайн-систему и продуктовый процесс. Профессиональная работа с движением не исчезает, но становится ближе к команде, а не отдельным этапом после утверждения макетов.
Для разработчиков самое интересное — Dev Mode с видимой анимационной логикой и code layers. Если Figma действительно позволит нормально инспектировать keyframes, easing, timing и получать CSS, JSON или React-код, это уменьшит количество «догадайся сам» при переносе дизайна в продукт. Code layers могут помочь на этапе прототипирования, но здесь многое будет зависеть от качества интеграции с реальными репозиториями и ограничений беты.
Для маркетинговых команд и дизайнеров промо-материалов важны шейдеры и Weave. Быстро сделать серию визуалов, фон, эффект для баннера, промо-экран или презентационный кадр — это как раз та зона, где AI-инструменты дают практическую экономию времени. Особенно если результат не нужно каждый раз собирать с нуля в нескольких разных сервисах.
Для дизайн-лидов и команд с дизайн-системами обновление важно стратегически. Figma хочет, чтобы в системе хранились не только цвета, типографика и компоненты, но и движение, эффекты, reusable AI-workflows, навыки агента и даже часть кодовой логики. Это усложняет управление, но делает систему ближе к реальному продукту.
Где здесь AI, а где обычные инструменты
Важно не путать: Figma не просто добавила «еще одну кнопку с нейросетью». В некоторых местах AI нужен для старта, а дальше человек редактирует руками. Так работает Motion: агент может набросать анимацию, но таймлайн остается редактируемым. Так работают шейдеры: можно описать эффект, но параметры появляются в интерфейсе и ими можно управлять. Так работают генеративные плагины: промпт превращается в инструмент, который потом можно запускать повторно.
Это более зрелая модель, чем одноразовая генерация картинки или макета. Хороший AI-инструмент в дизайне должен не просто «выдать результат», а встроиться в рабочий процесс: дать контролируемый объект, сохранить параметры, позволить команде переиспользовать решение и передать его дальше в разработку. Судя по анонсу, Figma движется именно туда.
Но есть и ограничения. AI-результат все равно нужно проверять: анимации могут быть слишком тяжелыми, эффекты — плохо читаемыми, код — не соответствовать архитектуре проекта. Для продуктовой работы это помощник, а не автопилот. Особенно если речь идет о доступности, производительности, бренд-гайдах и согласованности интерфейса.
Как попробовать
Figma Motion уже запускается в open beta с 24 июня 2026 года. Если функция доступна в вашем аккаунте, ее можно открыть в дизайн-файле через переключатель Motion на панели инструментов. Создание и редактирование требует прав на редактирование файла. По данным Figma, базовый доступ к Motion есть на всех планах, но публикация animated components, генерация анимаций через Figma agent и экспорт видео в высоком разрешении требуют Full seat на платном плане.
Custom shader effects and fills тоже находятся в open beta. Готовые шейдеры от Figma доступны шире, а создание собственных через Figma agent постепенно раскатывается для пользователей с Full seat на платных планах. На Starter, Education и Government создание шейдеров через агента недоступно. При этом применять уже созданные эффекты можно без знания кода: пользователь описывает нужный визуальный эффект, а Figma превращает его в управляемую настройку.
Weave tools в Figma Design доступны в open beta на планах Professional, Organization и Enterprise. Они пригодятся тем, кто хочет использовать готовые AI-workflow для изображений прямо в дизайн-файле.
Code layers пока находятся в закрытой бете. Чтобы попробовать их раньше, нужно записаться в waitlist на странице Figma Config betas. В этот же список раннего доступа входят 3D transforms в Figma Design и Figma agent для дополнительных поверхностей вроде FigJam и Slides.
Генеративные плагины доступны через Figma agent в дизайн-файлах, но их возможности и распространение будут расширяться постепенно. Сейчас они живут внутри файла и доступны тем, у кого есть доступ к этому файлу; позже Figma планирует публикацию для команд, организаций и сообщества.
Если у вас нет подходящего тарифа Figma или нужен доступ к зарубежной подписке, можно проверить варианты на plati.market — там часто продают цифровые подписки и доступы. Важно выбирать продавца с хорошей репутацией, читать условия и понимать, что официальный и самый безопасный способ оплаты остается через саму Figma.
Почему это заметный анонс
Config 2026 показывает, куда движется рынок дизайн-инструментов. Раньше Figma выиграла у старых редакторов за счет браузерной совместной работы и удобной системы компонентов. Теперь следующий этап — объединить дизайн, AI, motion и код в одном рабочем пространстве.
Это не значит, что Figma завтра заменит After Effects, Rive, Blender, VS Code и все плагины. Но для большого числа продуктовых задач она может убрать лишние промежуточные шаги. Дизайнеру не нужно уходить из макета, чтобы сделать базовую анимацию. Команде не нужно держать эффект в виде растровой картинки, если его можно параметризовать. Разработчику не нужно расшифровывать motion по скринкасту, если таймлайн виден в Dev Mode. А повторяемые AI-задачи можно превращать в инструменты, а не каждый раз писать промпт с нуля.
Самое интересное здесь — не отдельная функция, а смена роли Figma. Она все меньше похожа на «редактор экранов» и все больше на операционную среду для создания цифрового продукта. В такой среде макет, анимация, визуальный эффект, промпт, плагин, кодовый прототип и комментарии команды лежат рядом. Если Figma сможет сделать это стабильным, понятным и не перегруженным, обновления Config 2026 могут заметно изменить ежедневную работу дизайнеров и разработчиков.
Источник
The Verge: Figma now has AI motion graphics and shader tools