Figma Config 2026: Motion, Weave, 3D и AI-код на фрейме в Figma | Главные обновления Figma

Вчера, 24 июня, не спали наверное, все дизайнеры мира, и мы в том числе. В Сан-Франциско прошёл Config 2026 — главная конференция года для дизайн комьюнити. Мы ночь не спали и посмотрели её от и до, чтобы первыми рассказать вам, что Figma подготовила на этот раз. А подготовила она многое: код теперь живёт прямо на холсте, генеративный движок Weave встроился прямо в канвас, дизайн-агент научился собирать собственные плагины и шейдеры, а анимация наконец-то стала нативной функцией с полноценным таймлайном. Разбираем всё по порядку.

Config 2026 — почему все этого ждали

Config каждый год шумит крупными обновлениями, мы все за этим следим, потому что Figma — главный инструмент всех дизайнеров, и кто как не они задают тренд и внедряют инновации в нашу повседневную работу. Для нас это ещё и дизайн-путешествия: в прошлом году мы были на Config London – как там всё устроено, рассказывали в отдельном материале, а подробное видео есть на нашем YouTube-канале. В этот раз ожиданий было особенно много — слишком много бета-функций накопилось у Figma за последние месяцы. В прошлом дайджесте наших дизайн новостей мы обещали сделать полный разбор — и вот он.

Кстати, для самой Figma этот Config — юбилейный, десятый. Дилан Филд, основатель и CEO Figma, на сцене вспоминал, как на первом Config в 2020-м они представляли всего лишь гиперссылки на холсте — а теперь технологии летят быстрее, чем когда-либо. Тон конференции он задал одной фразой: пару лет назад он говорил, что ИИ «понизит порог входа и поднимет потолок возможностей». Порог ИИ действительно понизил. А вот поднимать потолок, по словам Филда, предстоит самим дизайнерам — ни один инструмент не должен ограничивать креативность.

Контекст тут важен. Конференция прошла в Moscone Center, офлайн-билеты разобрали ещё в прошлом году. А давление на Figma сейчас нешуточное: вайбкодинг-инструменты вроде Claude Design умеют собрать кликабельный интерфейс из промта за минуты и ставят под вопрос саму идею о том, что цифровой продукт начинается с дизайн-файла. Ответ Figma на Config 2026 — собрать всю AI-генерацию внутри холста, а не в разных местах. Это часть большого сдвига: AI уже меняет саму работу дизайнеров, и инструменты подстраиваются под это. Если интерфейс всё равно собирают через промты, Figma хочет, чтобы это происходило внутри Figma.

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

Код прямо на холсте Figma

Самый концептуальный анонс конференции. Figma представила слои кода (code layers) — теперь код можно исследовать прямо на холсте Figma Design вместе с командой. Идея простая и при этом смелая: код — это не противоположность дизайну, а материал для него. Так уж заявил Дилан Филд прямо с главной сцены события. Годами индустрия спорила на тему «дизайн против кода», и Филд назвал эти дебаты ложными: слишком долго инструменты заставляли выбирать — и Figma решила, что больше так быть не должно.

Код на холсте Figma (code layers). Источник: Figma

Как с этим работать

Слой кода можно добавить с панели инструментов, создать из существующего фрейма («Построй это с помощью кода») или попросить ИИ-агента Figma сгенерировать его. Также можно импортировать репозиторий GitHub или загрузить локальную папку прямо на холст — в том числе свои песочницы для прототипирования. Генерировать и редактировать код удобно в Figma Make, а затем переносить результат на холст. Система поддерживает npm-пакеты, включая библиотеки анимации и 3D-фреймворки, так что интерактивные элементы — от выпадающих меню до шейдерных эффектов — собираются без выхода из канваса.

Итерации и сравнение

Тут и кроется главная идея: тебе нужно пространство, чтобы отсеять плохие варианты и найти отличные. Слои кода можно дублировать (зажал Option, перетащил — и вот тебе ветка, привычное движение, которое все делали миллион раз). Выделяешь несколько наработок, жмёшь Enter — и одновременно запускаются несколько независимых кодовых баз прямо рядом. Можно перетаскивать карточки, крутить 3D-куб, ловить глитч-эффект — всё живое и интерактивное. А поскольку это холст Figma, чат с агентом общий: ты видишь, что вчера спрашивал коллега и как другой объяснил ему ту самую хитрую кривую. То есть ты в курсе, как вся команда использует код и агентов.

Варианты интерфейса, созданные через code layers. Источник: Figma

Связь дизайна и кода в обе стороны

Дальше — самое интересное. Функция извлечения дизайна (extract designs) конвертирует код обратно в редактируемые слои Figma. Есть даже режим «записать процесс» (record flow): ты кликаешь по живому прототипу, проходишь по экранам и состояниям, жмёшь стоп — и Figma вытаскивает все состояния и раскладывает их обзором с высоты птичьего полёта. Дальше правишь это как обычный дизайн: меняешь текст, двигаешь иллюстрацию, переворачиваешь грустный смайл в радостный. А потом жмёшь «обновить слои кода» — Figma анализирует, что изменилось, и оставляет кодовому агенту минимум работы. Поскольку слои подключены к GitHub, изменения уходят обратно в репозиторий, и забрать их можно где угодно.

Так схлопывается этап хендоффа, который определял процесс «дизайн → разработка» больше десяти лет. Слои кода запускаются в закрытой бете — записаться в лист ожидания можно уже сейчас, подключать пользователей начнут уже в июле, на всех тарифах для пользователей с full seat.

Figma + Weave — генеративный движок на канвасе

Помнишь Weave (бывший Weavy) — наши ребята из Израиля, замутили стартап и после их купила Figma прошлой осенью. Это «нодовый» инструмент для работы с AI-медиа. Его сооснователь Итай Шифф рассказал на сцене знакомую каждому боль: сделать что-то интересное в ИИ легко, а вот сделать пригодное для реального проекта — сложно, потому что творческая работа не сводится к одному промту, ей нужны референсы, итерации, последовательность и обратная связь. Именно для этого и сделан Figma Weave — генеративный ИИ, видео, 3D и визуальные эффекты на «нодовых» (node-based) рабочих процессах.

Узловой интерфейс Figma Weave. Источник: Figma

Инструменты Weave прямо в Figma

На сцене показали реальные сценарии: 360-градусные видео продуктов, быстрый стилизованный рендеринг лоу-фай анимации и — самое наглядное — массовый перенос стиля (bulk style transfer). Берёшь фотографии товаров от разных поставщиков с разным светом и качеством (а мы знаем что так обычно и бывает), прогоняешь через единый визуальный язык — и все фотот: шляпа, обувь, рубашка вдруг выглядят как одна коллекция профессиональной фотосессии в едином стиле.

Самое удобное: Figma взяла самые популярные процессы Weave и вывела наружу по клику доступны готовые темплейты. Узлы («нудлы») крутятся в фоне, а ты пользуешься готовым инструментом из списка. На панели Figma Design появилось больше 20 готовых темплейтов таких AI-задач: перенос стилей, извлечение материалов, создание фонов, замена фона (replace background), текстурирование (texturize), добавление логотипа на продукт, генерация мокапов из любого ассета. Предсказуемый результат без длинных промтов. Супер удобно.

А если у вас есть свой крутой ворк флоу, скоро вы сможете и упаковывать собственные творческие процессы как инструменты и делиться ими с командой прямо на панели — а позже публиковать в Figma Community.

Инструменты Weave будут доступны для публикации. Источник: Figma

Node Figma внутри Weave

Связь работает и в обратную сторону: узел (node) Figma (Figma node) позволяет вставить любой фрейм Figma прямо на холст Weave. Любые изменения дизайна внутри Figma обновляются в реальном времени во всём узловом процессе — генерация медиа и дизайн-макеты живут в одной системе. Инструменты Weave сейчас в открытой бете и бесплатны на этот период, а всем участникам Config начислили немного дополнительных кредитов Weave. Node Figma ожидается этим летом.

Дизайн-агент: кастомные инструменты и больше контекста

Дизайн-агент стал доступен всем буквально накануне, и развивается он очень быстро. Про самих агентов мы вам уже рассказывали в выпуске дизайн новостей — теперь они получили два важных навыка: собирать кастомные инструменты и понимать твой контекст.

Генеративные плагины без разработчиков

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

На сцене это показали живьём: продуктовый лид Джорджия попросила агента сделать плагин, который рандомизирует высоту прямоугольников, чтобы они выглядели как настоящая звуковая волна — и за пару минут получила работающий рандомайзер с настройкой. Мелочь, а приятно. Примеры из жизни: дизайнер Родриго Дэвис собрал себе Bento Grid Builder, который генерирует bento-сетки точь-в-точь в его фирменном стиле; агентство Athletics сделало для клиента плагин, рисующий реальные гоночные трассы мира по настоящим данным. И когда проект передают клиенту, плагин уходит вместе с ним — заказчик получает не только файл, но и инструменты, которыми он создавался.

Теперь можно будет создавать собственные плагины по текстовому запросу. Источник: Figma

Шейдеры и заливки на WebGPU

Тот самый анонс, которого один из дизайнеров Figma, Родриго Дэвис, по его словам, ждал четыре с половиной года. Шейдеры приходят в Figma. Если слово пугает — не паникуй: ты их сто раз видел, обычный градиент, прогрессивное размытие и матовое стекло — это всё шейдеры. Раньше создавать их было сложно, уровня «погружаться в математику на четыре года». Теперь их собирает агент Figma на базе нового рендерера WebGPU.

Делятся они на два типа. Заливки (shader fills) — это материал, а точнее еще один вид заливки: «водная каустика», меш — градиенты (mesh gradient) с цветовыми точками, которые двигаешь прямо маркерами на холсте (oncanvas handles). Эффекты накладываются поверх слоёв, вытягивают из них цвета и трансформируют: искажение линзы (lens distortion) с хроматической аберрацией (простыми словами: цветные краешки, как на старом видео), сгибание страницы (page curl), липкое слияние (gooey merge), интерактивные частицы, которые следят за курсором. Эффекты можно складывать в стек, и порядок имеет значение — если положить gooey merge поверх искажения линзы, он сольёт и его. И всё это настраиваемо, с циклом редактирования: не понравилось — вернулся к агенту и поправил. Живёт в новой вкладке Tools.

Шейдерные эффекты и заливки в Figma. Источник: Figma

Расширенный контекст, коннекторы и Skills

В чат с агентом теперь можно загружать файлы (интервью пользователей, UX-тексты), давать ссылки на другие файлы Figma, чтобы агент понял структуру компонентов и стилей, и использовать веб-поиск для реальных данных вместо плейсхолдеров. А ещё подключать сторонние инструменты через коннекторы (connectors) — на старте это Notion, Slack, Granola, Hex, GitHub и Atlassian. Контекст из всех этих платформ можно тянуть прямо в дизайн.

И отдельно — Skills, по которым, как пошутил Филд, можно было бы сделать целую отдельную презентацию. Самые удачные промты, к которым постоянно возвращаешься, превращаются в многоразовые слэш-команды: тест на accessibility требования, проверка интерфейса «глазами» ИИ-пользователя, любой повторяющийся рабочий процесс. Формат Skills мы уже знаем от Anthropic, они популяризировали его в Claude — теперь он добрался и до дизайн-агента Figma.

Figma Motion — таймлайн прямо на холсте

Команда Modify, которую Figma забрала к себе год назад, наконец показала, чем занималась все это время. Их фраза «about time» оказалась каламбуром: холсту нужно было новое измерение — время. Анимация перестаёт быть изолированным процессом: раньше моушн делали в стороннем софте и конвертировали в код, теперь временная шкала (timeline) — это новый примитив дизайна прямо внутри Figma. Мы собрали отдельный разбор Figma Motion – с таймлайном, ключевыми кадрами и экспортом.

Режим Motion с таймлайном рядом с дизайном. Источник: Figma

Режим Motion

Появился на рабочей панеле в Figma и включается одним тумблером: переключил фрейм в режим Motion, нажал пробел — и дизайн оживает. Кликаешь на объект, жмёшь Shift+K для авто-ключа (auto key), перетаскиваешь, добавляешь вращение и масштаб — готово. Привычные элементы управления на месте, а параметры плавности (easing) можно крутить прямо во время воспроизведения — потому что анимацию нужно именно чувствовать. Привязка, панорамирование, мульти-выделение, дублирование и сравнение вариантов на холсте работают ровно так, как ты ожидаешь.

Системность: анимация как часть дизайн-системы

Ключевой момент: анимация проходит сквозь дизайн-системы. Её можно закладывать в базовые компоненты, появились переменные анимации (motion variables) с поддержкой разных режимов (modes) для глобального управления движением во всём файле. Компоненты с анимацией обновляются в реальном времени по всей сцене, а комментарии теперь живут не только на холсте, но и на самой временной шкале — если кто то из команды работает над конкретной анимацией, ты видишь его позицию на таймлайне.

Помощь агента и плагины для таймлайна

Расставлять ключевые кадры вручную утомительно, и кто вообще в 2026 делает что то «вручную»? Теперь это делает за нас агент: выделяешь несколько фреймов с дизайном, пишешь промт: «плавно отобрази изображения, сдвинь и покажи текст, потом скрой в идеальный цикл» — и получаешь редактируемую анимацию. А плагины работают и с Motion: например, timeline keyframe stagger расставляет появление объектов по очереди, а можно вообще нарисовать кривую Безье и заставить элементы появляться вдоль неё.

Анимация шейдеров и 3D

Тут всё сходится в одной точке. Эффекты шейдеров можно накладывать поверх анимированного контента, и они динамически учитывают движение объектов под собой — контуры, смещение шума (noise displacement) для лёгкого дрожания, хроматическая искажения для растекания цвета. Любое свойство эффекта тоже анимируется ключевыми кадрами. А ещё в Figma завозят 3D-трансформации — свойства X, Y и Z можно анимировать, вращать элементы с живым превью. Это пока предпросмотр от команды векторов (той самой, что год назад сделала Figma Draw), но выглядит уже впечатляюще.

Анимация шейдеров и 3D-трансформации. Источник: Figma

Передача в разработку

С хендоффом всё стало проще некуда. Готов собирать — переключаешься в Dev Mode, вытаскиваешь код напрямую или отправляешь через Figma MCP в свою LLM или в Figma Make. На сцене показали готовый сайт гайдлайнов, собранный этими же инструментами, где анимации реализованы прямо в коде. И наконец-то, то чего мы все ждали 10 лет! Экспорт видео из Figma в MP4, WEBM, анимированный SVG или GIF. И кстати Figma Motion уже в открытой бете.

Что в итоге

Логика всех анонсов одна: ИИ не должен просто выплёвывать готовый результат, который ты либо принимаешь, либо перегенерируешь. Он должен давать инструмент, который можно крутить дальше — и делать это вместе с командой. Код, Weave, шейдеры, моушн — всё теперь живёт в одном месте, на холсте. Как сказал Филд, теперь холст — это не просто место, где живёт твоя работа, а место, где всё соединяется.

Что уже сейчас доступно в открытой бете:

Figma Motion, генеративные плагины, шейдеры и инструменты Weave — и кредиты ИИ во время беты они не тратят.

Что нужно подождать и скоро в закрытой бете:

Code Layers (слои кода), будет подключение с июля, а также анонсированные агент FigJam и агент Figma Slides. Записаться на ранний доступ можно на figma.com/configs.

Для дизайнеров это значит, что граница между макетом, кодом и анимацией становится всё тоньше — а расти придётся вширь. Если хочешь разобраться, как собирать интерфейсы на стыке дизайна и кода с помощью AI, у нас есть курс по вайбкодингу – там мы как раз учим работать в этой новой реальности.

Мы будем тестировать новые функции по мере их выката из беты и обязательно поделимся практикой. И да, если собирались посетить Config, то следующий, пройдет 15 октября в Индии. 

Следите за нами здесь и в соцсетях, чтобы быть первыми вместе с нами. Впереди еще больше деталей с Config и тест драйв всех обновлений!

А полное видео с обзором всех апдейтов Figma можно также посмотреть у нас на YouTube: