Hoe Claude Code + Figma Mijn Oude UI-Workflow Doodde
Ik had bijna een klantdeadline gemist vorige maand. Niet omdat de code moeilijk was — het React-dashboard dat ik had gebouwd werkte perfect in de browser. Het probleem? Het vertalen van mijn werkende prototype naar iets wat het designteam daadwerkelijk kon beoordelen, annoteren en itereren binnen Figma. Ik bracht een hele middag door met het screenshotten van componenten, het handmatig opnieuw maken van indelingen in Figma-frames, en dan — nadat de ontwerper wijzigingen had aangebracht — die visuele aanpassingen omgekeerd terug vertalen naar JSX.
Zes uur van mijn leven. Weg. Aan vertaalwerk dat nul waarde toevoegde aan het product.
Die avond, scrollend door mijn feed om 1 uur 's nachts (zoals engineers doen), stuitte ik op iets waardoor ik rechtop ging zitten. Figma had hun MCP-server bijgewerkt, en Claude Code had nu een directe brug naar Figma's canvas. Code naar Figma pushen. In Figma bewerken. Terugpullen als productieklare code. Een volledige bidirectionele lus.
Ik stelde het de volgende ochtend in. En eerlijk gezegd? Mijn front-end workflow zal nooit meer hetzelfde zijn.
De Pijn Die Elke Front-End Ontwikkelaar Doet Alsof Hij Niet Bestaat
Hier is iets dat niemand op conferenties of in die gepolijste YouTube-tutorials bespreekt. Het echte knelpunt in moderne UI-ontwikkeling is niet het schrijven van de code. Het is niet eens het ontwerp. Het knelpunt is de kloof tussen beide.
Ik bouw al jaren professioneel interfaces — React, Vue, full-stack Laravel-apps met complexe dashboards. En de workflow is altijd ongeveer hetzelfde geweest: de ontwerper maakt mockups in Figma, de ontwikkelaar tuurt naar het inspectiepaneel en probeert padding-waarden te matchen, de ontwikkelaar bouwt het ding, de ontwerper zegt "dat klopt niet helemaal," en de hele cyclus herhaalt zich.
Handoff-tools zoals Zeplin, Avocode en Figma's eigen Dev Mode hebben geprobeerd dit op te lossen. Ze helpen. Maar ze zijn allemaal eenrichtingsverkeer. Ze gaan ervan uit dat ontwerpers ontwerpen, ontwikkelaars ontwikkelen, en de twee zullen elkaar ontmoeten in een Jira-ticket.
Wat ik ontdekte met de Claude Code en Figma MCP-integratie is fundamenteel anders. Het is geen handoff-tool. Het is een brug waarmee je tegelijk in beide werelden kunt bestaan.
Waarom Modus-Gebaseerd Denken Alles Verandert
Codemodus is waar ik tijd doorbreng in Claude Code. Snelle iteratie. UI-statussen testen. Interacties bedraden. Een volledig interactief dashboard in minuten. Dit is waar het engineering-brein leeft.
Ontwerpmodus is Figma. Visuele polish. Typografie. Spatiëring die "goed aanvoelt." Dit is ook waar samenwerking plaatsvindt — ontwerpers, productmanagers en stakeholders kunnen allemaal inspringen, opmerkingen achterlaten en wijzigingen voorstellen zonder een enkele regel code aan te raken.
De magie zit in de wissel. Ik bouw iets in Claude Code, push het naar Figma, en plotseling is mijn werkend prototype een set volledig bewerkbare frames. De ontwerper past spatiëring aan, wisselt een kleur, reorganiseert de indeling. Dan pull ik die wijzigingen terug naar Claude Code, en het genereert bijgewerkte productieklare code.
De Claude Code naar Figma-Brug Instellen (Stap voor Stap)
Vereisten:
- Claude Code geïnstalleerd en werkend
- Een Figma-account — op het Pro-niveau of hoger. Het gratis niveau beperkt API-verzoeken sterk
- Een persoonlijk Figma-toegangstoken
- Basiskennis van MCP (Model Context Protocol)
Stap 1: Schakel de Figma MCP-Server in Claude Code in
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@anthropic-ai/figma-mcp-server"],
"env": {
"FIGMA_ACCESS_TOKEN": "your-personal-access-token-here"
}
}
}
}
Pro tip: Hardcodeer je toegangstoken niet direct in het configuratiebestand als je het in versiecontrole zet.
Stap 2: Genereer je Figma Persoonlijk Toegangstoken
In Figma, ga naar Instellingen → Account → Persoonlijke Toegangstokens. Maak een nieuw token aan met lees- en schrijfrechten. Kopieer het onmiddellijk — Figma toont het slechts één keer.
Stap 3: Authenticeer de Plugin in Claude Code
Na de configuratie test je de verbinding door Claude Code te vragen een Figma-bestand te lezen dat je al open hebt.
Stap 4: Test de Push/Pull-Lus
Schrijf een eenvoudig React-component in Claude Code. Vertel Claude Code het dan naar een specifiek Figma-bestand te pushen. Schakel naar Figma. Je zou een nieuw frame moeten zien verschijnen op je canvas dat het gerenderde component vertegenwoordigt.
De Workflow Die Echt Uren Bespaart
Ochtend: Codemodus-sprint
Ik begin in Claude Code. Puur bouwmodus. Ik neem de vereisten voor de feature die ik werk en genereer het volledige interactieve prototype. Niet een mockup — een werkend prototype met echte status, echte data en echte interacties. Claude Code is absurd snel hierin. Een compleet dashboardpagina met grafieken, filters en datatabellen duurt misschien 15-20 minuten.
Sleutels inzicht: ik maak me in dit stadium geen zorgen over pixel-perfecte ontwerp. Ik focus op functie en structuur.
Halverwege de ochtend: De Grote Push
Zodra ik werkende componenten heb, push ik alles naar Figma in één batch. Elk component wordt een apart frame. Verschillende UI-statussen (laden, leeg, fout, gevuld) worden ook aparte frames.
Middag: Ontwerpmodus-review
Dit is waar het team het overneemt. De ontwerper bekijkt de frames, maakt visuele aanpassingen, experimenteert met alternatieve indelingen. Productmanagers kunnen opmerkingen achterlaten direct op de frames.
Laat middag: De Pull
Zodra de designreview klaar is en het team het eens is over de richting, pull ik de bijgewerkte frames terug naar Claude Code. Claude Code genereert schone, productieklare code die alle visuele wijzigingen weerspiegelt.
Ontwerpsystemen Verbinden: Waar Het Krachtig Wordt
De Code Connect-plugin laat je Figma-ontwerpcomponenten koppelen aan daadwerkelijke codecomponenten. Dus je Figma "Button/Primary/Large"-component wijst direct naar je <Button variant="primary" size="lg" /> React-component.
Eenmaal geconfigureerd, is de door Claude gegenereerde code uit Figma-frames geen generieke HTML en CSS. Het is code die je daadwerkelijke componentenbibliotheek gebruikt, je naamgevingsconventies volgt en je ontwerptokens respecteert.
De Eerlijke Beperkingen (Wat Niemand Anders Je Zal Vertellen)
Het gratis niveau is vrijwel onbruikbaar hiervoor. Figma's gratis niveau beperkt API-aanroepen aanzienlijk.
Complexe animaties en interacties overleven de heen-en-terugreis niet. Als je een component bouwt met Framer Motion-animaties in Claude Code, toont het Figma-frame de statische status.
Grote bestanden worden traag. Ik probeerde een geheel dashboard-applicatie (15+ pagina's, honderden componenten) in één keer naar Figma te pushen. Het duurde enkele minuten en het resulterende Figma-bestand was traag.
De gegenereerde code is niet altijd idiomatisch. Bij het terugpullen van ontwerpwijzigingen vanuit Figma genereert Claude Code soms codepatronen die technisch werken maar niet overeenkomen met de conventies van je project.
Wat Ik Na Drie Weken Heb Gemeten
Tijd besteed aan ontwerp-naar-code-vertaling: Daalde van ongeveer 8-10 uur per week naar ongeveer 2-3 uur.
Beoordelingscycli voor ontwerp: Voorheen gemiddeld 3 rondes feedback voor een UI werd goedgekeurd. Nu gemiddeld 1,5 rondes.
Codekwaliteit bij eerste poging: Gedaald met ongeveer 60% in het aantal PR-opmerkingen gerelateerd aan visuele implementatie.
Tijd tot eerste werkend prototype: Van ongeveer 2 dagen naar ongeveer een halve dag.
Jouw Eerste Uur: Een Praktisch Startpunt
- Stel de MCP-verbinding in zoals hierboven beschreven. Budget 15-20 minuten.
- Bouw iets eenvoudigs in Claude Code — een landingspagina hero-sectie, een prijskaart.
- Push het naar een vers Figma-bestand. Bekijk wat er verschijnt.
- Breng één bewuste wijziging aan in Figma — wissel een kleur, verander de lettergrootte.
- Pull het terug en bekijk de gegenereerde code.
Die enkele lus — bouwen, pushen, bewerken, pullen — zal je meer leren over deze workflow dan welke tutorial dan ook.
Laten We Samenwerken
- Fiverr: fiverr.com/s/EgxYmWD
- Portfolio: mejba.me
- Ramlit Limited: ramlit.com
- ColorPark: colorpark.io
- xCyberSecurity: xcybersecurity.io
