Figma открыла бету Specs и code layers: дизайн-система становится инструкцией для ИИ-агентов

Figma вывела в открытую бету Specs и code layers. Specs — Markdown-документы прямо на холсте рядом с макетами, code layers — рабочий код прототипа там же. Через MCP-сервер Figma ИИ-агенты читают спеки и правят код, поэтому дизайн-система и продуктовые решения превращаются в правила, которым агент обязан следовать. Code layers бесплатны на платных тарифах до 4 ноября.

Анонс прозвучал 15 октября на первой конференции Config India в Бангалоре. Для команд, которые заказывают UI/UX-дизайн и потом передают макеты в разработку, меняется сама точка передачи: вместо набора экранов и отдельного ТЗ в Confluence — один файл, где лежат требования, макеты и прототип на коде. Как вообще устроена работа в редакторе, мы разбирали в материале «Figma для заказчика».

Ниже — что именно выпустила Figma, как новые функции связаны с ИИ-агентами и что стоит проверить команде, которая ведёт разработку сайтов и веб-приложений, прежде чем строить на них процесс.

Что Figma показала на Config India

По данным блога Figma и TechCrunch, на конференции компания представила сразу несколько функций, которые объединяет одна идея — дать агентам больше контекста о дизайне:

• Specs (открытая бета) — Markdown-документы на холсте. Доступны в вебе, десктопе и мобильном приложении на платных тарифах.
• Code layers (открытая бета) — слои с рабочим кодом прототипа. В закрытой бете функция была с июня.
• Guidelines (открытая бета) — правила к опубликованным библиотекам дизайн-системы, по которым агент собирает экраны.
• Code Sources (закрытая бета) — подключение кода компонентов из GitHub-репозитория или npm-пакета.
• Payload в Figma Make — интеграция с headless CMS Payload для сайтов с данными; раскатка на все аккаунты в ближайшие недели.

Как устроены Specs: ТЗ, которое читает агент

Спеку создают клавишей D или иконкой на панели инструментов, а готовый .md-файл можно просто перетащить на холст. Внутрь встраиваются фреймы, доски FigJam, диаграммы и code layers — требования и макет больше не живут в разных системах. Подключаются коннекторы: GitHub для контекста кода и Hex для аналитики.

Главное — машиночитаемость. Агент Figma читает спеку как Markdown, отвечает на комментарии и обновляет текст по запросу. Сторонние кодинг-агенты получают полный контекст спеки со всеми вложениями через MCP-сервер Figma. Компания заявила о 20 новых интеграциях с MCP, среди них OpenCode, Junie от JetBrains, браузер Dia и Meta Muse.

Code layers: прототип на коде прямо в макете

В code layer можно импортировать лёгкий прототип из GitHub или локальной папки, захватить живую страницу через расширение для Chrome или принести код через MCP. Слой, связанный с GitHub, синхронизируется с репозиторием, а изменения уходят в ветку на ревью через pull request.

Код правят руками или промптом агенту. Слой можно продублировать, чтобы сравнить варианты рядом, и попросить агента объединить удачные решения в новую версию. Функция Extract designs возвращает экран из кода в редактируемые фреймы Figma. По данным Figma, агентство Merkle на этой схеме ускорило итерации на 30% и вдвое сократило документацию по взаимодействиям — это кейс вендора, а не независимый замер.

Директор по дизайну Figma Лоредана Крисан объяснила мотивацию так: кода сегодня пишется в 17 раз больше, чем раньше, а релизов выходит лишь в 1,3 раза больше. Узкое место — не генерация, а согласованность решений.

Что это значит для дизайна и разработки

• Дизайн-система становится контрактом. Агент собирает интерфейс по Guidelines и коду компонентов, поэтому неописанные правила он будет нарушать. Документировать токены, состояния и паттерны теперь нужно не «для людей», а как исполняемую инструкцию.
• Граница handoff сдвигается. Прототип на коде появляется раньше, но это прототип: для продакшена его всё равно придётся переписать под архитектуру, доступность и производительность.
• Появляется новая статья расходов. После 4 ноября работа в code layers списывает ИИ-кредиты — бюджет на дизайн начинает зависеть от числа итераций.

Что проверить команде до 4 ноября

1. Попробуйте code layers на одном реальном сценарии, пока функция бесплатна, и посчитайте, сколько итераций уходит на экран.
2. Перенесите ключевые требования продукта в Specs и проверьте, как их читает ваш кодинг-агент через MCP-сервер.
3. Опишите Guidelines к библиотеке компонентов: без них агент будет «угадывать» отступы и состояния.
4. Решите вопрос доступа к коду. Синхронизация с GitHub означает, что Figma получает доступ к репозиторию, — согласуйте это с политикой безопасности.

Часто задаваемые вопросы

Specs и code layers доступны на бесплатном тарифе? Нет. Обе функции в открытой бете работают на платных тарифах Figma.

Сколько стоят code layers? До 4 ноября 2026 года создание и правка бесплатны на платных тарифах, после этого функция расходует ИИ-кредиты. Точные тарифы Figma в анонсе не раскрыла.

Заменяет ли code layer фронтенд-разработку? Нет. Это инструмент прототипирования и согласования. Продакшен-код по-прежнему проходит архитектурное ревью, тесты и оптимизацию.

Источники

• Figma Blog — Introducing Specs: Markdown as a medium, 15 октября 2026.
• Figma Blog — Design together with code layers on the canvas, 15 октября 2026.
• Figma Blog — Build by design: New workflows for new ways of building, 15 октября 2026.
• TechCrunch — Figma announces new features to define how agents work on its platform, 14 октября 2026.