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

1. Open de Figma Desktop-app en zorg ervoor dat je de nieuwste versie gebruikt.
2. Maak of open een Figma Design-bestand.
3. Open het Figma-menu in de linkerbovenhoek.
4. 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.

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.

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

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

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

Op basis van link

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

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.

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, niet Group 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:

1. Genereer code voor kleinere secties of afzonderlijke componenten (bijv. Kaart, Header, Zijbalk)
2. 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.