Od Figmy do kodu z AI i MCP

Sposób, w jaki projekt trafia do kodu, zmienia się dziś szybciej niż sam projekt. Jeszcze niedawno „handoff” oznaczał przekazanie deweloperom zrzutów ekranu, opisywanie odstępów w pikselach albo wysłanie linku do pliku Figmy w trybie Dev Mode.

Dziś możesz wziąć gotowy design w Figmie i doprowadzić do sytuacji, w której AI wygeneruje działającą aplikację React za Ciebie. Bez ręcznego pisania kodu. Możemy wyciągnąć z projektu Figmy tokeny, komponenty i układy, a następnie automatycznie złożyć z tego spójny prototyp. To przewodnik, jak efektywnie używać Figma MCP z Claude Code i Cursor, żeby AI wykonało większość pracy za Ciebie. Pokażę konkretny proces i konkretne prompty, których użyłem do automatycznego wygenerowania landing page’u.

Bazuję na systemie „Simple Design System” z Figmy – publicznie dostępnym projekcie, który możesz zduplikować i od razu zacząć eksperymentować. Pokażę podstawy: jak skonfigurować środowisko, jak z niego korzystać efektywnie i jak wyciągnąć maksimum wartości. To poziom wejściowy, nie wymaga wcześniejszej znajomości MCP. Każdy powinien być w stanie go odtworzyć i dalej eksperymentować.

CZĘŚĆ 1: PODSTAWY

Artykuł jest dostosowany do planu Figma Professional. Kroki i przykłady używają wyłącznie funkcji dostępnych w tym planie. MCP jest dostępny od planu Professional.

Czym jest Figma MCP?

MCP (Model Context Protocol) to protokół łączący Claude z Figmą. Po instalacji AI ma dostęp do narzędzi, które wyciągają dane z twoich projektów.

W praktyce: Zamiast ręcznie pobierać tokeny z Figmy, kopiować je i wklejać do kodu, mówisz AI „wyciągnij tokeny” – a MCP dostarcza narzędzia i instrukcje, jak to zrobić.

Dzięki MCP:

• AI automatycznie wyciąga design tokeny, komponenty i strukturę projektu
• Generuje kod bezpośrednio z Figmy bez ręcznego kopiowania
• Pobiera assety (obrazy, ikony) i zapisuje je w odpowiednich folderach
• Utrzymuje spójność między designem a kodem

Remote vs Local MCP Server

MCP może działać w dwóch trybach:

Remote (zdalny) – używamy w tym artykule

• Nie wymaga lokalnej instalacji serwera Figmy
• Stabilniejszy i bardziej niezawodny
• Działa od razu po konfiguracji

Local (lokalny) – dla zaawansowanych

• Wymaga włączenia w Figmie: Preferences → Enable desktop MCP server
• Pozwala na promptowanie oparte na selekcji w Figmie
• Więcej kontroli, ale więcej konfiguracji

Dostępne narzędzia

MCP daje AI dostęp do zestawu narzędzi. Nie musisz ich wywoływać ręcznie – AI samo wybiera odpowiednie, gdy mu powiesz, co chcesz osiągnąć. Oto główne funkcje:

Dla początkujących (te będziesz używać):

Generowanie kodu z designu (get_design_context)

• Wyciąga całą strukturę projektu i generuje działający kod
• Działa z: Figma Design, Figma Make
• Domyślnie: React + Tailwind (możesz zmienić przez prompt)
• Możesz wykorzystać własne komponenty: „Wygeneruj używając komponentów z src/components/ui”

Wyciąganie design tokenów (get_variable_defs)

• Pokazuje wszystkie zmienne: kolory, odstępy, typografię
• Użyj gdy: chcesz zobaczyć tokeny z ramki lub całego projektu
• Przykłady: „Pokaż mi wszystkie tokeny z tego ramki”, „Jakie zmienne kolorów są użyte?”

Rzut ekranu jako wzorzec (get_screenshot)

• AI używa obrazu, żeby dokładnie dopasować wygląd
• Włączone domyślnie (możesz wyłączyć w ustawieniach)
• Działa z: Figma Design, FigJam

Zaawansowane (AI użyje automatycznie gdy trzeba):

Przegląd dużych plików (get_metadata)

• Szybki zarys struktury bez wszystkich szczegółów
• AI użyje, gdy plik jest za duży do pełnej analizy
• Pokazuje: identyfikatory warstw, nazwy, typy, pozycje, rozmiary

Mapowanie do istniejącego kodu (get_code_connect_map)

• Łączy komponenty z Figmy z twoim kodem
• Przydatne gdy: masz już gotowy design system w kodzie
• Zwraca lokalizację komponentu i nazwę w kodzie

Tworzenie reguł systemu (create_design_system_rules)

• Generuje zasady dla spójnego generowania kodu
• AI użyje, gdy: budujesz nowy design system
• Zapisuje reguły w folderze rules/ lub instructions/

Konwersja diagramów FigJam (get_figjam)

• Wyciąga strukturę z tablic FigJam
• Przydatne do: dokumentowania architektury, user flows

💡 Nie musisz pamiętać nazw tych narzędzi – po prostu powiedz AI czego potrzebujesz naturalnym językiem, a ono wybierze odpowiednie.

Co potrzebujesz?

Stack technologiczny

Podczas korzystania z AI warto określić, w jakiej technologii będziemy pracować. Jeśli nie masz preferowanej, ja korzystam z:

React – framework do budowania interfejsów użytkownika

Tailwind CSS – biblioteka utility-first do stylowania

Vite – build tool, który łączy Reacta z Tailwindem i uruchamia aplikację w przeglądarce. Dzięki niemu możesz od razu zobaczyć efekty swojej pracy pod adresem lokalnym (np. localhost:3000). Vite odpowiada za:

• Kompilację kodu React do formatu zrozumiałego dla przeglądarki
• Hot reload – automatyczne odświeżanie strony po zmianach
• Optymalizację i bundlowanie plików

Narzędzia do pracy z AI

W tym artykule używamy dwóch narzędzi do pracy z kodem i AI:

Claude Code – agent terminalowy do kodowania. Działa przez linię komend i pozwala na bardziej zaawansowaną, agentową pracę z kodem. Idealny dla osób, które chcą pełnej kontroli i nie boją się terminala.

Cursor – edytor kodu z wbudowanym AI, przyjazny dla początkujących. Ma graficzny interfejs, dostęp do struktury plików i jest łatwiejszy w obsłudze niż Claude Code. Polecany na start.

Jeśli nie masz doświadczenia z terminalem, zacznij od Cursora – wszystkie przykłady w artykule będą pokazane właśnie na przykładzie cursora.

Dobrze przygotowany plik Figmy

Jeśli planujesz pracować na swoim projekcie, pamiętaj, żeby zawierał:

Komponenty
Wszystko powtarzalne jest komponentem i ma instancje, nie duplikaty. Więcej o komponentach w dokumentacji figmy

Zmienne (Design Tokens)
Spacing, kolory, promienie, typografia są ustawione jako zmienne Figmy, nie wartości ręczne. To podstawowe „atomy” systemu projektowego – najmniejsze, nierozerwalne jednostki designu, które potem składają się na komponenty. Więcej o zmiennych w dokumentacji figmy

Nazewnictwo
Warstwy i komponenty mają nazwy opisujące rolę, np. PrimaryButton, ProductImage. Zero Frame123.

Auto Layout
Layout oparty na Auto Layout z poprawnym zachowaniem przy zmianie rozmiaru. Auto Layout to funkcja Figmy, która automatycznie zarządza odstępami i rozmieszczeniem elementów – działa podobnie jak Flexbox w CSS. Więcej o Auto Layout w dokumentacji Figmy

Adnotacje
Krótkie notatki o tym, jak coś działa albo reaguje. Więcej o Adnotacjach w dokumentacji Figmy

CZĘŚĆ 2: SETUP

Konfiguracja edytora

Cursor (najszybsze)

1. Zainstaluj Cursor: cursor.sh
2. Z kopiuj i wklej do przeglądarki:
   cursor://anysphere.cursor-deeplink/mcp/install?name=Figma&config=eyJ1cmwiOiJodHRwczovL21jcC5maWdtYS5jb20vbWNwIn0%3D
3. Install
   

   

4. Connect
   

   

5. Installed
   

   

Claude Code

1. Zainstaluj (wymagane odpalenie terminala):
   

   npm install -g @anthropic-ai/claude-code

2. Dodaj MCP:
   

   claude mcp add --transport http figma https://mcp.figma.com/mcp

3. Zrestartuj terminal
4. Autoryzuj: /mcp → figma → Authenticate

Przygotowanie przestrzeni do pracy

Przygotowanie folderu projektu

Zanim zaczniemy pracę, utwórz folder dla swojego projektu:

W Cursor:

1. Otwórz Cursor
2. Kliknij File → New Folder (lub ⌘+O / Ctrl+O)
3. Utwórz nowy folder, np. figma-mcp-test
   

   

4. Otwórz ten folder w Cursor

Gotowe! Teraz możesz przejść do pracy z plikiem Figmy.

CZĘŚĆ 3: PIERWSZY PROJEKT

Krok 1: Pobierz tokeny i podstawy projektu

Zanim przejdziemy do przenoszenia projektu, musimy wyciągnąć z projektu podstawowe tokeny / elementy: definicje kolorów, typografii, odległości itd. Postawi to solidne podstawy pod dalszą pracę z AI i ograniczy generatywność tylko do przez nas zdefiniowanych podstaw.

Pobieramy i zapisujemy je w formacie, który jest najlepszy do dalszej pracy dla AI.

Skopiuj link do projektu

Otwórz plik Simple Design System w Figmie.

Gdzie znaleźć właściwy widok:

1. W panelu po lewej stronie znajdź sekcję „Examples”
2. Kliknij na stronę, którą chcesz zakodować, np.:
   • Home page – najprostszy start
   • Pricing – więcej komponentów
3. Zaznacz całą ramkę (kliknij na nazwę ramki w lewym panelu lub bezpośrednio na canvas)
   • Wybierz „Copy link to selection”

Możemy podać link do pierwszego widoku, który chcemy odtworzyć – posłuży nam jako punkt referencyjny na pobranie danych.

Krok 2: Użyj promptu

Użyj Figma MCP. Wykonaj kolejno: pobierz metadata, następnie design context.

Zwróć:

- JSON tokenów systemu: colors, typography, spacing, radius, border, breakpoints.

- Komponenty (Markdown): lista komponentów, warianty, props, data-node-id, mapowanie nazw (Figma → kod).

- Layout (Markdown): siatki / grid, skala spacing, wzorce sekcji.

- Assets / ikony (Markdown): nazwa, typ pliku (svg/png), źródło (pełny URL).

- Pobierz wszystkie assety lokalnie do public/assets/ i potwierdź zapis.

Pamiętaj: pliki muszą być zapisane lokalnie, same linki nie wystarczą.

FIGMA_URL= [Twój link]

 

Jak użyć promptu:

1. Skopiuj cały prompt powyżej
2. Zastąp FIGMA_URL= [Twój link] swoim linkiem (usuń nawiasy kwadratowe, wklej czysty URL)
3. Wklej do Cursor
4. Kliknij Enter lub „Send”

Po wklejeniu promptu:

Ten proces zajmie kilka minut – agent musi:

• Przeanalizować strukturę projektu w Figmie
• Wyciągnąć wszystkie tokeny i komponenty
• Pobrać assety (obrazy, ikony)
• Zapisać wszystko w odpowiednich plikach

Co zobaczysz:

• Agent będzie tworzył TODO listę zadań
• Będzie zapisywał pliki (zobaczysz to w strukturze folderów)
• Będzie pobierał obrazy do folderu public/assets/

 

Jeśli agent się zatrzyma:

• Czasami może się przerwać w połowie pracy
• Po prostu napisz: „kontynuuj” lub „dokończ zadania”

Sprawdź TODO listę:

• Agent czasami nie odznacza zadań automatycznie
• Jeśli widzisz, że TODO są zakończone ale nie odznaczone, zapytaj: „Czy skończyłeś wszystkie zadania?”

Krok 2: Wygeneruj pierwszą stronę

Jak już mamy przygotowane podstawy, przechodzimy do wygenerowania pierwszej strony.

Skopiuj link do projektu

Wykorzystujemy ten sam link do ramki z Examples.

 

Wykorzystujemy link do projektu, w którym mamy design, który chcemy odtworzyć.

Użyj promptu

Zaimplementuj design z Figmy używając Vite + React + Tailwind.

Użyj Figma MCP:

- get_design_context() → kod + assets URLs
- download_figma_images() → pobierz do /public/assets/
- get_variable_defs() → design tokens

WYMAGANIA:

- Vite + React + TypeScript
- Tailwind CSS z design tokens
- Pixel-perfect implementation
- Responsive design

ZASADY:

- Exact values z Figma
- Jeden komponent = jedna edycja pliku
- Assets pobrane przez MCP od razu

FIGMA_URL: [Twój link]

Postęp tworzenia:

 

Krok 3: Przetestuj lokalnie

Po wygenerowaniu kodu warto przetestować, czy wszystko działa poprawnie. Najprościej zrobić to lokalnie.

Uruchomienie projektu lokalnie

Poproś AI o uruchomienie lokalnego serwera deweloperskiego:

„Uruchom projekt lokalnie i pokaż mi URL”

AI powinno wykonać:

npm install  # instalacja zależności
npm run dev  # uruchomienie dev servera

Zobaczysz adres (zazwyczaj http://localhost:3000), pod którym możesz przetestować aplikację w przeglądarce.

Co testować

• Responsywność – zmień szerokość okna przeglądarki, sprawdź mobile/tablet/desktop
• Wszystkie interakcje – kliknij buttony, linki, sprawdź czy wszystko działa
• Obrazy i assety – czy się załadowały, czy nie ma broken images
• Zgodność z Figmą – porównaj obok siebie: Figma vs przeglądarka

Jeśli znajdziesz błędy, opisz je AI ze screenshotem – to zazwyczaj wystarczy do naprawy.

Działająca wersja

 

Przyklad ( https://blog-design-system-figma.vercel.app/ )

Krok 4: Dodaj komponenty

Po wygenerowaniu pierwszej strony możemy przejść do systematycznego przenoszenia komponentów.

Buttons

 

Prompt dla przenoszenia komponentów

Zaimplementuj wszystkie komponenty z designu Figma na podstawie linku do strony i zastąp istniejące użycia w projekcie.

WYMAGANIA TECHNICZNE:
- Automatycznie wykryj wszystkie komponenty na stronie
- Używaj istniejących wzorców stylowania z projektu
- Implementuj wszystkie warianty z designu
- Zachowaj responsywność

ZASADY:
- Exact values z Figma
- Jeden komponent = jedna edycja pliku
- Complete config przed komponentami
- No placeholder content
- Final implementation od pierwszego razu

FIGMA_URL: [Twój link do buttonów]

Cards: (ten sam prompt, zmień tylko FIGMA_URL)

Rozwiązywanie problemów

Jeśli natrafisz na problem, informacja o błędzie i screen powinny być wystarczające:

„Jest błąd na mobile: [dołącz screenshot]„

CZĘŚĆ 4: PRACA NA CO DZIEŃ

Jak utrzymać spójność komponentów?

Masz już pierwszą stronę z komponentami (Button, Card). Gdy dodajesz kolejne widoki, ważne jest, żeby AI używało już istniejących komponentów zamiast generować nowe.

Praktyczny przykład:
Wygenerowałeś HomePage z komponentami Button i Card w src/components/ui/. Teraz dodajesz AboutPage – AI może wygenerować nowe buttony zamiast użyć istniejących.

Rozwiązanie:
Przy każdym kolejnym widoku użyj promptu z analizą komponentów (poniżej), który najpierw sprawdza co już istnieje w kodzie, a dopiero potem generuje nowe.

Dodawanie kolejnych widoków

Gdy masz już pierwszy widok i komponenty, możesz dodawać kolejne strony. To najczęstszy workflow – tutaj pilnujesz, żeby AI nie generowało duplikatów komponentów.

Prompt z analizą komponentów

Chcę wygenerować [nazwa widoku] na podstawie designu z Figmy.

ANALIZA:
1. Sprawdź jakie komponenty są w src/components/ui/
2. Przeanalizuj widok z Figmy - które elementy wyglądają jak komponenty:
   - Mają warianty (Primary/Secondary)
   - Są standardowymi UI primitives (Button, Input, Card)
   - Wyglądają jak building blocks (nie custom sections)
3. Dopasuj do istniejących w kodzie (ignoruj różnice w naming)
4. Zaproponuj co warto dodać jako komponent

ODPOWIEDŹ:
- Lista komponentów w kodzie
- Lista elementów w Figmie (✅ istnieje / ❌ brak / ⚠️ można inaczej)
- Plan: co użyjesz, co proponujesz stworzyć
- Opcje A/B

Przedstaw plan i poczekaj na moją odpowiedź którą opcję wybieram.

FIGMA_URL: [link]

Iterowanie nad projektem

Co się dzieje, gdy projekt się zmieni w Figmie? Nie musisz generować wszystkiego od nowa.

Aktualizacja pojedynczego komponentu

Jeśli zmiany są lokalne (np. kolor buttona):

Zaktualizuj komponent Button na podstawie nowego designu z Figmy.
FIGMA_LINK: [link do zaktualizowanego komponentu]

AI pobierze nową wersję i zaktualizuje tylko ten komponent.

Aktualizacja tokenów

Jeśli zmieniły się kolory/spacing w całym systemie:

AI nadpisze plik z tokenami, a wszystkie komponenty automatycznie użyją nowych wartości.

Pobierz zaktualizowane design tokens z Figmy i zastąp istniejące.
FIGMA_LINK: [link do projektu]

Rozwiązywanie problemów

Jeśli natrafisz na problem, informacja o błędzie i screen powinny być wystarczające:

"Jest błąd na mobile: [dołącz screenshot]"

---

Dodatkowe możliwości dla wyższych planów

Jeśli masz Figma Organization lub Enterprise, dostępny jest Code Connect – automatyczne mapowanie komponentów między Figmą a kodem.

Czym jest Code Connect?

Code Connect to bezpośrednie połączenie między komponentem w Figmie a jego implementacją w repo.

Jak to działa:

• W Figmie: Button z wariantami Primary/Secondary
• W repo: src/components/Button.tsx z props variant="primary"
• Code Connect łączy jedno z drugim automatycznie

Praktyczny efekt:

• AI wie automatycznie, które komponenty z Figmy już istnieją w kodzie
• Używa istniejących zamiast generować nowe za każdym razem
• Zero dryfu między designem a kodem na dużych zespołach
• Propsy są zmapowane: wariant „Primary” w Figmie = variant="primary" w kodzie

CZĘŚĆ 5: ZASOBY

Przydatne zasoby

Dokumentacja

1. Figma MCP – https://mcp.figma.com/docs
2. Claude Documentation – https://docs.claude.com
3. Claude Code – https://docs.claude.com/en/docs/claude-code
4. Cursor Documentation – https://docs.cursor.com
5. Figma Auto Layout – https://help.figma.com/hc/en-us/articles/360040451373
6. Figma Variables – https://help.figma.com/hc/en-us/articles/15339657135383

Community

• Figma Community – przykłady design systemów do nauki
• Claude Discord – pomoc i wymiana doświadczeń

Podsumowanie

Masz teraz kompletny workflow do przenoszenia projektów z Figmy do kodu przy pomocy AI. Zaczynasz od dobrze przygotowanego designu, wyciągasz tokeny i komponenty, generujesz kod, testujesz i iterujesz.

Najważniejsze zasady:

✅ Dobrze nazwane komponenty w Figmie = lepszy kod
✅ Zmienne zamiast wartości hardcoded = łatwiejsze aktualizacje
✅ Testuj po każdej zmianie = mniej błędów w produkcji

Spróbuj sam na przykładzie Simple Design System i zobacz, jak szybko możesz przejść od projektu do działającego prototypu. Powodzenia!