Voordat je begint
Wie kan deze functie gebruiken
De externe server is beschikbaar op alle werkplekken en abonnementen.
De desktopserver is beschikbaar op een Dev- of Full-werkplek voor alle betaalde abonnementen.
Je moet een code-editor of applicatie gebruiken die MCP-servers ondersteunt (bijv. VS Code, Cursor, Windsurf, Claude Code). Bekijk onze MCP-catalogus voor een volledige lijst van ondersteunde clients ->
Gebruikers met het Starter-plan of met View- of Collab-werkplekken op betaalde abonnementen worden beperkt tot maximaal 6 MCP-oproepen per maand.
Gebruikers met een Dev- of Full-werkplek op de Professional-, Organization- of Enterprise-plannen hebben per minuut limieten, die dezelfde limieten volgen als de Tier 1 Figma REST API. Net als bij Figma's REST API behoudt Figma zich het recht voor om snelheidslimieten aan te passen.
De Figma MCP-server helpt ontwikkelaars om ontwerpen snel en nauwkeurig te implementeren door belangrijke context te bieden aan AI-agenten die code genereren vanuit Figma Design, FigJam en Make-bestanden. De tools binnen Figma's MCP-server brengen aanvullende context vanuit Figma naar je workflow, zodat jouw code niet alleen overeenkomt met je bestaande systemen, maar ook met jouw ontwerp.
MCP-servers maken deel uit van een gestandaardiseerde interface waarmee AI-tools kunnen communiceren met gegevensbronnen via het Model Context Protocol.
Opmerking: Deze pagina is een algemeen overzicht van de Figma MCP-server. Ga voor gedetailleerde instructies en codevoorbeelden naar de documentatie voor ontwikkelaars van de Figma MCP-server →
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.
-
FigJam-hulpbronnen ophalen
Krijg toegang tot de inhoud van FigJam-diagrammen en gebruik deze in je codegeneratieproces. Integreer ideeën, workflows of architectuurkaarten vroegtijdig rechtstreeks in het ontwikkelproces.
-
Make-hulpbronnen ophalen
Verzamel codebronnen uit Make-bestanden en bied deze aan de LLM als context. Dit kan helpen bij het omzetten van een prototype naar een productieklare applicatie.
-
Houd je ontwerpsysteemcomponenten consistent 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.
Stel de MCP-server in
Je kunt de Figma MCP-server op twee manieren verbinden:
- MCP-desktopserver: Draait lokaal via de Figma Desktop-app.
-
Remote MCP-server: Verbindt rechtstreeks met Figma’s gehoste eindpunt op
https://mcp.figma.com/mcp.
MCP-desktopserver inschakelen
Open de Figma Desktop-app en zorg ervoor dat je de nieuwste versie hebt.
Maak of open een Figma Design-bestand.
Ga, via de werkbalk onderaan, naar Dev Mode of gebruik de toetsenbordcombinatie ShiftD.
Klik in de sectie MCP-server van het inspectiepaneel op MCP-desktopserver inschakelen.
Een bevestigingsbericht verschijnt onderaan het venster zodra de server draait.
De server draait lokaal op http://127.0.0.1:3845/mcp. Houd dit adres bij de hand voor je configuratiebestand in de volgende stap.
Verbind de MCP-server met je editor
Volg de instructies voor je specifieke editor om verbinding te maken met de Figma MCP-server; dit kan lokaal of op afstand:
| Client | Ondersteuning voor desktopservers | Ondersteuning voor externe server |
| Amazon Q | ✓ | |
| Android Studio | ✓ | ✓ |
| Claude Code | ✓ | ✓ |
| Codex door OpenAI | ✓ | ✓ |
| Cursor | ✓ | ✓ |
| Gemini CLI | ✓ | ✓ |
| Kiro | ✓ | |
| OpenHands | ✓ | |
| Replit | ✓ | |
| VS-code | ✓ | ✓ |
| Warp | ✓ | ✓ |
Tip: Voor de nieuwste lijst van ondersteunde editors en clients, bekijk onze MCP Catalog.
Prompts invoeren voor je MCP-client
De Figma MCP-server introduceert 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:
Selectiegebaseerd (alleen desktopserver)
- Selecteer een frame of laag in Figma met de Desktop-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.
Tools en suggesties voor gebruik
De Figma MCP-server bevat verschillende tools die je AI-assistent helpen bij het genereren, aanpassen en afstemmen van code met jouw ontwerpen. Elke tool ondersteunt verschillende workflows, van het produceren van code tot het in kaart brengen van componenten of het ophalen van ontwerptokens. Om meer te leren over beschikbare tools en gebruikssuggesties, kun je de documentatie voor ontwikkelaars van de Figma MCP-server. raadplegen.
Als je de Figma MCP-server gebruikt, zie je mogelijk een pop-up in Figma waarin je om feedback wordt gevraagd. Gebruik dit formulier om ons feedback te geven.