Figma Dev Mode to oczywista pierwsza rzecz, po którą sięgasz, gdy projektant przekazuje pracę. Jest wbudowany, oficjalny i mówi własnym językiem Figmy. Dlaczego więc sięgać po coś innego?

Odpowiedź nie jest taka, że Dev Mode jest zły. To, że rozwiązuje inny problem. Zrozumienie, czym ten problem jest — i czym nie jest — to cały artykuł. Jeśli chcesz przejść od razu do odpowiedzi, wypróbuj figmascope tutaj.

Czym jest Figma Dev Mode

Dev Mode to płatna warstwa przekazywania Figmy, dostępna w planach Professional i Organization. Gdy go przełączysz (przycisk </> na górnym pasku narzędzi), dostaniesz panel pokazujący snippety CSS lub iOS/Android dla zaznaczonych warstw, adnotacje komponentów, wartości zmiennych i marker statusu "gotowe do devu", który projektanci mogą ustawić.

Zaprojektowany jest na moment, gdy projektant mówi "to gotowe, idź budować". Deweloper otwiera Figmę, klika, kopiuje snippety, patrzy na odstępy. Nie ma kroku eksportu. Żadnego pliku. Po prostu czytasz projekt na miejscu.

Figma dostarcza też oficjalny serwer MCP dla Dev Mode (odrębny — omówiony w porównaniu z MCP), ale Dev Mode jako UI to głównie doświadczenie czytania przez człowieka. Wskazujesz, klikasz, inspektujesz, kopiujesz.

Snippety kodu generowane przez Dev Mode są naprawdę użyteczne jako szybkie referencje. Możesz zobaczyć stos fontów, dokładne tokeny odstępów jeśli zmienne są skonfigurowane, promienie zaokrąglenia. Dla seniora, który potrzebuje tylko sprawdzenia konkretnej wartości — to szybkie.

Czym jest figmascope

figmascope to narzędzie po stronie przeglądarki — bez backendu, bez instalacji, działa w zakładce — które eksportuje strukturalny pakiet kontekstowy z dowolnego pliku Figma. Wklejasz URL Figma i Personal Access Token (przechowywany w pamięci, nigdy nie wysyłany na serwer) i produkuje .zip zawierający:

Pakiet to zwykłe pliki. Bez runtime. Bez SDK. Wrzuć do repozytorium, commituj, diffuj, przekaż dowolnemu agentowi AI czytającemu pliki.

Kluczowa różnica od Dev Mode: to nie jest doświadczenie czytania wewnątrz Figmy. To eksport, który całkowicie opuszcza Figmę.

Gdzie Dev Mode wygrywa

Inspekcja na żywo. Jeśli chcesz kliknąć konkretną warstwę i natychmiast uzyskać jej dokładną obliczoną wartość, Dev Mode jest natychmiastowy. Bez kroku eksportu, bez zipa, bez przełączania kontekstu. Odpowiedź jest w panelu.

Oficjalna integracja. Figma go buduje, utrzymuje i dostarcza ulepszenia razem z resztą produktu. Obsługa zmiennych, workflow adnotacji, status gotowości do devu — to natywne funkcje z pierwszorzędnym wsparciem. Gdy Figma doda nową możliwość systemu projektowania, Dev Mode ją otrzymuje.

Dystrybucja w zespole. Każdy projektant i deweloper w planie Figma org już go ma. Bez dodatkowych narzędzi do instalowania, wyjaśniania czy utrzymywania.

Narzędzia czasu projektowania. Projektanci mogą oznaczać ramki jako gotowe, zostawiać adnotacje na poziomie kodu i współpracować z deweloperami na tym samym canvasie. Ta wzajemna wymiana jest naprawdę dobra w cyklach QA, gdzie potrzebujesz komentarzy i aktualizacji statusu.

Gdzie figmascope wygrywa

Wyjście agnostyczne wobec agentów, oparte na plikach. Wyjście Dev Mode mieszka wewnątrz Figmy. Wyjście figmascope mieszka w zipie, który kontrolujesz. Wrzuć go obok kodu, wskaż na niego Claude Code lub Cursor, a agent ma pełną specyfikację — wszystkie ekrany, wszystkie tokeny, wszystkie ciągi — bez potrzeby w ogóle łączenia się z Figmą.

Kontrola wersji. Pakiet figmascope jest diffable. Commituj go. Wstaw do PR. Zobacz dokładnie, które tokeny zmieniły się między projektem z zeszłego tygodnia a dzisiejszym. Dev Mode nie ma koncepcji historii wersji dla samej specyfikacji — Figma ma historię wersji pliku, ale to dla źródła, nie dla eksportowalnej migawki intencji projektu.

Brak wymogu płatnego planu. figmascope jest licencjonowany MIT i darmowy. Używa publicznego Figma REST API, które wymaga tylko PAT (darmowego na każdym koncie Figma). Dev Mode wymaga planu Professional lub Organization. Dla solowych deweloperów lub małych zespołów pracujących z projektantem na darmowym planie, figmascope jest jedyną opcją.

Deterministyczne wyjście. Każdy eksport tego samego pliku Figma w tej samej wersji produkuje ten sam pakiet. Ten sam JSON, te same tokeny, te same ciągi. Ma to znaczenie dla odtwarzalności — możesz uruchamiać to w CI, przypinać pakiet do wydania, testować regresję przeciwko niemu.

Przenośny i offline. Gdy masz pakiet, działa bez połączenia z Figmą ani żadnym serwerem. Kontekst agenta jest samowystarczalny. Przydatne w samolocie, za zaporą sieciową lub gdy po prostu nie chcesz zależeć od dostępności Figmy podczas sprintu budowania.

IR zachowuje semantykę przestrzenną. Pośrednia reprezentacja screens/*.json przechwytuje rodzaj układu (stack, overlay, absolute), tożsamość komponentów (componentId na węzłach INSTANCE) i referencje do ciągów tekstowych — nie tylko obliczone CSS. Agent może rozumować o strukturze układu, a nie tylko kopiować snippety.

Porównanie: ten sam plik Figma

Weźmy ekran logowania z formularzem, przyciskiem głównym i kilkoma tokenami tekstu. Oto co daje każde narzędzie:

Wyjście Dev Mode: Właściwości CSS dla klikniętej warstwy (font-size: 16px; color: #1f1d1a; border-radius: 8px). Jedna warstwa na raz. Kopiujesz co potrzebujesz. Jeśli chcesz wszystkie stany przycisku, klikasz każdy. Jeśli chcesz nazwę tokenu, jest jeśli projektant skonfigurował zmienne — brakuje jej w przeciwnym razie.

Wyjście pakietu figmascope: CONTEXT.md z pełną specyfikacją ekranu logowania. tokens.json z color.text.primary, spacing.4, radius.md — zcukrzone, typowane, pochodne z zmiennych lub wnioskowane. screens/login.json z drzewem IR: kontener stack trzymający INSTANCE formularza odwołującą się do componentId: "abc123", węzły liści potomnych z stringRef.key: "auth.login.cta". strings.json mapujący ten klucz na "Zaloguj się". screens/login.png w 2×.

Przekazujesz pakiet Cursor. Czyta CONTEXT.md, pobiera nazwy tokenów z tokens.json, buduje komponent z IR. W ogóle nie musi otwierać Figmy.

Porównanie

Wymiar Figma Dev Mode figmascope
Cena Płatny (plan Professional / Org) Darmowy, open source MIT
Format wyjścia Panel w Figmie, snippety CSS/iOS/Android .zip: CONTEXT.md, tokens.json, screens/*.json, *.png
Model integracji Wewnątrz UI Figmy, inspekcja per-warstwa Eksport z przeglądarki, potem zwykłe pliki gdziekolwiek
Kompatybilność z agentem Przez serwer MCP (oddzielna funkcja) Dowolny agent czytający pliki (Claude Code, Cursor, Aider, Copilot…)
Przyjazny dla kontroli wersji Nie (wyjście mieszka w Figmie) Tak — pakiet jest diffable, commitowalny
Deterministyczne wyjście Nie (per-klik, związany z sesją) Tak — ta sama wersja pliku → ten sam pakiet
Offline / przenośny Nie — wymaga połączenia z Figmą Tak — pakiet działa bez żadnego połączenia
Adnotacje czasu projektowania Tak — ready-for-dev, komentarze Nie
Przestrzenne / układowe IR Nie — płaskie CSS dla zaznaczonej warstwy Tak — stack/overlay/absolute/leaf z tożsamością komponentów
Pozyskiwanie tokenów Z Figma variables gdy ustawione Figma variables → wnioskowane z częstotliwości → brak
Klucze i18n ciągów Nie Tak — stringRef.key w IR + strings.json
Wymaga instalacji wtyczki Nie (wbudowane w Figmę) Nie (zakładka przeglądarki, REST API)

Kiedy używać każdego

Używaj Dev Mode gdy: chcesz sprawdzić konkretną wartość, jesteś w trakcie przeglądu projektu i chcesz sprawdzić token, Twój zespół jest już na płatnym planie Figma i żyje wewnątrz Figmy, lub chcesz workflow adnotacji projektanta i markerów statusu ready-for-dev.

Używaj figmascope gdy: przekazujesz kontekst agentowi AI na sprint budowania, chcesz wersjonować specyfikację projektu obok kodu, jesteś na darmowym planie Figma, potrzebujesz pełnego IR układu (nie tylko CSS per-warstwa), lub chcesz deterministycznego, odtwarzalnego wyjścia, które możesz przypiąć do wydania lub diffować w PR.

Nie wykluczają się wzajemnie. Używaj Dev Mode do inspekcji podczas budowania, eksportuj pakiety figmascope do zakotwiczenia specyfikacji projektu w repozytorium. Nie konkurują — obejmują różne części workflow.