Уровни кода Figma и Specs: что это такое, как они работают и где они заканчиваются2 min read

Слои кода Figma помещают выполняемый код на холст, а Figma Specs помещает туда же Markdown. Оба вышли на открытую бета-версию Config India 15 октября 2026 года, поэтому файл проекта теперь может содержать фреймы, рабочий прототип и письменный план, на основе которого строится агент.

Это руководство предназначено для дизайнеров, проектировщиков и интерфейсных инженеров, решающих, стоит ли переносить прототипы и спецификации в Figma. В нем рассказывается, что делает каждая функция, как начать, сколько она стоит в кредитах ИИ и где работа должна быть оставлена ​​Figma товарищам по команде в Claude, ChatGPT или Cursor.

В эпоху искусственного интеллекта дизайн — это код. Чтобы проектировать непосредственно в коде с помощью ИИ или превратить проекты Figma в код, используйте Anima Playground: опишите экран или начните с дизайна Figma, а затем продолжайте работу над редактируемым приложением, которое вы можете просмотреть и опубликовать.

Проектируйте прямо в коде с помощью ИИ

Проектируйте с помощью ИИ: опишите экран или превратите проекты Figma в код.

Что представил Figma на Config India 2026?

Слои кода и Specs были заголовками, но они появились вместе с набором функций агента. Вот текущий статус из справочного центра Figma:

Обе бета-версии будут доступны в течение нескольких недель, поэтому вы можете увидеть их до или после остальной части вашей команды.

Что такое уровни кода Figma?

Уровень кода — это слой, на котором хранится реальный работающий код. Вместо прототипа, который имитирует взаимодействие со ссылками на фреймы, вы получаете работающий прототип с кодовой поддержкой, расположенный на холсте рядом с вашими проектами. Товарищи по команде могут просматривать его, комментировать и дублировать, чтобы одновременно попробовать другое направление.

Figma предлагает четыре способа запуска:

• Из дизайна. Выберите кадры и попросите агента Figma превратить их в слой кода.
• С живого сайта. Захватите страницу с расширением Figma Chrome и вставьте ее на холст.
• Из репо. Импортируйте поддерживаемую облегченную базу кода прототипирования из GitHub или локальной папки. Импорт GitHub остается подключенным к этому репозиторию.
• С нуля. Добавьте пустой слой кода и предложите агенту выполнить сборку.

Вы также можете перенести прототип, созданный вами в инструменте кодирования, на холст через сервер Figma MCP.

Редактирование происходит тремя способами. Вы подсказываете агенту, аннотируете кадры, чтобы показать место изменения, или открываете редактор кода и меняете код самостоятельно. Когда визуальные детали важнее кода, Extract designs превращает экраны из уровня кода обратно в редактируемые кадры Figma. Когда код будет готов для инженеров, вы можете отправить его в ветку и открыть запрос на включение.

Что такое Figma Specs?

Figma называет Specs «родным домом для контекста». На практике это совместный документ Markdown, который находится либо на основе файла Figma Design или платы FigJam, либо как отдельный файл Spec.

Приступить к работе быстро:

1. Создайте автономный Spec из браузера файлов или перейдите в figma.com/spec/new.
2. Внутри файла проекта или платы FigJam щелкните Spec на панели инструментов или нажмите Д.
3. Уже есть .md файл? Перетащите его на холст, и он станет спецификацией.
4. Напишите с помощью уже известного вам Markdown: # для заголовков, - для пуль, [] для дел, > для кавычек, три обратных кавычки для кода. Тип / для изображений — вставки и разделители Figma.

Что делает спецификацию больше, чем файл Markdown, так это то, что находится вокруг текста. Вы можете встроить рамку, плату FigJam или любой узел из холста, чтобы требование и описываемый им дизайн оставались рядом друг с другом. Товарищи по команде оставляют комментарии, а агент Figma может читать эти комментарии и отвечать на них.

Specs также работает вне Figma. Агенты кодирования, подключенные к серверу Figma MCP, могут читать, создавать и обновлять спецификации, используя figma-spec навык. Чтобы передать его, вы копируете ссылку на спецификацию в приглашение вашего агента кодирования, и вместе с ней поставляются связанные кадры, диаграммы, слои кода и фрагменты Code Connect.

Почему Markdown стал форматом передачи

В стартовом сообщении Figma прямо сказано: Markdown теперь является фактическим форматом для обмена контекстом с агентами. Его читает каждый кодирующий агент. Большинство продуктовых команд уже хранят планы, PRD и инструкции для агентов. .md файлы.

Насколько я понимаю, Specs — это Figma, принимающий, что передача агенту является текстовым, а затем превращающий этот текстовый мультиплеер. Местный AGENTS.md или PRD никогда не выходил из строя из-за формата. Это не удалось, потому что его редактировал только один человек, он отошел от дизайна, и никто не мог видеть, какую версию использовал агент.

Внутри Figma это исправляет Specs. Открытый вопрос заключается в том, что происходит за его пределами. Встраивания, комментарии и ссылки на интерактивные проекты являются функциями Figma, и агенты получают к ним доступ через клиентов, перечисленных в каталоге Figma MCP. Если вашим инженерам, ChatGPT вашего менеджера по проекту и Клоду из вашей маркетинговой команды нужен один и тот же план, вам все равно придется решить, где будет храниться общая копия.

Практический рабочий процесс: от PRD к уровню кода и запросу на извлечение.

Вот как эти две функции сочетаются друг с другом в реальной функции, используя только то, что документировано сегодня Figma.

1. Перетащите PRD на холст. Ваш существующий .md файл становится спецификацией. Ничего не переписывается, и редактирование вручную не требует использования кредитов ИИ.
2. Вставьте кадры, о которых идет речь. Использовать / чтобы добавить потоки, описанные PRD. Рецензенты теперь видят требование и экран вместе.
3. Превратите ключевые кадры в слой кода. Выберите их и предложите агенту. Если у вас уже есть репозиторий прототипа, импортируйте его из GitHub.
4. Обзор в одном месте. Собирайте комментарии по спецификации и уровню кода. Попросите агента Figma отвечать на каждый открытый комментарий, предлагая исправление, пока люди высказывают мнение в тех же обсуждениях.
5. Скиньте спец. Вставьте ссылку на спецификацию в Codex, Claude Code или Cursor, подключенный к серверу Figma MCP. Агент получает Markdown плюс связанный контекст проекта.
6. Отправьте код прототипа. Отправьте изменения уровня кода в ветку и откройте запрос на включение, чтобы инженеры проверили их перед слиянием.

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

Если следующим шагом является превращение проекта Figma в код, который можно запустить, или проектирование кода из командной строки, то это задача Anima Playground.

Сколько стоят слои кода и Specs?

• Слои кода используют кредиты ИИ. В платных планах создание и редактирование внутри уровня кода бесплатны до 4 ноября 2026 г. Для другой работы агента в той же командной строке по-прежнему используются кредиты, а после 4 ноября все задачи уровня кода используют кредиты.
• Specs можно писать бесплатно. Самостоятельный ввод и редактирование спецификации не требует использования кредитов. Использование агента со спецификацией позволяет. Наведите курсор на квитанцию ​​после каждого запроса, чтобы узнать, сколько она стоит.
• Payload и рекомендации увеличивают стоимость. Figma отмечает, что оба дают агенту больше контекста и больше работы, поэтому одно и то же приглашение может использовать больше кредитов.

Ограничения, которые следует проверить, прежде чем планировать их обход

• Посадочная дистанция. Обе функции являются открытыми бета-версиями, которые будут доступны в течение нескольких недель. Найдите значок «Код» на панели инструментов Figma Design и параметр Spec в браузере файлов.
• Планы. Specs нужен платный план. Начинающие пользователи получают слои кода, но не Specs. Обоим нужен доступ для редактирования для создания.
• Отказ от участия. Только администраторы предприятия могут отключать уровни кода и только отключив все функции Figma AI.
• Размер репо. Импорт GitHub предназначен для облегченных баз кода для прототипирования, а не для полноценного производственного приложения.
• Проектировать системный код. Подключение вашего реального кода компонента через источники кода все еще находится в стадии закрытого бета-тестирования, поэтому уровни кода еще не могут использовать ваши производственные компоненты.

Где заканчивается Figma и где подходят Anima и AgentGrid.io

Если вся ваша команда работает в Figma, уровни кода и Specs являются надежным вариантом по умолчанию. Прототип, план и комментарии находятся в одном файле, и над ними могут работать агент Figma и клиенты MCP.

Две распространенные ситуации по-прежнему выходят за рамки этого файла.

Идея началась где-то в другом месте. Прототип Claude Design, страница HTML, созданная ChatGPT, или действующий сайт, на котором вы хотите учиться. Сервер MCP компании Figma теперь имеет html_to_figma инструмент для созданного агентом HTML. Buddy компании Anima, наш агент по проектированию искусственного интеллекта внутри Figma, также превращается в HTML, артефакты, изображения и URL-адреса Клода в редактируемые слои Figma, что полезно, если вы хотите продолжать проектировать эти слои в своей дизайн-системе.

Результат нужно оставить Figma. Ваша спецификация или прототип должны быть проверены людьми, не входящими в вашу команду Figma, отредактированы агентами нескольких поставщиков или опубликованы в виде активной ссылки. Именно эту работу и выполняет AgentGrid.io, созданный Anima. Артефакт Markdown на AgentGrid.io — это живой, автоматически сохраняющийся документ, который могут редактировать люди и подключенные агенты, такие как Claude, ChatGPT, Cursor и Grok Bot, при этом каждое изменение присваивается по имени в истории версий. Артефакт HTML — это работающая страница, которую вы можете комментировать и публиковать на общедоступном URL-адресе, когда она будет одобрена. Вы также можете импортировать один кадр Figma в AgentGrid.io в качестве артефакта приложения. Этот импорт является односторонним, поэтому последующие изменения Figma не ​​синхронизируются.

Эти двое не конкурируют за один и тот же шаг. Figma владеет холстом для дизайна. AgentGrid.io — это место, где Markdown и артефакты HTML исчезают, когда работа пересекается с инструментами и командами.

Попробуйте AgentGrid.io сохранить спецификацию или прототип, который каждый агент в вашей команде сможет редактировать и публиковать.

Используйте каждый инструмент, когда

• Используйте слои кода Figma. когда заинтересованным сторонам нужно щелкнуть рабочий прототип рядом с проектами и сравнить направления.
• Используйте Figma Specs когда план должен находиться рядом с кадрами и читаться агентом кодирования через сервер Figma MCP.
• Использовать Anima Playground если вы хотите создавать дизайн непосредственно в коде с помощью искусственного интеллекта или превратить дизайн Figma в редактируемое приложение, вы можете просмотреть и опубликовать его.
• Использовать Buddy когда отправная точка находится за пределами Figma и вам нужны редактируемые слои на холсте. Более полное сравнение сборки в Figma и в браузере см. Figma Make против Anima Playground.
• Используйте AgentGrid.io когда спецификация или прототип должны редактироваться людьми и агентами с помощью различных инструментов, просматриваться с комментариями и публиковаться в виде активной ссылки.

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

Что такое уровни кода в Figma?

Слой кода — это слой на холсте Figma, который содержит реальный работающий код. Вы можете создать один из выбранных кадров, действующего веб-сайта, созданного с помощью расширения Figma Chrome, репозитория прототипов GitHub или пустой подсказки, а затем щелкнуть по нему, прокомментировать его и продублировать для сравнения направлений.

Figma Specs — это просто Markdown?

Specs использует Markdown в качестве текста, и вы можете перетащить любой файл .md на холст, чтобы создать его. Он добавляет к этому тексту функции Figma: встроенные фреймы и доски FigJam, комментарии и агент, который может читать эти комментарии и отвечать на них.

Стоят ли уровни кода Figma кредитов ИИ?

Да. В платных планах создание и редактирование внутри слоя кода бесплатны до 4 ноября 2026 года. Для другой работы агента в той же командной строке по-прежнему используются кредиты, а после 4 ноября все задачи уровня кода используют кредиты ИИ.

Могут ли Claude Code, Codex или Cursor читать Figma Spec?

Да, если они подключены к серверу Figma MCP. Агенты кодирования могут читать, создавать и обновлять спецификации с помощью навыка figma-spec, и вы можете вставить ссылку на спецификацию в приглашение, чтобы передать связанный с ней контекст проекта.

Какие планы Figma включают Specs?

Specs находится в открытой бета-версии на платных планах: Professional, Organization, Enterprise и Education, а также Government, согласно статье Figma Config India. Его нет в бесплатном плане Starter. Уровни кода распространяются на все планы, включая Starter.