Екосистема плагінів Figma велика. Є плагіни для експорту токенів, анотацій коду, гайдів по стилях, перевірки доступності та генерації коду. Коли хтось каже "інструмент Figma-to-code", майже завжди мають на увазі плагін. figmascope — не плагін. Ось чому це важливо і коли це не має значення.
Модель плагінів
Плагіни Figma запускаються всередині ізольованого iframe у Figma (десктопному або вебзастосунку). Вони отримують доступ до Plugin API Figma — 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.
Виконання лише в рантаймі. Плагіни не виконуються у фоні. Вони запускаються, коли людина їх відкриває і натискає кнопку. Заплановані експорти, автоматизовані пайплайни та програмна інтеграція через модель плагінів неможливі.
Gatekeeping магазину плагінів. Публікація публічного плагіна Figma потребує рев'ю та схвалення від Figma. Оновлення — повторного рев'ю. Якщо Figma змінить правила рев'ю або вирішить, що плагін суперечить їхнім інтересам, він може бути вилучений або обмежений. Приватні командні плагіни оминають магазин, але все одно запускаються в пісочниці Figma і залежать від їхньої інфраструктури.
Ресурсні обмеження. Пісочниця плагіна обмежена за пам'яттю та часом виконання. Великі файли Figma зі складними ієрархіями можуть викликати таймаути або падіння плагіна. UI плагіна запускається в iframe з обмеженим доступом — без доступу до локальної файлової системи (лише через діалог збереження Figma), без довільних мережевих запитів з основного потоку.
Міжплатформні невідповідності. Десктопний і вебзастосунок Figma мають дещо відмінну поведінку Plugin API в деяких граничних випадках. Плагіни, що ідеально працюють в одному, можуть мати особливості в іншому.
Фрикція встановлення для розповсюдження в команді. Кожен розробник, якому потрібно запускати плагін, встановлює його окремо. Консистентність версій у команді залежить від механізму автоматичного оновлення Figma. Якщо потрібно зафіксувати конкретну версію — це нетривіально.
Зовнішній підхід figmascope
figmascope не торкається системи плагінів взагалі. Він запускається у звичайній вкладці браузера — будь-якого браузера, застосунок Figma не потрібен — і звертається до REST API Figma безпосередньо, використовуючи Personal Access Token, наданий користувачем. PAT зберігається лише в пам'яті, нікуди не надсилається.
REST API Figma — те саме джерело даних, з якого черпає Plugin API, але доступне ззовні. figmascope завантажує JSON файлу, обробляє дерево вузлів на клієнтській стороні (всі обчислення відбуваються у вашому браузері) і формує контекстний бандл. API-запити йдуть безпосередньо з вашого браузера на сервери Figma. Власна інфраструктура figmascope не знаходиться на шляху даних.
Це має кілька наслідків:
Без встановлення. Відкрийте вкладку, вставте URL Figma та PAT, клікніть "Експорт". Нічого не встановлювати, жодного акаунту, жодного пошуку плагіна в Community. Будь-хто з браузером може ним скористатися — включаючи розробників, які не є користувачами Figma і не мають застосунку.
Скриптування в принципі. Оскільки figmascope побудований на REST API, ті самі виклики можна відтворити програматично. MIT-кодова база відкрита для ознайомлення. Якщо хочете написати скрипт, що експортує бандл з командного рядка без браузера, вихідний код figmascope показує точно, як викликати API та обробляти відповідь.
Сумісний із CI/CD у принципі. Headless-пайплайн експорту здійсненний: виклики REST API Figma, та сама логіка обробки IR, той самий формат бандлу. Браузерний застосунок figmascope не запускається в CI напряму (він — браузерний інструмент), але архітектурний підхід — REST API, детермінована обробка, плаский файловий вивід — є CI-дружнім за задумом. Нічого в цій моделі не вимагає GUI.
Без залежності від магазину плагінів. figmascope хоститься на домені, відкритий на GitHub. Він не залежить від інфраструктури плагінів Figma або їхнього процесу рев'ю. Figma не може вилучити його з магазину. Якщо домен впаде — можна запустити локально з репозиторію: це повністю статичний HTML/JS.
Застосунок Figma не потрібен. Розробник може експортувати контекст для файлу Figma, який ніколи не відкривав у застосунку Figma, маючи лише спільний URL Figma і PAT. Це важливо для воркфлоу, де інженери не використовують Figma напряму, але потребують специфікацію дизайну.
Де плагіни кращі
Чесно. Плагіни мають реальні переваги, які зовнішній підхід через API не відтворює.
Анотації на полотні. Плагіни можуть записувати назад у файл Figma — додавати анотації, встановлювати властивості компонентів, позначати фрейми як готові, залишати коментарі. figmascope — лише читання. Якщо потрібен інструмент, що виконує роботу на стороні дизайну всередині Figma — потрібен плагін.
Живий контекст полотна. Плагін знає, що виділено. Він може реагувати на зміни виділення, відстежувати оновлення вузлів і відповідати на роботу в процесі. figmascope робить знімок. Доступу до живого полотна немає.
Розповсюдження в команді через Figma org. Якщо вся команда на плані Figma org, завантажити приватний плагін для команди просто. У всіх він є в їхньому примірнику Figma. Для розповсюдження між командами всередині org модель плагінів добре підтримана.
Багатший UI всередині Figma. Плагін може рендерити кастомний UI всередині панелі, реагувати на взаємодію користувача та надавати миттєвий зворотний зв'язок у наявному воркфлоу дизайнера. Інтерфейс figmascope — це окрема вкладка браузера, тобто переключення контексту.
Порівняльна таблиця
| Параметр | Плагіни Figma (загалом) | figmascope |
|---|---|---|
| Запускається всередині Figma | Так — ізольований iframe | Ні — зовнішня вкладка браузера |
| Потребує застосунку/акаунту Figma | Так | Лише PAT (підходить безкоштовний акаунт) |
| Потрібне встановлення | Так — через 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 |
| Вивід під версійний контроль | Залежить від плагіна | Так — бандл — дифабельний JSON + Markdown |
| Відкритий код | Деякі так; багато — ні | Так — MIT |
Аспект конфіденційності даних
Коли плагін Figma робить мережеві запити, дані вашого дизайну можуть залишити ваш браузер і потрапити на сервери вендора плагіна. Ви довіряєте його політиці конфіденційності та інфраструктурі. Для багатьох команд це прийнятно. Для деяких — корпоративних команд із дизайнами під NDA, агентств із конфіденційними файлами клієнтів — це суттєве занепокоєння.
Зовнішній підхід figmascope інший. Вся обробка відбувається у вашій вкладці браузера. API-запити йдуть з вашого браузера на сервери Figma (ті самі запити, що ваш браузер робить при звичайному використанні Figma). Власні сервери figmascope не на шляху даних. Ваш дизайн нікуди не потрапляє, крім API Figma. PAT знаходиться в пам'яті й очищується при закритті вкладки.
Це структурна перевага зовнішнього браузерного підходу перед плагінами, що залежать від бекенду вендора.
Коли що обирати
Використовуйте плагін Figma, якщо: потрібно анотувати або записувати назад у файл, хочете взаємодію на полотні як частину воркфлоу дизайнера, ваша команда повністю у Figma і розповсюдження через механізм плагінів зручне, або потрібний конкретний плагін з UI всередині Figma, що підхід REST API не може відтворити.
Використовуйте figmascope, якщо: потрібен портативний версійно-контрольований контекстний бандл для AI-кодогенерації, хочете відсутність встановлення та незалежність від магазину, вам важлива конфіденційність і ви не хочете, щоб дані дизайну надсилалися стороннім вендорам, хочете, щоб вивід жив у вашому git-репозиторії поруч із кодом, або хочете, щоб процес експорту був зрозумілим і відтворюваним.
Для більшості продуктових воркфлоу UI-кодогенерації з AI-агентами модель плагінів додає фрикцію, яку не може компенсувати. Плагін запускається у Figma. Агент запускається у вашому редакторі. Перенести специфікацію дизайну від одного до другого через плагін вимагає або ручного копіювання, або плагіна, що записує на диск — і тоді ви маєте непрозорий файл із непрозорого пайплайну. Вивід figmascope — інспектований, структурований і явно розрахований на цю передачу агенту.