Wyobraź sobie: budujesz interfejs w Claude Code, piszesz jedną prostą komendę „Wyślij to do Figmy” i gotowy, działający ekran ląduje w Figmie jako pełnowartościowe, edytowalne warstwy – z komponentami, spacingiem, kolorami i typografią. Zero screenshotów, zero ręcznego odrysowywania.A potem? Robisz poprawki bezpośrednio na canvasie Figmy i prosisz Claude’a, żeby wciągnął zmiany z powrotem do kodu.Brzmi jak magia? To już działa – dzięki Figma MCP Server + Claude Code integration (oficjalna nazwa funkcji: Claude Code to Figma / Code to Canvas). Poniżej krok po kroku, jak to skonfigurować w 2026 roku.
Co zyskujesz po konfiguracji?
- Generujesz UI w Claude Code → jednym zdaniem wysyłasz do Figmy
- Edytujesz wizualnie w Figmie (odstępy, warianty, kolory, typografia)
- Wysyłasz poprawiony design z powrotem do Claude’a → kod się aktualizuje
- Iterujesz błyskawicznie pomiędzy kodem a designem
Wymagania wstępne
- Zainstalowany Node.js (najnowsza LTS, pobierz z nodejs.org)
- Figma Desktop (nie przeglądarkowa wersja – MCP działa lokalnie)
- Konto Claude (Pro / Team / Console API – dowolne)
- Konto Figma z włączonym Dev Mode (najlepiej Figma Professional / Organization)
Krok 1 – Instalacja Claude CodeOtwórz terminal i zainstaluj globalnie:
bash
npm install -g @anthropic-ai/claude-codeSprawdź, czy działa:
bash
claudePowinien uruchomić się interfejs CLI i zapytać o logowanie.
Zaloguj się przez przeglądarkę (wybierz „Claude Pro / Team” lub „Anthropic Console API” – w zależności od Twojego konta).
Krok 2 – Włącz MCP Server w Figmie (lokalny)To najważniejszy krok – bez niego nic nie zadziała.
- Otwórz aplikację Figma Desktop
- Wejdź w Preferences / Ustawienia → sekcja Dev Mode
- Włącz opcję Dev Mode MCP Server (czasami nazywa się „Enable MCP Server”)
- Po włączeniu Figma uruchomi lokalny serwer na http://127.0.0.1:3845/sse
Gotowe – Figmma jest teraz gotowa przyjmować połączenia.
Krok 3 – Połącz Claude Code z Figma MCPW terminalu uruchom Claude Code (jeśli nie jest uruchomiony):
bash
claudeTeraz dodaj Figma MCP jednym poleceniem (najnowsza zalecana metoda w lutym 2026):
bash
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sseAlternatywnie (jeśli chcesz wersję remote / stabilniejszą):
bash
claude mcp add --transport http figmaW Claude Code wpisz:
/mcpNa liście pojawi się „figma” (lub „figma-dev-mode-mcp-server”).
Kliknij → Authenticate → zaloguj się do Figmy w przeglądarce i autoryzuj.
Krok 4 – Sprawdź, czy wszystko działaW Claude Code wpisz:
/figmaJeśli widzisz listę dostępnych narzędzi (m.in. generate_figma_design, send to Figma itp.) – sukces! Połączenie jest aktywne.
Krok 5 – Jak używać w praktyce (najlepszy flow)
- W Claude Code budujesz projekt jak zwykle
(„Stwórz responsywny dashboard z sidebar i kartą statystyk…”) - Kiedy masz działający interfejs w przeglądarce (Claude uruchamia lokalny dev server):Powiedz po prostu:
Wyślij ten projekt do Figmyalbo
Send this to Figma - Claude prześle bieżący stan przeglądarki → w Figmie pojawi się nowy frame z edytowalnymi warstwami
- Edytujesz w Figmie → kopiujesz link do frame’a
- Wracasz do Claude Code i piszesz np.:
Zaktualizuj kod na podstawie zmian w tym frame’ie Figmy: [wklej link]
I lecisz dalej.
Najczęstsze problemy i rozwiązania
- „Nie widzę Figma w /mcp” → upewnij się, że MCP Server jest włączony w Figmie Desktop i nie jest zablokowany przez firewall
- „Błąd autoryzacji” → wyloguj się i zaloguj ponownie w Figmie + w Claude
- Chcesz wersję remote zamiast lokalnej? → sprawdź dokumentację Figma MCP → https://help.figma.com/hc/en-us/articles/32132100833559
- Działa tylko w przeglądarce → tak, funkcja łapie bieżący stan widoku w przeglądarce (localhost / staging / production)
Dlaczego warto już dziś?
Claude Code + Figma MCP to prawdopodobnie najszybszy most pomiędzy kodem a designem w 2026 roku. Zamiast rzucać screenshoty w Slacku albo odrysowywać UI po raz setny – po prostu przesyłasz żywy interfejs i iterujesz w obu narzędziach naraz.
Konkretny, realistyczny przykład użycia połączenia Claude Code Figma dla landing page jednego konkretnego produktu fizycznego.
Wybrałem popularny i wizualnie atrakcyjny produkt w 2026 roku: przenośny ekspres do kawy na kapsułki / saszetki typu „pour-over on the go” (np. fikcyjna marka PeakBrew – kompaktowy, składany ekspres do kawy z termicznym kubkiem i wkładem na 3–4 filiżanki, idealny dla podróżników, biura i kempingu). Produkt w skrócie (typowy fizyczny high-ticket gadget 2026)
- Nazwa: PeakBrew Travel
- Cena: 349 zł (promocja launch: 289 zł)
- Kluczowe cechy: składany silikon + stal nierdzewna, termiczny kubek 450 ml, kompatybilny z kapsułkami Nespresso / saszetkami drip, filtr wielokrotnego użytku, BPA-free, waga 380 g
- Grupa docelowa: nomadzi cyfrowi, kempingowcy, osoby dojeżdżające do pracy, miłośnicy specialty coffee
Krok po kroku – pełny flow w Claude Code + Figma
- Uruchamiasz Claude Code i dajesz szczegółowy prompt startowy (copy-paste gotowy do użycia):
Stwórz konwertującą landing page dla fizycznego produktu: PeakBrew Travel – przenośny ekspres do kawy na kapsułki i drip. Tech stack: Next.js 15 + Tailwind CSS + shadcn/ui + Framer Motion (subtelne animacje wejścia). Struktura strony (single-page, mobile-first, bardzo dużo zdjęć produktu): 1. Hero section (full-width, wysokość ~100vh) - Główny nagłówek: „Twoja idealna kawa – gdziekolwiek jesteś” - Podtytuł: „Składany ekspres PeakBrew Travel. Kapsułki, drip, french press w jednym urządzeniu. 380 g. Kubek termiczny w zestawie.” - 2 CTA: „Kup teraz – tylko 289 zł (zamiast 349 zł)” + „Zobacz, jak działa (wideo 45 s)” - Tło: lifestyle zdjęcia – kawa na szczycie góry, w pociągu, w biurze + duży produkt centralnie (360° obracany mockup lub kilka ujęć) 2. Sekcja „Dlaczego PeakBrew?” (3–4 karty w gridzie) - Ultra-kompaktowy – mieści się w plecaku 20 l - 3 w 1: kapsułki / saszetki drip / sypana kawa - Gorąca kawa przez 4–6 godzin (podwójna ścianka termiczna) - Łatwe czyszczenie – wszystko można myć w zmywarce 3. Sekcja „Jak to działa” (3–4 kroki z numerami + animowanymi GIF-ami / zdjęciami) 1. Rozłóż w 8 sekund 2. Włóż kapsułkę / saszetkę / zmieloną kawę 3. Zalej wodą z termosu 4. Ciesz się kawą specialty 4. Sekcja galerii zdjęć / 360° (duże zdjęcia produktu z różnych kątów + zoom) 5. Sekcja Opinie / Social proof - 4–5 fikcyjnych recenzji z gwiazdkami („Najlepsza kawa w trasie od roku – 5/5”) - Zdjęcia użytkowników + loga „Polecają: Outdoor Mag, Coffee Geek PL” 6. Sekcja „Co jest w zestawie” - Lista bullet points + zdjęcie unboxingu 7. Pricing + CTA duży (limited stock – „Tylko 120 szt. w promocji”) - Cena przekreślona 349 zł → 289 zł - Darmowa wysyłka powyżej 200 zł - 30 dni zwrotu 8. FAQ accordion (6 pytań: kompatybilność, czyszczenie, gwarancja itp.) 9. Footer + finalny CTA Paleta: primary #4F46E5 (indigo), accent #F59E0B (amber), neutral slate-50/900. Fonty: Inter + Satoshi (nagłówki). Dodaj parallax / fade-in na scroll + hover efekty na zdjęciach. Zrób bardzo mocny nacisk na zdjęcia produktu – minimum tekstu, maksimum wizualizacji. Uruchom dev server i otwórz preview w przeglądarce.Claude generuje stronę → masz działający localhost:3000 w ~3–5 minut.
- Sprawdzasz podgląd
→ Hero super, ale zdjęcia produktu są za małe na desktopie, kroki są za ciasno, przycisk CTA za niski kontrast na mobile, brakuje animacji rozkładania ekspresu. - W Claude Code wpisujesz:
Wyślij tę stronę do Figmy→ W Figmie pojawia się frame „PeakBrew Travel – Landing v1” z edytowalnymi warstwami (zdjęcia jako komponenty, auto-layout sekcji, variables kolorów).
- W Figmie poprawiasz i tworzysz warianty (10–20 minut):
- Wariant A: większy produkt w hero (scale 1.4×), neonowy outline wokół kubka
- Wariant B: hero z wideo loop (placeholder 10 s rozkładania ekspresu)
- Wariant C: ciemny motyw (black friday vibe) + pomarańczowe akcenty
- Wariant D: minimalistyczny – tylko 3 zdjęcia + duży zegar „promocja kończy się za 48 h”
- Poprawiasz: padding 16→32 px, większe zdjęcia (min-width 600 px na mobile), nowe ikony w krokach, shadow pod kartami „Dlaczego PeakBrew”
Kopiujesz link do najlepszego wariantu (np. v2 – ten z wideo + większym produktem).
- Wracasz do Claude i prosisz o aktualizację:
Zaktualizuj landing page PeakBrew na podstawie Figmy. Najlepsza wersja: https://www.figma.com/file/abc987/PeakBrew-Landing?node-id=56:2345 Zachowaj strukturę Next.js i całą logikę, ale wprowadź zmiany: - hero: produkt 1.4× większy + centralny + wideo background placeholder - zwiększ padding sekcji do 48–64 px - ciemniejszy motyw z akcentem amber #F59E0B - większe zdjęcia w galerii + zoom on hover - animacja rozkładania ekspresu (prosty Framer Motion sequence) - przyciski CTA wyższe (h-14 → h-16), text-lg → text-xl - dodaj countdown timer w sekcji pricing (statyczny na razie: 48 h) Wygeneruj nowy kod i odśwież preview.Claude aktualizuje → strona wygląda znacznie bardziej premium i konwertująco.
Co zyskujesz w tym fizycznym produkcie
- W 45–90 minut masz 4–5 żywych wariantów landing page z prawdziwymi zdjęciami produktu
- Możesz porównywać wersje w Figmie obok siebie (np. jasny vs ciemny motyw)
- Zmiany wizualne (rozmiar zdjęć, kolory, animacje) nie rozwalają kodu HTML/JS
- Od razu wrzucasz preview na Instagram / TikTok / Allegro Ads i testujesz CTR