Ekosystem wtyczek Figma jest rozległy. Są wtyczki do eksportu tokenów, adnotacji kodu, przewodników po stylach, sprawdzania dostępności i generowania kodu. Gdy ktoś mówi "narzędzie Figma-to-code", prawie zawsze ma na myśli wtyczkę. figmascope nie jest wtyczką. Oto dlaczego ma to znaczenie i kiedy nie ma.
Model wtyczki
Wtyczki Figma działają wewnątrz piaskowanego iframe w aplikacji Figma desktop lub web. Dostają dostęp do Figma plugin API — interfejsu JavaScript, który udostępnia drzewo węzłów bieżącego pliku, style, komponenty i zmienne. Wtyczka może czytać te dane, transformować je i zapisywać wyniki z powrotem do pliku lub eksportować pliki na lokalny system użytkownika przez dialog zapisywania Figmy.
Plugin API jest bogate. Możesz przechodzić przez każdy węzeł, czytać obliczone style, uzyskiwać dostęp do definicji komponentów, pytać o zmienne, a nawet wykonywać żądania sieciowe z warstwy UI wtyczki. Dla większości zadań "czytaj dane projektu i zrób coś z nimi" plugin API jest wystarczające.
Wtyczki są dystrybuowane przez sklep Figma Community lub jako prywatne wtyczki zespołowe. Użytkownicy instalują je przez interfejs Figmy. Aktualizacje przychodzą przez hosting wtyczek Figmy. Konto deweloperskie, które opublikowało wtyczkę, może wypychać aktualizacje; użytkownicy dostają je następnym razem, gdy uruchomią wtyczkę.
Popularne wtyczki Figma-to-code: Locofy (omówiony w porównaniu z Locofy), Tokens Studio (synchronizacja design tokenów), Figma to Code (open source Flutter/SwiftUI/Jetpack Compose) i dziesiątki bardziej wyspecjalizowanych narzędzi.
Ograniczenia wtyczek
Działa tylko wewnątrz Figmy. Aby uruchomić wtyczkę, otwierasz Figmę, otwierasz plik, otwierasz wtyczkę, wyzwalasz eksport. Wtyczki nie można wywoływać z terminala, zadania CI, skryptu ani żadnego kontekstu poza aplikacją Figma. Nie ma CLI. Nie ma API, które można uderzyć. Cały kontekst wykonania to UI Figmy.
Wykonanie tylko w runtime. Wtyczki nie działają w tle. Działają, gdy człowiek je otwiera i klika przycisk. Zaplanowane eksporty, automatyczne pipeline'y i integracja programistyczna nie są możliwe przez model wtyczki.
Strażnicy sklepu wtyczek. Publikacja publicznej wtyczki Figma wymaga przeglądu i zatwierdzenia przez Figmę. Aktualizacje wymagają ponownego przeglądu. Jeśli Figma zmieni politykę przeglądu lub zdecyduje, że wtyczka koliduje z ich interesami, wtyczka może zostać usunięta lub ograniczona. Prywatne wtyczki zespołowe omijają sklep, ale nadal działają w sandboxie Figmy i zależą od infrastruktury wtyczek Figmy.
Ograniczenia zasobów. Sandbox wtyczki jest ograniczony pod względem pamięci i czasu wykonania. Duże pliki Figma ze złożonymi hierarchiami mogą natrafiać na limity czasu lub crashować wtyczkę. UI wtyczki działa w iframe z ograniczonym dostępem — bez dostępu do lokalnego systemu plików poza dialogiem eksportu Figmy, bez dowolnego dostępu do sieci z głównego wątku.
Niespójności między platformami. Aplikacja Figma desktop i aplikacja webowa mają nieco różne zachowanie plugin API w niektórych przypadkach brzegowych. Wtyczki działające doskonale w jednej mogą mieć dziwactwa w drugiej.
Tarcie instalacji przy dystrybucji zespołowej. Każdy deweloper, który musi uruchomić wtyczkę, instaluje ją osobno. Spójność wersji w zespole zależy od mechanizmu automatycznej aktualizacji Figmy. Jeśli potrzebujesz przypiętej konkretnej wersji, to nie jest proste.
Zewnętrzne podejście figmascope
figmascope w ogóle nie dotyka systemu wtyczek. Działa w standardowej zakładce przeglądarki — dowolna przeglądarka, bez potrzeby aplikacji Figma — i wywołuje Figma REST API bezpośrednio używając Personal Access Token podanego przez użytkownika. PAT jest przechowywany tylko w pamięci, nigdy nie wysyłany na żaden serwer.
Figma REST API to to samo źródło danych, z którego czerpie plugin API, ale dostępne zewnętrznie. figmascope pobiera JSON pliku, przetwarza drzewo węzłów po stronie klienta (całe obliczenia odbywają się w Twojej przeglądarce) i produkuje pakiet kontekstowy. Wywołania API idą bezpośrednio z Twojej przeglądarki na serwery Figmy. Własna infrastruktura figmascope nie jest w ścieżce danych.
Ma to kilka implikacji:
Bez instalacji. Otwórz zakładkę, wklej URL Figma i PAT, kliknij eksport. Nic do instalowania, żadnego konta do tworzenia, żadnej wtyczki do znalezienia w Community store. Każdy z przeglądarką może jej użyć — w tym deweloperzy, którzy nie są użytkownikami Figmy i nie mają zainstalowanej aplikacji.
Skryptowalne w zasadzie. Ponieważ figmascope jest zbudowane na REST API, te same wywołania, które wykonuje, można odtworzyć programistycznie. Baza kodu MIT jest otwarta do inspekcji. Jeśli chcesz zbudować skrypt eksportujący pakiet z wiersza poleceń bez otwierania przeglądarki, źródło figmascope pokazuje dokładnie, jak wywoływać API i przetwarzać odpowiedź.
Kompatybilne z CI/CD w zasadzie. Bezgłowy pipeline eksportu jest osiągalny: wywołania Figma REST API, ta sama logika przetwarzania IR, ten sam format pakietu. Aplikacja przeglądarki figmascope nie działa w CI bezpośrednio (to narzędzie przeglądarki), ale podejście architektoniczne — REST API, deterministyczne przetwarzanie, wyjście w zwykłych plikach — jest z projektu przyjazne CI. Nic w modelu nie wymaga GUI.
Brak zależności od sklepu wtyczek. figmascope jest hostowany na domenie, open source na GitHub. Nie zależy od infrastruktury wtyczek Figmy ani procesu przeglądu. Figma nie może go usunąć ze sklepu. Jeśli domena padnie, możesz uruchomić go lokalnie z repo — to całkowicie statyczny HTML/JS.
Bez wymogu aplikacji Figma. Deweloper może eksportować kontekst dla pliku Figma, którego nigdy nie otwierał w aplikacji Figma, używając tylko udostępnionego URL Figma i PAT. Ma to znaczenie dla workflow, gdzie inżynierowie nie używają Figmy bezpośrednio, ale potrzebują specyfikacji projektu.
Co wtyczki robią lepiej
Bądźmy uczciwi. Wtyczki mają realne zalety, których zewnętrzne podejście API nie replikuje.
Adnotacje na canvasie. Wtyczki mogą zapisywać z powrotem do pliku Figma — dodawać adnotacje, ustawiać właściwości komponentów, oznaczać ramki jako gotowe, publikować komentarze. figmascope jest tylko do odczytu. Jeśli potrzebujesz narzędzia, które wykonuje pracę po stronie projektu wewnątrz Figmy, potrzebujesz wtyczki.
Kontekst live canvas. Wtyczka wie, co jest zaznaczone. Może reagować na zmiany zaznaczenia, obserwować aktualizacje węzłów i reagować na trwającą pracę projektową. figmascope robi migawkę. Nie ma dostępu do live canvas.
Dystrybucja zespołowa przez Figma org. Jeśli cały zespół jest na planie Figma org, pushowanie prywatnej wtyczki do zespołu jest proste. Każdy ma ją w swoim Figma. Dla dystrybucji między zespołami wewnątrz org, model wtyczki jest dobrze wspierany.
Bogatsze interakcje w UI Figmy. Wtyczka może renderować niestandardowe UI wewnątrz panelu, reagować na interakcje użytkownika i dostarczać natychmiastowe informacje zwrotne w istniejącym workflow projektanta. Interfejs figmascope to oddzielna zakładka przeglądarki — przełączenie kontekstu.
Porównanie
| Wymiar | Wtyczki Figma (ogólnie) | figmascope |
|---|---|---|
| Działa wewnątrz Figmy | Tak — piaskowany iframe | Nie — zewnętrzna zakładka przeglądarki |
| Wymaga aplikacji/konta Figma | Tak | Tylko PAT (działa z darmowym kontem Figma) |
| Wymagana instalacja | Tak — Figma Community lub instalacja zespołowa | Nie — otwórz w przeglądarce |
| Skryptowalne / automatyzowalne | Nie — tylko wykonanie GUI | Tak w zasadzie — oparte na REST API |
| Kompatybilne z CI/CD | Nie | Architektura jest przyjazna CI |
| Zapis z powrotem do Figmy | Tak — może tworzyć/aktualizować węzły | Nie — tylko odczyt |
| Adnotacje na canvasie | Tak | Nie |
| Kontekst zaznaczenia live canvas | Tak | Nie — tylko migawka |
| Bramkowane przez przegląd sklepu wtyczek | Tak (publiczne wtyczki) | Nie |
| Prywatność danych | Zależy od wtyczki — może wysyłać dane na serwery dostawcy wtyczki | Całe przetwarzanie w Twojej przeglądarce; PAT nigdy nie opuszcza Twojej maszyny |
| Format wyjścia | Różny — JSON, pliki kodu, adnotacje, schowek | Ustrukturyzowany pakiet: CONTEXT.md, tokens.json, screens/*.json, *.png |
| IR zoptymalizowane dla agenta | Rzadko — większość wtyczek celuje w konsumpcję ludzką | Tak — stack/overlay/absolute/leaf z componentId i stringRef |
| Wyjście kontrolowalne wersją | Zależy od wtyczki | Tak — pakiet to diffable JSON + Markdown |
| Open source | Część wtyczek tak; wiele nie | Tak — MIT |
Kąt prywatności danych
Gdy wtyczka Figma wykonuje żądania sieciowe, dane projektu mogą opuszczać przeglądarkę i trafiać na serwery dostawcy wtyczki. Ufasz polityce prywatności i infrastrukturze wtyczki. Dla wielu zespołów jest to akceptowalne. Dla niektórych — zespołów enterprise z projektami objętymi NDA, agencji pracujących z wrażliwymi plikami klientów — jest to istotna kwestia.
Zewnętrzne podejście figmascope jest inne. Całe przetwarzanie odbywa się w zakładce przeglądarki. Wywołania REST API idą z przeglądarki na serwery Figmy (te same wywołania, które przeglądarka wykonuje, gdy normalnie używasz Figmy). Własne serwery figmascope nie są w ścieżce. Dane projektu nie trafiają nigdzie poza API Figmy. PAT jest w pamięci i jest czyszczony po zamknięciu zakładki.
To strukturalna zaleta zewnętrznego podejścia przeglądarki nad wtyczkami zależnymi od backend dostawcy.
Kiedy wybrać które
Używaj wtyczki Figma gdy: musisz adnotować lub zapisywać z powrotem do pliku, chcesz interakcji na canvasie jako część workflow projektanta, Twój zespół jest w pełni na Figmie i dystrybucja przez mechanizm wtyczek jest wygodna, lub wtyczka, której potrzebujesz, ma konkretny UI wewnątrz Figmy, którego podejście REST API nie może replikować.
Używaj figmascope gdy: potrzebujesz przenośnego, kontrolowanego wersją pakietu kontekstowego dla agent codegen AI, chcesz braku instalacji i braku zależności od sklepu, zależy Ci na prywatności danych i nie chcesz, by dane projektu były wysyłane do dostawcy wtyczki strony trzeciej, chcesz by wyjście mieszkało w Twoim repo git obok kodu, lub chcesz by proces eksportu był wyjaśnialny i odtwarzalny.
W przypadku większości workflow codegen UI produkcji z agentami AI, model wtyczki dodaje tarcie, którego nie może odrobić. Wtyczka działa w Figmie. Agent działa w edytorze. Przeniesienie specyfikacji projektu z jednego do drugiego przez wtyczkę wymaga albo ręcznego kopiowania i wklejania, albo wtyczki, która zapisuje na dysk — i wtedy masz nieprzejrzysty plik z nieprzejrzystego pipeline'u. Wyjście figmascope jest inspektowalne, strukturalne i explicite zaprojektowane do tego handoffu do agenta.