Figma Dev Mode — це перше, до чого звертаєшся, коли дизайнер передає роботу. Він вбудований, офіційний, говорить мовою Figma. То навіщо шукати щось інше?

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

Що таке Figma Dev Mode

Dev Mode — це платний шар передачі дизайну у Figma, доступний на планах Professional та Organization. Коли ви перемикаєтесь у нього (кнопка </> у верхній панелі), отримуєте панель із CSS або iOS/Android сніпетами для виділених шарів, анотаціями компонентів, значеннями змінних та маркером "готово для розробки", який може виставити дизайнер.

Він розрахований на момент, коли дизайнер каже: "це готово — йди будуй". Розробник відкриває Figma, клікає, копіює сніпети, дивиться відступи. Жодного кроку з експортом. Жодних файлів. Просто читання дизайну на місці.

Figma також має офіційний MCP-сервер для Dev Mode (окрема функція — розглянута у порівнянні з MCP), але сам Dev Mode UI — це насамперед досвід читання для людини. Вказуєш, клікаєш, інспектуєш, копіюєш.

Сніпети коду, які генерує Dev Mode, справді корисні як швидкий орієнтир. Можна побачити шрифтовий стек, точні значення токенів відступів, якщо налаштовані змінні, радіуси заокруглення. Для досвідченого розробника, якому потрібно лише звірити конкретне значення, це швидко.

Що таке figmascope

figmascope — це браузерний інструмент — без бекенду, без встановлення, працює у вкладці — який експортує структурований контекстний бандл із будь-якого файлу Figma. Вставляєте URL Figma та Personal Access Token (зберігається в пам'яті, нікуди не надсилається), і отримуєте .zip з:

Бандл — це прості файли. Без рантайму. Без SDK. Кидайте в репозиторій, комітьте, дифайте, передавайте будь-якому AI-агенту, що читає файли.

Ключова відмінність від Dev Mode: це не досвід читання всередині Figma. Це експорт, який повністю залишає Figma позаду.

Де Dev Mode виграє

Живий огляд. Якщо потрібно клікнути конкретний шар і одразу отримати точне значення — Dev Mode моментальний. Жодного кроку з експортом, жодного zip, жодного переключення контексту. Відповідь у панелі.

Офіційна інтеграція. Figma розробляє, підтримує і вдосконалює його разом із рештою продукту. Підтримка змінних, анотаційні воркфлоу, статус "готово для розробки" — нативні функції з підтримкою першої сторони. Коли Figma додає нову можливість дизайн-системи, Dev Mode її отримує.

Розповсюдження в команді. Кожен дизайнер і розробник на платному плані Figma вже має доступ. Нічого не треба встановлювати, пояснювати або підтримувати.

Інструментарій на етапі дизайну. Дизайнери можуть позначати фрейми як готові, залишати анотації на рівні коду та співпрацювати з розробниками на тому ж полотні. Такий зворотний зв'язок справді корисний для QA-циклів, де потрібні коментарі та оновлення статусів.

Де figmascope виграє

Агент-нейтральний файловий вивід. Вивід Dev Mode живе всередині Figma. Вивід figmascope — у zip, який ви контролюєте. Кидайте поруч із кодом, вказуйте Claude Code або Cursor на нього — і агент має повну специфікацію: всі екрани, всі токени, всі рядки — без підключення до Figma взагалі.

Контроль версій. Бандл figmascope можна дифати. Комітьте його. Вносьте в PR. Дивіться, які саме токени змінилися між торішнім і сьогоднішнім дизайном. Dev Mode не має концепції версій специфікації — у Figma є версійна історія файлу, але це для джерела, а не для знімку дизайнерського наміру.

Без вимоги платного тарифу. figmascope — MIT-ліцензований і безкоштовний. Він використовує публічний REST API Figma, для якого потрібен лише PAT (безкоштовний на будь-якому акаунті Figma). Dev Mode вимагає плану Professional або Organization. Для соло-розробників або невеликих команд, що працюють із дизайнером на безкоштовному плані, figmascope — єдина опція.

Детермінований вивід. Кожен експорт одного й того ж файлу Figma однієї й тієї ж версії дає однаковий бандл. Той самий JSON, ті ж токени, ті ж рядки. Це важливо для відтворюваності — можна запускати в CI, прив'язувати бандл до релізу, регресійно тестувати.

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

IR зберігає просторову семантику. Проміжне представлення screens/*.json фіксує вид розкладки (stack, overlay, absolute), ідентичність компонента (componentId на вузлах INSTANCE) та посилання на текстові рядки — а не просто обчислений CSS. Агент може міркувати про структуру розкладки, а не лише копіювати сніпети.

Порівняння на одному файлі Figma

Візьмемо екран входу з формою, основною кнопкою і кількома текстовими токенами. Ось що дає кожен інструмент:

Вивід Dev Mode: CSS-властивості для шару, на який ви клікнули (font-size: 16px; color: #1f1d1a; border-radius: 8px). По одному шару. Копіюєте потрібне. Якщо треба всі стани кнопки — клікаєте кожен. Якщо потрібна назва токена — вона є лише якщо дизайнер прив'язав змінні, інакше відсутня.

Вивід бандлу figmascope: CONTEXT.md із повною специфікацією екрана входу. tokens.json із color.text.primary, spacing.4, radius.md — з ключами, типами, джерелами (змінні або вивід). screens/login.json з деревом IR: контейнер stack, що містить INSTANCE форми з посиланням на componentId: "abc123", дочірні leaf-вузли із stringRef.key: "auth.login.cta". strings.json із відображенням цього ключа на "Sign in". screens/login.png у 2×.

Передаєте бандл у Cursor. Він читає CONTEXT.md, бере назви токенів із tokens.json, будує компонент за IR. Figma відкривати не потрібно взагалі.

Зведена таблиця

Параметр Figma Dev Mode figmascope
Ціна Платний (Professional / Org план) Безкоштовно, MIT open source
Формат виводу Панель у Figma, CSS/iOS/Android сніпети .zip: CONTEXT.md, tokens.json, screens/*.json, *.png
Модель інтеграції Всередині UI Figma, пошарова інспекція Браузерний експорт, потім прості файли будь-де
Сумісність з агентами Через MCP-сервер (окрема функція) Будь-який агент, що читає файли (Claude Code, Cursor, Aider, Copilot…)
Версійний контроль Ні (вивід живе у Figma) Так — бандл можна дифати та комітити
Детермінований вивід Ні (покліковий, прив'язаний до сесії) Так — одна версія файлу → однаковий бандл
Офлайн / портативний Ні — потребує підключення до Figma Так — бандл працює без будь-якого підключення
Анотації на етапі дизайну Так — "готово для розробки", коментарі Ні
Просторовий / компонувальний IR Ні — плаский CSS для вибраного шару Так — stack/overlay/absolute/leaf з ідентичністю компонентів
Джерело токенів З Figma variables, якщо налаштовано Figma variables → вивід за частотою → без токенів
Ключі рядків для i18n Ні Так — stringRef.key у IR + strings.json
Потребує встановлення плагіна Ні (вбудований у Figma) Ні (вкладка браузера, REST API)

Коли що використовувати

Використовуйте Dev Mode, якщо: потрібно швидко перевірити конкретне значення, ви посеред рев'ю дизайну та хочете глянути на токен, ваша команда вже на платному плані Figma та живе всередині Figma, або ви хочете анотаційний воркфлоу дизайнера та маркери "готово для розробки".

Використовуйте figmascope, якщо: ви передаєте контекст AI-агенту для спринту розробки, хочете версіонувати специфікацію дизайну поруч із кодом, ви на безкоштовному плані Figma, вам потрібен повний компонувальний IR (а не просто CSS пошарово), або вам потрібен детермінований відтворюваний вивід, який можна прив'язати до релізу або дифати в PR.

Вони не є взаємовиключними. Використовуйте Dev Mode для інспекції під час розробки, а бандли figmascope — для фіксації специфікації дизайну у репозиторії. Вони не конкурують — вони покривають різні частини воркфлоу.