Przewodnik po serwerze MCP w Dev Mode – Polish (Poland)

🚧 Serwer MCP w trybie Dev Mode jest obecnie w otwartej wersji beta. Niektóre funkcje i ustawienia mogą jeszcze nie być dostępne. Funkcja może ulec zmianie, a Ty możesz doświadczyć błędów lub problemów z wydajnością w okresie beta.

Zanim zaczniesz

Kto może korzystać z tej funkcji?

Serwer MCP w trybie Dev Mode jest w otwartej wersji beta.

Dostępne na stanowisku Dev lub Full w planach Professional, Organizacja lub Enterprise

Musisz użyć edytora kodu lub aplikacji, która obsługuje serwery MCP (np. kod VS, kursor, Windsurf, Claude Code)

Możesz korzystać z serwera MCP w trybie Dev Mode tylko z aplikacji na komputery Figma. Pobierz aplikację na komputery Figma →

Serwer MCP w trybie Dev Mode integruje aplikację Figma bezpośrednio z Twoim przepływem pracy, dostarczając istotne informacje projektowe i kontekst agentom AI generującym kod z plików Figma Design.

Serwery MCP są częścią standardowego interfejsu dla agentów AI do interakcji ze źródłami danych przez Model Context Protocol.

Po włączeniu serwera możesz:

Wygeneruj kod z wybranych ramek

Wybierz ramkę Figma i przekształć ją w kod. Świetne dla zespołów produktowych, które tworzą nowe przepływy lub iterują nad funkcjami aplikacji.
Wyodrębnij kontekst projektowania

Zaimportuj zmienne, komponenty i dane układu bezpośrednio do swojego IDE. To jest szczególnie przydatne dla systemów projektowania i przepływów pracy opartych na komponentach.
Koduj inteligentnie z Code Connect

Zwiększ jakość wyników, ponownie wykorzystując rzeczywiste komponenty. Code Connect utrzymuje wygenerowany kod w zgodzie z Twoją bazą kodu.

Dowiedz się więcej o Code Connect →

Krok 1: Włącz serwer MCP

Otwórz aplikację Figma na komputer i upewnij się, że jest zaktualizowana do najnowszej wersji.
Utwórz lub otwórz plik Figma Design.
W lewym górnym rogu otwórz menu Figma.
W sekcji Preferencje wybierz Włącz serwer MCP w trybie Dev Mode.

Na dole ekranu powinien pojawić się komunikat potwierdzający, że serwer jest włączony i działa.

Serwer działa lokalnie pod adresem http://127.0.0.1:3845/sse. Miej ten adres pod ręką, będzie potrzebny do pliku konfiguracyjnego w następnym kroku.

Krok 2: Skonfiguruj swojego klienta MCP

Gdy serwer działa lokalnie w aplikacji Figma na komputerze, klienci MCP będą mogli połączyć się z Twoim serwerem. Aby to zrobić, dodaj następujące elementy do pliku konfiguracyjnego serwera MCP:

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

Postępuj zgodnie z instrukcjami dla konkretnego klienta, aby dodać serwer MCP w trybie Dev Mode.

Przejdź do Kod → Ustawienia → Ustawienia lub użyj skrótu ⌘ ,
W pasku wyszukaj, wpisz „MCP”.
Wybierz Edytuj w settings.json.

Dodaj następującą konfigurację:

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "serwery": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": prawda

Otwórz pasek narzędzi czatu ⌥⌘B i przełącz się na tryb Agent.
Otwórz menu narzędzia wyboru i poszukaj sekcji oznaczonej: MCP Server: Figma Dev Mode MCP. Jeśli na liście nie ma żadnych narzędzi, uruchom ponownie aplikację Figma na komputerze i VS Code.

Uwaga: GitHub Copilot musi być włączony na Twoim koncie, aby używać MCP w kodzie VS.

Aby uzyskać więcej informacji, zobacz oficjalną dokumentację kodu VS.

Otwórz Kursor → Ustawienia → Ustawienia kursora.
Przejdź do karty MCP.
Kliknij +Dodaj nowy globalny serwer MCP.

Wprowadź następującą konfigurację i zapisz:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Aby uzyskać więcej informacji, przejrzyj oficjalną dokumentację kursora.

Otwórz Windsurf → Settings → Windsurf Settings lub użyj skrótu ⌘ ,.
Przejdź do ustawień Cascade i wybierz Otwórz sklep z wtyczkami.
Wyszukaj Figma i zainstaluj wtyczkę.
Otwórz Cascade. Powinien być widoczny serwer Figma MCP oraz dostępne narzędzia.

Aby uzyskać więcej informacji, przejrzyj oficjalną dokumentację Windsurf.

Uwaga: dla Windsurf zmień właściwość adres URL w pliku konfiguracyjnym na serverUrl, aby uniknąć błędów.

Otwórz terminal i uruchom:

claude mcp dodaj --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Użyj następujących poleceń, aby sprawdzić ustawienia MCP i zarządzać serwerami.
- Wyświetl listę wszystkich skonfigurowanych serwerów
```
lista claude mcp
```
- Uzyskaj szczegóły dotyczące konkretnego serwera
```
claude mcp get my-server
```
- Usuń serwer
```
claude mcp usuń my-server
```

Aby uzyskać więcej informacji, zobacz oficjalną dokumentację Anthropic.

Po skonfigurowaniu, odśwież lub uruchom serwer. Zobaczysz pomyślne połączenie i dostępne narzędzia. Jeśli połączenie się nie udało lub nie widzisz narzędzi, sprawdź, czy serwer jest aktywny w aplikacji Figma na komputerze.

Krok 3: Poproś swojego klienta MCP

Serwer MCP w trybie Dev Mode wprowadza zestaw narzędzi, które pomagają LLM tłumaczyć projekty w Figma. Po nawiązaniu połączenia możesz poprosić klienta MCP o dostęp do konkretnego węzła projektowego.

Istnieją dwa sposoby, aby zapewnić kontekst Figma design klientowi AI:

Na podstawie wyboru

Wybierz ramkę lub warstwę w aplikacji Figma na komputerze.
Poproś klienta, aby pomógł Ci wdrożyć obecny wybór.

Oparte na linkach

Kopiuj link do ramki lub warstwy w Figma.
Zachęć klienta, aby pomógł Ci wdrożyć projekt pod wybranym adresem URL.

Uwaga: Twój klient nie będzie mógł przejść do wybranego adresu URL, ale wyodrębni identyfikator węzła wymagany przez serwer MCP do określenia, o którym obiekcie ma zwrócić informacje.

Kiedy używasz serwera MCP w trybie Dev Mode, w aplikacji Figma może pojawić się okienko z prośbą o Twoją opinię. Aby dać nam feedback, skorzystaj z tego formularza.