# Tworzenie systemu designu w Figma z pomocą Claude Code

> Przewodnik krok po kroku dotyczący tworzenia pełnoprawnego systemu designu w Figma przy użyciu Claude Code: tokeny, komponenty, zmienne oraz gotowe interfejsy.

![Ilustracja 1](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-01.webp)

## 1. Czego potrzebujesz do pracy

Claude Code można podłączyć bezpośrednio do Figmy i za jego pomocą stworzyć pełnoprawny system designu od zera: zmienne, tokeny, komponenty oraz gotowe ekrany. W tym poradniku przeanalizujemy cały proces krok po kroku — od instalacji po finalny ekran logowania.

Przed rozpoczęciem upewnij się, że posiadasz:

- **Aplikację desktopową Claude Code** — aplikację z trzema trybami: Chat, Code oraz Agentic.
- **Aktywną subskrypcję Claude** — darmowe konto nie nadaje się do tego przepływu pracy.
- **Konto Figma** — przynajmniej z jednym otwartym plikiem roboczym.
- **Czas** — 30–45 minut bez rozpraszaczy na przejście przez pełny workflow.

> [!WARNING]
> Ten przepływ pracy zużywa limity użycia Claude. Zbudowanie złożonego komponentu, takiego jak przycisk z ponad 120 wariantami, może pochłonąć znaczną część Twojego limitu godzinowego. Zacznij od prostszych zadań, aby oswoić się z procesem, zanim zabierzesz się za duże projekty.

![Czego potrzebujesz do pracy — ilustracja 2](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-02.webp)

## 2. Instalacja Claude Code

Przejdź na stronę [claude.ai/download](https://claude.ai/download) i pobierz aplikację desktopową Claude Code dla swojego systemu operacyjnego (macOS lub Windows).

Po instalacji aplikacja poprosi Cię o uwierzytelnienie — zaloguj się danymi swojej subskrypcji Claude. Następnie otworzy się interfejs z trzema trybami:

- **Chat** — standardowy Claude konwersacyjny.
- **Code** — do zadań związanych z pisaniem kodu.
- **Agentic** — tu odbywa się główna praca z Figma.

Do pracy z Figma wykorzystywany jest tryb **Agentic**: to właśnie on pozwala Claude wykonywać autonomiczne działania, w tym bezpośrednią pracę na Twoim canvasie Figma.

![Czego potrzebujesz do pracy — ilustracja 3](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-03.webp)

## 3. Podłączanie Claude do Figma przez MCP

To kluczowy krok, który umożliwia cały przepływ pracy. Claude łączy się z Figma za pośrednictwem serwera MCP (Model Context Protocol).

**Kolejność łączenia:**

1. W aplikacji Claude Code przejdź do **Settings**.
2. Otwórz sekcję **MCP Servers**.
3. Kliknij **„Add MCP Server”**.
4. Wybierz **Figma** z listy dostępnych integracji.
5. Przeprowadź uwierzytelnianie przez konto Figma (flow OAuth).
6. Po połączeniu Figma pojawi się na liście aktywnych serwerów MCP.

**Jak sprawdzić, czy wszystko działa:**

Otwórz dowolny plik Figma w przeglądarce i zadaj Claude proste pytanie:

```text
Can you see my current Figma file? What's on the canvas?
```

Jeśli Claude opisuje zawartość Twojego pliku — połączenie zostało nawiązane. Jeśli nie — sprawdź konfigurację serwera MCP i upewnij się, że plik Figma jest otwarty.

> [!TIP]
> Przed rozpoczęciem pracy utwórz osobny plik Figma lub wydzieloną stronę wewnątrz istniejącego. Izoluje to eksperymenty od materiałów produkcyjnych.

![Krok 3 — Tworzymy pełny system zmiennych przy pomocy AI — ilustracja 4](/api/guides-media/automation/figma-design-system-with-claude-code/images/figma-design-system-with-claude-code-step-04.webp)

## 4. Tworzenie pełnego systemu zmiennych przy pomocy AI

Zamiast ręcznie tworzyć dziesiątki zmiennych kolorów, typografii i odstępy, Claude buduje całą architekturę tokenów samodzielnie.

**Prompt do utworzenia systemu zmiennych:**

```text
In my Figma file, create a complete design token system with the following structure:

1. Primitive Colors — create a full range of colours: grays (50–900), primary blue (50–900), secondary green (50–900), error red (50–900), warning amber (50–900), and success green (50–900). Use industry-standard hex values.
2. Semantic Colors — create a semantic layer that references the primitive colours: background-primary, background-secondary, text-primary, text-secondary, text-disabled, icon-primary, icon-secondary, border-default, border-strong. Also add hover and active state variants for interactive elements.
3. Primitive Dimensions — create a spacing scale: 0, 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80. And a radius scale: 0, 2, 4, 8, 12, 16, 9999 (full round).
4. Semantic Typography — create a typography token system for: display-large, display-medium, heading-1 through heading-4, body-large, body-medium, body-small, caption, and overline. Include font family, font size, line height, and font weight as separate tokens. Also create Figma text styles and map the typography variables to them.
```

**Co Claude tworzy w wyniku:**

Claude zaczyna autonomicznie pracować w pliku Figma. Po kilku minutach w panelu Variables pojawia się:

- **Primitive Colors** — pełny zestaw ramp kolorystycznych, poprawnie zorganizowanych w kolekcjach.
- **Semantic Colors** — wszystkie prawidłowo odnoszą się do kolekcji prymitywnej (nie są to hardkodowane wartości hex, ale rzeczywiste powiązania).
- **Tokeny UI** — tło, tekst, ikony i obramowania ze stanami hover oraz active.
- **System typograficzny** — style tekstu przypisane do odpowiednich zmiennych.
- **Tokeny rozmiarów** — skale odstępów i promieni, gotowe do użycia.

Semantyczne tokeny są prawidłowo aliasowane do prymitywów — oznacza to, że zmiana jednego koloru prymitywnego automatycznie kaskaduje się przez cały system. Tak właśnie buduje się solidny system designu ręcznie, tylko tutaj zajmuje to minuty, a nie godziny.

> [!TIP]
> Po wygenerowaniu zweryfikuj wartości kolorów zgodnie z wytycznymi marki. AI wybiera rozsądne domyślne wartości, ale konkretny odcień Twojej marki prawdopodobnie różni się od wygenerowanego. Zmień prymitywy — a cała warstwa semantyczna zaktualizuje się automatycznie.

## 5. Tworzenie złożonego komponentu przycisku: ponad 120 wariantów

Prawdziwy test obciążeniowy dla przepływu pracy to komponent przycisku nie w uproszczonej formie, ale z pełną surowością systemu designu.

**Prompt do utworzenia komponentu:**

```text
Create a button component in my Figma file with the following specifications:

Variants:
- Type: Primary, Secondary, Tertiary, Danger
- Size: Small (32px height), Medium (40px height), Large (48px height)
- State: Default, Hover, Active, Disabled
- Layout: Label only, Label + Leading icon, Label + Trailing icon, Icon only, Label + Leading icon + Trailing icon

Requirements:
- Use the variable tokens we just created for all colours, spacing, and radius
- Apply proper auto-layout with appropriate padding and gap values from our dimension tokens
- Use the correct text styles from our typography system
- For icons, use a simple placeholder icon (16x16 for small, 20x20 for medium, 24x24 for large)
- Make sure component properties are properly set up for easy variant switching
- Add proper naming convention: Button/[Type]/[Size]/[State]/[Layout]
```

Generowanie zajmuje zauważalnie więcej czasu i pochłania znaczną część limitu użycia. W rezultacie otrzymujemy pełnoprawny zestaw komponentów z ponad 120 wariantami.

**Co działa świetnie:**

- **Struktura auto-layoutu jest poprawna:** właściwe paddingi i gap, wszystko z tokenów rozmiarów.
- **Kolory są przypisane precyzyjnie:** przyciski primary używają kolorów primary, danger — error-reds, wszystko z tokenów semantycznych.
- **Style tekstu:** zastosowane poprawnie do wszystkich wariantów.
- **Właściwości komponentu:** skonfigurowane do wygodnego przełączania stanów.
- **Konwencja nazewnictwa:** w pełni zachowana.

**Co będzie wymagało ręcznych poprawek:**

- **Ikony:** Claude ma trudności z tworzeniem prawdziwych ikon. Generowane są figury zastępcze, ale nie zawsze dokładne. Lepiej wskazać konkretny prosty kształt („use a star shape” lub „use an arrow”) lub zamienić wektor ręcznie.
- **Stan ładowania (Loading state):** pozycjonowanie spinnera może się przesunąć przez absolute positioning — wymagana szybka ręczna korekta.
- **Drobne rozbieżności w paddingach:** w kilku wariantach mogą różnić się wartości odstępów (poprawka zajmuje 2–3 minuty).

Dla komponentu, którego ręczne zbudowanie od zera zwykle zajmuje 2–3 godziny — z wariantami, tokenami i auto-layoutem — Claude wykonuje około 85% pracy poprawnie. Pozostałe 15% to szybkie ręczne dopracowanie.

## 6. Składamy ekran na podstawie systemu designu

Finalny test: czy Claude potrafi złożyć pełnoprawny ekran, korzystając z systemu designu, który właśnie stworzył? Kluczowy warunek — nie generować wszystkiego od nowa, ale używać istniejących komponentów i zmiennych.

**Prompt do utworzenia ekranu logowania:**

```text
Design a login screen in my Figma file using the design system we've created.

Use the following specifications:
- Frame: 1440x900 desktop size
- Layout: Split screen — left side with a branded visual/illustration area, right side with the login form
- Right side form includes: Logo placeholder at top, "Welcome back" heading (use heading-2 text style), email input field, password input field with show/hide toggle, "Forgot password?" text link, primary login button (use our button component — large size, primary type), "Or continue with" divider, social login buttons (Google, Apple), "Don't have an account? Sign up" text at bottom
- Use our variable tokens for all colours, spacing, and typography
- Apply proper auto-layout throughout
- Left side: Use background-secondary colour with a centered placeholder for illustration
```

**Co Claude składa w wyniku:**

Gotowy ekran logowania z poprawną strukturą. Ogólny układ jest zachowany — prawidłowy split-screen, formularz dobrze zorganizowany, tokeny designu używane na całym ekranie.

**Co imponuje:**

- **Reużycja systemu:** Claude używa właśnie stworzonego komponentu przycisku, a nie rysuje nowego prostokąta stylizowanego na przycisk.
- **Hierarchia typograficzna:** heading styles, body text, caption — wszystko pobrane z systemu tokenów.
- **Spójne odstępy:** zachowane dokładnie według skali rozmiarów.
- **Ogólna kompozycja:** profesjonalna i gotowa do przekazania do developmentu.
- **Auto-layout zastosowany poprawnie:** sprawia, że ekran jest responsywny.

**Co będzie wymagało dopracowania:**

- Wizualne polerowanie przycisków logowania społecznościowego.
- Zastępcza ilustracja na lewym panelu jest podstawowa (to oczekiwane).
- Drobne wyrównania w wewnętrznych odstępach formularza.

Wynik to nie prototyp do wyrzucenia, ale pełnoprawna baza do dalszego rozwoju produktu.

## 7. Uczciwa analiza: gdzie AI radzi sobie, a gdzie nie

**Gdzie Claude + Figma działają wyjątkowo dobrze:**

- **Systemy zmiennych i tokenów:** tutaj AI pokazuje się z najlepszej strony. Pełna architektura tokenów, na którą ręcznie schodzi godziny, jest składana w minuty, a struktura wychodzi poprawna.
- **Scaffolding komponentów:** generowanie szkieletu złożonych komponentów z poprawnym auto-layout, skonfigurowanymi properties i tokenami oszczędza ogromną ilość czasu.
- **Komponowanie ekranów:** tworzenie ustrukturyzowanych layoutów, które wykorzystują dostępne komponenty i tokeny systemu designu, daje naprawdę użyteczny rezultat.
- **Spójność systemu designu:** ponieważ reguły są definiowane w prompcie z góry, Claude utrzymuje spójność bardziej rygorystycznie niż większość projektantów robi to ręcznie.

**Gdzie AI jeszcze nie dorasta:**

- **Niuansy wizualne:** AI nie ma artystycznego gustu. Wyniki są strukturalnie poprawne, ale pozbawione drobnych poprawek, które czynią design naprawdę wyrafinowanym.
- **Ikony i ilustracje:** Claude słabo radzi sobie z generowaniem normalnych ikon. Zawsze dostarczaj referencyjne ikony lub używaj specjalistycznych pluginów.
- **Limity użycia:** złożone komponenty szybko wyczerpują limity Claude. Planuj sesje z wyprzedzeniem.
- **Pozycjonowanie:** absolute positioning oraz obsługa overflow czasem wymagają ręcznego porządkowania.

> [!NOTE]
> **Podsumowanie:** ten workflow nie zastępuje myślenia projektowego. Ale radykalnie skraca fazę wykonania. Claude bierze na siebie 70–85% mechanicznej pracy przy budowie systemu designu, uwalniając czas na decyzje, które naprawdę mają znaczenie: strategia, scenariusze użytkownika, edge cases i wizualne polerowanie.

## 8. Wskazówki dotyczące promptów: wzorce, które działają

Po praktyce z tym workflow odkryto wzorce, które stabilnie dają lepsze wyniki:

- **Jawnie wskazuj na użycie tokenów:** zawsze pisz „use the variable tokens we created”, inaczej Claude może hardkodować wartości bezpośrednio.
- **Definiuj konwencję nazewnictwa:** Claude podąża za dowolnym wzorcem nazewnictwa, który zdefiniujesz. Bądź konkretny, inaczej otrzymasz niespójne nazwy.
- **Rozbijaj złożone zadania na kroki:** nie proś o utworzenie zmiennych, komponentów i ekranów w jednym prompcie. Rób to sekwencyjnie.
- **Odwołuj się do istniejących elementów:** pisz „use our button component”, a nie „create a button”, jeśli chcesz ponownie wykorzystać to, co już zostało stworzone.
- **Definiuj rozmiary jawnie:** „40px height with 12px vertical padding and 16px horizontal padding” działa lepiej niż „medium size”.
- **Zawsze sprawdzaj wynik:** przeglądaj Panel Variables, Panel Layers, właściwości komponentów. AI poprawnie buduje strukturę, ale detale wymagają ludzkiego oka.