🚧 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.
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
Zodra de server lokaal draait via de Figma Desktop-app, kunnen MCP-clients verbinding maken met je server. Volg de instructies voor jouw specifieke client om de MCP-server in Dev Mode toe te voegen.
-
Ga naar Code → Instellingen → Instellingen of gebruik de snelkoppeling
⌘ ,
-
Voer 'MCP' in de zoekbalk in.
-
Selecteer Bewerken in settings.json.
-
Voeg de Figma Dev Mode MCP-configuratie toe aan je servers:
"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 met
⌥⌘B
of⌃⌘I
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.
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
- Alle geconfigureerde servers tonen
Andere code-editors en tools die SSE (Server-Sent Events) ondersteunen, kunnen ook verbinding maken met de MCP-server in Dev Mode.
Als je een andere editor of tool gebruikt, controleer dan in de documentatie of communicatie op basis van SSE wordt ondersteund. Als dat het geval is, kun je de MCP-server in Dev Mode handmatig toevoegen met deze configuratie:
{
"mcpServers": {
"Figma Dev Mode MCP": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
Opmerking: de MCP-server in Dev Mode communiceert via het SSE-protocol. Gebruik de stappen van je editor om een SSE-compatibele MCP-server in te stellen en gebruik de URL: http://localhost:3845/sse
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.
Tools en suggesties voor gebruik
get_code
Gebruik dit om code te genereren voor je Figma-selectie met behulp van de MCP-server. De standaard output is React + Tailwind, maar je kunt dit aanpassen via je prompts:
-
Wijzig het framework
- “Genereer mijn Figma-selectie in Vue.”
- “Genereer mijn Figma-selectie in eenvoudige HTML + CSS.”
- “Genereer mijn Figma-selectie in iOS.”
-
Gebruik je componenten
- “Genereer mijn Figma-selectie met componenten uit src/componenten/UI”
- “Genereer mijn Figma-selectie met componenten uit src/UI en stijl met Tailwind”
Je kunt links plakken of het frame of de component in Figma selecteren voordat je een prompt invoert.
Ontdek hoe je Code Connect instelt om componenten beter te hergebruiken →
get_variable_defs
Retourneert variabelen en stijlen die in je selectie zijn gebruikt, zoals kleuren, afstand en typografie.
- Maak een lijst van alle gebruikte tokens
- “Haal de variabelen op die in mijn Figma-selectie zijn gebruikt.”
- Focus op een specifiek type
- “Welke kleur- en afstandvariabelen zijn er gebruikt in mijn Figma-selectie?”
- Haal zowel namen als waarden op
- “Maak een lijst van de namen van variabelen en de bijbehorende waarden die in mijn Figma-selectie zijn gebruikt.”
get_code_connect_map
Haalt een koppeling op tussen Figma-knooppunt-ID's en de bijbehorende Figma-componenten in je codebase. Er wordt een object geretourneerd waarbij elke code een Figma-knooppunt-ID is en de waarde het volgende bevat:
-
codeConnectSrc
: de locatie van de component in je codebase (bijvoorbeeld een bestandspad of URL). -
codeConnectName
: de naam van de component in je codebase.
Deze mapping wordt gebruikt om Figma-ontwerpelementen rechtstreeks te koppelen aan hun React-implementaties (of een ander framework). Dit maakt naadloze design-to-code-workflows mogelijk en zorgt ervoor dat de juiste componenten worden gebruikt voor elk onderdeel van het ontwerp. Als een Figma-knooppunt gekoppeld is aan een code-component, helpt deze functie je om de exacte component in je project te vinden en te gebruiken.
get_image
Om deze tool te gebruiken, ga naar Voorkeuren > Instellingen voor MCP-server in Dev Mode > Tool get_image inschakelen
Hiermee maak je een schermafbeelding van je selectie om de indeling kloppend te houden. Houd dit ingeschakeld, tenzij je tokenlimieten beheert.
Instellingen voor MCP-server in Dev Mode
Dit zijn extra instellingen die je kunt inschakelen onder Voorkeuren en kunt gebruiken met de MCP-client
Tool get_image inschakelen
- Placeholders gebruiken: slaat het extraheren van afbeeldingen over en voegt in plaats daarvan generieke placeholders toe — handig als je ze liever handmatig in de code vervangt. Anders worden er echte afbeeldingen uit je bestand opgehaald.
Code Connect inschakelen
Voegt Code Connect-mappings toe aan de respons, zodat de gegenereerde code waar mogelijk componenten uit je gekoppelde codebase kan hergebruiken.
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.
Best practices voor MCP
De kwaliteit van de gegenereerde code hangt af van verschillende factoren. Sommige worden door jou bepaald, en andere door de tools die je gebruikt. Dit zijn enkele suggesties voor een nette, consistente output.
Structureer je Figma-bestand voor code van betere kwaliteit
Bied de beste context voor je ontwerp, zodat MCP en je AI-assistent code kunnen genereren die duidelijk, consistent en afgestemd op je systeem is.
-
Gebruik componenten voor alles wat opnieuw gebruikt wordt (knoppen, kaarten, input, etc.)
-
Koppel componenten aan je codebase via Code Connect. Dit is de beste manier om ervoor te zorgen dat componenten consistent worden hergebruikt in je code. Doe je dit niet, dan probeert het model dit zelf te raden.
-
Gebruik variabelen voor afstand, kleur, straal en typografie.
-
Geef lagen duidelijke namen (bijv.
CardContainer
, nietGroup 5
) -
Gebruik Automatische lay-out om de responsieve intentie te communiceren.
Tip: wijzig het formaat van het frame in Figma om te controleren of het zich gedraagt zoals verwacht voordat je code genereert.
-
Gebruik aantekeningen en hulpbronnen voor ontwikkelaars om ontwerpintenties over te brengen die moeilijk aan te geven zijn met alleen visuele elementen, zoals hoe iets zich moet gedragen, moet uitlijnen of moet reageren.
Gebruik effectieve prompts om de AI te sturen
MCP voorziet je AI-assistent van gestructureerde Figma-gegevens, maar jouw prompt bepaalt het resultaat. Met goede prompts kun je:
- Het resultaat afstemmen op je framework of stylingsysteem
- De bestandsstructuur en naamgevingsconventies volgen.
- Code toevoegen aan specifieke paden (bijv.
src/components/ui
) - Code toevoegen aan of wijzigen in bestaande bestanden in plaats van nieuwe te maken.
- Specifieke indelingssystemen volgen (bijv. Raster, flexbox, absoluut)
Voorbeelden:
- “Genereer iOS SwiftUI-code op basis van dit frame”
- “Gebruik Chakra UI voor deze indeling”
- “Gebruik
src/components/ui
-componenten” - “Voeg dit toe aan
src/components/marketing/PricingCard.tsx
” - “Gebruik onze
Stack
-indelingscomponent”
Je kunt prompts zien als een briefing voor een collega. Hoe duidelijker je aangeeft wat je intentie is, hoe beter de resultaten.
Trigger specifieke tools wanneer het nodig is
MCP ondersteunt verschillende tools en elke tool biedt je AI-assistent een ander soort gestructureerde context. Soms kiest de assistent niet automatisch de juiste optie, vooral nu er steeds meer tools beschikbaar komen. Als de resultaten niet kloppen, probeer je prompt dan explicieter te maken.
- get_code biedt een gestructureerde React + Tailwind-weergave van je Figma-selectie. Dit is een startpunt dat je AI-assistent kan vertalen naar iedere framework- of codestijl, afhankelijk van je prompt.
- get_variable_defs haalt de variabelen en stijlen op die in je selectie worden gebruikt (kleur, afstand, typografie, enzovoort). Dit helpt het model om rechtstreeks naar je tokens te refereren in de gegenereerde code.
Als je bijvoorbeeld ruwe code krijgt in plaats van tokens, probeer dan iets als het volgende:
- “Haal de namen en waarden van de variabelen op die in dit frame worden gebruikt.”
Voeg aangepaste regels toe
Stel projectrichtlijnen in om de output consistent te houden — een beetje zoals onboardinginstructies voor een nieuwe ontwikkelaar. Denk bijvoorbeeld aan het volgende:
- Gewenste indelingsprimitieven
- Ordening van bestanden
- Naamgevingspatronen
- Waarvoor geen hardcoding mag worden gebruikt
Je kunt dit aanleveren in elk formaat dat je MCP-client gebruikt voor instructiebestanden.
Voorbeelden:
---
beschrijving: Regels Figma Dev Mode MCP
globs:
alwaysApply: true
---
- De Figma MCP-server in Dev Mode biedt een eindpunt voor middelen dat afbeeldingen en SVG-middelen kan aanleveren
- BELANGRIJK: als de Figma MCP-server in Dev Mod een localhost-bron retourneert voor een afbeelding of SVG, gebruik die afbeeldings- of SVG-bron dan rechtstreeks
- BELANGRIJK: GEEN nieuwe pictogrampakketten importeren/toevoegen; alle middelen moeten in de Figma-payload zitten
- BELANGRIJK: gebruik of maak GEEN placeholders als er een localhost-bron wordt aangeleverd
# MCP-servers
## Regels Figma Dev Mode MCP
- De Figma MCP-server in Dev Mode biedt een eindpunt voor middelen dat afbeeldingen en SVG-middelen kan aanleveren
- BELANGRIJK: als de Figma MCP-server in Dev Mod een localhost-bron retourneert voor een afbeelding of SVG, gebruik die afbeeldings- of SVG-bron dan rechtstreeks
- BELANGRIJK: GEEN nieuwe pictogrampakketten importeren/toevoegen; alle middelen moeten in de Figma-payload zitten
- BELANGRIJK: gebruik of maak GEEN placeholders als er een localhost-bron wordt aangeleverd
- BELANGRIJK: gebruik altijd componenten uit `/path_to_your_design_system` wanneer mogelijk
- Geef prioriteit aan de getrouwheid aan Figma om ontwerpen exact overeen te laten komen
- Vermijd hardcoding van waarden, gebruik ontwerptokens uit Figma indien beschikbaar
- Volg de WCAG-vereisten voor toegankelijkheid
- Voeg documentatie voor componenten toe
- Plaats UI-componenten in `/path_to_your_design_system`; vermijd inline-stijlen tenzij absoluut noodzakelijk
Door deze instructies één keer toe te voegen, hoef je veel minder herhaalde verzoeken te doen en zorg je ervoor dat collega's of medewerkers consistent dezelfde verwachtingen volgen.
Controleer in de documentatie van je IDE- of MCP-client hoe je regels kunt structureren en probeer verschillende dingen uit om te ontdekken wat het beste werkt voor je team. Duidelijke, consistente richtlijnen leiden vaak tot betere, herbruikbare code met minder heen-en-weer communicatie.
Splits grote selecties op
Verdeel schermen in kleinere delen (zoals componenten of logische segmenten) voor snellere en betrouwbare resultaten.
Grote selecties kunnen de tools vertragen, fouten veroorzaken of leiden tot een onvolledige respons, vooral wanneer het model te veel context krijgt om te kunnen verwerken. Doe in plaats daarvan het volgende:
- Genereer code voor kleinere secties of afzonderlijke componenten (bijv. Kaart, Header, Zijbalk)
- Verklein je selectie als de tool traag wordt of vastloopt
Zo houd je de context beheersbaar en de resultaten voorspelbaar, zowel voor jou als voor het model.
Als iets in de output er niet helemaal goed uitziet, helpt het meestal om terug te gaan naar de basis: hoe het Figma-bestand is gestructureerd, hoe de prompt is geschreven en welke context wordt verzonden. Het volgen van de bovenstaande best practices kan een groot verschil maken en leidt vaak tot consistentere, herbruikbare code.