Figma открыла канвас для ИИ-агентов: Claude Code, Codex и другие теперь дизайнят прямо в ваших файлах

24 марта Figma анонсировала штуку, которую дизайн-сообщество ждало давно: ИИ-агенты теперь могут писать напрямую в Figma-файлы. Не генерировать картинки «в стиле Figma». Не конвертировать скриншоты. А реально работать с компонентами, переменными, auto layout и вашей дизайн-системой.

Это не просто «ещё одна интеграция». Подход к тому как код и дизайн взаимодействуют — принципиально другой.

Figma выпустила новый инструмент use_figma в составе своего MCP-сервера. MCP (Model Context Protocol) — открытый стандарт от Anthropic, который позволяет ИИ-моделям взаимодействовать с внешними сервисами через единый интерфейс. Если совсем на пальцах — это «универсальный переводчик» между ИИ и вашими инструментами.

Через use_figma агенты вроде Claude Code, Codex (OpenAI), Cursor и других MCP-клиентов могут:

Важно: это бета-версия, и пока она бесплатна. Figma планирует сделать это платной фичей с оплатой за использование но на время бета-периода ограничений нет. Исключение: пользователи Starter-плана, у которых лимит в 6 вызовов MCP-инструментов в месяц.

Тут стоит разобраться, потому что Figma теперь предлагает два инструмента и они делают разные вещи.

generate_figma_design появился в феврале и берёт живой UI из браузера, конвертируя его в редактируемые слои Figma. Однонаправленный процесс: код -> канвас. Полезно когда дизайн разъехался с кодом и нужно актуализировать файлы.

use_figma вышел сейчас и позволяет агентам создавать и редактировать нативный контент Figma, используя ваши компоненты и переменные. Это уже двунаправленный процесс. Вот он-то и меняет правила игры.

Вместе они закрывают полный цикл: захватили UI из кода в Figma, отредактировали там, создали новые экраны с помощью агента. Всё с привязкой к вашей дизайн-системе.

Figma ввела концепцию skills. По сути это markdown-файлы с инструкциями которые объясняют агенту, как именно работать в Figma.

Зачем? Проблема ИИ-генерации дизайна всегда была в том что результат выглядит «генерично». Агент не знает ваших конвенций, вашего spacing, ваших принципов именования. Skills как раз про это.

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

В основе лежит фундаментальный скилл /figma-use, от которого наследуются все остальные. Он даёт агенту базовое понимание того как устроена Figma — структура, принципы, ограничения.

На старте доступно 9 готовых скиллов от Figma и сообщества:

Для создания скилла не нужно писать код или делать плагин. Обычный markdown-файл. Любой дизайнер может написать свой скилл и поделиться им с командой — как по мне, это одна из самых сильных сторон всей этой истории.

Любопытная деталь. Когда агент генерирует экран он может сделать скриншот результата, сравнить с тем что задумывалось, и итеративно исправить несоответствия.

Поскольку агент работает с реальной структурой Figma (компоненты, переменные, auto layout), исправления затрагивают саму систему а не просто пиксели. Звучит круто, но насколько хорошо это работает на практике — покажет время.

ИИ-модели по природе недетерминированы: один и тот же промпт может давать разные результаты. Skills делают поведение более предсказуемым но не идеальным. Figma сама это честно признаёт, что уже вызывает какое-то доверие.

Давайте к практике.

Самый простой вариант, не требующий десктопного приложения Figma.

Шаг первый. Откройте терминал и выполните:

claude mcp add --transport http figma-remote-mcp https://mcp.figma.com/mcp

Шаг второй. Перезапустите Claude Code если он был запущен. MCP-подключения инициализруются на старте, так что добавление нового сервера в середине сессии требует рестарта.

Шаг третий. Введите /mcp в Claude Code. Вы увидите figma-remote-mcp в списке серверов.

Шаг четвёртый. Выберите Authenticate, нажмите Allow Access в открывшемся браузере.

Шаг пятый. Вернитесь в терминал. Должно появиться: Authentication successful. Connected to figma.

Проверьте подключение ещё раз через /mcp — статус должен быть connected. Всё, можно промптить.

Если предпочитаете работать через десктопное приложение:

Откройте Figma Desktop, обновите до последней версии. Далее: Меню Figma -> Preferences -> Enable Dev Mode MCP Server. Появится подтверждение что сервер запущен на http://127.0.0.1:3845/mcp.

Добавьте конфигурацию в Claude Code:

{ "mcpServers": { "figma-desktop": { "url": "http://127.0.0.1:3845/mcp" } } }

Есть два способа.

По ссылке: скопируйте ссылку на фрейм в Figma и вставьте в промпт:

Используя этот файл Figma: [ссылка], создай новую страницу и построй экран настроек, используя существующие компоненты.

По выделению (только Desktop): выделите фрейм в Figma и попросите Claude работать с текущим выделением.

Devhack: начинайте с отдельных компонентов а не целых страниц. Так вы быстрее разберётесь в воркфлоу и получите более стабильные результаты. Сложные многоэкранные флоу лучше разбивать на части.

Не ждите production-ready результата с первого промпта. Claude Code даёт отличную стартовую точку но итерации — часть процесса, тут никуда не денешься.

Реакция в X получилась довольно показательной.

«Figma doesn't want to be left behind» — после анонса Google Stitch многие опасались что Figma теряет позиции. Этот релиз показывает что нет.

«AI to code design companies are cooked» — звучит категорично, но доля правды есть: инструменты которые просто конвертируют дизайн в код теперь конкурируют с нативной интеграцией Figma.

«Figma: Not Cooked Yet» — пожалуй лучший краткий вердикт.

Отдельно порадовал экзистенциальный кризис дизайнера в одном твите: «why do we design?». Честно говоря, я бы на месте дизайнеров тоже немного напрягся.

Список MCP-клиентов которые уже работают с use_figma: Claude Code (Anthropic), Codex (OpenAI), Cursor, Copilot CLI и Copilot в VS Code (GitHub), Augment, Factory, Firebender, Warp.

Cat Wu, руководитель продукта Claude Code в Anthropic, сказала что Skills учат Claude Code работать прямо на дизайн-канвасе так чтобы результат соответствовал намерению и суждению команды. Ed Bayes из OpenAI (дизайн-лид Codex) добавил что Codex теперь может находить и использовать весь дизайн-контекст в Figma для создания более качественых продуктов.

Figma пока не раскрыла точную модель ценообразования. Что известно:

Стратегия тут прозрачна: дать попробовать, дождаться пока команды встроят в процессы, а потом включить счётчик. Классика.

Это не «ИИ заменит дизайнеров». Скорее «ИИ станет ещё одним участником вашей команды в Figma». Агент работает не вместо вас а рядом с вами, в том же файле с теми же компонентами.

Ценность дизайнера никуда не девается — наоборот, она усиливается. Именно ваши решения закодированные в дизайн-системе и описанные в skills, определяют качество того что генерирует агент. Ваша экспертиза теперь масштабируется.

Figma делает ставку на то что канвас — это shared space для принятия решений. Неважно откуда начинается работа: из терминала, из IDE или из самой Figma. Всё сходится на канвасе.

Попробовать можно прямо сейчас. Бета открыта.

Полезные ссылки: