Zanim zaczniesz
Kto może korzystać z tej funkcji?
Zdalny serwer jest dostępny na wszystkich stanowiskach i planach.
Serwer na komputery stacjonarne jest dostępny na stanowisku Dev lub Full dla wszystkich płatnych planów.
Musisz użyć edytora kodu lub aplikacji, która obsługuje serwery MCP (np. VS Code, kursor, Windsurf, Claude Code). Zobacz nasz katalog MCP dla pełnej listy obsługiwanych klientów ->
Użytkownicy korzystający z planu Starter lub ze stanowiskami View lub Collab w ramach płatnych planów będą mieli limit do 6 wywołań narzędzia miesięcznie.
Użytkownicy ze stanowiskiem Dev lub Full na planach Professional, Organization lub Enterprise mają limity stawek minutowych, które są zgodne z limitami Tier 1 Figma REST API. Podobnie jak w przypadku interfejsu Figma REST API, Figma zastrzega sobie prawo do zmiany limitów szybkości.
Serwer Figma MCP pomaga programistom w szybkim i dokładnym wdrażaniu projektów, dostarczając ważne informacje kontekstowe agentom AI, którzy generują kod na podstawie plików Figma design, FigJam i Make. Narzędzia dostępne na serwerze MCP Figma wprowadzają dodatkowy kontekst z Figma do Twojego przepływu pracy, dzięki czemu kod jest zgodny nie tylko z istniejącymi systemami, ale także z projektem.
Serwery MCP są częścią standardowego interfejsu dla agentów AI do interakcji ze źródłami danych przez Model Context Protocol.
Uwaga: Ta strona zawiera ogólny opis serwera Figma MCP. Szczegółowe instrukcje i przykłady kodu można znaleźć w dokumentacji dla programistów serwera Figma MCP →.
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.
-
Pobierz zasoby FigJam
Uzyskaj dostęp do treści z diagramów FigJam i wykorzystaj je w swoim procesie generowania kodu. Włącz pomysły, przepływy lub mapy architektury na wczesnym etapie bezpośrednio do procesu rozwoju.
-
Pobierz zasoby Make
Zbierz zasoby kodu z plików Make i przekaż je modelom LLM jako kontekst. Może to pomóc w przejściu od prototypu do aplikacji produkcyjnej.
-
Zadbaj o spójność komponentów systemu projektowego dzięki Code Connect
Zwiększ jakość wyników, ponownie wykorzystując rzeczywiste komponenty. Code Connect utrzymuje wygenerowany kod w zgodzie z Twoją bazą kodu.
Skonfiguruj serwer MCP
Możesz połączyć serwer MCP Figma na dwa sposoby:
- Serwer MCP na komputerze stacjonarnym: Działa lokalnie poprzez aplikację Figma na komputer stacjonarny.
-
Zdalny serwer MCP: Łączy się bezpośrednio z hostowanym punktem końcowym Figma pod adresem
https://mcp.figma.com/mcp.
Włącz serwer MCP na komputerze stacjonarnym
Otwórz aplikację Figma na komputer i upewnij się, że masz najnowszą wersję.
Utwórz lub otwórz plik Figma Design.
Na pasku narzędzi na dole przełącz się na Dev Mode lub użyj skrótu klawiaturowego ShiftD.
W sekcji serwer MCP w panelu analizowania, kliknij Włącz serwer MCP na komputerze stacjonarnym.
Po uruchomieniu serwera w dolnej części okna pojawi się komunikat potwierdzający.
Serwer działa lokalnie pod adresem http://127.0.0.1:3845/mcp. Miej ten adres pod ręką, będzie potrzebny do pliku konfiguracyjnego w następnym kroku.
Połącz serwer MCP z edytorem
Postępuj zgodnie z instrukcjami dla swojego konkretnego edytora, aby połączyć się z serwerem Figma MCP, lokalnie lub zdalnie:
| Klient | Wsparcie dla serwerów stacjonarnych | Wsparcie dla serwerów zdalnych |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex by OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| OpenHands | ✓ | |
| Replit | ✓ | |
| VS Code | ✓ | ✓ |
| Warp | ✓ | ✓ |
Wskazówka: Aby uzyskać najnowszą listę obsługiwanych edytorów i klientów, sprawdź nasz Katalog MCP.
Poproś swojego klienta MCP
Serwer MCP Figma 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:
Oparte na selekcji (tylko serwer na komputerze)
- 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.
Narzędzia i sugestie dotyczące użycia
Serwer MCP Figma zawiera kilka narzędzi, które pomagają asystentowi AI generować, dostosowywać i dopasowywać kod do projektów. Każde narzędzie wspiera różne przepływy pracy, od produkcji kodu po mapowanie komponentów lub pobieranie tokenów projektowych. Aby dowiedzieć się więcej o dostępnych narzędziach i sugestiach dotyczących ich użycia, zapoznaj się z dokumentacją dla programistów serwera MCP Figma.
Kiedy używasz serwera MCP Figma, w aplikacji Figma może pojawić się okienko z prośbą o Twoją opinię. Aby przekazać nam swoją opinię, prosimy skorzystać z tego formularza.