Экосистема плагинов Figma обширна. Есть плагины для экспорта токенов, аннотирования кода, гайдов по стилям, проверки доступности и кодогенерации. Когда кто-то говорит «Figma-to-code инструмент», почти всегда имеется в виду плагин. figmascope — не плагин. Вот почему это важно и когда это не важно.
Модель плагина
Плагины Figma работают внутри изолированного iframe в десктопном или веб-приложении Figma. Они получают доступ к Figma Plugin API — JavaScript-интерфейсу, предоставляющему дерево узлов текущего файла, стили, компоненты и переменные. Плагин может читать эти данные, преобразовывать их и записывать результаты обратно в файл или экспортировать файлы в локальную систему пользователя через диалог сохранения Figma.
Plugin API богат. Можно обходить каждый узел, читать вычисленные стили, получать определения компонентов, запрашивать переменные и даже делать сетевые запросы из UI-слоя плагина. Для большинства задач «читать данные дизайна и что-то с ними делать» Plugin API достаточен.
Плагины распространяются через магазин Figma Community или как приватные командные плагины. Пользователи устанавливают их через интерфейс Figma. Обновления приходят через хостинг плагинов Figma. Аккаунт разработчика, опубликовавшего плагин, может публиковать обновления; пользователи получают их при следующем запуске плагина.
Популярные плагины Figma-to-code: Locofy (рассмотрен в сравнении с Locofy), Tokens Studio (синхронизация дизайн-токенов), Figma to Code (open source для Flutter/SwiftUI/Jetpack Compose) и десятки более специализированных инструментов.
Ограничения плагинов
Работает только внутри Figma. Чтобы запустить плагин, нужно открыть Figma, открыть файл, открыть плагин, запустить экспорт. Плагин нельзя вызвать из терминала, CI-задания, скрипта или любого контекста вне приложения Figma. Нет CLI. Нет API. Весь контекст выполнения — это UI Figma.
Только runtime-выполнение. Плагины не работают в фоне. Они выполняются, когда человек открывает их и нажимает кнопку. Плановые экспорты, автоматизированные пайплайны и программная интеграция невозможны в рамках модели плагина.
Привратники магазина плагинов. Публикация публичного плагина Figma требует проверки и одобрения Figma. Обновления требуют повторной проверки. Если Figma изменит политику проверки или решит, что плагин конфликтует с их интересами, плагин может быть удалён или ограничен. Приватные командные плагины обходят магазин, но всё равно работают в песочнице Figma и зависят от инфраструктуры плагинов Figma.
Ограничения ресурсов. Песочница плагина ограничена в памяти и времени выполнения. Большие файлы Figma со сложными иерархиями могут достигать таймаутов или приводить к краху плагина. UI плагина работает в iframe с ограниченным доступом — нет доступа к локальной файловой системе (кроме как через диалог экспорта Figma), нет произвольных сетевых запросов из основного потока.
Кросс-платформенные несоответствия. Десктопное и веб-приложение Figma имеют незначительные отличия в поведении Plugin API в некоторых граничных случаях. Плагины, идеально работающие в одном, могут иметь особенности в другом.
Трение при командном распределении. Каждый разработчик, которому нужно запускать плагин, устанавливает его отдельно. Согласованность версий в команде зависит от механизма автоматического обновления Figma. Если нужна конкретная закреплённая версия, это нетривиально.
Внешний подход figmascope
figmascope вообще не касается системы плагинов. Он работает в стандартной вкладке браузера — любой браузер, приложение Figma не нужно — и напрямую вызывает Figma REST API с использованием Personal Access Token, который предоставляет пользователь. PAT хранится только в памяти, никогда не отправляется на какой-либо сервер.
Figma REST API — тот же источник данных, что и Plugin API, но доступ к нему осуществляется извне. figmascope получает JSON файла, обрабатывает дерево узлов на стороне клиента (все вычисления происходят в вашем браузере) и создаёт контекстный бандл. API-вызовы идут напрямую из вашего браузера на серверы Figma. Собственная инфраструктура figmascope не участвует в передаче данных.
Это имеет несколько последствий:
Без установки. Откройте вкладку, вставьте URL Figma и PAT, нажмите «Экспорт». Ничего не нужно устанавливать, создавать аккаунт, искать плагин в магазине Community. Любой с браузером может использовать инструмент — включая разработчиков, которые не являются пользователями Figma и не установили приложение.
Принципиальная скриптуемость. Поскольку figmascope построен на REST API, те же вызовы, которые он делает, можно воспроизвести программно. MIT-кодовая база открыта для изучения. Если хотите написать скрипт, экспортирующий бандл из командной строки без открытия браузера, — исходный код figmascope покажет вам, как именно вызывать API и обрабатывать ответ.
Принципиальная совместимость с CI/CD. Headless-пайплайн экспорта достижим: вызовы Figma REST API, та же логика обработки IR, тот же формат бандла. Браузерное приложение figmascope не запускается в CI напрямую (это браузерный инструмент), но архитектурный подход — REST API, детерминированная обработка, вывод в обычные файлы — по замыслу CI-friendly. В модели нет ничего, что требовало бы GUI.
Нет зависимости от магазина плагинов. figmascope размещён на домене, open source на GitHub. Он не зависит от инфраструктуры плагинов Figma или процесса проверки. Figma не может удалить его из магазина. Если домен упадёт, вы можете запустить его локально из репозитория — он полностью статический HTML/JS.
Приложение Figma не требуется. Разработчик может экспортировать контекст для файла Figma, который никогда не открывал в приложении Figma, используя только общий URL Figma и PAT. Это важно для рабочих процессов, где инженеры не используют Figma напрямую, но им нужна спецификация дизайна.
Что плагины делают лучше
Будем честны. У плагинов есть реальные преимущества, которые внешний API-подход не воспроизводит.
Аннотирование на холсте. Плагины могут записывать данные обратно в файл Figma — добавлять аннотации, задавать свойства компонентов, помечать фреймы как готовые, публиковать комментарии. figmascope — только для чтения. Если вам нужен инструмент, выполняющий работу со стороны дизайна внутри Figma, нужен плагин.
Живой контекст холста. Плагин знает, что выделено. Он может реагировать на изменения выделения, отслеживать обновления узлов и реагировать на работу дизайна в процессе. figmascope делает снимок. У него нет живого доступа к холсту.
Командное распределение через Figma org. Если вся ваша команда на тарифе Figma org, распространить приватный плагин по команде просто. У всех он будет в Figma. Для внутрикомандного распространения в организации модель плагина хорошо поддерживается.
Богатое взаимодействие в UI Figma. Плагин может отображать кастомный UI в панели, реагировать на взаимодействие пользователя и давать немедленную обратную связь в существующем рабочем процессе дизайнера. Интерфейс figmascope — отдельная вкладка браузера, переключение контекста.
Сравнение
| Параметр | Плагины Figma (в общем) | figmascope |
|---|---|---|
| Работает внутри Figma | Да — изолированный iframe | Нет — внешняя вкладка браузера |
| Требует приложение/аккаунт Figma | Да | Только PAT (работает с бесплатным аккаунтом Figma) |
| Требует установки | Да — через Figma Community или командная установка | Нет — открыть в браузере |
| Скриптуемость / автоматизация | Нет — только GUI-выполнение | Принципиально да — на основе REST API |
| Совместимость с CI/CD | Нет | Архитектура CI-friendly |
| Запись обратно в Figma | Да — может создавать/обновлять узлы | Нет — только чтение |
| Аннотирование на холсте | Да | Нет |
| Живой контекст выделения холста | Да | Нет — только снимок |
| Ограничен проверкой магазина плагинов | Да (публичные плагины) | Нет |
| Конфиденциальность данных | Зависит от плагина — может отправлять данные на серверы вендора | Вся обработка в браузере; PAT никогда не покидает вашу машину |
| Формат вывода | Варьируется — JSON, файлы кода, аннотации, буфер обмена | Структурированный бандл: CONTEXT.md, tokens.json, screens/*.json, *.png |
| IR, оптимизированное для агентов | Редко — большинство плагинов ориентированы на человека | Да — stack/overlay/absolute/leaf с componentId и stringRef |
| Вывод, пригодный для версионного контроля | Зависит от плагина | Да — бандл — это diffable JSON + Markdown |
| Open source | Некоторые плагины — да; многие нет | Да — MIT |
Аспект конфиденциальности данных
Когда плагин Figma делает сетевые запросы, данные вашего дизайна могут покидать браузер и попадать на серверы вендора плагина. Вы доверяете политике конфиденциальности и инфраструктуре плагина. Для многих команд это приемлемо. Для некоторых — корпоративных команд с дизайнами под NDA, агентств, работающих с конфиденциальными клиентскими файлами, — это существенная проблема.
Внешний подход figmascope отличается. Вся обработка происходит в вашей вкладке браузера. REST API-вызовы идут из вашего браузера на серверы Figma (те же вызовы, которые ваш браузер делает при обычном использовании Figma). Собственные серверы figmascope не участвуют в пути данных. Данные вашего дизайна никуда не уходят, кроме API Figma. PAT находится в памяти и очищается при закрытии вкладки.
Это структурное преимущество внешнего браузерного подхода перед плагинами, зависящими от бэкенда вендора.
Когда что выбрать
Используйте плагин Figma, когда: вам нужно аннотировать или записывать данные обратно в файл, вы хотите взаимодействие на холсте как часть рабочего процесса дизайнера, ваша команда полностью на Figma и распределение через механизм плагина удобно, или нужный плагин имеет специфический UI внутри Figma, который REST API-подход не воспроизводит.
Используйте figmascope, когда: вам нужен портативный, версионируемый контекстный бандл для AI-агентной кодогенерации, вы хотите работать без установки и без зависимости от магазина, вам важна конфиденциальность данных и вы не хотите отправлять данные дизайна стороннему вендору плагина, вы хотите, чтобы вывод жил в вашем git-репозитории рядом с кодом, или хотите, чтобы процесс экспорта был объяснимым и воспроизводимым.
Для большинства рабочих процессов кодогенерации продакшн-UI с AI-агентами модель плагина добавляет трение, которое не окупается. Плагин работает в Figma. Агент работает в вашем редакторе. Перенос спецификации дизайна от одного к другому через плагин требует либо ручного копирования-вставки, либо плагина, записывающего на диск, — и тогда у вас непрозрачный файл из непрозрачного пайплайна. Вывод figmascope инспектируемый, структурированный и явно спроектированный для хэндоффа агенту.