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 файл стає спец. Нічого не переписано, а редагування вручну не вимагає кредитів AI.
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.
• Розмір репо. Імпорт 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 знаходиться у відкритому бета-тестуванні платних планів: професійний, організаційний, корпоративний та освітній, а також державний відповідно до статті Config India Figma. Його немає в безкоштовному плані Starter. Рівні коду розгортаються для всіх планів, включаючи Starter.