Ta strona używa plików ciasteczka do celów analitycznych i poprawy komfortu użytkowania. Klikając „Akceptuję”, wyrażasz zgodę na używanie przez nas plików ciasteczka. Dowiedz się więcej w naszej polityce prywatności.

AI + Figma w 2026: Kompletny poradnik projektowania z AI — od zera do design systemu w minuty

Design • Łukasz Ślusarski Łukasz Ślusarski • • 11 min czytania • 951 wyświetleń
AI + Figma w 2026: Kompletny poradnik projektowania z AI — od zera do design systemu w minuty

Przez 20 lat workflow projektanta wyglądał tak samo: otwórz Figmę, rysuj piksele, przekaż devowi, dev interpretuje na swój sposób, popraw, powtórz. W 2026 roku ten cykl się kończy.

Wyobraź sobie, że mówisz do terminala:

„Stwórz design system z pomarańczowym kolorem przewodnim. Dodaj przyciski w trzech rozmiarach, inputy, checkboxy, karty i system typografii. Rozłóż wszystko czytelnie.”

I po kilku minutach w Twojej Figmie — nie w jakimś mockupie, nie w podglądzie, ale w Twoim prawdziwym pliku Figma — pojawiają się komponenty, palety kolorów, tokeny designowe i pełna typografia. Gotowe do użycia.

To nie science fiction. To Claude Code + Figma Console MCP — setup, który skonfigurujesz po przeczytaniu tego artykułu.

Co dokładnie zyskujesz?

Tradycyjne projektowanie Projektowanie z AI w 2026
Design system od zera: 2-4 tygodnie Design system od zera: 30-60 minut
Tokeny kolorów ręcznie: godziny Pełna paleta 50-950: jedna komenda
Warianty przycisków: dzień pracy 18 wariantów: minuty
Handoff design → dev: niekończące się iteracje AI generuje i design, i kod: jeden pipeline

Ten artykuł to kompletna instrukcja — od instalacji po generowanie pierwszego design systemu. Bez skrótów, bez pominięć.

1. Jak to działa? Architektura AI + Figma

MCP — Model Context Protocol

MCP to otwarty protokół stworzony przez Anthropic, który pozwala AI łączyć się z zewnętrznymi narzędziami. Pomyśl o nim jak o USB dla AI — jeden standard, wiele urządzeń.

Trzy warstwy połączenia

Nasz setup składa się z trzech komplementarnych narzędzi MCP:

Warstwa Narzędzie Rola Kierunek
Odczyt plugin:figma:figma Oficjalny Figma MCP — czyta designy Figma → AI
Zapis figma-console (South Left) 56+ narzędzi do tworzenia w Figmie AI → Figma
Wiedza design-systems (South Left) Baza wiedzy o best practices Kontekst

Oficjalny plugin Figma pozwala AI czytać Twoje pliki — analizować kolory, typografię, strukturę komponentów. Ale nie pozwala nic tworzyć.

Figma Console MCP od South Left to game-changer. Daje AI dostęp do pełnego API Figmy: tworzenie ramek, komponentów, zmiennych, stylów, tekstu — dosłownie wszystkiego, co możesz zrobić ręcznie w Figmie.

Design Systems Assistant to baza wiedzy, która mówi AI jak prawidłowo projektować — jakie proporcje przycisków, jakie skale kolorów, jakie zasady accessibility.

Razem tworzą pipeline, w którym AI nie tylko wie jak tworzyć, ale też co jest dobrą praktyką.

Potrzebujesz pomocy z tym tematem?

Pomagam firmom wdrażać nowoczesne rozwiązania. Umów bezpłatną 30-minutową rozmowę.

Umów bezpłatną rozmowę →
Potrzebujesz pomocy z tym tematem?

2. Co potrzebujesz? Wymagania

Konta i subskrypcje

Wymaganie Koszt Dlaczego
Figma Pro ~$20/mies. Dostęp do API, Dev Mode, pluginy
Claude Pro lub Max $20-100/mies. Claude Code wymaga subskrypcji
GitHub (opcjonalnie) Darmowe Wersjonowanie projektu

Narzędzia na komputerze

Narzędzie Sprawdź komendą Instalacja
Node.js (v18+) node --version nodejs.org
npm npm --version Instaluje się z Node.js
Git git --version brew install git (macOS)
Figma Desktop Otwórz aplikację figma.com/downloads

3. Krok 1: Instalacja Claude Code

Claude Code to narzędzie CLI od Anthropic. Działa w terminalu i daje dostęp do modeli Claude z możliwością używania narzędzi, edycji plików i łączenia się z MCP.

Instalacja

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

Weryfikacja

claude --version

Przy pierwszym uruchomieniu Claude Code poprosi o zalogowanie się kontem Anthropic. Po zalogowaniu jesteś gotowy.

Przydatne komendy

Komenda Co robi
claude Uruchom nową sesję
claude -c Wznów ostatnią sesję
claude -r Picker sesji — wybierz z listy
/exit Zamknij sesję
/rename nazwa Nazwij sesję
Zrób to z ekspertem Bezpłatna 30-minutowa konsultacja — bez zobowiązań.
Zarezerwuj termin →

4. Krok 2: Token Figma (Personal Access Token)

Token pozwala Claude Code komunikować się z API Figmy.

  1. Otwórz figma.com → Kliknij avatar → Settings
  2. Przejdź do zakładki Security
  3. Przewiń do Personal Access Tokens
  4. Kliknij Generate new token
  5. Nazwa: Claude Code MCP
  6. Zaznacz wszystkie scopes (uprawnienia)
  7. Kliknij Generate token

Ważne: Token zobaczysz tylko raz — skopiuj go natychmiast. Zaczyna się od figd_. Zapisz go w bezpiecznym miejscu.

5. Krok 3: Figma Console MCP — serce systemu

To najważniejszy element całego setupu. Figma Console MCP od firmy South Left daje AI dostęp do 56+ narzędzi do tworzenia i edycji elementów bezpośrednio w Twoim pliku Figma.

Co potrafi?

Kategoria Narzędzia Przykłady
Tworzenie figma_execute, figma_create_child Ramki, kształty, tekst, komponenty
Zmienne figma_setup_design_tokens, figma_batch_create_variables Kolory, spacing, typografia
Komponenty figma_search_components, figma_get_component Wyszukiwanie, analiza, instancje
Style figma_get_styles, figma_set_fills Kolory, efekty, typografia
Walidacja figma_take_screenshot, figma_get_design_system_summary Screenshoty, audyt

Instalacja — jedna komenda

Otwórz terminal poza sesją Claude Code i wpisz:

claude mcp add figma-console -s user \
  -e FIGMA_ACCESS_TOKEN=figd_TWOJ_TOKEN \
  -e ENABLE_MCP_APPS=true \
  -- npx -y figma-console-mcp@latest

Zamień figd_TWOJ_TOKEN na Twój Personal Access Token z kroku 2.

Flaga -s user oznacza instalację globalną — MCP będzie dostępny z każdego projektu w Claude Code.

Weryfikacja

claude mcp list

Powinieneś zobaczyć: figma-console: ✓ Connected

Uwaga: Plik ~/.claude/mcp_settings.json to konfiguracja Claude Desktop (aplikacja desktopowa), a NIE Claude Code CLI. To częsty błąd przy konfiguracji. Claude Code CLI trzyma konfigurację w ~/.claude.json.

6. Krok 4: Design Systems Assistant — mózg systemu

Design Systems Assistant to drugi MCP od South Left. Nie tworzy elementów w Figmie — zamiast tego daje AI wiedzę o best practices: proporcje przycisków, skale kolorów, zasady accessibility, organizacja tokenów.

Instalacja

claude mcp add --transport http -s user \
  design-systems https://design-systems-mcp.southleft.com/mcp

Bez tego MCP Claude tworzy designy „na oko”. Z nim — odpytuje bazę wiedzy o sprawdzonych wzorcach zanim cokolwiek stworzy. Różnica jest jak między juniorem a seniorem designerem.

7. Krok 5: Figma Desktop Bridge — połączenie z Figmą

Figma Console MCP potrzebuje sposobu na komunikację z Twoją desktopową aplikacją Figma.

Opcja A: Desktop Bridge Plugin (zalecana)

Łączy się przez WebSocket — nie wymaga specjalnych flag przy uruchamianiu Figmy.

  1. Znajdź ścieżkę do pluginu: npx -y figma-console-mcp@latest --print-path
  2. W Figmie: Plugins → Development → Import plugin from manifest…
  3. Wybierz plik figma-desktop-bridge/manifest.json
  4. Uruchom plugin — powinieneś zobaczyć okienko „MCP Ready”

Opcja B: Remote Debugging (fallback)

Zamknij Figmę i uruchom z terminala:

# macOS
open -a "Figma" --args --remote-debugging-port=9222

# Windows
"%LOCALAPPDATA%\Figma\Figma.exe" --remote-debugging-port=9222
Desktop Bridge (A) Remote Debugging (B)
Łatwość Łatwiejsze Wymaga restartu Figmy
Stabilność Mniej stabilne Bardziej stabilne
Restart Figmy Nie wymaga Wymaga za każdym razem

8. Krok 6: Konfiguracja projektu (CLAUDE.md)

CLAUDE.md to plik, który Claude Code czyta automatycznie przy każdej sesji w danym projekcie. To Twoja „pamięć” — mówi AI jak ma pracować.

# Design AI Project

## Workflow tworzenia design systemu w Figmie

### Kolejność pracy (zawsze):
1. Sekcja/Frame — nigdy nie twórz elementów na pustym canvas
2. Design Tokens — kolory, spacing, typografia
3. Komponenty bazowe — przyciski, inputy, badges, karty
4. Warianty — stany i rozmiary
5. Kompozycje — sekcje strony złożone z komponentów
6. Walidacja wizualna — screenshot po każdej zmianie

### Zasady:
- Zawsze twórz elementy wewnątrz Section/Frame
- Używaj Auto Layout na wszystkich kontenerach
- Batch operacje zamiast pojedynczych (10-50x szybciej)
- Nazywaj warstwy semantycznie (btn-primary-lg, nie Rectangle 5)
- Po tworzeniu: screenshot → sprawdź → popraw (max 3 iteracje)

Bez CLAUDE.md Claude tworzy elementy na pustym canvas, nie używa Auto Layout, nazywa warstwy „Rectangle 1″. Z CLAUDE.md — stosuje się do Twoich zasad od pierwszego polecenia.

9. Krok 7: Custom agents i skills

To warstwa, która zamienia Claude Code z „narzędzia AI” w specjalistę od design systemów.

Custom Agent: Design System Builder

Stwórz plik .claude/agents/design-system-builder.md w katalogu projektu. Agent ten definiuje pełny workflow budowania design systemu:

  • Faza 1: Sprawdzenie statusu Figmy i istniejących elementów
  • Faza 2: Tworzenie design tokenów (kolory, spacing, radius, font sizes)
  • Faza 3: System typografii (H1-H6, body, caption)
  • Faza 4: Komponenty bazowe (buttons, inputs, badges, cards, alerts)
  • Faza 5: Walidacja wizualna ze screenshotami

Skills — szybkie akcje

Skills to jak checklisty dla AI. Tworzysz je w .claude/skills/:

  • figma-design-system — generuj kompletny design system
  • figma-component — stwórz pojedynczy komponent z wariantami
  • figma-audit — audyt istniejącego designu ze scorecardem

To jak budowanie zespołu: CLAUDE.md to brief projektowy, agent to senior designer, skills to checklisty, a MCP to narzędzia w rękach designera.

10. Test: Pierwszy element w Figmie

Zanim wygenerujesz cały design system, przetestuj połączenie.

  1. Uruchom Claude Code: claude
  2. Wpisz: check figma status
  3. Oczekiwany wynik: ✅ Connected to Figma Desktop via WebSocket Bridge
  4. Wpisz: „Stwórz w Figmie testową kartę: pomarańczowe tło, zaokrąglone rogi, biały tekst Hello from AI, wewnątrz sekcji Test.”

Jeśli w Twojej Figmie pojawi się karta — wszystko działa.

11. Generowanie pełnego design systemu

Teraz prawdziwa magia. Oto prompt, który generuje kompletny design system:

Stwórz kompletny design system w moim pliku Figma.

Styl: bold
Główny kolor: #FF6B00 (pomarańczowy)
Font: Inter

Potrzebuję:
1. Design tokens (kolory pełna skala 50-950, spacing, radius)
2. System typografii (H1-H6, body, caption)
3. Paleta kolorów (wizualne kwadraty z wartościami hex)
4. Przyciski (primary, secondary, outline × sm, md, lg)
5. Inputy (default, focus, error, disabled)
6. Checkboxy, radio buttony, toggle
7. Badges (info, success, warning, error)
8. Karty (basic, z obrazkiem, z akcjami)
9. Alerty (info, success, warning, error)

Rozłóż wszystko czytelnie, bez nakładania się elementów.
Każdy komponent w osobnej sekcji z Auto Layout.
Waliduj wizualnie screenshotem po każdym kroku.

Pro tip: Bądź konkretny

Im bardziej szczegółowy prompt, tym lepszy wynik. Porównaj:

Słaby prompt: „Zrób design system”

Dobry prompt: „Stwórz design system w stylu Massimo Vignelli — bold, geometryczny, z mocnym pomarańczowym (#FF6600) jako kolorem primary. Inter Bold dla nagłówków, Inter Regular dla body. Skala 8px. Przyciski z border-radius 8px.”

Czego spodziewać się?

Generowanie pełnego design systemu zajmuje 5-15 minut. Claude tworzy sekcje, definiuje zmienne, buduje komponenty, robi screenshoty do walidacji i poprawia błędy (do 3 iteracji).

Traktuj to jak 90% pracy zrobionej za Ciebie — ostatnie szlify robisz ręcznie.

12. Workflow w obu kierunkach

Kierunek 1: Prompt → Figma (AI tworzy design)

„Stwórz hero section z dużym nagłówkiem, podtytułem, dwoma przyciskami i obrazkiem po prawej stronie.”

AI tworzy gotowy layout bezpośrednio w Twoim pliku Figma.

Kierunek 2: Figma → Kod (AI czyta design i generuje kod)

„Przeczytaj mój design z [URL Figma]. Wygeneruj komponent React z Tailwind CSS, ze wszystkimi wariantami.”

Kierunek 3: Figma → Figma (AI audytuje i poprawia)

„Zaudytuj mój design system. Sprawdź konsystencję kolorów, spacingu i nazewnictwa. Daj scorecard i listę poprawek.”

4-fazowy workflow (Designer’s Playbook)

Dla większych projektów:

  1. Analiza: „Przeczytaj mój design. Daj mi strukturę stron, kolory, typografię, komponenty.”
  2. Ekstrakcja: „Wyciągnij design tokeny. Stwórz konfigurację Tailwind.”
  3. Generowanie: „Wygeneruj React component z wariantami i TypeScript.”
  4. Budowanie: „Wygeneruj sekcję — responsywna, semantyczny HTML.”

13. Najlepsze prompty — ściągawka

Design System

Stwórz design system "[NAZWA]":
- Kolor primary: [HEX]
- Font: [NAZWA]
- Styl: [bold/minimal/corporate/playful]
- Komponenty: buttons, inputs, cards, badges, alerts
- Pełna skala kolorów 50-950
- Spacing na gridzie 8px

Pojedynczy komponent

Stwórz komponent [NAZWA] z wariantami:
- Typy: [primary, secondary, outline]
- Rozmiary: [sm, md, lg]
- Stany: [default, hover, disabled]
- Auto Layout, border-radius 8px

Audyt

Zaudytuj design w pliku [URL/NAZWA].
Sprawdź: tokeny, typografię, spacing, nazewnictwo.
Daj scorecard X/50 i listę poprawek.

Figma → Kod

Przeczytaj design z [URL FIGMA].
Stack: [Next.js + Tailwind / WordPress + Bricks]
Wygeneruj kod z wariantami i responsywnością.

14. Zaawansowane: Agent Teams

Agent Teams to eksperymentalna funkcja Claude Code, która pozwala koordynować wiele instancji AI pracujących równolegle.

Włączenie

Dodaj do ~/.claude/settings.json:

{
  "env": {
    "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1"
  },
  "teammateMode": "tmux"
}

Przykład użycia

Stwórz team do budowania design systemu:
- Teammate 1: tokeny i paleta kolorów
- Teammate 2: komponenty formularzy
- Teammate 3: komponenty nawigacji
Każdy pracuje w osobnej sekcji Figmy.

Trzy instancje Claude pracują równolegle — każda w swoim panelu tmux, koordynując się przez wspólną listę zadań.

15. Troubleshooting — gdy coś nie działa

„figma-console: Failed to connect”

Rozwiązanie: W Figmie: Plugins → Development → Figma Desktop Bridge → Run. Sprawdź czy widzisz „MCP Ready”. Jeśli nie: zamknij Figmę, uruchom z open -a "Figma" --args --remote-debugging-port=9222

„MCP server nie pojawia się po claude mcp list”

Rozwiązanie: Komendę claude mcp add musisz uruchomić poza sesją Claude Code. Użyj: CLAUDECODE="" claude mcp add ...

„Elementy nakładają się na siebie”

Rozwiązanie: Dodaj do prompta: „Rozłóż czytelnie, bez nakładania. Każdy komponent w osobnej sekcji.” Lub dodaj tę zasadę do CLAUDE.md.

„Claude tworzy na pustym canvas”

Rozwiązanie: Dodaj do CLAUDE.md: „Zawsze twórz elementy wewnątrz Section lub Frame, NIGDY na pustym canvas.”

Konfiguracja MCP — który plik?

Plik Narzędzie
~/.claude.json Claude Code CLI — globalna konfiguracja
<projekt>/.claude.json Claude Code CLI — per-projekt
~/.claude/mcp_settings.json Claude Desktop (inna aplikacja!)

Najczęstszy błąd: Edycja mcp_settings.json myśląc że to konfiguracja Claude Code CLI. To są dwa różne narzędzia z różnymi plikami konfiguracyjnymi.

16. Podsumowanie

Co zbudowaliśmy

Claude Code (AI)
  ├── figma-console MCP     → 56+ narzędzi do tworzenia w Figmie
  ├── design-systems MCP    → baza wiedzy o best practices
  ├── plugin:figma:figma    → odczyt designów
  ├── CLAUDE.md             → kontekst i zasady projektu
  ├── Custom Agent          → rola "design system builder"
  └── Skills                → szybkie akcje (komponent, audyt)

Dlaczego to zmienia grę?

  1. Szybkość — design system w minuty, nie tygodnie
  2. Konsystencja — AI stosuje te same zasady do każdego komponentu
  3. Dwukierunkowość — z promptu do Figmy, z Figmy do kodu
  4. Skalowalność — Agent Teams mogą pracować równolegle
  5. Wiedza — Design Systems Assistant daje AI ekspercką wiedzę

Przydatne linki

Artykuł powstał przy pomocy Claude Code — narzędzia, o którym w nim piszę. Meta? Może. Ale to najlepszy dowód, że działa.

Zostań w pętli

Nowe artykuły, narzędzia i case study — prosto na maila.

Newsletter - Blog

Czytaj również