Figma MCP is een connector waarmee een AI-assistent je Figma-bestanden rechtstreeks kan lezen: frames, lagen, componenten, afstanden, kleurstijlen en tekst, in plaats van te raden op basis van een screenshot dat je hebt geplakt. Het is gebouwd op MCP, het Model Context Protocol, een open standaard die Anthropic heeft uitgebracht zodat assistenten via één gemeenschappelijke interface met externe tools kunnen praten. Figma levert een officiële server, en de community heeft er nog meerdere gebouwd. Voor de installatie voeg je een klein configuratieblok toe aan je AI-client en geef je toegang tot je Figma-account. Dat duurt ergens tussen tien minuten en een middag, afhankelijk van hoe vertrouwd je bent met het bewerken van configuratiebestanden. Als die zin nu al klinkt als een vervelende middag, staat verderop op deze pagina een eenvoudigere route.
Wat is Figma MCP eigenlijk?
MCP is een standaard, geen product. Het definieert hoe een AI-assistent een extern systeem om informatie vraagt en hoe dat systeem antwoordt. Alles wat het protocol ondersteunt, wordt een MCP-server genoemd, en een server is eigenlijk gewoon een adapter: aan de ene kant praat hij met Figma, aan de andere kant met Claude in een indeling die Claude al begrijpt.
Figma MCP is dus een verkorte aanduiding voor een server die tussen je assistent en je ontwerpbestanden zit. Zodra die draait, werkt Claude niet langer vanuit een platte afbeelding, maar vanuit structuur. Het kan zien dat de knop een componentinstantie is, dat de padding 16 is en geen 15, en dat de tekststijl heet body/regular in plaats van "de kleinere grijze".
Er is een officiële server van Figma voor design-naar-code-workflows, en er zijn community-implementaties die bestanden lezen via de openbare API van Figma. Ze verschillen in de manier waarop je je authenticeert en hoeveel van het bestand ze beschikbaar maken, maar vanuit Claude gezien zien ze er allemaal hetzelfde uit: een lijst met beschikbare tools die het kan aanroepen wanneer je verzoek daarom vraagt. Als je eerst meer achtergrond wilt, hebben we een uitleg in gewone taal geschreven over wat MCP is en waarom het bestaat.
Wat kan Figma MCP Claude eigenlijk laten doen?
Het interessante is niet dat "Claude je bestand kan zien". Het gaat om de taken die niet langer handmatig hoeven te gebeuren.
- Zet een geselecteerd frame om in frontendcode die overeenkomt met het bestand. Geen ruwe benadering op basis van een afbeelding, maar afstanden, hiërarchie en componentnamen die rechtstreeks uit het ontwerp komen. Je controleert de code nog steeds. Je hoeft waarden niet langer opnieuw in te typen.
- Haal designtokens uit een bestand. Kleurstijlen, typografische schaal, afstandsstappen en hoekafrondingen, geëxporteerd als variabelen in het formaat dat je codebase gebruikt.
- Controleer een bestand aan de hand van zijn eigen systeem. Welke lagen gebruiken een hardgecodeerde hexwaarde in plaats van een stijl, welke frames gebruiken afstandswaarden die nergens anders voorkomen, en welke componenten zijn losgekoppeld en stilletjes bewerkt.
- Schrijf overdrachtsnotities en specificaties. Beschrijf statussen, randgevallen, lege statussen en wat er bij een fout gebeurt aan de hand van de daadwerkelijke frames in plaats van uit het geheugen.
- Beoordeel UX-teksten in context. Elke tekst in een flow, in de juiste volgorde, zodat je de drie verschillende woorden voor dezelfde actie kunt herkennen.
- Beantwoord vragen over een groot bestand. Waar wordt dit component gebruikt, wat is er gewijzigd in deze branch en welke schermen verwijzen nog naar het oude logo?
De rode draad bij al deze toepassingen: Figma MCP haalt de stap van kopiëren en plakken weg tussen het ontwerp en alles wat daarna komt. Dat is echt nuttig, maar het is ook het volledige voordeel. Het neemt geen ontwerpbeslissingen.
Hoe stel je een Figma MCP-server in?
De details verschillen per server en per client, en veranderen vaak genoeg dat een gekopieerde opdracht uit een blogpost een goede manier is om twintig minuten te verspillen. De vorm van het proces blijft hetzelfde, dus leer die vorm kennen.
- Kies een server. Begin met de officiële Figma-server als je doel is om binnen een editor van ontwerp naar code te gaan. Bekijk communityservers als je via de API toegang tot bestanden nodig hebt zonder dat de desktopapp actief is. Beide staan vermeld in de openbare MCP-serveroverzichten.
- Regel de toegang. Officiële tools werken doorgaans met je ingelogde Figma-sessie, met een instelling die je in de app moet inschakelen. Communityservers vragen meestal om een persoonlijk toegangstoken dat je genereert in de instellingen van je Figma-account. Behandel dat token als een wachtwoord: het kan alles lezen wat jij kunt lezen.
- Voeg de server toe aan de MCP-configuratie van je client. Claude Desktop, Claude Code en de meeste AI-editors lezen allemaal een configuratiebestand met de servers die je beschikbaar wilt hebben, de opdracht om elke server te starten en eventuele inloggegevens die daarvoor nodig zijn. Je voegt één item toe.
- Start de client opnieuw. Bij vrijwel elke melding dat iets niet werkt, blijkt de client na een configuratiewijziging nooit opnieuw te zijn gestart.
- Controleer de verbinding. Je client toont de verbonden servers en de tools die elke server aanbiedt. Als de lijst met tools er staat, is de verbinding correct ingesteld.
- Geef het iets om te bekijken. Bij de meeste workflows moet je een frame in Figma selecteren of er een link naartoe plakken en daarna je vraag stellen. Claude leest alleen wat je aanwijst.
Bij een eerste poging lopen mensen vaak tegen twee dingen aan. Servers die via de Figma-desktopapp werken, vereisen dat de app geopend is en het bestand geladen is. Er gebeurt dus niets als je de app hebt gesloten. En de meeste servers zijn vooral gericht op lezen: ze kunnen je veel beter vertellen wat er in een bestand staat dan er iets in wijzigen.
Wat zijn de eerlijke beperkingen van Figma MCP?
Goed om te weten voordat je er de hele middag aan besteedt.
- Je hebt een client nodig die MCP ondersteunt. Dat betekent een desktopapp, een editor of een terminal. Een browserchatvenster met een gratis abonnement is niet voldoende.
- Toegang is in de praktijk alles of niets. Met een persoonlijk token heb je doorgaans toegang tot elk bestand waar je account bij kan. Als je account deel uitmaakt van een gedeelde organisatie, denk daar dan over na voordat je er een genereert.
- Het werkt niet meer wanneer dingen veranderen. API's veranderen, servers worden herschreven en een clientupdate wijzigt de configuratie-indeling. Alles wat je hierop bouwt, heeft af en toe onderhoud nodig.
- Grote bestanden slokken context op. Een scherm met 400 lagen levert veel gestructureerde gegevens op. Verwijzen naar één frame werkt goed. Verwijzen naar een heel bestand vaak niet.
- Rommelige bestanden leveren rommelige uitvoer op. Als je lagen Frame 217 heten en de helft van de stijlen niet is gekoppeld, neemt de gegenereerde code dat over. De connector leest wat er staat; hij ruimt niets op.
- Het geeft toegang, geen beoordelingsvermogen. Claude kan je ontwerp nu zien. Of het dat ontwerp beoordeelt als een senior designer, is een volledig afzonderlijke vraag - en dat is de vraag die je vervolgens moet oplossen.
Wat als MCP meer configuratie vereist dan je wilt?
Hier is het onderscheid dat veel tijd bespaart. MCP bepaalt waar Claude bij kan. Het zegt niets over hoe goed Claude werkt zodra het daar toegang toe heeft. Dat zijn twee verschillende problemen, en de meeste designteams hebben met het tweede te maken, niet met het eerste.
Als je eigenlijk wilt dat Claude je een degelijke designcritique, een onderzoeksplan of een component-API geeft waar een architect voor designsystemen zijn goedkeuring aan zou geven, heb je helemaal geen connector nodig. Je hebt Claude nodig die als die specialist werkt. Dat is wat een Skill-bestand doet: een kort Markdown-document dat je één keer uploadt en Claude één rol, één methode en één kwaliteitsnorm voor de uitvoer geeft. Installatie duurt ongeveer drie minuten en het werkt op elk abonnement, met of zonder MCP. Verschillende van de onderstaande design-Skills zijn momenteel gratis, zodat je het idee kunt uitproberen voordat je iets uitgeeft.
De designer, niet de connector
Gratis
deze skill
Flows, statussen, hiërarchie en interactielogica, beoordeeld zoals een productdesigner dat zou doen: waar dient het scherm voor, wat ontbreekt er en wat doet de gebruiker als het misgaat? Plak een scherm erin of beschrijf het; een connector is niet nodig.
Denholm bekijken →De combinatie die in de praktijk het beste werkt: MCP om te lezen, een Skill om na te denken. Claude haalt de echte waarden uit je bestand en past daar vervolgens een methode op toe, in plaats van te improviseren.
Voor de helft met tokens en componenten
$14.99
deze skill
Tokennamen, component-API's, variantstructuur en de regels voor wanneer iets een plek in het systeem verdient. Precies de beoordelingslaag boven op de onbewerkte gegevens die een Figma-connector je aanlevert.
Vashti bekijken →Voordat er ook maar iets wordt ontworpen
Gratis
deze skill
Onderzoeksplannen, niet-sturende interviewscripts en een methode om transcripties om te zetten in bevindingen waar een team mee aan de slag kan. Momenteel ook gratis, waardoor het een goedkope manier is om te testen of Skills überhaupt je output veranderen.
Bekijk Melisande →Er zijn in totaal 32 gratis skills in de gratis collectie, en de bredere designset vind je bij creative-, content- en designskills. Als je stap voor stap wilt zien hoe je dit installeert, bekijk dan hoe je een Claude-skill installeert.
Samengevat:
Figma MCP verbindt Claude met je echte designbestanden, zodat het vanuit de structuur werkt in plaats van vanuit screenshots. Het is de installatie waard als je regelmatig code genereert of tokens extraheert. Het verandert niets aan de kwaliteit van Claude's designbeoordeling. Dat is precies wat een skillbestand verbetert: begin met Denholm - UX/UI Product Designer, momenteel gratis, en voeg Vashti - Design Systems Architect toe voor $14.99 zodra tokens en componenten het probleem worden.
Figma MCP: veelgestelde vragen
Is Figma MCP gratis?
Het protocol is een open standaard en de servers zelf zijn over het algemeen gratis te installeren. Wat je nodig hebt, is een Figma-account met toegang tot de bestanden en een AI-client die MCP ondersteunt. Voor de functies die dit de moeite waard maken, is bij sommige AI-clients een betaald abonnement nodig. De kosten liggen dus aan die kant, niet bij de connector.
Kan Claude mijn Figma-bestand via MCP bewerken?
Ga ervan uit van niet, tenzij de specifieke server die je hebt gekozen anders aangeeft. De meeste van deze connectors zijn gemaakt om te lezen: ze halen structuur, waarden en content op. Schrijftoegang komt minder vaak voor en is kwetsbaarder. Test dit daarom op een duplicaatbestand in plaats van op werk dat live in gebruik is.
Werkt Figma MCP met Claude Code?
Ja, in die zin dat Claude Code MCP-servers in het algemeen ondersteunt. Precies daarom is het een populaire combinatie voor design-to-codewerk. Aan de ene kant wordt het frame uitgelezen en aan de andere kant wordt de component geschreven, binnen dezelfde sessie. Hetzelfde geldt voor Claude Desktop en de meeste AI-bewuste editors.
Heb ik nog steeds een designskill nodig als ik Figma MCP heb ingesteld?
Ze beantwoorden verschillende vragen. MCP bepaalt wat Claude kan zien. Een skill bepaalt hoe Claude werkt met wat het ziet. Daarom vullen ze elkaar aan in plaats van met elkaar te concurreren. We vergeleken de twee benaderingen rechtstreeks in Claude Skills vs MCP.