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

• Setup dla 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

Serwer MCP Figmy działa wewnątrz aplikacji desktopowej Figma. Potrzebujesz:

• Aplikacji desktopowej Figma (nie wersji przeglądarkowej)
• Dostępu do Dev Mode — wymaga planu Professional, Organization lub Enterprise z miejscem Dev Mode
• 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/sse. Serwer działa tylko wtedy, gdy Figma desktop jest uruchomiona.

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": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

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

Claude Code

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

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 figma-dev --transport sse http://127.0.0.1:3845/sse

Codex

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

Dostępne narzędzia

Serwer Figma MCP udostępnia cztery narzędzia:

Narzędzie	Co robi
get_code	Generuje kod z aktualnie wybranej ramki Figma lub z linku Figma
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_image	Przechwytuje screenshot elementu projektowego do wizualnej referencji

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. Połączenie SSE 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.