Design-to-code: Figma i systemy projektowe

Poprosiłeś AI o zbudowanie karty z ramki Figma i dostałeś czysto wyglądający kod — z zupełnie nowym przyciskiem #4F86F7, jednorazowym rounded-[10px] i ręcznie sklejonym avatarem, który ignoruje <Avatar />, który już utrzymujesz. Pomnóż to przez cały sprint, a Twój “system projektowy” po cichu rozgałęzi się na czterdzieści lekko różniących się odcieni niebieskiego. Wygenerowanie komponentu ze screenshota to łatwe 80%. Trudne 20% — ta część, która naprawdę utrzymuje bazę kodu w dobrym stanie — to zmuszenie AI, by za każdym razem używało Twoich tokenów i Twoich komponentów.

To jest pogłębiona analiza tych 20%. Jeśli potrzebujesz tylko zainstalować serwer Figma MCP i mieć pierwszy komponent na ekranie, zacznij od Figma i Design System MCP i wróć tutaj.

Co wyniesiesz z tego przewodnika

• Powtarzalny przepływ synchronizowania zmiennych Figmy do typowanego pliku tokenów, który importuje Twój kod
• Prompty, które zmuszają generowane UI do korzystania z istniejących tokenów i komponentów Code Connect, zamiast wymyślać nowe
• Pipeline tokenów (zmienne Figmy do Style Dictionary do CSS/TS), który przetrwa więcej niż jeden komponent
• Test “zgodności z projektem”, dzięki któremu recenzent w kilka sekund stwierdzi, czy kod faktycznie odpowiada projektowi
• Tryby awarii, które po cichu pogarszają wierność, i jak je naprawić

Notatka

Ten artykuł zakłada, że serwer Figma Dev Mode MCP jest już podłączony (lokalnie pod http://127.0.0.1:3845/mcp lub zdalny serwer pod https://mcp.figma.com/mcp). Istotne narzędzia to get_design_context, get_variable_defs, get_code_connect_map, get_metadata i get_screenshot.

Krok 1: zsynchronizuj tokeny projektowe, zanim cokolwiek wygenerujesz

Najbardziej dźwigniowym ruchem jest wyekstrahowanie 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 w typowanym źródle prawdy.

Wskazówka

Prompt do skopiowania — początkowa 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.”

Na tym polega różnica między demem a przepływem pracy: plik tokenów jest ponownie wykorzystywany przez każdy kolejny prompt, więc AI nigdy więcej nie musi szacować koloru na oko.

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

Pojedynczy tokens.ts wystarcza w małej aplikacji. Dla czegokolwiek współdzielonego między platformami (web, native, email) chcesz mieć krok transformacji, aby jedno źródło tokenów emitowało niestandardowe właściwości CSS, obiekt JS/TS i cokolwiek jeszcze potrzebujesz. Style Dictionary to standardowe narzędzie do tego, a AI może je podłączyć na podstawie Twoich wyeksportowanych tokenów.

1. Wyeksportuj tokeny w formacie Style Dictionary. Poproś AI o konwersję zmiennych Figmy do tokens.json używającego kształtu design-tokens W3C ({ "$value": ..., "$type": ... }) zamiast doraźnego obiektu.

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

3. Wskaż komponentom wygenerowane zmienne CSS. Od tego momentu generowane komponenty odwołują się do var(--color-primary) — co prowadzi z powrotem do zmiennej Figmy — więc zmiana tokenu projektowego propaguje się po jednym przebudowaniu.

Wskazówka

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, aby AI ponownie wykorzystywało Twoje komponenty

Tokeny zatrzymują jednorazowe kolory. Code Connect zatrzymuje jednorazowe komponenty. Mapuje komponent Figmy na prawdziwy komponent w Twojej bazie kodu, więc gdy AI widzi ten komponent w projekcie, get_code_connect_map mówi mu, by zaimportowało Twój zamiast generować świeży.

Korzyść: prompty mogą mówić “użyj naszych komponentów tam, gdzie istnieją mapowania Code Connect”, a wygenerowane drzewo jest złożone z Twoich sprawdzonych w boju <Button /> i <Avatar />, zamiast z divów wystylizowanych tak, by je przypominały.

Cursor

Trzymaj Figmę otwartą z zaznaczoną ramką, otwórz plik, w którym chcesz mieć komponent, i użyj trybu Agent, aby 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, aby miał kontekst systemu plików zarówno dla 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 Figma MCP znajduje się 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 (zazwyczaj pliki *.figma.tsx) i są publikowane do Figmy za pomocą CLI Code Connect. Jeśli get_code_connect_map nic nie zwraca, oznacza to, że żadne mapowania jeszcze nie istnieją — generowanie nadal zadziała, tylko nie wykorzysta ponownie komponentów. Konfiguracja jest identyczna we wszystkich trzech narzędziach; różni się tylko to, skąd uruchamiasz agenta.

Krok 4: zweryfikuj zgodność z projektem, nie szacuj na oko

Cały sens ponownego wykorzystywania tokenów i komponentów polega na tym, że recenzent powinien móc szybko potwierdzić wierność. Połącz serwer Figma MCP z serwerem MCP przeglądarki (takim jak @playwright/mcp), aby wyrenderować rezultat i porównać go z projektem.

Wskazówka

Prompt do skopiowania — test zgodności:

“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.”

Przeglądanie diffa z dołączonymi nazwami tokenów jest dużo szybsze niż wpatrywanie się w piksele i mówi Ci, czy niezgodność to błąd w kodzie, czy brakująca zmienna Figmy.

Gdy coś nie działa

get_design_context zwraca rozległy, niestylizowany markup. Zaznaczenie jest za duże lub za głębokie. Wywołaj najpierw get_metadata, aby zobaczyć drzewo warstw, a następnie wskaż AI konkretną ramkę potomną zamiast całej strony.

AI nadal emituje surowe hex pomimo pliku tokenów. Miesza dane z Figmy ze swoimi domyślnymi wartościami treningowymi (zwłaszcza paletą Tailwind). Bądź wyraźny: “Use only var(--*) tokens from tokens.css. Any literal hex or px value is a bug — flag it instead of writing it.”

get_variable_defs zwraca prawie nic. Designer zastosował surowe style, a nie zmienne. Tokeny eksportują się tylko wtedy, gdy są prawdziwymi zmiennymi Figmy. Poproś designera o konwersję stylów na zmienne lub użyj get_screenshot plus ręcznych wartości dla tego jednego komponentu.

get_code_connect_map jest puste. Żadne mapowania Code Connect nie są jeszcze opublikowane. Generowanie przebiega bez ponownego wykorzystania komponentów; skonfiguruj Code Connect najpierw dla komponentów o największym ruchu (przyciski, inputy, karty), aby uzyskać największy zysk na wierności.

Figma MCP jest niedostępne na Linuksie. Serwer desktopowy wymaga aplikacji Figma, która działa tylko na macOS i Windows. Użyj zamiast tego zdalnego serwera pod https://mcp.figma.com/mcp z tokenem OAuth — jest oparty na linkach, więc działa wszędzie.

Connection refused. W przypadku serwera lokalnego upewnij się, że Figma desktop jest otwarta i przełącznik Dev Mode MCP Server jest nadal włączony. Pełną instalację dla każdego narzędzia znajdziesz w przewodniku konfiguracji.

Co dalej

Figma i Design System MCP Zainstaluj serwer Figma MCP i uruchom pierwsze generacje oparte na selekcji i na linkach.

Browser Automation MCP Renderuj komponenty i rób ich screenshoty, aby porównać je z projektem.

shadcn/ui MCP Generuj komponenty na bazie istniejącego zestawu prymitywów systemu projektowego.