Claude leest Figma: van design naar werkende code in één opdracht
Foto: anshul kumar via Pexels
Claude kan inmiddels Figma-bestanden lezen via een MCP-integratie of Figma's eigen export en daar werkende HTML, CSS of React-code uit genereren. Voor designsystemen met goed gestructureerde components werkt dit verrassend goed: ik krijg in tien minuten een werkend prototype waar ik vroeger een halve dag aan zat. Voor losse mockups zonder duidelijk component-design moet je veel handmatig nawerk doen, want dan gokt de AI zijn eigen structuur.
Hoe ik dit voor het eerst gebruikte
De setup is simpel als je het eenmaal hebt gedaan. Je gebruikt de Figma MCP-server (open-source, een halve dag installatie) of je exporteert het frame als afbeelding plus Design-tokens. Claude heeft dan toegang tot de structuur van het design en de specifieke kleuren, fonts en spacing.
De winst van die eerste ervaring: een dashboard waar ik normaal een halve werkdag mee bezig was, was binnen anderhalf uur live. Niet pixel-perfect, niet helemaal volgens mijn smaak, maar werkend en op klanten-stijl. De rest was handmatig finetunen.
Wanneer dit echt goed werkt
Wat de output kwalitatief onderscheidt: of de designer in Figma met components heeft gewerkt of met losse rechthoeken en tekstvelden. Een Figma-bestand met "Button/Primary", "Card/Default" en "Input/WithLabel" als components geeft Claude direct herhaalbare React-componenten terug. Een bestand met 20 versies van een knop die elk net iets anders zijn, geeft 20 versies van dezelfde knop in code.
Mijn tip aan klanten en designers: investeer in de Figma-setup vóór de developer eraan komt. Een halve dag componenten netjes inrichten in Figma scheelt later twee dagen handmatige React-arbeid. Dat is een hele goede ROI.
Wat Claude nog niet goed doet
Concreet bij een laatste project: Claude zette de visuele kant van een filters-paneel goed neer, maar de logica voor het opslaan van de filterstatus, het synchroniseren met URL-params en het handelen van loading-states moest ik zelf bouwen. Dat is werk dat in geen enkele Figma staat, dus dat is logisch.
Wat ik er bij klanten over zeg: gebruik dit voor de eerste 80 procent van het visuele werk. De laatste 20 procent (interactie, edge-cases, prestatie-optimalisatie) blijft mensenwerk. Wie deze grens niet trekt, levert demo-kwaliteit op aan klanten en raakt klant en project allebei kwijt.
Conclusie
Mijn ervaring tot nu toe: ik gebruik Claude met Figma op vrijwel elk klantproject sinds de integratie er is. Voor wie veel UI-werk doet is het een echte productiviteitswinst, mits je Figma-bestanden netjes zijn opgezet. Bij mij staat het standaard in elk nieuw klantproject ingepland: eerst het design omzetten naar 80 procent werkende code, dan de laatste 20 procent met de hand finetunen. Wat het niet vervangt is je vakmanschap: je moet nog steeds weten wat je wel en niet kunt vertrouwen in de output. Probeer het op een klein project zelf, dan voel je waar de grens ligt voor jouw werk.
Veelgestelde vragen
-
Voor de simpele export-flow is een gratis Figma-account genoeg. Voor de MCP-server-integratie heb je toegang tot het bestand nodig en eventueel een Dev Mode-licentie als de klant die heeft ingericht. De meeste designers in Nederland werken met een betaald team-account, dus dit is meestal geen blokkade.
-
Sketch en Adobe XD zijn beperkter ondersteund. Voor Sketch zijn er omwegen via export naar SVG plus design-tokens. Voor wie nieuwe projecten start raad ik klanten aan om Figma te kiezen, juist vanwege deze AI-integratie. De productiviteitswinst over een paar projecten is groot genoeg om de migratie te rechtvaardigen.
-
Ja, je kunt een screenshot van een design uploaden en Claude bouwt er code naar. De kwaliteit is lager dan bij een echte Figma-link omdat hij de exacte spacing en kleuren moet "raden" uit pixels. Voor een grove eerste versie is het bruikbaar, voor productie-kwaliteit is een echte design-bron sterk aan te raden.
-
React (default), Vue, Svelte, plain HTML/CSS, Tailwind, en zelfs WordPress block-templates. Je geeft de stack aan in je prompt en Claude past zich aan. Voor exotische frameworks (Astro, Qwik) werkt het ook, maar de output is iets ruwer omdat er minder voorbeelden in de trainingsdata zitten.