Hoe ik dit voor het eerst gebruikte

Een klant stuurde me een Figma-link met een dashboard-design dat ik in React moest bouwen. In plaats van handmatig elke component over te tikken, plakte ik de link in Claude met de instructie om het op te bouwen volgens mijn vaste stack. Tien minuten later had ik 80 procent werkende code.

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

Bij design systemen met duidelijke components, herhaalbare patterns en consistente naamgeving. Een Figma-bestand met losse "schermen" zonder component-structuur geeft veel slechtere code. Hoe schoner de Figma, hoe beter de output.

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

Animaties, complexe state-handling, en alles wat dynamisch reageert op data. Een Figma toont meestal een statische staat. Claude raadt redelijk goed wat dynamisch zou moeten zijn, maar voor productie-kwaliteit is dat altijd handmatig nawerk. Plus: design-tokens vertaalt hij niet altijd naar jouw setup.

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.