Przekazywanie projektów zostało rozwiązane dla ludzkich programistów mniej więcej od 2016 roku. Zeplin, InVision Inspect, Avocode, natywny tryb Dev Mode Figmy — wszystkie robią to samo: dają programiście interfejs webowy, gdzie może kliknąć na węzeł i odczytać jego właściwości.

Ten przepływ pracy całkowicie się załamuje, gdy „programistą" jest agent AI.

Ten artykuł wyjaśnia dlaczego, czego agenci faktycznie potrzebują i jak ustrukturyzować przepływ przekazania projektu, który generuje poprawny kod, a nie przybliżony. Rozwiązaniem jest figmascope — narzędzie przeglądarkowe, które eksportuje ustrukturyzowany pakiet kontekstu bezpośrednio z pliku Figmy. Aby zapoznać się z przewodnikami krok po kroku, odwiedź Figma do Claude Code lub Figma do Cursor.

Założenie przekazania projektu

Każde narzędzie do przekazywania projektów zbudowane przed 2023 rokiem robi to samo domyślne założenie: po drugiej stronie jest człowiek, który klika i czyta wartości, podejmując ocenne decyzje. Zadaniem narzędzia jest wystarczająco przejrzyste ujawnienie informacji, aby wykwalifikowany programista mógł z nim pracować bez ciągłego przełączania się do projektanta.

To założenie jest wbudowane w całe UX tych narzędzi:

Żadne z tego nie jest złe. Jest poprawne dla przepływu pracy ludzkiego programisty. To po prostu zły interfejs dla agenta.

Czego agenci faktycznie potrzebują od projektu

Agent AI, który otrzymuje zadanie projektowe, potrzebuje:

  1. Specyfikacji do przeczytania przed czymkolwiek — ograniczenia, zakres, konwencje nazewnictwa tokenów, notatki wersji. Nie sugerowane przez najeżdżanie na panel; napisane explicite.
  2. Typowanego słownika tokenów — nie surowych wartości hex i liczb pikseli, ale nazwanych, typowanych tokenów z ich wartościami. Agent musi wiedzieć, że #d96a3a to color.accent, aby mógł generować poprawne nazwy klas Tailwind lub właściwości niestandardowe CSS.
  3. Pełnego drzewa układu ekranu — hierarchię każdego węzła, ich relacje układu, ich rozmiary, ich odniesienia do tokenów. Nie jeden węzeł na raz na żądanie; pełne drzewo w pamięci.
  4. Skonsolidowanych ciągów znaków — całą zawartość tekstową, znormalizowaną, z kluczami zasobów. Nie rozproszoną po poszczególnych węzłach.
  5. Wizualnej prawdy podstawowej — referencyjny render, który agent może porównać ze swoim wynikiem. Zrzut ekranu projektu w 2×.
  6. Nazw komponentów — kanoniczne identyfikatory, których generowany kod powinien używać, nie nazwy wymyślone.

Tradycyjne narzędzia do przekazywania projektów nie zapewniają żadnego z nich w formie użytecznej dla agenta. Aplikacja figmascope produkuje je wszystkie w jednym pliku zip — wklej URL Figmy, uzyskaj pakiet. Bez przesyłania, bez backendu. Format tokenów jest szczegółowo opisany w Eksport tokenów projektowania dla agentów AI.

Dlaczego zrzuty ekranu zawodzą

Najszybsze obejście, które ludzie próbują: eksport PNG z Figmy i przekazanie go agentowi z promptem w stylu „zaimplementuj ten ekran". Agent produkuje kod. Czasem wygląda blisko. Ale:

Każdy z tych błędów jest indywidualnie mały. Razem sumują się do komponentu wymagającego znaczącej ręcznej korekty — co niweluje większość oszczędności czasu z używania agenta.

Zobacz dlaczego zrzuty ekranu zawodzą w AI codegen po szczegółową analizę z przykładami.

Zrzut ekranu mówi agentowi, jak wygląda projekt. Strukturalny kontekst mówi mu, czym projekt jest.

Tradycyjne narzędzia do przekazywania projektów — ocena

Zeplin

Głównym interfejsem Zeplina jest aplikacja webowa, gdzie programiści sprawdzają projekty węzeł po węźle. Posiada funkcję „Styleguide", która agreguje kolory i typografię z pliku — najbliższe eksportowi tokenów. Nie eksportuje odczytywalnych maszynowo drzew układu. Jego funkcja „Connected Components" łączy komponenty Storybook z ramkami Figmy, co jest przydatne do dokumentacji, ale nie pomaga agentowi generować nowego kodu.

Figma Dev Mode

Natywna odpowiedź Figmy na przekazywanie projektów. Panel kodu generuje CSS z wybranych węzłów i pokazuje nazwy zmiennych, gdy są skonfigurowane. Dobrze zaprojektowany dla ludzkich programistów. Nie obsługuje eksportu na poziomie pliku, nie generuje drzew układu, a jego fragmenty kodu są tylko CSS (nie tokeny niezależne od frameworku). Wymaga licencji Dev Mode.

Avocode

Avocode został przejęty przez Abstract, a następnie wycofany w 2022 roku. Wspomniany, ponieważ nadal pojawia się w wynikach wyszukiwania dla „narzędzia do przekazywania projektów" i generuje część ruchu porównawczego. Nie jest już dostępny.

Locofy, Builder.io, Anima

Narzędzia te próbują generować rzeczywisty kod frameworku (React, Next.js, HTML) bezpośrednio z projektów Figmy. Są bliżej przestrzeni problemu — rozumieją, że wynik musi być kodem, a nie tylko panelem właściwości. Ale generują kod, który wdrażasz, nie kontekst, który przekazujesz agentowi. To rozróżnienie ma znaczenie: nie możesz zapytać „Zaimplementuj ekran Ustawień, używając ponownie komponentu UserAvatar, który już zbudowałem", gdy narzędzie samo generuje kod. Możesz to zapytać Claude Code lub Cursor, gdy przekazałeś im strukturalny kontekst.

Zobacz figmascope vs Locofy i figmascope vs Builder.io po szczegółowe porównania.

Jak wygląda przekazanie projektu gotowe dla agenta

Przekazanie projektu gotowe dla agenta ma trzy właściwości odróżniające je od tradycyjnego przekazania:

1. To artefakt plikowy, nie interfejs użytkownika

Artefakt przekazania to wersjonowany plik (lub zestaw plików), który żyje w repozytorium obok kodu. Nie udostępniany link wymagający logowania. Nie panel w aplikacji webowej. Katalog design/ z plikami JSON, PNG i Markdown.

Ma to kilka konsekwencji:

2. Używa typowanych danych, nie renderowanego tekstu

Tokeny projektowania w tokens.json są typowane — $type: "color", $type: "dimension" — nie tylko ciągami znaków w tabeli Markdown. IR układu w screens/*.json ma explicite rodzaje węzłów (stack, overlay, absolute, leaf) i odwołania do tokenów używające notacji $ref. Ciągi znaków w strings.json mają klucze notacji kropkowej, nie tylko etykiety dla ludzi.

Typowane dane oznaczają, że agent może o nich rozumować programistycznie: „wszystkie węzły z background.$ref == color.surface używają tego samego koloru tła" — nie „wszystkie węzły, które wyglądają jakby były na tym samym tle".

3. Zawiera dokument specyfikacji, który agent czyta jako pierwszy

CONTEXT.md to kontrakt między projektantem a agentem. Opisuje:

Tradycyjne przekazywanie projektów nie ma odpowiednika. Dev Mode ma pole „notatki dla programisty" na ramkę, ale jest napisane ad hoc przez projektanta bez struktury. CONTEXT.md jest generowany spójnie z rzeczywistej zawartości pliku.

Przepływ pracy przekazania krok po kroku

  1. Projektant oznacza ramki jako gotowe — w Figmie projektant oznacza ramki gotowe do implementacji (konwencja nazewnictwa, etykieta „gotowe", cokolwiek twój zespół używa).
  2. Programista uruchamia figmascope — wklej URL pliku i PAT na figmascope.dev, kliknij eksport, pobierz zip.
  3. Rozpakuj do design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Zatwierdź design/ do repo — pakiet jest artefaktem przekazania. PR obejmuje zarówno pakiet projektowy, jak i implementację.
  5. Agent implementuje — wskaż Claude Code lub Cursor na design/CONTEXT.md i odpowiedni JSON ekranu. Agent generuje kod używający wartości tokenów, nazw komponentów i ciągów znaków z pakietu.
  6. Przegląd i iteracja — programista sprawdza względem screens/*.png, odnotowuje luki, doprecyzowuje prompty.

Gdy projekt się zmienia, powtórz od kroku 2. Znacznik czasu _meta.json mówi ci, kiedy pakiet był ostatnio generowany względem tego, kiedy plik Figma był ostatnio modyfikowany — proste sprawdzenie aktualności.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Co się nie zmienia

Przekazanie projektu gotowe dla agenta nie zastępuje przeglądu projektu. Agent implementuje ze strukturalnego kontekstu; człowiek nadal weryfikuje wynik. Stany interakcji, animacje, zachowanie responsywne, dostępność — wymagają osądu, który agent może przybliżyć, ale nie gwarantować tylko na podstawie statycznych danych projektowych.

Strukturalny kontekst nie zastępuje też rozmowy projektant-programista. Jeśli token ma niejednoznaczną nazwę lub komponent zachowuje się inaczej w różnych punktach przerwania niż sugeruje statyczna ramka, potrzebna jest rozmowa. CONTEXT.md przechwytuje to, co jest w pliku; nie wnioskuje, co projektant zamierzał dla przypadków, których plik nie obejmuje.

Co się zmienia: implementacja statycznych układów ekranu ze stabilnego projektu przechodzi z wielogodzinnego ręcznego procesu do przepływu pracy prompt-i-przegląd. Agent obsługuje mechaniczne tłumaczenie; programista obsługuje ocenne decyzje.

Lista kontrolna: czy twoje przekazanie projektu jest gotowe dla agenta?

Jeśli większości z tych brakuje, agent wyprodukuje kod wymagający większej korekty niż rozpoczęcie od zera z dobrym kontekstem. Pakiet generowany przez figmascope spełnia je wszystkie w jednym eksporcie. Odwiedź blog figmascope po studia przypadków i głębsze analizy każdego elementu listy kontrolnej, lub zobacz Alternatywa dla Figma Inspector po bezpośrednie porównanie z Dev Mode i wtyczkami.