Figma открыла генеративные плагины и шейдеры: что теперь можно передать из канваса в React

Figma 1 сентября рассказала о развитии генеративных плагинов и шейдеров — инструментов, которые её дизайн-агент создаёт прямо на канвасе по описанию. Главное изменение не в том, что агент снова умеет «нарисовать эффект», а в том, что результат можно публиковать, редактировать как код и передавать дальше в инженерный контур.

Это приближает дизайн-инструмент к циклу «идея → работающий прототип → проверяемая реализация». Но важно не перепутать удобный старт с готовым продакшеном: Figma не отменяет ревью, требования к доступности и проверку производительности.

## Что именно изменилось

Figma заявляет четыре новых возможности для созданных агентом плагинов и шейдеров:

• Публикация. Плагин или шейдер можно отправить в Figma Community либо распространить приватно внутри организации на тарифах Organization и Enterprise.
• Анимация и интерактивность. Шейдеры могут учитывать время, движение и действия пользователя, а не быть только статичным фильтром слоя.
• Доступ к исходнику. Код созданного эффекта можно посмотреть и скачать, чтобы доработать в стороннем агенте или обычном редакторе.
• Работа через MCP. Агент, подключённый к Figma MCP, может просматривать и менять генеративные плагины и шейдеры; шейдер можно экспортировать как ориентир для точной реализации в React.

Под шейдерами Figma понимает GPU-программы, которые меняют пиксели слоя в реальном времени — например, создают искажение, зерно, световой эффект или реакцию на курсор. Внутри продукта команда Figma перешла на WebGPU-пайплайн и изолированные песочницы для таких графических сценариев.

## Почему это важно не только для моушн-дизайна

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

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

## Практический сценарий для команды

1. Дизайнер формулирует задачу не как «сделай красиво», а как наблюдаемое поведение: какой слой меняется, от какого действия, с какими ограничениями.
2. Агент создаёт черновой плагин или шейдер на канвасе; дизайнер настраивает параметры и проверяет его в контексте экрана.
3. Команда фиксирует допустимые состояния, отключение анимации и поведение на малых экранах.
4. Код эффекта выгружается в репозиторий или передаётся инженеру через MCP как исходная спецификация, а не как безусловный артефакт для вставки.
5. Разработчик проверяет производительность, доступность, браузерную совместимость, безопасность и лицензионные ограничения, после чего принимает, перерабатывает или отклоняет реализацию.

Такой процесс оставляет ИИ сильным в зоне быстрых экспериментов, но не передаёт ему решение о качестве релиза.

## Где проходит граница

Экспорт в HTML или React не гарантирует, что эффект подойдёт для реального интерфейса. Генеративный код может быть избыточным, плохо вести себя на слабом GPU, нарушать контраст или не иметь режима reduced motion. А интерактивный эффект, который хорошо выглядит в одном макете, может конфликтовать с вводом с клавиатуры, скринридером или содержанием на локализованных экранах.

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

## Кому доступно

По данным Figma, дизайн-агент находится в открытой бете. Пользователи с Full seat могут создавать генеративные плагины и шейдеры на всех планах; пользователи с Collab, Dev и View seat — использовать агента в своих drafts. Во время беты функция бесплатна, но Figma предупреждает, что через несколько недель она начнёт расходовать AI credits. Перед тем как встраивать её в постоянный процесс, команде стоит уточнить свой тариф, лимиты и модель расходов.

## Вывод

Самая зрелая часть обновления — не эффектный шейдер сам по себе, а появление проверяемого моста между канвасом, кодом и командной библиотекой. Это хороший повод пересмотреть handoff: передавать разработке не скриншот анимации, а её параметры, состояния и ограничения. Но выпускать результат следует только после обычного продуктового ревью — AI-генерация снижает цену эксперимента, а не цену ошибки.

Источник: Figma — Behind the build: Generative plugins and shaders at Figma (1 сентября 2026).