Warstwy kodu Figma i Specs: czym są, jak działają i gdzie się zatrzymują12 min read

Warstwy kodu Figma umieszczają działający kod na płótnie, a Figma Specs umieszcza tam również Markdown. Obydwa weszły w otwartą wersję beta na konferencji Config India 15 października 2026 r., więc plik projektu może teraz zawierać ramki, działający prototyp i pisemny plan, na podstawie którego agent buduje.

Ten przewodnik jest przeznaczony dla projektantów, kierowników projektów i inżynierów front-end decydujących o tym, czy przenieść prace prototypowe i specyfikacje do Figma. Opisano w nim, co robi każda funkcja, jak zacząć, ile kosztuje w kredytach AI i gdzie należy wykonać pracę Figma dla członków zespołu w Claude, ChatGPT lub Cursor.

W dobie sztucznej inteligencji projekt to kod. Aby projektować bezpośrednio w kodzie za pomocą sztucznej inteligencji lub zamienić projekty Figma w kod, użyj Anima Playground: opisz ekran lub zacznij od projektu Figma, a następnie kontynuuj prace nad edytowalną aplikacją, którą możesz wyświetlić i opublikować.

Projektuj bezpośrednio w kodzie dzięki sztucznej inteligencji

Projektuj z AI: opisz ekran lub zamień projekty Figma w kod.

Co zaprezentował Figma na targach Config India 2026?

Warstwy kodu i Specs były nagłówkami, ale pojawiły się wraz z zestawem funkcji agenta. Oto aktualny status z centrum pomocy Figma:

Obie wersje beta będą wdrażane przez kilka tygodni, więc możesz je zobaczyć przed lub po reszcie swojego zespołu.

Czym są warstwy kodu Figma?

Warstwa kodu to warstwa, w której znajduje się prawdziwy, działający kod. Zamiast prototypu, który udaje interakcje z łączami ramek, otrzymujesz działający prototyp oparty na kodzie, który znajduje się na płótnie obok Twoich projektów. Członkowie zespołu mogą go klikać, komentować i powielać, aby wypróbować inny kierunek obok siebie.

Figma oferuje cztery sposoby rozpoczęcia:

• Z projektu. Wybierz ramki i poproś agenta Figma o przekształcenie ich w warstwę kodu.
• Z działającej strony internetowej. Przechwyć stronę z rozszerzeniem Figma Chrome i wklej ją na kanwę.
• Z repozytorium. Zaimportuj obsługiwaną, lekką bazę kodu do prototypowania z GitHub lub folderu lokalnego. Import GitHub pozostaje połączony z tym repozytorium.
• Od zera. Dodaj pustą warstwę kodu i poproś agenta o wykonanie kompilacji.

Możesz także przenieść prototyp zbudowany w narzędziu do kodowania na płótno za pośrednictwem serwera Figma MCP.

Edycja odbywa się na trzy sposoby. Monitujesz agenta, dodajesz adnotacje do ramek, aby pokazać, gdzie należy zmienić, lub otwierasz edytor kodu i samodzielnie zmieniasz kod. Gdy szczegóły wizualne liczą się bardziej niż kod, Extract designs zamienia ekrany z warstwy kodu z powrotem w edytowalne ramki Figma. Gdy kod będzie gotowy dla inżynierów, możesz wypchnąć go do gałęzi i otworzyć żądanie ściągnięcia.

Co to jest Figma Specs?

Figma nazywa Specs „natywnym domem dla kontekstu”. W praktyce jest to wspólny dokument Markdown, który żyje albo na kanwie pliku Figma Design lub tablicy FigJam, albo jako własny plik Spec.

Rozpoczęcie jest szybkie:

1. Utwórz samodzielny Spec z przeglądarki plików lub przejdź do figma.com/spec/new.
2. Wewnątrz pliku projektu lub płytki FigJam kliknij Spec na pasku narzędzi lub naciśnij D.
3. Już mam .md plik? Przeciągnij go na płótno i stanie się specyfikacją.
4. Napisz za pomocą Markdown, który już znasz: # dla nagłówków, - na kule, [] do zadań, > w przypadku cudzysłowów trzy odwrotne znaki dla kodu. Wpisz / w przypadku obrazów osadzania i dzielniki Figma.

Tym, co czyni specyfikację czymś więcej niż plik Markdown, jest to, co znajduje się wokół tekstu. Możesz osadzić ramkę, tablicę FigJam lub dowolny węzeł z kanwy, dzięki czemu wymaganie i projekt, który opisuje, pozostają obok siebie. Członkowie zespołu komentują to, a agent Figma może czytać i odpowiadać na te komentarze.

Specs działa również poza Figma. Agenci kodujący podłączeni do serwera Figma MCP mogą odczytywać, tworzyć i aktualizować specyfikacje za pomocą figma-spec umiejętność. Aby je przekazać, kopiujesz link do specyfikacji do zachęty agenta kodującego, a wraz z nim dołączone ramki, diagramy, warstwy kodu i fragmenty Code Connect.

Dlaczego Markdown stał się formatem przekazania

Własny post startowy Figma mówi to wyraźnie: Markdown jest teraz de facto formatem do udostępniania kontekstu agentom. Czyta to każdy agent kodujący. Większość zespołów produktowych przechowuje już plany, PRD i instrukcje dla agentów .md pliki.

Z mojego odczytu wynika, że Specs to Figma akceptujący przekazanie agentowi tekstu, a następnie udostępniający ten tekst w trybie wieloosobowym. Lokalny AGENTS.md lub PRD nigdy nie zawiodło ze względu na format. Nie udało się, bo redagowała je tylko jedna osoba, odeszło od projektów i nikt nie widział, jakiej wersji używał agent.

Wewnątrz Figma, Specs naprawia to. Otwartym pytaniem jest, co dzieje się poza nim. Osadzania, komentarze i odniesienia do projektów na żywo to funkcje Figma, a agenci uzyskują do nich dostęp za pośrednictwem klientów wymienionych w katalogu Figma MCP. Jeśli Twoi inżynierowie, PM ChatGPT i Claude z Twojego zespołu marketingowego potrzebują tego samego planu, nadal musisz zdecydować, gdzie ma znajdować się udostępniona kopia.

Praktyczny przepływ pracy: od PRD do warstwy kodu w celu ściągnięcia żądania

Oto jak te dwie funkcje pasują do rzeczywistej funkcji, wykorzystując jedynie to, co obecnie dokumentuje Figma.

1. Przeciągnij PRD na płótno. Twoje istniejące .md plik staje się specyfikacją. Nic nie jest przepisywane, a ręczna edycja nie wymaga kredytów AI.
2. Osadź ramki, o których mowa. Użyj / aby dodać przepływy opisane w PRD. Recenzenci widzą teraz wymagania i ekran razem.
3. Zamień klatki kluczowe w warstwę kodu. Wybierz je i zapytaj agenta. Jeśli masz już prototypowe repozytorium, zaimportuj je zamiast tego z GitHub.
4. Recenzja w jednym miejscu. Zbieraj komentarze na temat specyfikacji i warstwy kodu. Poproś agenta Figma, aby odpowiedział na każdy otwarty komentarz z sugerowaną poprawką, podczas gdy ludzie zastanawiają się nad tymi samymi wątkami.
5. Podaj specyfikację. Wklej link do specyfikacji do Codex, Claude Code lub Cursor podłączonego do serwera Figma MCP. Agent otrzymuje Markdown i połączony kontekst projektowy.
6. Wyślij kod prototypowy. Wypchnij zmiany w warstwie kodu do gałęzi i otwórz żądanie ściągnięcia, aby inżynierowie mogli je przejrzeć przed połączeniem.

Dane wyjściowe to specyfikacja, którą może odczytać Twój agent kodujący, oraz działający prototyp, który faktycznie kliknął Twój zespół. Przetestuj wygenerowany kod jak każdy inny kod. Działający prototyp to nie to samo, co kod gotowy do produkcji.

Jeśli następnym krokiem będzie przekształcenie projektu Figma w kod, który możesz uruchomić, lub projektowanie w kodzie z podpowiedzi, to jest zadanie Anima Playground.

Ile kosztują warstwy kodu i Specs?

• Warstwy kodu wykorzystują kredyty AI. W planach płatnych generowanie i edytowanie w warstwie kodu jest bezpłatne do 4 listopada 2026 r. Praca innych agentów w tym samym wierszu nadal wymaga kredytów, a po 4 listopada wszystkie zadania w warstwie kodu korzystają z kredytów.
• Specs można swobodnie pisać. Samodzielne wpisanie i edytowanie specyfikacji nie powoduje wykorzystania kredytów. Używanie agenta ze specyfikacją działa. Najedź kursorem na paragon po każdym komunikacie, aby zobaczyć, ile to kosztuje.
• Payload i wytyczne zwiększają koszty. Figma zauważa, że oba dają agentowi więcej kontekstu i więcej pracy, więc ten sam monit może wymagać większej liczby kredytów.

Limity, które należy sprawdzić, zanim zaczniesz planować ich uwzględnienie

• Wdrożenie. Obie funkcje to otwarte wersje beta rozwijane przez tygodnie. Poszukaj ikony Kod na pasku narzędzi Figma Design i opcji Spec w przeglądarce plików.
• Plany. Specs potrzebuje płatnego planu. Początkujący użytkownicy otrzymują warstwy kodu, ale nie Specs. Obydwa wymagają uprawnień do edycji, aby móc tworzyć.
• Rezygnacja. Tylko administratorzy przedsiębiorstwa mogą wyłączać warstwy kodu i tylko poprzez wyłączenie wszystkich funkcji AI Figma.
• Rozmiar repozytorium. Import GitHub dotyczy lekkich baz kodu do prototypowania, a nie pełnej aplikacji produkcyjnej.
• Projektuj kod systemu. Łączenie prawdziwego kodu komponentu ze źródłami kodu jest nadal zamkniętą wersją beta, więc warstwy kodu mogą jeszcze nie korzystać z komponentów produkcyjnych.

Gdzie zatrzymuje się Figma i gdzie pasują Anima i AgentGrid.io

Jeśli cały Twój zespół pracuje w Figma, warstwy kodu i Specs są mocnymi ustawieniami domyślnymi. Prototyp, plan i komentarze znajdują się w tym samym pliku i mogą nad nimi pracować agent Figma i klienci MCP.

Dwie typowe sytuacje nadal nie mieszczą się w tym pliku.

Pomysł zrodził się gdzie indziej. Prototyp Claude Design, strona HTML wygenerowana przez ChatGPT lub aktywna witryna, z której chcesz się uczyć. Serwer Figma MCP ma teraz html_to_figma narzędzie do generowanego agentowo HTML. Anima Buddy, nasz agent ds. projektowania AI w Figma, również się zmienia HTML, artefakty, obrazy i adresy URL Claude’a w edytowalnych warstwach Figma, co jest przydatne, jeśli chcesz kontynuować projektowanie na tych warstwach w swoim systemie projektowym.

Wynik musi opuścić Figma. Twoja specyfikacja lub prototyp musi zostać sprawdzony przez osoby spoza zespołu Figma, zredagowany przez agentów kilku dostawców lub opublikowany jako aktywny link. To jest zadanie, które wykonuje AgentGrid.io, zbudowany przez Anima. Artefakt Markdown na AgentGrid.io to aktywny, automatycznie zapisywany dokument, który mogą edytować osoby i podłączeni agenci, tacy jak Claude, ChatGPT, Cursor i Grok Bot, a każda zmiana jest przypisywana według nazwy w historii wersji. Artefakt HTML to działająca strona, którą możesz komentować i publikować pod publicznym adresem URL po zatwierdzeniu. Możesz także zaimportować jedną ramkę Figma do AgentGrid.io jako artefakt aplikacji. Import ten jest jednokierunkowy, więc późniejsze zmiany Figma nie są synchronizowane.

Obaj nie rywalizują o ten sam krok. Figma jest właścicielem płótna projektowego. AgentGrid.io to miejsce, w którym Markdown i artefakty HTML znikają, gdy praca krzyżuje się z narzędziami i zespołami.

Wypróbuj AgentGrid.io aby zachować specyfikację lub prototyp, który każdy agent w Twoim zespole może edytować i publikować.

Użyj każdego narzędzia, kiedy

• Użyj warstw kodu Figma kiedy interesariusze muszą kliknąć działający prototyp obok projektów i porównać wskazówki obok siebie.
• Użyj Figma Specs kiedy plan powinien znajdować się obok ramek i być odczytywany przez agenta kodującego poprzez serwer Figma MCP.
• Użyj Anima Playground jeśli chcesz projektować bezpośrednio w kodzie za pomocą sztucznej inteligencji lub przekształcić projekt Figma w edytowalną aplikację, którą możesz przeglądać i publikować.
• Użyj Buddy gdy punkt początkowy znajduje się poza Figma i chcesz mieć edytowalne warstwy na płótnie. Aby uzyskać pełniejsze porównanie budowania w Figma i kreatorze przeglądarki, zobacz Figma Make kontra Anima Playground.
• Użyj AgentGrid.io gdy specyfikacja lub prototyp musi być edytowany przez osoby i agentów za pomocą różnych narzędzi, przeglądany z komentarzami i publikowany jako aktywny link.

Często zadawane pytania

Czym są warstwy kodu w Figma?

Warstwa kodu to warstwa na kanwie Figma, która zawiera prawdziwy, działający kod. Możesz utworzyć jedną z wybranych ramek, działającej witryny internetowej przechwyconej za pomocą rozszerzenia Figma Chrome, repozytorium prototypów GitHub lub pustego podpowiedzi, a następnie kliknąć je, skomentować i powielić, aby porównać wskazówki.

Czy Figma Specs to po prostu Markdown?

Specs używa Markdown jako tekstu i możesz przeciągnąć dowolny plik .md na płótno, aby go utworzyć. Dodaje funkcje Figma wokół tego tekstu: osadzone ramki i tablice FigJam, komentarze oraz agenta, który może czytać i odpowiadać na te komentarze.

Czy warstwy kodu Figma kosztują kredyty AI?

Tak. W planach płatnych generowanie i edytowanie w warstwie kodu jest bezpłatne do 4 listopada 2026 r. Praca innych agentów w tym samym wierszu nadal wymaga kredytów, a po 4 listopada wszystkie zadania warstwy kodu korzystają z kredytów AI.

Czy Claude Code, Codex lub Cursor może odczytać Figma Spec?

Tak, jeśli są podłączone do serwera Figma MCP. Agenci kodujący mogą czytać, tworzyć i aktualizować specyfikacje za pomocą umiejętności figma-spec, a także możesz wkleić łącze do specyfikacji do monitu, aby przekazać powiązany kontekst projektowy.

Które plany Figma obejmują Specs?

Specs jest w otwartej wersji beta planów płatnych: Professional, Organisation, Enterprise i Education oraz Government, zgodnie z artykułem Figma Config India. Nie ma go w bezpłatnym planie Starter. Warstwy kodu są wdrażane we wszystkich planach, w tym Starter.