Claude Figma koppelen: zo doe je het, stap voor stap

Eerst kiezen

Claude en Figma: vier koppelingen die op elkaar lijken

Zoek je op "claude figma" of "figma mcp", dan vind je vier routes door elkaar. Ze praten alle vier met dezelfde Figma MCP-server, een koppelstuk dat Figma zelf beheert (MCP is de standaard waarmee Claude met andere software praat, zie MCP). Het verschil zit in waar je werkt en wat Claude daarna met het ontwerp mag doen. Kies eerst je route, dan sla je de helft van de stappen over.

Onze keuze voor de meeste lezers

Wil je van een ontwerp naar werkende code, kies dan route 2. Figma zelf noemt de remote server de aanbevolen route: die heeft de meeste functies en is de enige die naar het Figma-canvas kan schrijven. De plugin brengt bovendien Figma's eigen skills mee (vaste werkinstructies voor Claude, zie agent skills), zodat Claude de tools in de goede volgorde gebruikt. Wil je alleen een ontwerp laten uitleggen of een stroomschema maken, dan is route 1 lichter en heb je geen terminal nodig.

Voorbereiding

Wat heb je nodig voor Claude en de Figma MCP-server?

Je hebt twee accounts nodig: één bij Claude en één bij Figma. De Figma-kant bepaalt hoeveel je kunt doen. Wie dat overslaat, loopt na een paar prompts tegen een limiet aan en denkt dat de koppeling stuk is.

Hoeveel Figma-aanroepen je krijgt

Figma telt elke keer dat Claude iets uit Figma leest als één tool-aanroep. Een eerste frame omzetten kost er al snel een paar: een overzicht, de ontwerpcontext, de variabelen en een screenshot. De limieten volgens Figma op 28 oktober 2026:
View- of Collab-seat (ook op Starter): 20 aanroepen per maand.
Dev- of Full-seat op Professional of Education: 200 per dag en 10 per minuut.
Dev- of Full-seat op Organization: 200 per dag en 15 per minuut.
Dev- of Full-seat op Enterprise: 600 per dag en 20 per minuut.
Tools die naar Figma schrijven tellen niet mee voor deze limiet. Figma kan de limieten op elk moment aanpassen.

Wat het kost

De Figma MCP-server zelf heeft geen eigen prijs: je betaalt je Figma-seat en je Claude-plan. Schrijven naar het canvas is volgens Figma gratis zolang het in beta is en wordt later een betaalde functie op basis van gebruik. Aan de Claude-kant telt alles mee in je gewone limiet; een groot frame vult je contextvenster sneller dan een gewone vraag. Zie Claude abonnementen voor de plannen.

In de Claude-app

De Claude Figma-connector in de Claude-app aanzetten

In claude.ai, Claude Desktop en de mobiele app koppel je Figma via de connectordirectory. Figma bouwt deze connector zelf en Anthropic heeft hem geverifieerd. Hij gebruikt dezelfde remote server als Claude Code, maar met minder tools.

Wat je in de Claude-app met Figma kunt

De connectorpagina op claude.com noemt negen tools. Daarmee leest Claude een frame of laag uit een Figma-link, vraagt de gebruikte variabelen en stijlen op, haalt Code Connect-koppelingen op, maakt een regelbestand voor je designsystem en zet een beschrijving om in een FigJam-diagram, zoals een stroomschema of een Gantt-planning. Een screenshot uit Figma komt in Claude volgens diezelfde pagina alleen als beschrijving binnen, niet als afbeelding.

Wat de connector niet kan

Code in je eigen project zetten kan niet: de Claude-app heeft geen toegang tot je codemap. De schrijftools use_figma (ontwerpen maken en aanpassen) en generate_figma_design (een live website als lagen naar Figma halen) staan niet in de toollijst van de connector, en de Claude-app staat ook niet in Figma's lijst van clients voor code naar canvas. Wil je dat, gebruik dan Claude Code. Diagrammen die Claude maakt staan in FigJam; een bestand dat je nog niet hebt geclaimd is openbaar voor iedereen met de link tot je inlogt of het aan je drafts toevoegt.

Zet schrijfrechten op goedkeuring

Open de Figma-connector onder Customize > Connectors en kies bij Tool permissions per groep Always allow, Needs approval of Blocked. Zet alles wat schrijft op Needs approval. Op Team en Enterprise stelt een Owner dit voor iedereen in. Meer over connectors lees je in de MCP-gids.

Stappenplan

Figma MCP in Claude Code: van frame naar code in zeven stappen

Dit is route 2: de Figma-plugin in Claude Code. Die plugin zet de verbinding met de remote server van Figma klaar en voegt Figma's skills toe. Werk in de map van een bestaand project, zodat Claude je eigen componenten en stijlen kan hergebruiken.

Geen plugins toegestaan? Voeg de server handmatig toe

Faalt de installatie, dan heeft je organisatie plugins misschien geblokkeerd. Vraag je Claude-beheerder, of voeg de server zelf toe: claude mcp add --transport http figma https://mcp.figma.com/mcp. Dat geldt alleen voor de huidige projectmap; voor al je projecten typ je claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp. Start een nieuwe sessie, typ /mcp, kies figma, kies Authenticate en klik in de browser op Allow access. Je mist dan wel Figma's skills. Alles over scopes staat in een MCP-server toevoegen.

Heb je de connector al in claude.ai?

Log je in Claude Code in met hetzelfde Claude-account, dan verschijnen connectors uit claude.ai vanzelf in Claude Code. Installeer je daarnaast de plugin, dan herkent Claude Code dat beide naar hetzelfde serveradres wijzen en gebruikt hij de plugin, omdat die voorrang heeft. Je hoeft de connector dus niet te verwijderen.

De desktopserver in Dev Mode (route 4)

Figma raadt de remote server sterk aan; kies de desktopserver alleen als je organisatie lokaal moet werken. Je hebt de Figma-desktopapp nodig en een Dev- of Full-seat op een betaald plan. Open een Figma Design-bestand, klik niets aan en schakel met Shift+D naar Dev Mode. Klik rechts in het blok MCP server op Enable desktop MCP server. De server draait dan op http://127.0.0.1:3845/mcp. Voeg hem toe met claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp en start Claude Code opnieuw. Let op: de desktopserver kan niet naar Figma schrijven. Staan de remote server en de desktopserver allebei aan, dan kan Claude de desktopserver kiezen en de schrijftools missen.

Controle

Werkt het? Test de Figma MCP-server met een eerste prompt

Test eerst of Claude het juiste account ziet en het frame kan lezen, voordat je code laat schrijven. Zo weet je bij een fout direct of het aan de koppeling of aan je prompt ligt.

Controle 1: wie ben ik in Figma?

Typ in Claude Code of in de Claude-app: Gebruik de Figma-tool whoami en vertel me met welk Figma-account, welk plan en welke seat je verbonden bent. Krijg je je eigen naam en een Dev- of Full-seat terug, dan zit de koppeling goed. Zie je een View- of Collab-seat, weet dan dat je maar 20 aanroepen per maand hebt.

Controle 2: de eerste prompt om te plakken

Plak dit in Claude Code, in de map van je project, met jouw link:

Lees dit Figma-frame: [plak hier je link]. Bouw nog niets. Geef me eerst: 1) een lijst van de componenten in het frame, 2) welke componenten we in ons project al hebben die je zou hergebruiken, 3) de kleuren, lettertypes en afstanden als variabelen uit Figma, 4) wat je niet uit het ontwerp kunt afleiden, zoals gedrag bij klikken of fouten. Wacht daarna op mijn akkoord.

Waar je op let

Je ziet Claude Figma-tools aanroepen, zoals get_design_context, get_metadata en get_variable_defs, en je keurt die goed als Claude erom vraagt. Het antwoord noemt de echte namen van je lagen en variabelen uit Figma, niet verzonnen kleurcodes. En Claude noemt componenten uit je eigen project. Zie je alle drie, dan werkt het. Geef daarna pas akkoord om te bouwen.

Waarom "bouw nog niets" erin staat

Een Figma-ontwerp laat zien hoe iets eruitziet, niet hoe het werkt. Door Claude eerst te laten opschrijven wat hij hergebruikt en wat hij niet weet, vang je twee bekende fouten vooraf: dubbele componenten naast je bestaande, en gedrag dat Claude zelf invult. Die lijst kost je één minuut lezen en scheelt een ronde herbouwen.

Naar Figma schrijven

Kan Claude ook in Figma ontwerpen? Terugschrijven naar het canvas

Ja, via de remote server in Claude Code. Er zijn drie manieren, met elk eigen voorwaarden. Alle drie zijn nieuw; Figma noemt de uitkomst van het schrijven zelf nog beta-kwaliteit die je moet nalopen.

Een voorbeeldprompt voor code naar Figma

Figma geeft zelf dit voorbeeld: Start a local server for my app and capture the UI in a new Figma file. In het Nederlands werkt het ook: "Start de lokale server van onze app en zet de inlogpagina als nieuw Figma-bestand op het canvas." Er opent een browservenster met een werkbalk waarin je Entire screen of Select element kiest. Figma introduceerde dit op 17 februari 2026 als Claude Code to Figma.

Wanneer je dit gebruikt

Handig als je site al bestaat en de ontwerper wil verder schaven in Figma, of als je een oude pagina zonder ontwerpbestand wilt vastleggen. Niet handig als je verwacht dat Figma daarna je eigen componenten gebruikt: de lagen zijn plat. Wil je wel met je bibliotheek bouwen, gebruik dan use_figma met de skill figma-use, die de plugin uit stap 2 al meebrengt.

Of Claude Design?

Figma met Claude of Claude Design: wanneer kies je wat?

Claude Design is het ontwerpcanvas van Anthropic zelf, in de gewone Claude-app. Het lijkt op een Figma-koppeling, maar het werkt andersom: je begint bij een beschrijving in plaats van bij een bestaand Figma-ontwerp. De officiële pagina en het helpartikel van Claude Design noemen Figma niet als import- of exportdoel.

Beslisregel

Kies de Figma-koppeling als het ontwerp al in Figma staat of een ontwerper het daar bewaakt. Dan is Figma de bron van waarheid en haalt Claude er alleen uit wat nodig is.
Kies Claude Design als er nog geen ontwerp is en je geen ontwerper hebt. Het verschil zit in de eerste versie: Claude Design maakt die uit tekst, Figma niet.
Combineer ze als je in Claude Design schetst en de ontwerper in Figma wil verder werken. Geef het ontwerp dan door aan Claude Code, laat het bouwen en haal de pagina met generate_figma_design als lagen naar Figma. Een directe export van Claude Design naar Figma noemt Anthropic niet.
De volledige vergelijking met Canva, Figma en Lovable staat in Claude Design vs Figma.

Problemen oplossen

Claude Figma-koppeling werkt niet: melding, oorzaak, oplossing

Zoek je melding of symptoom op in de eerste kolom. De oorzaken komen uit de documentatie van Figma en Claude Code.

Ons oordeel

Ons oordeel: Claude en Figma veilig inzetten in een MKB-team

De koppeling is in een half uur gedaan. Of het iets oplevert, hangt af van twee dingen: hoe netjes je Figma-bestand is opgebouwd en wie er mag lezen en schrijven. Dit adviseren we teams in onze trainingen.

Wanneer wel, wanneer niet

Wel: als er een Figma-ontwerp ligt dat jullie zelf of een bureau heeft gemaakt, en iemand in je team een frontend in code onderhoudt. Dan scheelt het overtypen van maten, kleuren en teksten. Ook voor een productmanager die een flow in FigJam wil laten tekenen is de connector een kleine stap.
Niet (nog niet): als je geen codeproject hebt en alleen een website wilt. Dan is een sitebouwer of een website bouwen met Claude Code een betere start. En niet met een View-seat voor dagelijks werk: 20 aanroepen per maand zijn op één middag op.

Rechten: wat mag Claude lezen en schrijven?

Claude ziet in Figma precies wat jouw Figma-account ziet, en schrijft waar jij bewerkrechten hebt. Dat betekent ook: een collega met toegang tot alle klantprojecten van jullie bureau geeft Claude die toegang ook. Zet daarom in Claude bij de Figma-connector de schrijftools op Needs approval, en geef Claude in Claude Code geen automatische toestemming voor use_figma. Op Team en Enterprise bepaalt een Owner of Figma beschikbaar is en welke tools zijn toegestaan; leden kunnen dat niet omzeilen. Code Connect en de desktopserver vragen bovendien een Dev- of Full-seat, dus de Figma-beheerder bepaalt mee wie dit kan.

AVG: wat staat er in je ontwerpen?

Wat Claude uit Figma leest, gaat als context naar Anthropic. In de meeste ontwerpen staat niets gevoeligs, maar let op twee dingen. Mockups met echte klantnamen, adressen of e-mailadressen, en screenshots van een klantportaal met echte gegevens. Vervang die door voorbeelddata voordat je het frame aan Claude geeft. Werk je met klantdata, kies dan een Team- of Enterprise-plan; daar worden je gegevens standaard niet gebruikt om modellen te trainen. Meer in Claude privacy en zakelijk gebruik. En een FigJam-diagram dat je niet claimt, is openbaar via de link.

De fout die we beginners het vaakst zien maken: de hele pagina in één keer

Het gaat zo: je kopieert de link van een complete Figma-pagina met tien schermen en vraagt "bouw dit". Claude krijgt een enorme hoeveelheid ontwerpdata binnen, raakt de draad kwijt in losse lagen en levert een pagina met vaste maten, eigen knoppen en kleurcodes die nergens in je project staan. Op een View-seat ben je dan ook nog je maandlimiet kwijt. Werk daarom per frame of per component, laat Claude eerst opschrijven wat hij hergebruikt (de prompt in Werkt het?) en bouw daarna het volgende frame. Hoe beter de ontwerper met componenten en variabelen werkt, hoe minder Claude hoeft te raden.

Een MKB-voorbeeld

Neem een groothandel met een eigen bestelportaal in React, één ontwikkelaar en een freelance ontwerper die nieuwe schermen in Figma aanlevert. De ontwerper maakt een nieuw scherm "Bestelling herhalen". De ontwikkelaar kopieert de link naar dat frame en vraagt Claude Code eerst om de lijst met bestaande componenten die hij hergebruikt en de vragen over gedrag, zoals wat er gebeurt als een product uitverkocht is. Daarna bouwt Claude het scherm op een eigen branch en opent de ontwikkelaar een pull request. De ontwerper bekijkt het resultaat in de browser en geeft feedback in Figma. Wil je dit met je team in één dag goed neerzetten, met afspraken over branches, review en CLAUDE.md, dan is dat wat we oefenen in de Claude Code Masterclass.

Wat nu?

Wat nu? Vervolgstappen na je Claude Figma-koppeling

Werkt de koppeling, dan zijn dit logische volgende stappen. Kies er één die bij je volgende klus past.

Je code veilig in GitHub zetten

Laat Claude elk nieuw scherm op een eigen branch bouwen en een pull request maken, zodat iemand meekijkt voordat het live gaat. Stap voor stap in Claude Code en GitHub. Wil je het werk in je editor zien in plaats van in de terminal, volg dan Claude Code in VS Code.

Meer koppelingen en ontwerptools

Werkt je marketing in Canva in plaats van Figma, lees dan Claude en Canva. Wil je zelf een andere MCP-server toevoegen, dan helpt een MCP-server toevoegen. Hoe plugins werken en hoe je ze in een team beheert, staat in de plugins-gids.

Dieper in Claude Code en MCP

Wat MCP is en welke servers er nog meer bestaan, lees je in de MCP-gids en het woordenboekitem MCP-server; zelf een server bouwen lees je in MCP-server maken. Alle commando's uit deze tutorial, zoals /plugin en /mcp, staan in de commands-gids. Waarom een AI-agent met toegang tot je bestanden ook een aanvalsdoel is, lees je bij prompt injection.

Meer tutorials

Zelf een site bouwen met Claude Code: website bouwen. Alle tutorials staan in het overzicht.