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, содержащий:

Бандл — это обычные файлы. Без runtime. Без SDK. Поместите в репозиторий, зафиксируйте коммитом, делайте diff, отдайте любому 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 поддаётся diff. Зафиксируйте его коммитом. Добавьте в 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) Да — бандл поддаётся diff и коммиту
Детерминированный вывод Нет (по клику, привязан к сессии) Да — та же версия файла → тот же бандл
Офлайн / портативность Нет — требует подключения к Figma Да — бандл работает без подключения
Аннотации в дизайне Да — статус готовности, комментарии Нет
Пространственное / вёрсточное IR Нет — плоский CSS для выбранного слоя Да — stack/overlay/absolute/leaf с идентичностью компонентов
Источник токенов Из переменных Figma при наличии Переменные Figma → вывод из частотности → без токенов
Ключи строк i18n Нет Да — stringRef.key в IR + strings.json
Требует установки плагина Нет (встроено в Figma) Нет (вкладка браузера, REST API)

Когда использовать каждый

Используйте Dev Mode, когда: вам нужно проверить конкретное значение, вы в середине ревью дизайна и хотите посмотреть токен, ваша команда уже на платном тарифе Figma и живёт внутри Figma, или вам нужен рабочий процесс аннотаций дизайнера и маркеры статуса «готово к разработке».

Используйте figmascope, когда: вы передаёте контекст AI-агенту для спринта разработки, хотите версионировать спецификацию дизайна рядом с кодом, работаете на бесплатном тарифе Figma, вам нужно полное вёрсточное IR (а не только CSS по слоям), или вам нужен детерминированный воспроизводимый вывод, который можно привязать к релизу или делать diff в PR.

Они не взаимоисключающие. Используйте Dev Mode для инспекции в процессе разработки, а figmascope — для фиксации спецификации дизайна в репозитории. Они не конкурируют — они покрывают разные части рабочего процесса.