Figma всё заметнее выходит за рамки привычного редактора интерфейсов. На конференции Config 2026 компания представила сразу несколько крупных направлений: работу с кодом прямо на холсте, полноценную анимацию, программируемые визуальные эффекты и инструменты, которые можно создавать с помощью ИИ.
По сути, Figma пытается объединить в одном пространстве то, для чего дизайнеру раньше приходилось переключаться между несколькими программами.
Код становится частью дизайн-процесса
Одна из главных новинок — Code Layers, или кодовые слои. Теперь интерактивный код может существовать прямо на холсте рядом с обычными фреймами и компонентами.
Существующий фрейм можно превратить в кодовый слой или попросить Figma Agent собрать его по текстовому запросу. Также можно импортировать репозиторий с GitHub или локальный проект и работать с существующей кодовой базой.
Работает и обратное направление: из кода можно извлечь отдельный экран, состояние интерфейса или целый пользовательский сценарий и получить обычные редактируемые слои Figma. После изменений дизайн можно снова синхронизировать с кодовым слоем и отправить обновления обратно в репозиторий.
При этом кодовые слои можно дублировать почти так же, как обычные фреймы. Это позволяет расположить рядом несколько работающих вариантов интерфейса и сравнивать не только их внешний вид, но и поведение.
Именно здесь становится понятна основная идея Figma: код рассматривается уже не как финальный этап после дизайна, а как ещё один материал для исследования идей.
Пока Code Layers в Figma Design находятся в закрытой бете, поэтому функция доступна не всем пользователям.
Figma Motion: анимация прямо на холсте
Второе крупное обновление — Figma Motion. В Figma появился полноценный режим работы с анимацией и временной шкалой.
Можно создавать ключевые кадры, менять положение, масштаб, вращение и прозрачность объектов, управлять длительностью и кривыми easing, использовать готовые анимационные стили и комбинировать их между собой. Первый вариант анимации можно поручить Figma Agent, а затем вручную доработать результат.
Но важнее то, что анимация становится частью дизайн-системы.
Например, движение можно настроить один раз внутри компонента — и оно будет использоваться вместе с этим компонентом на других экранах и в файлах команды. Для параметров движения появились переменные: можно отдельно задавать easing и переключать его режимы сразу для всех связанных анимаций.
Разработчики тоже получают доступ к этим данным. В Dev Mode можно открыть временную шкалу и посмотреть ключевые кадры, длительность и кривые анимации. Код можно получить в CSS, JSON, React или Motion.dev, а через MCP передать контекст анимации кодовому агенту.
Готовую анимацию можно экспортировать в MP4, WebM, GIF или анимированный SVG. Поддержку Lottie Figma планирует добавить позже.
Figma Motion находится в открытой бете с 24 июня 2026 года и доступен на всех тарифах. При этом некоторые возможности — например, публикация анимированных компонентов, генерация анимации через Figma Agent и экспорт видео высокого разрешения — требуют Full seat на платном тарифе.
Шейдеры и плагины, которые создаёт ИИ
Ещё одно направление — шейдеры: программируемые визуальные эффекты на базе WebGPU.
С их помощью в Figma можно создавать дизеринг, эффект жидкого металла, искажения объектива, генеративные паттерны, сложные текстуры и другие эффекты, которые раньше потребовали бы отдельных графических инструментов или собственного кода.
При этом писать шейдер вручную необязательно. Достаточно описать нужный эффект Figma Agent и указать параметры, которыми вы хотите управлять. После генерации эти параметры появляются в интерфейсе Figma и ведут себя почти как обычные свойства эффекта.
К сентябрю возможности стали шире: Figma добавила анимированные и интерактивные шейдеры, доступ к их исходному коду и возможность публиковать созданные шейдеры и генеративные плагины в Figma Community или внутри организации.
Похожим образом работают генеративные плагины. Вместо поиска готового расширения дизайнер может описать задачу агенту — например, попросить создать генератор раскладок или специальный инструмент для обработки графики — и получить собственный плагин прямо внутри рабочего процесса.
Figma Weave приходит на основной холст
На Config 2026 компания также продолжила интеграцию Figma Weave — платформы для генерации и обработки визуального контента с помощью ИИ.
Более 20 готовых инструментов Weave появились непосредственно в Figma Design. Среди них — перенос визуального стиля между изображениями, замена фона, изменение освещения, генерация мокапов и создание векторных иллюстраций по текстовому описанию.
В основе каждого такого инструмента находится workflow, собранный в Weave. Его можно открыть, изучить и использовать как основу для собственного процесса.
Таким образом Figma постепенно объединяет дизайн интерфейсов, генерацию изображений, работу с видео и другие творческие задачи в одной экосистеме.
Что это значит для дизайнера
Главный итог Config 2026 — не появление ещё нескольких функций в Figma.
Меняется сам рабочий процесс.
Граница между макетом, прототипом и работающим интерфейсом становится всё менее заметной. Дизайнер может перейти от обычного фрейма к коду, вернуть работающий интерфейс обратно в редактируемые слои, добавить сложную анимацию или создать собственный инструмент — и всё это не покидая привычный холст.
Одновременно растёт значение дизайн-систем. Теперь они описывают не только цвета, типографику и компоненты, но и движение, интерактивность и правила, которые могут использовать как люди, так и ИИ-агенты.
Поэтому меняются и требования к самому дизайнеру. Всё важнее становится не только умение нарисовать экран, но и способность продумать поведение продукта, увидеть разные варианты решения и достаточно точно объяснить свою идею — разработчику, команде или ИИ-агенту.
Config 2026 показывает направление, в котором движется Figma: от редактора макетов — к общей среде, где дизайн, код, анимация и генеративные инструменты становятся частями одного процесса.
