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

1. Otwórz aplikację Figma na komputer i upewnij się, że masz najnowszą wersję.
2. Utwórz lub otwórz plik Figma Design.
3. W lewym górnym rogu otwórz menu Figma.
4. 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.

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. Postępuj zgodnie z instrukcjami dla konkretnego klienta, aby dodać serwer MCP w trybie Dev Mode.

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

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

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

Oparte na linkach

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

Narzędzia i sugestie dotyczące użycia

get_code

Użyj tego, aby wygenerować kod dla swojego wyboru w Figma za pomocą serwera MCP. Domyślnym wynikiem jest React + Tailwind, ale możesz go dostosować za pomocą monitów:

• Zmień schemat

  • „Wygeneruj wybór z Figma w Vue.”
  • Wygeneruj zaznaczenie z Figma w zwykłym HTML + CSS.
  • „Wygeneruj mój wybór w Figma na iOS.”

• Użyj swoich komponentów

  • „Wygeneruj wybór w Figma, używając komponentów z src/components/interfejs użytkownika”
  • „Wygeneruj wybór w Figma, używając komponentów z src/interfejs użytkownika i styl za pomocą Tailwind”

  Możesz wkleić linki lub wybrać ramkę albo komponent w Figma przed wyświetleniem monitu.

  Dowiedz się, jak skonfigurować Code Connect, aby lepiej ponownie wykorzystywać komponenty →

get_variable_defs

Zwraca zmienne i style użyte w Twoim zaznaczeniu, takie jak kolory, odstępy i typografia.

• Wyświetl wszystkie użyte tokeny
  • Pobierz zmienne używane w moim zaznaczeniu w Figma.
• Skup się na konkretnym typie
  • Jakie zmienne kolorów i odstępów są używane w zaznaczeniu w Figma?
• Uzyskaj zarówno nazwy, jak i wartości
  • „Wymień nazwy zmiennych i ich wartości użyte w moim wyborze w Figma.”

get_code_connect_map

Pobiera mapowanie między identyfikatorami węzłów Figma a odpowiadającymi im komponentami w bazie kodu. Dokładniej rzecz ujmując, zwraca obiekt, w którym każdy klucz to identyfikator węzła Figma, a wartość zawiera:

• codeConnectSrc: lokalizacja komponentu w Twojej bazie kodu (np. ścieżka do pliku lub adres URL).
• codeConnectName: nazwa komponentu w Twojej bazie kodu.

To mapowanie służy do bezpośredniego łączenia elementów Figma Design z ich implementacjami w React (lub innym frameworku), umożliwiając płynny przepływ pracy od projektu do kodu i zapewniając, że w każdej części projektu używane są odpowiednie komponenty. Jeśli węzeł Figma jest połączony z komponentem kodu, ta funkcja pomoże ci zidentyfikować i użyć dokładnie tego komponentu w twoim projekcie.

get_image

Aby użyć tego narzędzia, przejdź do Preferencje > Ustawienia serwera MCP w trybie Dev Mode > Włącz narzędzie get_image

Tworzy to zrzut ekranu Twojego wyboru, aby zachować wierność układu. Zostaw to włączone, chyba że zarządzasz limitami tokenów.

Ustawienia serwera MCP w trybie Dev Mode

To są dodatkowe ustawienia, które możesz przełączać w preferencjach i używać z klientem MCP

Włącz narzędzie get_image

• Użyj elementów zastępczych: Pomija wyodrębnianie obrazów i zamiast tego dodaje ogólne elementy zastępcze – przydatne, jeśli wolisz zamieniać je ręcznie w kodzie. W przeciwnym razie pobiera prawdziwe obrazy z Twojego pliku.

Włącz Code Connect

Zawiera mapowania Code Connect w odpowiedzi, aby wygenerowany kod mógł ponownie wykorzystywać komponenty z połączonej bazy kodu, jeśli to możliwe.

Najlepsze praktyki MCP

Jakość generowanego kodu zależy od kilku czynników. Niektóre kontrolujesz Ty, a inne – używane prze Ciebie narzędzia. Oto kilka sugestii, jak otrzymać spójny wynik.

Ustrukturyzuj plik Figma, aby uzyskać lepszy kod

Zapewnij najlepszy kontekst dla swoich zamierzeń projektowych, aby MCP i Twój asystent AI mogli generować kod, który jest przejrzysty, spójny i zgodny z twoim systemem.

• Używaj komponentów do wszystkiego, co jest ponownie wykorzystywane (przyciski, karty, pola wejściowe itp.).

• Połącz komponenty z bazą kodu za pomocą Code Connect. To najlepszy sposób na zapewnienie spójnego użycia komponentów w kodzie. Bez tego model zgaduje.

• Używaj zmiennych dla odstępów, koloru, promienia i typografii.

• Nazywaj warstwy semantycznie (np. CardContainer, zamiast Group 5)

• Użyj układu automatycznego, aby przekazać intencję responsywności.

  Wskazówka: zmień rozmiar ramki w Figma, aby sprawdzić, czy działa zgodnie z oczekiwaniami, zanim wygenerujesz kod.

• Używaj adnotacji i zasobów deweloperskich, aby przekazać intencje projektowe, które trudno uchwycić za pomocą wizualizacji, na przykład jak coś powinno się zachowywać, wyrównywać lub reagować.

Pisz skuteczne polecenia, aby kierować AI

MCP dostarcza Twojemu asystentowi AI ustrukturyzowane dane z Figma, ale o wyniku decyduje Twoje polecenie. Dobre podpowiedzi pozwalają osiągnąć następujące rezultaty:

• Dopasuj wynik do swojego frameworka lub systemu stylizacji
• Postępuj zgodnie ze strukturą plików i konwencjami nazewnictwa
• Dodaj kod do określonych ścieżek (np. src/components/ui
• Dodaj lub zmodyfikuj kod w istniejących plikach zamiast tworzyć nowe.
• Podążaj za określonymi systemami układu (np. Siatka, flexbox, absolute)

Przykłady:

• Wygeneruj kod SwiftUI dla iOS z tej ramki
• Użyj Chakra interfejs użytkownika dla tego układu
• „Użyj komponentów src/components/ui”
• „Dodaj to do src/components/marketing/PricingCard.tsx”
• „Użyj naszego komponentu układu Stack”

Pomyśl o podpowiedziach jak o briefie dla współpracownika. Jasna intencja prowadzi do lepszych wyników.

Wyzwalaj określone narzędzia, gdy są potrzebne

MCP obsługuje różne narzędzia, a każde z nich zapewnia Twojemu asystentowi AI inny rodzaj ustrukturyzowanego kontekstu. Czasami asystent nie wybiera automatycznie właściwej opcji, zwłaszcza gdy dostępnych jest więcej narzędzi. Jeśli wyniki są nieprawidłowe, spróbuj sprecyzować polecenie.

• get_code zapewnia ustrukturyzowane przedstawienie Twojego wyboru w Figma w React + Tailwind. To jest punkt wyjścia, który Twój asystent AI może przetłumaczyć na dowolny framework lub styl kodu, w zależności od twojego polecenia.
• get_variable_defs wyodrębnia zmienne i style użyte w Twoim zaznaczeniu (kolor, odstępy, typografia itp.). To pomaga modelowi bezpośrednio odwoływać się do Twoich tokenów w wygenerowanym kodzie.

Na przykład, jeśli dostajesz surowy kod zamiast tokenów, spróbuj czegoś takiego:

• „Pobierz nazwy zmiennych i wartości użyte w tej ramce.”

Dodaj niestandardowe zasady

Ustaw wytyczne na poziomie projektu, aby zachować spójność wyników — jak notatki wdrożeniowe dla nowego programisty. Przykładowo:

• Preferowane prymitywy układu
• Organizacja plików
• Wzorce nazewnictwa
• Czego nie należy kodować na stałe

Możesz dostarczyć to w dowolnym formacie, jakiego używa Twój klient MCP do plików instrukcji.

Przykłady:

 
---
opis: Zasady MCP trybu Figma Dev Mode
globs:
alwaysApply: true
---
 - Serwer MCP trybu Figma Dev Mode udostępnia punkt końcowy zasobów, który może obsługiwać zasoby obrazów i SVG
 - WAŻNE: Jeśli serwer MCP trybu deweloperskiego Figma zwraca źródło lokalne dla obrazu lub SVG, użyj tego źródła bezpośrednio
 - WAŻNE: NIE importuj ani nie dodawaj nowych pakietów ikon, wszystkie zasoby powinny być w pakiecie Figma
 - WAŻNE: NIE używaj ani nie twórz elementów zastępczych, jeśli podano źródło lokalne

# Serwery MCP
## Zasady MCP trybu Dev Mode Figma
- Serwer MCP trybu Dev Mode Figma udostępnia punkt końcowy zasobów, który może obsługiwać zasoby obrazów i SVG
- WAŻNE: Jeśli serwer MCP trybu Dev Mode Figma zwraca źródło lokalne dla obrazu lub SVG, użyj tego źródła bezpośrednio
- WAŻNE: NIE importuj ani nie dodawaj nowych pakietów ikon, wszystkie zasoby powinny być w pakiecie Figma
- WAŻNE: NIE używaj ani nie twórz elementów zastępczych, jeśli podano źródło lokalne

- WAŻNE: Zawsze używaj komponentów z `/path_to_your_design_system`, jeśli to możliwe
- Priorytetem jest wierność projektom w Figma
- Unikaj wartości zakodowanych na stałe, używaj tokenów projektowych z Figma, jeśli są dostępne
- Przestrzegaj wymagań WCAG dotyczących ułatwień dostępu
- Dodaj dokumentację komponentów
- Umieść elementy interfejsu użytkownika w `/path_to_your_design_system`; unikaj stylów osadzonych, chyba że jest to naprawdę konieczne

Dodanie ich może znacznie zmniejszyć potrzebę powtarzania monitów i gwarantuje, że członkowie zespołu lub agenci konsekwentnie przestrzegają tych samych oczekiwań.

Upewnij się, że sprawdzasz dokumentację IDE lub klienta MCP, aby dowiedzieć się, jak tworzyć reguły i eksperymentuj, aby znaleźć to, co działa najlepiej dla Twojego zespołu. Jasne, spójne wytyczne często prowadzą do lepszego kodu wielokrotnego użytku przy mniejszej liczbie poprawek.

Rozłóż duże wybory na mniejsze elementy

Podziel ekrany na mniejsze części (takie jak komponenty lub logiczne segmenty), aby uzyskać szybsze i bardziej niezawodne wyniki.

Duże zaznaczenia mogą spowalniać narzędzia, powodować błędy lub prowadzić do niekompletnych odpowiedzi, zwłaszcza gdy model musi przetworzyć zbyt wiele kontekstu. Zamiast tego:

1. Generuj kod dla mniejszych sekcji lub pojedynczych komponentów (np. Karta, nagłówek, pasek boczny)
2. Jeśli działanie jest wolne lub się zacina, zmniejsz rozmiar wyboru.

To pomaga kontrolować kontekst i sprawia, że wyniki są bardziej przewidywalne, zarówno dla Ciebie, jak i dla modelu.

Jeśli coś w wynikach nie wygląda całkiem dobrze, zazwyczaj warto wrócić do podstaw: jak zbudowany jest plik Figma, jak napisany jest prompt i jaki kontekst jest wysyłany. Stosowanie się do powyższych najlepszych praktyk może mieć duże znaczenie i prowadzi do bardziej spójnego, wielokrotnego użytku kodu.