Передання дизайну розробникам-людям було вирішеною проблемою приблизно з 2016 року. Zeplin, InVision Inspect, Avocode, власний Dev Mode Figma — всі вони роблять одне й те саме: дають розробнику вебінтерфейс, де можна клікнути на вузол і прочитати його властивості.

Цей процес повністю руйнується, коли «розробник» — це AI-агент.

Ця стаття пояснює чому, що агентам насправді потрібно, і як побудувати процес передання макетів, що генерує точний код, а не приблизний. Рішення — figmascope, браузерний інструмент, що експортує структурований контекстний бандл безпосередньо з вашого Figma-файлу. Для покрокових процесів дивіться Figma до Claude Code або Figma до Cursor.

Припущення, закладене в передання дизайну

Кожен інструмент передання, розроблений до 2023 року, спирається на одне неявне припущення: на іншому кінці — людина, яка клікає, читає значення й приймає рішення. Завдання інструменту — достатньо чітко відкрити інформацію, щоб кваліфікований розробник міг працювати без постійного перемикання контексту назад до дизайнера.

Це припущення вбудоване в увесь UX цих інструментів:

Нічого з цього не є хибним. Це правильно для процесу розробника-людини. Просто це неправильний інтерфейс для агента.

Що агентам насправді потрібно від дизайну

AI-агент, що отримує завдання реалізувати дизайн, потребує:

  1. Специфікацію, яку він читає до будь-яких дій — обмеження, область охоплення, конвенції іменування токенів, примітки версій. Не виведені з наведення на панель; написані явно.
  2. Типізований словник токенів — не «сирі» hex-значення та числа у пікселях, а іменовані, типізовані токени зі своїми значеннями. Агент повинен знати, що #d96a3a — це color.accent, щоб генерувати правильні назви класів Tailwind або CSS custom properties.
  3. Повне дерево розмітки екрану — ієрархія кожного вузла, їхні відносини розмітки, розміри, посилання на токени. Не один вузол на вимогу; повне дерево в пам'яті.
  4. Зведені рядки — весь текстовий вміст, нормалізований, з ключами ресурсів. Не розкиданий по окремих вузлах.
  5. Візуальний орієнтир — референсний рендер, з яким агент може порівнювати свій результат. Скриншот дизайну у 2×.
  6. Назви компонентів — канонічні ідентифікатори, які має використовувати згенерований код, а не вигадані назви.

Традиційні інструменти передання не надають жодного з цього у формі, придатній для агента. Застосунок figmascope виробляє все це в одному zip — вставте URL Figma-файлу, отримайте бандл. Без завантаження, без бекенду. Формат токенів докладно розглянуто у статті Експорт дизайн-токенів для AI-агентів.

Чому скриншоти не працюють

Найшвидший обхідний шлях, який люди намагаються використати: експортують PNG з Figma і передають агенту із запитом типу «реалізуй цей екран». Агент виробляє код. Іноді він виглядає близько до правильного. Але:

Кожна з цих помилок окремо невелика. Разом вони утворюють компонент, що потребує значного ручного виправлення — що зводить нанівець більшу частину економії часу від використання агента.

Детальний аналіз з прикладами — у статті why screenshots fail for AI codegen.

Скриншот розповідає агенту, як виглядає дизайн. Структурований контекст розповідає, чим є дизайн.

Традиційні інструменти передання — оцінка

Zeplin

Основний інтерфейс Zeplin — веб-застосунок, де розробники інспектують дизайни вузол за вузлом. Є функція «Styleguide», що агрегує кольори і типографіку з файлу — найближче до експорту токенів. Він не експортує машиночитані дерева розмітки. Функція «Connected Components» пов'язує компоненти Storybook з фреймами Figma, що корисно для документації, але не допомагає агенту генерувати новий код.

Figma Dev Mode

Нативна відповідь Figma на передання макетів. Панель коду генерує CSS з виділених вузлів і показує назви Variables, коли вони налаштовані. Добре спроєктовано для розробників-людей. Не підтримує експорт на рівні файлу, не генерує дерева розмітки, а фрагменти коду — лише CSS (не агностичні до фреймворку токени). Потребує місця Dev Mode.

Avocode

Avocode було придбано Abstract, а потім припинено у 2022 році. Згадується тут, бо все ще з'являється у результатах пошуку за «інструменти передання дизайну» і генерує порівняльний трафік. Він більше не доступний.

Locofy, Builder.io, Anima

Ці інструменти намагаються генерувати реальний код фреймворку (React, Next.js, HTML) безпосередньо з Figma-дизайнів. Вони ближчі до простору проблеми — розуміють, що результат має бути кодом, а не панеллю властивостей. Але вони генерують код, який ви деплоїте, а не контекст, що ви передаєте агенту. Різниця важлива: неможливо запитати «Реалізуй екран Settings, повторно використавши компонент UserAvatar, який я вже побудував», коли інструмент сам генерує код. Ви можете запитати це у Claude Code або Cursor, якщо дали їм структурований контекст.

Детальні порівняння — у статтях figmascope vs Locofy та figmascope vs Builder.io.

Як виглядає передання, готове для агента

Передання, готове для агента, має три властивості, що відрізняють його від традиційного:

1. Це файловий артефакт, а не UI

Артефакт передання — версіонований файл (або набір файлів), що живе в репозиторії поряд з кодом. Не спільне посилання, що вимагає входу. Не панель у веб-застосунку. Директорія design/ з JSON, PNG і Markdown файлами.

Це має кілька наслідків:

2. Він використовує типізовані дані, а не відрендерений текст

Дизайн-токени в tokens.json типізовані — $type: "color", $type: "dimension" — а не просто рядки в таблиці Markdown. Layout IR у screens/*.json має явні типи вузлів (stack, overlay, absolute, leaf) і посилання на токени у нотації $ref. Рядки у strings.json мають ключі в dot-нотації, а не просто людиночитані мітки.

Типізовані дані означають, що агент може міркувати про них програмно: «всі вузли з background.$ref == color.surface використовують однаковий фоновий колір», а не «всі вузли, що виглядають так, ніби вони на одному фоні».

3. Він включає специфікаційний документ, який агент читає першим

CONTEXT.md — це контракт між дизайнером і агентом. Він описує:

Традиційне передання не має аналогу. Dev Mode має поле «developer notes» для кожного фрейму, але воно пишеться довільно дизайнером без структури. CONTEXT.md генерується послідовно з реального вмісту файлу.

Процес передання покроково

  1. Дизайнер позначає фрейми готовими — у Figma дизайнер відмічає фрейми, що готові до реалізації (конвенція іменування, мітка «ready», що б ваша команда не використовувала).
  2. Розробник запускає figmascope — вставляє URL файлу та PAT на figmascope.dev, клікає «export», завантажує zip.
  3. Розпаковує в design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Комітить design/ у репозиторій — бандл є артефактом передання. PR включає і бандл дизайну, і реалізацію.
  5. Агент реалізує — спрямовує Claude Code або Cursor на design/CONTEXT.md та відповідний JSON екрану. Агент генерує код, що використовує значення токенів, назви компонентів і рядки з бандлу.
  6. Огляд та ітерація — розробник перевіряє результат відносно screens/*.png, фіксує прогалини, уточнює запити.

Коли дизайн змінюється — повторіть з кроку 2. Мітка часу у _meta.json показує, коли бандл був востаннє згенерований відносно того, коли Figma-файл востаннє змінювався — простий спосіб перевірити актуальність.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Що не змінюється

Передання, готове для агента, не замінює огляд дизайну. Агент реалізує на основі структурованого контексту; людина все одно перевіряє результат. Інтерактивні стани, анімації, адаптивна поведінка, доступність — для цього потрібне судження, яке агент може наближати, але не гарантувати лише на основі статичних дизайнерських даних.

Структурований контекст також не замінює розмову між дизайнером і розробником. Якщо токен названий неоднозначно, або компонент веде себе по-різному на різних точках розриву порівняно з тим, що пропонує статичний фрейм — це потребує обговорення. CONTEXT.md фіксує те, що є у файлі; він не виводить наміри дизайнера для випадків, що файл не описує.

Що змінюється: реалізація статичних екранних розміток з усталеного дизайну перетворюється з багатогодинного ручного процесу на процес «запит і огляд». Агент виконує механічний переклад; розробник бере на себе ситуативні рішення.

Чеклист: чи готове ваше передання дизайну для агента?

Якщо більшості з цих пунктів бракує — агент виробляє код, що потребує більше виправлень, ніж якщо б ви почали з нуля з хорошим контекстом. Бандл, що генерує figmascope, задовольняє всі ці пункти в одному експорті. Відвідайте блог figmascope для кейс-стаді та докладних матеріалів по кожному пункту чеклисту, або перегляньте Альтернатива Figma Inspector для прямого порівняння з Dev Mode і плагінами.