Gdy programiści szukają „Figma inspector", zazwyczaj chcą jednej z dwóch rzeczy: sposobu na przeglądanie wartości właściwości węzłów bez licencji Dev Mode, lub sposobu na przekazanie zawartości Figmy agentowi AI. Pierwsza kategoria jest dobrze obsłużona przez wtyczki. Druga kategoria jest obsługiwana przez prawie nic — dopóki nie pojawił się figmascope.

Ten artykuł porównuje obie kategorie, wyjaśnia, dlaczego rozwiązują różne problemy i pokazuje, jak w praktyce wygląda eksport natywny dla agentów. Odwiedź figmascope.dev, aby samemu wypróbować eksport, lub czytaj dalej po pełne porównanie. Dla praktycznego przepływu pracy, zobacz Figma do Cursor lub Figma do Claude Code.

Co faktycznie robią narzędzia „Figma inspector"

Klasyczny Figma inspector to prawy panel w natywnym interfejsie Figmy. Wybierz węzeł: zobacz jego wypełnienie, obrys, efekty, wymiary, ograniczenia, typografię. W Dev Mode (dodanym w 2023), ten panel otrzymuje fragmenty kodu — właściwości CSS wywnioskowane z węzła, auto-layout wyrażony jako flexbox, kolory z ich nazwami zmiennych, jeśli zmienne są skonfigurowane.

Wtyczki takie jak Inspect, Figma to Code, Anima i dziesiątki innych rozszerzają to dalej. Niektóre generują fragmenty React lub SwiftUI z wybranych węzłów. Niektóre eksportują pliki CSS. Niektóre adnotują płótno do przeglądów przekazania projektu.

Wszystkie te są zaprojektowane dla ludzkiego programisty patrzącego na ekran. Ujawniają informacje na żądanie, węzeł po węźle, wybrane przez osobę, która wie, który węzeł ją interesuje.

Dlaczego ten model nie działa dla agentów AI

Model językowy nie siedzi w Figmie i nie klika przez węzły. Potrzebuje całego odpowiedniego kontekstu w swoim oknie kontekstowym, zanim zacznie generować kod. Inspekcja węzeł po węźle produkuje fragmenty. Czego agent potrzebuje, to ustrukturyzowany dokument obejmujący pełny ekran: hierarchię, wartości tokenów, ciągi znaków, odwołania do komponentów — wszystko naraz.

Jest też problem formatu. Dev Mode produkuje fragmenty CSS bliskie poprawności, ale nie całkiem — nazwy właściwości różnią się między frameworkami, skróty właściwości wymagają rozwinięcia, bezwzględne wartości pikseli muszą być zmapowane do systemu tokenów. Agent konsumujący surowy wynik Dev Mode będzie na nowo halucynował nazwy tokenów, wymyślał wartości odstępów i produkował kod, który wygląda jakby był zaprojektowany przez kogoś, kto widział twój projekt raz.

Narzędzia inspektora odpowiadają na pytanie „czym jest ten węzeł?" Narzędzia agentów odpowiadają na pytanie „czym jest cały ten ekran, w formacie, o którym model może rozumować?"

figmascope jako alternatywa dla Figma Inspector

figmascope nie jest panelem wewnątrz Figmy. Działa w przeglądarce, komunikuje się bezpośrednio z REST API Figmy i eksportuje pakiet kontekstu — ustrukturyzowany zip zawierający wszystko, czego agent AI potrzebuje do zaimplementowania projektu. Format tokenów jest szczegółowo udokumentowany w Eksport tokenów projektowania dla agentów AI, a szersza filozofia przekazania jest omówiona w Przekazanie projektu AI.

Eksport obejmuje:

Bezpośrednie porównanie

Możliwość Figma Dev Mode Wtyczki Inspector figmascope
Wartości właściwości pojedynczego węzła Tak Tak Nie (to nie cel)
Eksport pełnego drzewa układu ekranu Nie Częściowo Tak — screens/*.json
Typowany JSON tokenów projektowania Nie Niektóre wtyczki Tak — tokens.json
Dokument specyfikacji agenta AI Nie Nie Tak — CONTEXT.md
Skonsolidowane ciągi z kluczami Nie Nie Tak — strings.json
Inwentarz komponentów Częściowo Częściowo Tak — components/inventory.json
Referencyjne rendery Eksport ręczny Nie Tak — screens/*.png (2×)
Wnioskowanie częstotliwości tokenów Nie Nie Tak — fallback dla plików bez zmiennych
Wymaga licencji Figma Wymagana licencja Dev Mode Różnie Nie — używa tylko PAT
Prywatność / bez przesyłania Dane przetwarzane przez Figmę Różnie per wtyczka Po stronie klienta, token tylko do api.figma.com

Figma Dev Mode — co robi dobrze i źle

Panel kodu Dev Mode jest naprawdę przydatny dla ludzkich programistów, którzy muszą szybko odczytać wartość odstępu lub sprawdzić stos czcionek. Jego linkowanie zmiennych to krok w dobrym kierunku — gdy plik Figmy prawidłowo używa zmiennych, Dev Mode pokazuje nazwę zmiennej obok rozwiązanej wartości.

Gdzie zawodzi dla przepływów pracy AI:

Wtyczki Figma Inspector — krajobraz

Istnieją mniej więcej trzy kategorie wtyczek Figma inspector:

  1. Przeglądarki właściwości — replikują to, co pokazuje prawy panel Dev Mode, często dla użytkowników z darmowym planem bez dostępu do Dev Mode. Przykłady: Figma Inspect, Handoff.
  2. Generatory kodu — produkują kod specyficzny dla frameworku z wybranych węzłów. Przykłady: Figma to Code, Anima, Locofy. Generują kod z pojedynczego wyboru, nie z pełnego strukturalnego eksportu pliku.
  3. Eksportery tokenów — eksportują tokeny projektowania ze zmiennych Figmy. Przykłady: Tokens Studio (dawniej Figma Tokens), Variables2JSON. Rozwiązują problem eksportu tokenów, ale nie IR układu ani problemów specyfikacji agenta.

figmascope nie należy do żadnej z tych kategorii. Jest bliżej kategorii „eksporter tokenów" w duchu, ale rozwiązuje szerszy problem: tworzenie pełnego strukturalnego kontekstu, którego agent AI potrzebuje do poprawnej implementacji całego ekranu.

Zobacz figmascope vs wtyczki Figmy po bardziej szczegółowe omówienie krajobrazu wtyczek.

Kiedy używać czego

Te narzędzia nie wykluczają się wzajemnie. Realistyczny przepływ pracy:

Rozróżnienie polega na synchronicznej inspekcji (człowiek czyta jeden węzeł na raz) versus eksporcie wsadowym (agent dostaje pełny obraz w jednym ustrukturyzowanym dokumencie).

PAT — do czego ma dostęp, do czego nie

figmascope używa Personal Access Token Figmy do odczytania pliku przez REST API. Token jest wprowadzany w przeglądarce, żyje w pamięci przeglądarki na czas sesji i jest wysyłany tylko jako nagłówek do api.figma.com. Żaden serwer go nie otrzymuje. Gdy zamkniesz kartę, znika.

Minimalny wymagany zakres to Zawartość pliku: tylko do odczytu. figmascope nie zapisuje do Figmy, nie tworzy komentarzy, nie uzyskuje dostępu do plików zespołu poza tym, do czego token ma uprawnienia. Zobacz bezpieczeństwo PAT i figmascope po kompletny model zagrożeń.

Jak wynik wygląda w prawdziwym projekcie

Po wyeksportowaniu pakiet kontekstu leży obok kodu źródłowego:

myapp/
├── src/
│   ├── screens/
│   └── components/
├── design/
│   ├── CONTEXT.md          ← agent czyta to jako pierwsze
│   ├── tokens.json         ← typowane tokeny projektowania
│   ├── _meta.json          ← manifest eksportu, ostrzeżenia
│   ├── components/
│   │   └── inventory.json  ← kanoniczne nazwy komponentów + ids
│   ├── screens/
│   │   ├── Home.json       ← IR układu
│   │   ├── Home.png        ← render 2×
│   │   ├── Profile.json
│   │   └── Profile.png
│   └── strings.json        ← wszystkie teksty UI, klucze notacji kropkowej
└── package.json

To jest artefakt, który zatwierdzasz, referencjonujesz w CLAUDE.md lub .cursorrules i na który wskazujesz agenta. Jeden eksport, cały potrzebny kontekst.

Porównaj to z typowym przepływem inspekcji: programista otwiera Figmę, klika przez węzły jeden po jednym, kopiuje wartości do kodu, mija nazwę zmiennej, błędnie oblicza odstęp na mobilnym paddingu, spędza dwadzieścia minut uzgadniając projekt vs implementację. Strukturalny eksport całkowicie eliminuje tę pętlę, gdy agent wykonuje implementację.

Odwoływanie się do pakietu w konfiguracji AI projektu

Claude Code czyta CLAUDE.md na początku sesji. Cursor czyta .cursorrules. Oba obsługują plik instrukcji na poziomie projektu, który orientuje AI przed wykonaniem czegokolwiek. Dodaj krótką sekcję projektową wskazującą na katalog design/:

# Dla CLAUDE.md (Claude Code)
## Kontekst projektowy

Wszystkie dane projektowe są w `design/`. Przed implementacją dowolnego UI:
1. Przeczytaj `design/CONTEXT.md` dla zakresu i konwencji tokenów
2. Używaj `design/tokens.json` dla wszystkich wartości kolorów, odstępów, promieni i typografii
3. Używaj `design/components/inventory.json` dla kanonicznych nazw komponentów
4. Używaj `design/strings.json` dla wszystkich tekstów UI — odwołuj się kluczem notacji kropkowej
5. Waliduj względem renderów `design/screens/*.png`
# Dla .cursorrules (Cursor)
Zawsze czytaj design/CONTEXT.md przed implementacją UI.
Wartości tokenów są w design/tokens.json — nigdy nie koduj na stałe kolorów ani odstępów.
Nazwy komponentów pochodzą z design/components/inventory.json.
Ciągi znaków UI pochodzą z design/strings.json z kluczami notacji kropkowej.

Dzięki temu każda sesja agenta w projekcie automatycznie wie, że katalog projektowy istnieje i jak go używać — bez powtarzania prompta za każdym razem.

Alternatywa MCP — i dlaczego nie jest tym samym

Własny serwer Model Context Protocol (MCP) Figmy pozwala AI łączyć się bezpośrednio z API Figmy i odpytywać węzły na żądanie. Jest to przydatne do pracy eksploracyjnej — pytania „jaki kolor ma ten przycisk?" w żywej rozmowie. Nie produkuje reprodukowalnego, wersjonowanego artefaktu. Za każdym razem gdy agent działa, ponownie odczytuje żywy plik Figmy, który mógł się zmienić. Nie ma CONTEXT.md wyjaśniającego zakres. Nie ma wstępnie wygenerowanego słownika tokenów ze stabilnymi nazwami. Nie ma systemu ostrzeżeń dla anomalnych układów.

figmascope i Figma MCP rozwiązują różne problemy. MCP jest online, na żywo i dobry do interaktywnej eksploracji. figmascope produkuje offline, wersjonowany, strukturalny artefakt, dobry do deterministycznego codegen w czasie implementacji. Zobacz figmascope vs Figma MCP po szczegółowe porównanie i zapoznaj się z blogiem figmascope po więcej głębokich analiz przepływów pracy AI design.