Claude MCP Figma pozwala połączyć asystenta AI z projektem i przekazywać mu nie tylko zrzut ekranu, ale też strukturę warstw, komponenty, zmienne oraz design tokeny. Dzięki temu handoff z Figmy do kodu może przebiegać bez ręcznego przepisywania kolorów, odstępów i wymiarów.

MCP, czyli Model Context Protocol, działa jak standardowe złącze między Claude a zewnętrznymi narzędziami. Serwer Figma MCP dostarcza kontekst projektu, a Claude może wykorzystać go do analizy layoutu lub wygenerowania komponentu React z Tailwind CSS. Do pracy graficznej wybierz Claude Desktop, a do terminala i repozytorium – Claude Code.

Czego potrzebujesz przed startem?

Przed konfiguracją przygotuj środowisko i sprawdź dostęp do pliku Figma:

  • Konto Figma z dostępem do Dev Mode oraz funkcji MCP dostępnych w Twoim planie.
  • Personal Access Token Figma, jeśli wybrany serwer wymaga uwierzytelnienia tokenem.
  • Zainstalowany Claude Desktop albo Claude Code CLI.
  • Node.js i npm, jeśli serwer MCP będzie uruchamiany przez npx.
  • Plik Figma z uporządkowanymi komponentami, nazwanymi warstwami i używanymi zmiennymi.

Dobrze przygotowany projekt ułatwia generowanie kodu. Komponenty powinny mieć instancje zamiast przypadkowych duplikatów, a kolory, odstępy, promienie i typografia powinny korzystać ze zmiennych. Auto Layout pomaga odwzorować układ w sposób zbliżony do Flexboxa.

Claude Desktop czy Claude Code?

Oba środowiska mogą korzystać z MCP, ale służą do innego rodzaju pracy:

Tryb Miejsce pracy Zastosowanie
Claude Desktop Interfejs graficzny Szybkie pytania o plik, analizowanie projektu i praca bez terminala
Claude Code Terminal i repozytorium Generowanie plików, instalowanie zależności i wdrażanie zmian w kodzie
Cursor Edytor kodu z AI Praca z projektem React i podgląd zmian bez przełączania aplikacji

Jeżeli dopiero zaczynasz, Claude Desktop lub Cursor będą prostsze. Claude Code daje większą kontrolę nad repozytorium, konfiguracją i automatyzacją, ale wymaga swobodnego korzystania z terminala.

Jak skonfigurować Figma MCP?

  1. Utwórz token w Figmie – w ustawieniach konta wygeneruj Personal Access Token i nadaj mu możliwie ograniczone uprawnienia. Do pierwszych testów zacznij od trybu tylko do odczytu, jeśli serwer go obsługuje.
  2. Skopiuj link do pliku lub zaznaczenia – w Figmie wybierz ramkę, którą chcesz analizować, a następnie użyj opcji skopiowania linku do zaznaczenia.
  3. Dodaj serwer w Claude Desktop – otwórz plik konfiguracyjny MCP używany przez Claude Desktop i dodaj wpis w sekcji mcpServers.

Przykładowy fragment konfiguracji wygląda tak:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@figma/mcp-server"
      ],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_TU_WSTAW_TOKEN"
      }
    }
  }
}

Nazwa pakietu i wymagane zmienne środowiskowe mogą zależeć od wersji oraz dystrybucji serwera Figma MCP. Traktuj powyższy JSON jako schemat. Skopiuj nazwę pakietu i parametry z aktualnej dokumentacji używanego serwera, a w miejsce przykładowej wartości wstaw własny token.

  1. Zapisz konfigurację i uruchom ponownie Claude Desktop – aplikacja musi ponownie odczytać plik, aby załadować serwer.
  2. Skonfiguruj Claude Code, jeśli pracujesz w terminalu – w tym przypadku nie edytuj automatycznie pliku używanego przez Claude Desktop. Dodaj serwer poleceniem CLI.
claude mcp add --transport http figma https://mcp.figma.com/mcp

Następnie uruchom Claude Code i sprawdź listę serwerów poleceniem /mcp. Wybierz serwer Figma i przejdź przez autoryzację, jeśli zostanie wyświetlona. W zależności od wersji Claude Code konfiguracja globalna i projektowa może być zapisywana w innych plikach niż konfiguracja Claude Desktop. Nie zakładaj, że edycja jednego pliku zmieni wszystkie środowiska.

W Cursorze dodaj serwer MCP w ustawieniach aplikacji lub skorzystaj z jego instalatora MCP. Po zapisaniu zmian uruchom ponownie edytor i sprawdź, czy Figma pojawia się na liście dostępnych narzędzi.

Read-only czy Read/Write?

Uprawnienia dobierz do zadania. Dostęp tylko do odczytu wystarczy, gdy Claude ma analizować plik, pobierać tokeny, odczytywać komponenty i generować kod lokalnie. Tryb Read/Write jest potrzebny dopiero wtedy, gdy integracja ma tworzyć lub zmieniać obiekty bezpośrednio w Figmie.

Nie przechowuj tokenu w repozytorium, pliku README ani publicznym systemie kontroli wersji. Plik konfiguracyjny z sekretem dodaj do ignorowanych plików albo użyj zmiennych środowiskowych. Jeżeli token trafi do repozytorium, unieważnij go i utwórz nowy.

Jak wykorzystać połączenie Claude MCP Figma?

Po uruchomieniu integracji wklej Claude link do konkretnej ramki i określ oczekiwany format wyniku. Dobre polecenie wskazuje technologię, istniejące komponenty i zakres zmian:

  • Poproś o wyciągnięcie kolorów, typografii, odstępów i promieni z wybranej ramki oraz zwrócenie ich jako JSON design tokenów.
  • Poproś o wygenerowanie komponentu React z użyciem istniejących elementów z katalogu src/components, zamiast tworzenia duplikatów.
  • Poproś o analizę Auto Layout, szerokości, breakpointów i zachowania widoku na urządzeniach mobilnych.
  • Poproś o pobranie i zapisanie użytych ikon oraz obrazów w katalogu public/assets, a następnie o wskazanie brakujących zasobów.

Przykładowy prompt do generowania komponentu:

Użyj Figma MCP i przeanalizuj ramkę pod tym adresem:

FIGMA_URL = [wklej link do ramki]

Wygeneruj komponent React + TypeScript z Tailwind CSS.
Najpierw odczytaj design tokeny, warianty i strukturę layoutu.
Użyj istniejących komponentów z src/components/ui.
Nie twórz duplikatów Button ani Card.
Zwróć listę plików, które chcesz zmienić, a potem przygotuj implementację.
Uwzględnij responsywność i opisz różnice między projektem a kodem.

Przy większym widoku dobrze jest najpierw pobrać metadane i tokeny, a dopiero potem generować kod. Taki podział zmniejsza ryzyko, że model pominie komponenty albo potraktuje ręcznie wpisaną wartość jako osobny element systemu.

Co sprawdzić po wygenerowaniu kodu?

Nie traktuj pierwszego wyniku jako gotowego kodu produkcyjnego. Uruchom aplikację lokalnie, porównaj ją z projektem i sprawdź:

  • czy kolory, fonty, odstępy i promienie odpowiadają wartościom w Figmie,
  • czy obrazy i ikony ładują się z poprawnych ścieżek,
  • czy layout zachowuje się poprawnie na mobile, tablecie i desktopie,
  • czy przyciski, formularze i pozostałe interakcje mają oczekiwane stany.

Gdy znajdziesz różnicę, podaj Claude link do konkretnej ramki, opis problemu i – jeśli to możliwe – zrzut ekranu z implementacji. Zamiast prośby „popraw wygląd” napisz na przykład: „Na szerokości 390 px przycisk wychodzi poza kartę. Sprawdź Auto Layout w Figmie i popraw komponent bez zmiany desktopowego układu”.

Najczęstsze problemy z MCP Figma

Connection refused zwykle oznacza, że serwer nie został uruchomiony, aplikacja nie została zrestartowana albo użyto niewłaściwego transportu. Sprawdź komendę startową, nazwę pakietu i status serwera w /mcp lub ustawieniach klienta.

Błędny token wskazuje najczęściej na literówkę, wygasły token albo brak dostępu do konkretnego pliku. Utwórz nowy token, przetestuj go na pliku, do którego masz uprawnienia, i nie umieszczaj go bezpośrednio w promptach udostępnianych innym osobom.

Brak dostępu do pliku może wynikać z ograniczeń zespołu, niewłaściwego konta Figma lub linku do projektu, którego token nie może odczytać. Otwórz plik w przeglądarce na tym samym koncie i sprawdź, czy masz co najmniej uprawnienia do odczytu.

Claude nie widzi narzędzi Figma często oznacza edycję niewłaściwego pliku konfiguracyjnego. Claude Desktop i Claude Code są odrębnymi klientami, dlatego ich ustawienia nie muszą znajdować się w tym samym miejscu.

Najlepszy następny krok to podłączenie jednego serwera w trybie tylko do odczytu i przetestowanie go na małej ramce. Gdy Claude poprawnie odczyta tokeny oraz komponenty, możesz przejść do generowania kodu, a dopiero później rozważyć uprawnienia zapisu i bardziej zaawansowane automatyzacje.