Figma MCP pozwala połączyć projekt z Claude Code tak, aby agent odczytywał komponenty, zmienne, warstwy i zasoby, a następnie wykorzystywał je podczas pisania kodu. Najprostsza konfiguracja korzysta ze zdalnego serwera Figma i wymaga jednej komendy w terminalu oraz autoryzacji konta Figma.

Szybki start:

claude mcp add --transport http figma https://mcp.figma.com/mcp

Co daje połączenie Claude Code z Figma MCP?

Model Context Protocol, czyli MCP, jest standardem komunikacji między agentem AI a zewnętrznymi narzędziami. Można traktować go jak uniwersalne złącze, które pozwala Claude Code pobierać kontekst z Figmy bez ręcznego przepisywania kolorów, odstępów czy wymiarów.

Figma MCP Server udostępnia agentowi informacje potrzebne do pracy nad interfejsem. Claude Code może na ich podstawie analizować strukturę projektu, odczytywać design tokens, pobierać komponenty i generować kod zgodny z dostarczonym projektem. W praktyce skraca to drogę od designu do komponentu React.

Remote czy Local MCP?

Figma udostępnia zdalny i lokalny wariant serwera MCP. Dla pierwszej konfiguracji wybierz Remote, ponieważ nie wymaga uruchamiania dodatkowego serwera na komputerze.

Tryb Zalety Zastosowanie
Remote Prosta konfiguracja, brak lokalnej instalacji, stabilny start Odczytywanie projektów i generowanie kodu z wybranych ramek
Local Większa kontrola i praca oparta na zaznaczeniu w aplikacji Figma Zaawansowane workflow wymagające lokalnego środowiska
Remote i Local Mogą działać z klientami obsługującymi MCP, w tym Claude Code Zależnie od potrzeb zespołu i konfiguracji konta

Serwer lokalny jest przydatny wtedy, gdy potrzebujesz bardziej bezpośredniej pracy z aplikacją desktopową Figma. Na początek zdalny wariant zwykle wystarcza.

Jak skonfigurować Figma MCP w Claude Code?

Przed rozpoczęciem przygotuj:

  • zainstalowany Claude Code CLI
  • konto Figma z dostępem do pliku, który chcesz analizować
  • otwarty terminal
  • token dostępu Figma, jeśli konfiguracja używanego serwera wymaga autoryzacji tokenem
  1. Dodaj zdalny serwer MCP. Wykonaj w terminalu komendę claude mcp add --transport http figma https://mcp.figma.com/mcp.
  2. Uruchom Claude Code ponownie. Zamknij bieżącą sesję i otwórz ją ponownie, aby klient wykrył dodany serwer.
  3. Sprawdź połączenie. W sesji Claude Code wpisz /mcp, wybierz serwer figma i przejdź przez opcję autoryzacji.
  4. Udostępnij agentowi link do pliku lub zaznaczenia. Najlepiej użyć w Figmie opcji kopiowania linku do konkretnej ramki, komponentu albo strony.
  5. Wyślij polecenie testowe. Poproś Claude Code o opisanie struktury ramki, użytych kolorów, typografii i komponentów.

Jeżeli korzystasz z konfiguracji opartej na tokenie, token Figma może mieć prefiks figd_. Nie wpisuj go bezpośrednio do kodu aplikacji ani do plików wersjonowanych w repozytorium. Przechowuj sekret w zmiennej środowiskowej lub w lokalnym pliku konfiguracyjnym, którego nie dodajesz do Git.

Uwaga na pliki konfiguracyjne: Claude Code CLI korzysta z konfiguracji przechowywanej między innymi w ~/.claude.json. Plik ~/.claude/mcp_settings.json dotyczy konfiguracji Claude Desktop, czyli innej aplikacji. Edycja niewłaściwego pliku nie podłączy serwera do Claude Code.

Jak używać Figma MCP podczas kodowania?

Najlepsze rezultaty uzyskasz, gdy prompt zawiera link do konkretnej ramki, technologię, wymagania dotyczące istniejącego kodu oraz sposób obsługi assetów. Zamiast prosić o „zakodowanie Figmy”, określ, co agent ma najpierw odczytać i jak ma wykorzystać wynik.

Przykładowy prompt do wygenerowania komponentu React:

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

FIGMA_URL

Pobierz kontekst designu, komponenty, zmienne, kolory, typografię i odstępy.
Następnie zaimplementuj widok jako komponent React + TypeScript
z użyciem Tailwind CSS.

Wymagania:
- sprawdź, jakie komponenty istnieją już w src/components/ui/
- użyj istniejących komponentów zamiast tworzyć duplikaty
- zachowaj wartości i warianty z Figmy
- przygotuj responsywny układ
- pobierz potrzebne assety do public/assets/
- nie stosuj zastępczych obrazów ani przypadkowych wartości
- po implementacji wskaż pliki, które zostały zmienione

Możesz też rozdzielić pracę na dwa etapy. Najpierw poproś o pobranie tokenów, listy komponentów i struktury layoutu, a dopiero po zaakceptowaniu wyniku zleć napisanie kodu. Przy większych plikach ogranicza to liczbę błędnych założeń.

Przydatne polecenia obejmują:

  • odczytanie komponentów i wariantów użytych w wybranej ramce
  • wyciągnięcie kolorów, typografii, spacingu i promieni zaokrągleń
  • pobranie screenshotu jako wzorca wizualnego
  • porównanie elementów z Figmy z komponentami obecnymi w repozytorium
  • aktualizację jednego komponentu po zmianie designu, bez generowania całej strony od początku

Przed podłączeniem agenta przygotuj plik Figma w sposób, który ułatwia odczyt struktury:

  • Komponenty – elementy powtarzalne powinny być komponentami, a nie kopiami warstw.
  • Zmienne – kolory, odstępy i typografia powinny korzystać z design tokens zamiast przypadkowych wartości.
  • Nazewnictwo – warstwy powinny opisywać swoją funkcję, na przykład PrimaryButton albo ProductCard.
  • Auto Layout – układ oparty na Auto Layout daje agentowi lepszą informację o relacjach między elementami.
  • Adnotacje – krótkie notatki mogą wyjaśnić zachowanie interakcji i wariantów.

Jeśli w repozytorium działa już design system, możesz uzupełnić konfigurację projektu o plik CLAUDE.md. Umieść w nim zasady dotyczące używanego frameworka, ścieżek do komponentów, nazewnictwa, tokenów i testowania. Claude Code odczytuje taki plik jako kontekst projektu.

Na co uważać po wygenerowaniu kodu?

Figma MCP dostarcza agentowi kontekst, ale nie zastępuje przeglądu kodu. Sprawdź, czy wynik:

  • korzysta z istniejących komponentów zamiast tworzyć ich kopie
  • używa tokenów lub klas projektu zamiast powtarzać kolory hex i stałe odstępy
  • zachowuje warianty, stany i responsywność
  • ładuje assety z właściwych ścieżek
  • pasuje do frameworka i sposobu stylowania używanego w repozytorium

W przypadku dużego zespołu dodatkową pomocą może być Code Connect, czyli mapowanie komponentu z Figmy na jego implementację w kodzie. Dzięki temu agent łatwiej rozpoznaje, że przycisk lub karta już istnieją w repozytorium i nie powinien tworzyć nowej wersji.

Po wygenerowaniu komponentu uruchom aplikację lokalnie, porównaj ją z ramką w Figmie i przetestuj widoki mobilne. Jeżeli zauważysz rozbieżność, przekaż Claude Code konkretny opis problemu oraz link do właściwego zaznaczenia, zamiast regenerować cały projekt.

Następny krok: podłącz serwer komendą claude mcp add, sprawdź połączenie przez /mcp, a następnie przetestuj konfigurację na jednej ramce i jednym komponencie React. Dopiero po takim teście rozszerzaj workflow na całe strony i większe pliki Figma.