Ilustracja 1 Збільшити

Ilustracja 1

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.

Ostrzeżenie

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 Збільшити

Czego potrzebujesz do pracy — ilustracja 2

2. Instalacja Claude Code

Przejdź na stronę 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 Збільшити

Czego potrzebujesz do pracy — ilustracja 3

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:

W aplikacji Claude Code przejdź do Settings.
Otwórz sekcję MCP Servers.
Kliknij „Add MCP Server”.
Wybierz Figma z listy dostępnych integracji.
Przeprowadź uwierzytelnianie przez konto Figma (flow OAuth).
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.

Wskazówka

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 Збільшити

Krok 3 — Tworzymy pełny system zmiennych przy pomocy AI — ilustracja 4

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.

Wskazówka

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.

Uwaga

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.