Handleiding voor de MCP-server in Dev Mode – Dutch (Netherlands)

🚧 De MCP-server in Dev Mode bevindt zich momenteel in de openbare bètafase. Sommige functies en instellingen zijn mogelijk nog niet beschikbaar. De functie kan worden gewijzigd en je kunt bugs of prestatieproblemen tegenkomen tijdens de bètaperiode.

Voordat je begint

Wie kan deze functie gebruiken?

De MCP-server in Dev Mode bevindt zich in de openbare bètafase.

Beschikbaar voor een Dev- of Full-werkplek via het Professional-, Organization- of Enterprise-plan

Je moet een code-editor of applicatie gebruiken die MCP-servers ondersteunt (bijv. VS Code, Cursor, Windsurf, Claude Code)

Je kunt de MCP-server in Dev Mode alleen gebruiken via de Figma Desktop-app. Download de Figma Desktop-app →

De MCP Server in Dev Mode integreert Figma rechtstreeks in je workflow door essentiële ontwerpinformatie en context te bieden aan AI-tools die code genereren uit Figma-ontwerpbestanden.

MCP-servers maken deel uit van een gestandaardiseerde interface waarmee AI-tools kunnen communiceren met gegevensbronnen via het Model Context Protocol.

Als de server is ingeschakeld, kun je het volgende doen:

Code genereren van geselecteerde frames

Selecteer een Figma-frame en zet het om in code. Handig voor productteams die nieuwe flows ontwikkelen of appfuncties itereren.
Ontwerpcontext ophalen

Haal variabelen, componenten en indelingsgegevens rechtstreeks op in je IDE. Dit is vooral nuttig voor ontwerpsystemen en workflows op basis van componenten.
Slimmer programmeren met Code Connect

Verbeter de uitvoerkwaliteit door je daadwerkelijke componenten te hergebruiken. Code Connect zorgt ervoor dat je gegenereerde code consistent blijft met je codebase.

Meer informatie over Code Connect →

Stap 1: de MCP-server inschakelen

Open de Figma Desktop-app en zorg ervoor dat je de nieuwste versie gebruikt.
Maak of open een Figma Design-bestand.
Open het Figma-menu in de linkerbovenhoek.
Onder Voorkeuren selecteer je MCP-server in Dev Mode inschakelen.

Onderaan zou een melding moeten verschijnen om te bevestigen dat de server is ingeschakeld en draait.

De server draait lokaal op http://127.0.0.1:3845/sse. Houd dit adres bij de hand voor je configuratiebestand in de volgende stap.

Stap 2: je MCP-client instellen

Once the server is running locally on the Figma desktop app, MCP clients will be able to connect to your server. Follow the instructions for your specific client to add the Dev Mode MCP server.

Ga naar Code → Instellingen → Instellingen of gebruik de snelkoppeling ⌘ ,
Voer 'MCP' in de zoekbalk in.
Selecteer Bewerken in settings.json.

Voeg de volgende configuratie toe:

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

Open de chatwerkbalk ⌥⌘B en schakel over naar de modus Agent.
Open het menu met selectietools en zoek een sectie met het label: MCP-server: MCP Figma Dev Mode. Als er geen tools worden weergegeven, start je de Figma Desktop-app en VS Code opnieuw.

Opmerking: je moet GitHub Copilot voor je account hebben ingeschakeld om MCP in VS Code te kunnen gebruiken.

Raadpleeg de officiële documentatie van VS Code voor meer informatie.

Open Cursor → Instellingen → Cursor-instellingen.
Ga naar het tabblad MCP.
Klik op + Nieuwe algemene MCP-server toevoegen.

Voer de volgende configuratie in en sla je invoer op:

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

Raadpleeg de officiële documentatie van Cursor voor meer informatie.

Open Windsurf → Instellingen → Windsurf-instellingen of gebruik de snelkoppeling ⌘ ,.
Ga naar Cascade-instellingen en selecteer Plug-in Store openen.
Zoek Figma en installeer de plug-in.
Als je Cascade opent, zou je de Figma MCP-server en beschikbare tools moeten zien.

Raadpleeg de officiële documentatie van Windsurf voor meer informatie.

Opmerking: voor Windsurf moet je de eigenschap url in het configuratiebestand wijzigen naar serverUrl om fouten te voorkomen.

Open je terminal en voer het volgende uit:

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

Gebruik de volgende opdrachten om de MCP-instellingen te controleren en servers te beheren:
- Alle geconfigureerde servers tonen
```
claude mcp list
```
- Details ophalen voor een specifieke server
```
claude mcp get my-server
```
- Een server verwijderen
```
claude mcp remove my-server
```

Raadpleeg de officiële documentatie van Anthropic voor meer informatie.

Vernieuw of start de server nadat deze is geconfigureerd. Je zou dan een koppeling en de beschikbare tools moeten zien. Is de koppeling mislukt of zie je geen tools? Controleer dan of de server actief is in de Figma Desktop-app.

Stap 3: prompts invoeren voor je MCP-client

Met de MCP-server in Dev Mode beschik je over een reeks tools waarmee LLM's ontwerpen in Figma kunnen vertalen. Zodra de koppeling tot stand is gebracht, kun je je MCP-client vragen om toegang te krijgen tot een specifiek ontwerpknooppunt.

Er zijn twee manieren om je AI-client context uit een Figma-ontwerp te geven:

Op basis van selectie

Selecteer een frame of laag in Figma met de bureaublad-app.
Vraag je client om je te helpen bij het implementeren van je huidige selectie.

Op basis van link

Kopieer de link naar een frame of laag in Figma.
Vraag je client om je te helpen bij het implementeren van het ontwerp van de geselecteerde URL.

Opmerking: je client kan niet naar de geselecteerde URL navigeren, maar kan wel de knooppunt-ID ophalen die de MCP-server nodig heeft om te bepalen over welk object informatie moet worden teruggestuurd.

Als je de MCP-server in Dev Mode gebruikt, zie je mogelijk een pop-up in Figma waarin je om feedback wordt gevraagd. Gebruik dit formulier om ons feedback te geven.