Figma i design system przez MCP

Serwer MCP Figmy daje narzędziom AI bezpośredni dostęp do danych projektowych z Figmy — dokładnych odstępów, tokenów kolorów, grubości fontów i mapowań komponentów — przez pięć narzędzi: get_design_context, get_metadata, get_variable_defs, get_code_connect_map i get_screenshot. Działa lokalnie w aplikacji desktopowej Figmy albo zdalnie pod mcp.figma.com i obsługuje tryb oparty na zaznaczeniu oraz na linku.

Projektantka właśnie zaktualizowała stronę cennika w Figmie. Mrużysz oczy, zgadujesz, że odstęp to 24px (to 20px), wpisujesz na sztywno kolor, który wygląda jak firmowy niebieski (to #2563EB, nie #3B82F6), i wdrażasz. Z przeglądu projektu wraca dwanaście komentarzy. Dwie godziny później wciąż przełączasz się między Figmą a edytorem i poprawiasz wartości piksel po pikselu.

Potem pętla psuje się w subtelniejszy sposób. Prosisz AI o zbudowanie karty z ramki w Figmie, a ono wydaje schludnie wyglądający kod — z zupełnie nowym przyciskiem #4F86F7, jednorazowym rounded-[10px] i własnoręcznie sklecionym awatarem, który ignoruje <Avatar />, który już utrzymujesz. Pomnóż to przez sprint, a Twój design system po cichu rozgałęzi się na czterdzieści nieco różnych odcieni niebieskiego.

Wygenerowanie komponentu ze zrzutu ekranu to łatwe 80%. Ten przewodnik obejmuje obie połowy: podłączenie serwera, żeby AI czytało prawdziwe dane projektowe, oraz dyscyplinę tokenów i Code Connect, która sprawia, że korzysta z tego, co już masz.

Co daje serwer MCP Figmy

• Konfigurację serwera Dev Mode MCP dla Cursora, Claude Code i Codeksa, lokalnie i zdalnie
• Różnicę między trybem opartym na zaznaczeniu a trybem opartym na linku i moment, w którym każdy z nich jest właściwy
• Powtarzalny proces synchronizacji zmiennych z Figmy do typowanego pliku tokenów, który importuje Twój kod
• Pipeline tokenów (zmienne Figmy do Style Dictionary do CSS i TS), który przeżyje więcej niż jeden komponent
• Prompty, które zmuszają wygenerowany interfejs do korzystania z istniejących tokenów i komponentów z Code Connect zamiast wymyślania nowych
• Kontrolę zgodności z projektem, którą recenzent przeczyta w kilka sekund zamiast skrobać piksele
• Tryby awarii, które po cichu obniżają wierność, i sposoby wyjścia z nich

Czego potrzebujesz przed podłączeniem serwera MCP Figmy

Figma wydaje serwer w dwóch odmianach. Lokalny serwer desktopowy działa wewnątrz aplikacji desktopowej Figmy i czyta bieżące zaznaczenie; serwer zdalny pod https://mcp.figma.com/mcp działa w chmurze i pracuje na podstawie linku do Figmy. Dla serwera lokalnego potrzebujesz:

• Aplikacji desktopowej Figmy (nie wersji przeglądarkowej)
• Miejsca Dev lub Full w dowolnym płatnym planie Figmy — serwer zdalny działa na wszystkich miejscach i planach, więc sięgnij po niego, jeśli nie masz miejsca Dev
• MCP włączonego w preferencjach Figmy — otwórz Figmę, przejdź do Preferences i włącz „Dev Mode MCP Server”

Po włączeniu Figma uruchamia lokalny serwer MCP pod http://127.0.0.1:3845/mcp po streamable HTTP. Serwer działa tylko wtedy, gdy uruchomiona jest desktopowa Figma. (Starsze poradniki odwołują się do /sse — ten endpoint i transport SSE są przestarzałe; używaj /mcp).

Uwaga

Serwer MCP Figmy zatrzymuje się w chwili zamknięcia desktopowej Figmy. Jeśli AI zgłasza „connection refused”, sprawdź, czy Figma jest otwarta, a przełącznik serwera MCP nadal włączony w Preferences.

Konfiguracja serwera MCP Figmy w każdym z narzędzi

Sam serwer jest identyczny we wszystkich trzech narzędziach — ten sam URL, te same pięć narzędzi, to samo zachowanie. Różni się tylko format rejestracji: Cursor i Claude Code przyjmują kształt JSON mcpServers (Claude Code ma dodatkowo CLI, które zapisze go za Ciebie), a Codex przyjmuje TOML, w którym serwer streamable HTTP jest implikowany kluczem url i nie ma klucza transport.

Cursor

Najszybsza droga w Cursorze to wbudowany marketplace MCP:

1. Otwórz Settings > Tools & Integrations > MCP
2. Znajdź Figma na liście serwerów
3. Kliknij „Add to Cursor”

Albo skonfiguruj ręcznie w .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Zielony wskaźnik w panelu MCP potwierdza połączenie.

Claude Code

claude mcp add --transport http figma-dev http://127.0.0.1:3845/mcp

Sprawdź poleceniem claude mcp list. Powinieneś zobaczyć figma-dev ze statusem połączenia. Do dzielenia z zespołem ogranicz zasięg do projektu:

claude mcp add -s project --transport http figma-dev http://127.0.0.1:3845/mcp

Codex

Codex rejestruje serwer w ~/.codex/config.toml:

[mcp_servers.figma]
url = "http://127.0.0.1:3845/mcp"

Gdy nie masz otwartej aplikacji desktopowej, sięgnij po serwer zdalny. Wymaga tokenu OAuth w zmiennej środowiskowej:

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"

Pięć narzędzi serwera MCP Figmy

Narzędzie	Co robi
get_design_context	Generuje i analizuje kod oraz kontekst projektowy z bieżącego zaznaczenia lub linku do Figmy (dawniej get_code)
get_metadata	Zwraca oszczędny widok XML zaznaczenia: identyfikatory warstw, nazwy, typy, pozycje i rozmiary — tani kontekst przed pełnym pobraniem
get_variable_defs	Wyciąga tokeny projektowe i zmienne (kolory, odstępy, typografia)
get_code_connect_map	Pokazuje, jak komponenty Figmy mapują się na komponenty w kodzie przez Code Connect
get_screenshot	Robi obraz elementu projektu jako wizualne odniesienie (dawniej get_image)

Prompt do skopiowania: komponent z bieżącego zaznaczenia

“Look at my current Figma selection. Generate a React component using Tailwind CSS that matches the design exactly. Extract the spacing, colors, and typography from the design data — do not guess values. Name the component based on the frame name in Figma.”

Zaznaczenie czy link: dwa sposoby pracy

Tryb oparty na zaznaczeniu sprawdza się, gdy masz Figmę otwartą obok edytora. Zaznacz element w Figmie, a potem napisz prompt; serwer czyta to, co zaznaczone. To najszybszy tryb do aktywnej iteracji i jednocześnie ten, którego serwer zdalny nie potrafi.

Tryb oparty na linku sprawdza się, gdy wdrażasz z ticketu lub specyfikacji. Skopiuj link do Figmy (Cmd+L w Dev Mode), wklej go w prompt, a AI wyciągnie identyfikator węzła i pobierze dane projektowe. Działa nawet wtedy, gdy projekt zrobił ktoś inny, i działa na Linuksie oraz wszędzie tam, gdzie aplikacja desktopowa jest niedostępna.

Prompt do skopiowania: wdrożenie z wklejonego linku do Figmy

“Generate a responsive card component from this Figma design: [paste Figma link]. Use CSS Grid for the layout. Extract all design tokens into CSS custom properties. The component should support both light and dark themes based on the Figma variables.”

Krok 1: zsynchronizuj tokeny, zanim cokolwiek wygenerujesz

Ruch o największej dźwigni to wyciągnięcie zmiennych Figmy raz, do pliku, który importuje Twój kod, zanim poprosisz o jakiekolwiek komponenty. Wtedy każdej późniejszej generacji można powiedzieć „użyj tokenów” zamiast zgadywać wartości hex.

get_variable_defs zwraca kolekcje zmiennych projektu — kolory, odstępy, promienie, typografię — wraz z ich semantycznymi nazwami. Zapisz je jako typowane źródło prawdy.

Prompt do skopiowania: pierwsza synchronizacja tokenów

“Use the Figma MCP get_variable_defs tool to read every variable collection in this file. Generate src/styles/tokens.ts exporting a typed tokens object grouped by collection (color, space, radius, typography). Use the exact Figma variable names as keys (camelCased), keep the raw values, and add a JSDoc comment on each group noting its Figma collection name. Do not invent or round any values.”

Tego promptu użyj, gdy tokeny mają zasilić pipeline. Jeśli chcesz wyłącznie gotowego obiektu motywu do konfiguracji Tailwinda albo CSS-in-JS i żadnego kroku budowania, wariant poniżej prosi o te same dane w innym kształcie — jeden plik, pogrupowany tak samo, ale jako konfiguracja motywu, a nie źródło tokenów.

Prompt do skopiowania: jednorazowa konfiguracja motywu zamiast pipeline'u

“Use Figma MCP to extract all design variables from the current file. Generate a TypeScript theme configuration file at src/lib/theme.ts with colors, spacing, typography, and border radius values. Group tokens by their Figma collection names. Include JSDoc comments noting the original Figma variable names.”

Tak czy inaczej, to jest różnica między demem a workflow: plik tokenów jest używany przez każdy kolejny prompt, więc AI nigdy więcej nie musi oceniać koloru na oko.

Krok 2: zamień tokeny w prawdziwy pipeline ze Style Dictionary

Pojedynczy tokens.ts wystarczy w małej aplikacji. Dla czegokolwiek współdzielonego między platformami (web, natywne, e-mail) potrzebujesz kroku transformacji, żeby jedno źródło tokenów emitowało właściwości niestandardowe CSS, obiekt JS/TS i cokolwiek jeszcze. Style Dictionary to standardowe narzędzie do tego, a AI potrafi je podłączyć na podstawie wyeksportowanych tokenów.

1. Wyeksportuj tokeny w formacie Style Dictionary. Poproś AI o przekształcenie zmiennych Figmy w tokens.json w kształcie W3C design-tokens ({ "$value": ..., "$type": ... }), a nie w doraźny obiekt.

2. Wygeneruj konfigurację i zbuduj. Niech AI przygotuje config.json z platformami css/variables i javascript/es6, a potem uruchom build, żeby wyemitować właściwości niestandardowe w :root oraz importowalny moduł.

3. Skieruj komponenty na wygenerowane zmienne CSS. Od tego momentu generowane komponenty odwołują się do var(--color-primary) — co prowadzi z powrotem do zmiennej w Figmie — więc zmiana tokenu propaguje się jednym przebudowaniem.

Prompt do skopiowania: pipeline tokenów

“Use get_variable_defs to read the Figma variables, then set up Style Dictionary in this repo. Write tokens/tokens.json in the W3C design-tokens format ($value/$type), a config.json with a css/variables platform building to src/styles/tokens.css and a javascript/es6 platform building to src/styles/tokens.js, and add an npm run tokens script. Install style-dictionary as a dev dependency and show me the generated tokens.css.”

Krok 3: podłącz Code Connect, żeby AI korzystało z Twoich komponentów

Tokeny zatrzymują jednorazowe kolory. Code Connect zatrzymuje jednorazowe komponenty. Mapuje komponent z Figmy na prawdziwy komponent w Twoim repozytorium, więc gdy AI widzi ten komponent w projekcie, get_code_connect_map każe mu zaimportować Twój, zamiast generować nowy.

Zysk: prompty mogą mówić „użyj naszych komponentów tam, gdzie istnieją mapowania Code Connect”, a wygenerowane drzewo składa się z Twoich sprawdzonych <Button /> i <Avatar />, a nie z divów udających je wyglądem.

Konfiguracja jest identyczna we wszystkich trzech narzędziach; różni się tylko to, skąd uruchamiasz agenta — i dlatego prompty poniżej różnią się wyłącznie otaczającym workflow.

Cursor

Trzymaj Figmę otwartą z zaznaczoną ramką, otwórz plik, w którym ma powstać komponent, i użyj trybu Agent, żeby mógł odczytać mapę Code Connect i edytować wiele plików:

“Implement the selected Figma frame as a React component in src/components/ProfileCard.tsx. First call get_code_connect_map; for any node with a mapping, import and use that existing component instead of generating new markup. For everything else, use the CSS variables from src/styles/tokens.css. Do not introduce raw hex values or one-off pixel radii.”

Claude Code

Uruchom z katalogu głównego repozytorium, żeby miał kontekst plikowy zarówno pliku tokenów, jak i katalogu komponentów:

“Implement the selected Figma frame as src/components/ProfileCard.tsx. Call get_code_connect_map first and reuse any mapped components via their real import paths. Pull every color, spacing, and radius from src/styles/tokens.css — no literal hex or px values. After writing the file, run the type-check and fix any import errors you introduced.”

Codex

Codex może uruchomić to jako zadanie delegowane, gdy serwer MCP Figmy jest w ~/.codex/config.toml:

“Implement the selected Figma frame as src/components/ProfileCard.tsx. Use get_code_connect_map to find existing components and import those rather than re-creating them; use the CSS variables in src/styles/tokens.css for all design values. Open a PR with a screenshot of the rendered component alongside the Figma node link in the description.”

Notatka

Mapowania Code Connect żyją w Twoim repozytorium (zwykle w plikach *.figma.tsx) i są publikowane do Figmy przez CLI Code Connect. Jeśli get_code_connect_map nic nie zwraca, mapowania jeszcze nie istnieją — generowanie i tak zadziała, po prostu nie skorzysta z komponentów.

Krok 4: zweryfikuj zgodność z projektem, zamiast oceniać ją na oko

Cały sens korzystania z tokenów i komponentów polega na tym, że recenzent powinien potwierdzić wierność szybko. Połącz serwer MCP Figmy z serwerem MCP przeglądarki (na przykład @playwright/mcp), żeby wyrenderować wynik i porównać go z projektem.

Prompt do skopiowania: kontrola zgodności z projektem

“Render ProfileCard in the browser at http://localhost:3000/storybook, take a screenshot with the Playwright MCP, then call get_screenshot for the same Figma node. Compare them and list every mismatch in spacing, color, font weight, and border radius, citing the token name the code should be using for each. Do not fix anything yet — just give me the diff.”

Przejrzenie różnicy z dołączonymi nazwami tokenów jest znacznie szybsze niż skrobanie pikseli i od razu mówi, czy rozbieżność to błąd w kodzie, czy brakująca zmienna w Figmie.

Łączenie serwera MCP Figmy z innymi serwerami MCP

Prawdziwa siła pojawia się, gdy w jednej rozmowie żyje kilka serwerów naraz:

Figma + GitHub MCP: “Implement this Figma design as a React component, create a feature branch called ui/pricing-card, commit the component, and open a PR with the Figma link in the description.”

Figma + Playwright MCP: “Generate the component from this Figma selection, then open it in the browser at localhost:3000/storybook and take a screenshot. Compare the screenshot to the Figma design and flag any visual differences.”

Figma + Context7: “Look at this Figma design for a data table. Use Context7 to fetch the current TanStack Table documentation, then implement the table component using the recommended patterns from the docs with the exact styling from Figma.”

Gdy serwer MCP Figmy i pętla design-to-code zawodzą

„Connection refused”. Desktopowa Figma nie działa albo serwer MCP jest wyłączony. Otwórz Figmę, przejdź do Preferences i potwierdź, że przełącznik Dev Mode MCP Server jest włączony.

„No tools available” w panelu MCP. Zrestartuj Figmę i edytor. Lokalne połączenie HTTP potrafi się zerwać, gdy Figma się zaktualizuje albo komputer uśpi.

get_design_context zwraca rozlazły, nieostylowany markup. Zaznaczenie jest zbyt duże albo zbyt głębokie. Wywołaj najpierw get_metadata, żeby zobaczyć drzewo warstw, a potem wskaż AI konkretną ramkę potomną zamiast całej strony.

AI generuje złe odstępy albo surowe wartości hex mimo pliku tokenów. Miesza dane z Figmy z własnymi domyślnymi ustawieniami, zwłaszcza z paletą Tailwinda. Bądź dosadny: „Use only var(--*) tokens from tokens.css and the values from the Figma design data. Any literal hex or px value is a bug — flag it instead of writing it.”

get_variable_defs zwraca prawie nic. Projektant zastosował surowe style, a nie zmienne. Tokeny eksportują się tylko wtedy, gdy są prawdziwymi zmiennymi Figmy. Poproś o konwersję stylów na zmienne albo dla tego jednego komponentu wróć do get_screenshot i wartości wpisywanych ręcznie.

get_code_connect_map jest pusty. Żadne mapowania Code Connect nie zostały jeszcze opublikowane. Generowanie działa bez korzystania z komponentów; ustaw Code Connect najpierw dla komponentów o największym ruchu (przyciski, pola, karty) — to daje największy zysk na wierności.

Serwer MCP Figmy jest niedostępny na Linuksie. Serwer desktopowy wymaga aplikacji Figmy, która działa tylko na macOS i Windows. Użyj serwera zdalnego pod https://mcp.figma.com/mcp z tokenem OAuth — jest oparty na linku, więc działa wszędzie. Starszy serwer MCP dla REST API Figmy to druga awaryjna opcja; wymaga osobistego tokenu dostępu i, tak jak serwer zdalny, nie ma trybu opartego na zaznaczeniu.

Dokąd dalej z serwerem MCP Figmy

Mobbin MCP Sięgnij po ponad 620 000 ekranów z wydanych aplikacji, zanim zaczniesz budować.

shadcn/ui MCP Generuj komponenty na istniejącym zestawie prymitywów design systemu.

Automatyzacja przeglądarki przez MCP Renderuj i zrzucaj komponenty, żeby porównać je z projektem.