Figma i Design System MCP

Twój designer właśnie zaktualizował stronę cennikową w Figmie. Otwierasz projekt, mrużysz oczy na odstępy, zgadujesz, że gap to 24px (a to jest 20px), hardcodujesz kolor, który wygląda jak podstawowy niebieski (a to jest właściwie #2563EB, a nie #3B82F6), i wysyłasz do produkcji. Przychodzi code review z dwunastoma komentarzami o niezgodnościach w odstępach, kolorach i wagach czcionek. Spędzasz następne dwie godziny przełączając się między Figmą a edytorem, naprawiając wartości piksel po pikselu. To jest pętla design-to-code bez MCP.

Serwer Figma MCP eliminuje tę pętlę. Twoje AI odczytuje dane projektowe bezpośrednio z Figmy — dokładne odstępy, prawdziwe tokeny kolorów, rzeczywiste wagi czcionek — i generuje kod, który pasuje do projektu za pierwszym razem.

Co wyniesiesz z tego przewodnika

• Konfiguracja serwera Figma Dev Mode MCP we wszystkich trzech narzędziach
• Prompty do generowania komponentów, ekstrakcji tokenów projektowych i dopasowania do design systemu
• Zrozumienie workflow opartego na selekcji w porównaniu do workflow opartego na linkach
• Strategie łączenia Figma MCP z innymi serwerami

Wymagania wstępne

Figma dostarcza dwa warianty serwera MCP. Lokalny serwer desktopowy działa wewnątrz aplikacji desktopowej Figma i odczytuje Twoje bieżące zaznaczenie; serwer zdalny pod https://mcp.figma.com/mcp działa w chmurze i pracuje na podstawie linku Figma. Dla serwera lokalnego potrzebujesz:

• Aplikacji desktopowej Figma (nie wersji przeglądarkowej)
• Miejsca Dev lub Full w dowolnym płatnym planie Figma — serwer zdalny (mcp.figma.com) działa na wszystkich miejscach i planach, więc sięgnij po niego, jeśli nie masz miejsca Dev
• MCP włączonego w preferencjach Figmy — otwórz Figmę, przejdź do Preferences i włącz “Dev Mode MCP Server”

Po włączeniu Figma uruchamia lokalny serwer MCP pod adresem http://127.0.0.1:3845/mcp przez streamable HTTP. Serwer działa tylko wtedy, gdy Figma desktop jest uruchomiona. (Starsze przewodniki odwołują się do /sse — ten endpoint i transport SSE są przestarzałe; używaj /mcp.)

Uwaga

Serwer Figma MCP zatrzymuje się, gdy zamkniesz Figma desktop. Jeśli AI zgłasza “connection refused”, sprawdź, czy Figma jest otwarta i przełącznik serwera MCP jest nadal włączony w Preferences.

Setup

Cursor

Najszybsza ścieżka w Cursorze to przez wbudowany marketplace MCP:

1. Otwórz Settings > Tools & Integrations > MCP
2. Znajdź Figma na liście serwerów
3. Kliknij “Add to Cursor”

Lub skonfiguruj ręcznie w .cursor/mcp.json:

{
  "mcpServers": {
    "figma": {
      "type": "http",
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Zielony wskaźnik w panelu MCP potwierdza połączenie.

Claude Code

claude mcp add --transport http figma-dev http://127.0.0.1:3845/mcp

Zweryfikuj za pomocą claude mcp list. Powinieneś zobaczyć figma-dev ze statusem connected. Aby udostępnić zespołowi, zasięguj go do projektu:

claude mcp add -s project --transport http figma-dev http://127.0.0.1:3845/mcp

Codex

Codex rejestruje serwer w ~/.codex/config.toml. Klucz url implikuje serwer streamable HTTP — nie ma klucza transport:

[mcp_servers.figma]
url = "http://127.0.0.1:3845/mcp"

Gdy nie masz otwartej aplikacji desktopowej, wybierz serwer zdalny. Wymaga tokenu OAuth w zmiennej środowiskowej:

[mcp_servers.figma]
url = "https://mcp.figma.com/mcp"
bearer_token_env_var = "FIGMA_OAUTH_TOKEN"

Dostępne narzędzia

Serwer Figma MCP udostępnia pięć podstawowych narzędzi:

Narzędzie	Co robi
get_design_context	Generuje i inspekcjonuje kod oraz kontekst projektu z bieżącego zaznaczenia lub linku Figma (dawniej get_code)
get_metadata	Zwraca rzadki widok XML zaznaczenia: ID warstw, nazwy, typy, pozycje i rozmiary — tani kontekst przed pełnym pobraniem
get_variable_defs	Wydobywa tokeny projektowe i zmienne (kolory, odstępy, typografię)
get_code_connect_map	Pokazuje, jak komponenty Figma mapują się na komponenty kodu przez Code Connect
get_screenshot	Przechwytuje obraz elementu projektowego do wizualnej referencji (dawniej get_image)

Wskazówka

Prompt do generowania komponentów (skopiuj i wklej):

“Look at my current Figma selection. Generate a React component using Tailwind CSS that matches the design exactly. Extract the spacing, colors, and typography from the design data — do not guess values. Name the component based on the frame name in Figma.”

Dwa workflow: oparte na selekcji i oparte na linkach

Workflow oparte na selekcji działa, gdy masz Figmę otwartą obok edytora. Wybierz element w Figmie, a następnie podaj prompt AI. Serwer MCP odczytuje kontekst tego, co jest zaznaczone. To najszybsze workflow do aktywnej iteracji.

Workflow oparte na linkach działa, gdy implementujesz z ticketu lub specyfikacji. Skopiuj link Figma (Cmd+L w Dev Mode), wklej go do promptu, a AI wydobędzie ID węzła, aby pobrać dane projektowe. To podejście działa nawet jeśli ktoś inny stworzył projekt i pracujesz z jego linku.

Wskazówka

Prompt do generowania opartego na linkach (skopiuj i wklej):

“Generate a responsive card component from this Figma design: [paste Figma link]. Use CSS Grid for the layout. Extract all design tokens into CSS custom properties. The component should support both light and dark themes based on the Figma variables.”

Ekstrakcja tokenów projektowych

Jednym z najbardziej wartościowych zastosowań Figma MCP jest ekstrakcja tokenów projektowych do kodu. Zamiast ręcznie kopiować kody hex i wartości odstępów, AI odczytuje je bezpośrednio z definicji zmiennych Figmy.

Wskazówka

Prompt do synchronizacji tokenów projektowych (skopiuj i wklej):

“Use Figma MCP to extract all design variables from the current file. Generate a TypeScript theme configuration file at src/lib/theme.ts with colors, spacing, typography, and border radius values. Group tokens by their Figma collection names. Include JSDoc comments noting the original Figma variable names.”

Łączenie Figma MCP z innymi serwerami

Prawdziwa moc pojawia się, gdy łączysz Figma MCP z innymi serwerami MCP w tej samej konwersacji:

Figma + GitHub MCP: “Implement this Figma design as a React component, create a feature branch called ui/pricing-card, commit the component, and open a PR with the Figma link in the description.”

Figma + Playwright MCP: “Generate the component from this Figma selection, then open it in the browser at localhost:3000/storybook and take a screenshot. Compare the screenshot to the Figma design and flag any visual differences.”

Figma + Context7: “Look at this Figma design for a data table. Use Context7 to fetch the current TanStack Table documentation, then implement the table component using the recommended patterns from the docs with the exact styling from Figma.”

Gdy coś nie działa

Błąd “Connection refused”. Figma desktop nie jest uruchomiona lub serwer MCP jest wyłączony. Otwórz Figmę, przejdź do Preferences i potwierdź, że przełącznik Dev Mode MCP Server jest włączony.

“No tools available” w panelu MCP. Zrestartuj zarówno Figmę, jak i edytor. Lokalne połączenie HTTP może zostać przerwane, jeśli Figma się aktualizuje lub jeśli komputer przechodzi w tryb uśpienia.

AI generuje złe odstępy lub kolory. AI może mieszać dane z Figmy z danymi treningowymi. Bądź wyraźny: “Use only the values from the Figma design data. Do not use default Tailwind colors.”

Brakuje tokenów projektowych. Zmienne muszą być zdefiniowane w systemie zmiennych Figmy, a nie tylko zastosowane jako style. Jeśli designer używał surowych wartości hex zamiast zmiennych, get_variable_defs nie zwróci nic. Poproś designera o konwersję stylów na zmienne.

Figma MCP nie jest dostępne na Linuxie. Wymagana jest aplikacja desktopowa Figma, która działa tylko na macOS i Windows. Użytkownicy Linuxa mogą użyć serwera Figma REST API MCP jako obejścia, choć wymaga osobistego tokenu dostępu i brakuje workflow opartego na selekcji.

Co dalej

shadcn/ui MCP Instaluj i dostosowuj komponenty UI z pomocą AI.

Browser Automation MCP Sprawdź, czy twoja implementacja pasuje do projektu w prawdziwej przeglądarce.