Design system opzetten met AI: Code Connect verlaagt kosten met 22%
Foto: Eduardo Rosas via Pexels
Als je een design system opzetten wil dat goed werkt met AI, begin dan met Code Connect. Die koppelt je Figma-componenten direct aan je productie-code, zodat een AI-agent precies weet welke componenten hij moet gebruiken. In tests bij Coinbase daalde het tokenverbruik met 11,5%, de implementatietijd met 22% en de kosten met 22,5%. Zonder die koppeling gaat een agent raden en dat kost je geld.
Waarom raadt een AI je componenten mis? Context = kwaliteit
Dit is iets waar ik eerlijk gezegd te lang mee heb rondgelopen. Ik werkte met Figma en Claude voor design-to-code werk, en de output was wisselend. Soms perfect, soms een handgemaakte versie van een component die we al hadden. Het probleem zat niet in het model. Het zat in de context die ik meegaf.
Code Connect is de oplossing die Figma biedt voor dit probleem. Het is een koppeling (mapping) tussen een component in Figma en zijn tegenhanger in de code. Vergelijk het met een woordenboek: de AI ziet 'Stepper' in het design en slaat op in het woordenboek op wat dat in jouw codebase betekent, inclusief alle properties en gebruik.
Zonder dat woordenboek gaat de agent gokken. En bij complexe componenten, zoals een Stepper met tientallen properties, levert dat bijna altijd rommel op. Met een goede design system opzetten-aanpak leg je in één tekstbestand vast hoe jouw merk eruitziet, dat is een laagdrempelig startpunt als je nog geen volledig design system hebt.
Wat leverde 22% tijdsbesparing op in de praktijk? 22,5% kostenreductie gemeten
De testopzet was slim. Ze gebruikten een design dat niet te simpel en niet te complex was: een mix van componenten, inclusief een paar lastige gevallen zoals de Stepper (complex, veel properties) en icoon- en illustratienamen (die agents notoir slecht raden).
Dat laatste punt trof me. Agenten hallucineren icoon- en illustratienamen. Ze verzinnen namen die niet bestaan. Na het instellen van Code Connect verdween dat probleem volledig. Niet minder vaak. Verdwenen.
De verklaring is logisch: de agent hoeft niet meer te zoeken en te raden welk icoon er bedoeld wordt. De mapping vertelt het hem direct. Minder zoekwerk betekent minder tokens, en minder tokens betekent lagere kosten en kortere looptijd. Dit is precies waarom ik nu bij elk project als eerste check of het design system goed is opgezet voordat ik een AI-agent op een design loslaat. Een slordig design system is een dure agent.
Overigens controleerde de test ook voor prompt caching, een techniek waarbij eerder verwerkte context hergebruikt wordt. Dat kan resultaten vertekenen als je het niet uitschakelt. Ze deden dat wel, wat de uitkomsten betrouwbaarder maakt.
Agent skills vs. Code Connect: doen ze hetzelfde?
Dit is een inzicht dat ik zelf ook pas later begreep. Ik dacht dat goede instructies (agent skills of een systeem-prompt) genoeg waren om een AI goed te laten presteren op design-to-code taken. Dat klopt deels. Maar instructies over hoe je iets bouwt helpen niet als de agent niet weet wat er al gebouwd is.
De vergelijking die ik gebruik: agent skills zijn de werkwijze van een nieuwe collega, Code Connect is het onboarding-document met alle bestaande componenten. Je hebt beide nodig.
Interessant is ook de langetermijnvisie hierachter. Naarmate AI-modellen beter worden, hebben ze minder expliciete instructies (skills) nodig om goede keuzes te maken. Maar de kwaliteit van de context, weten welke componenten er zijn en hoe ze werken, blijft altijd relevant. Dat maakt Code Connect eigenlijk toekomstvaster dan agent skills.
Wil je begrijpen hoe Figma Skills werken als herbruikbare AI-instructies? Lees dan hoe Figma Skills designers helpen met AI-workflows als goed startpunt om het verschil voelbaar te maken.
Wat moet je nu doen als je een design system hebt? Check je mappings eerst
Het Coinbase-team had hetzelfde probleem: bestaande mappings waren verouderd en nieuwe componenten hadden helemaal geen template. Ze losten dat op door een agent in te zetten die de mappings parallel bijwerkte. In vier uur hadden ze volledige dekking voor hun design system.
Dat is de aanpak die ik zou volgen. Niet handmatig elke component doorlopen, maar een gestructureerde lijst maken en een agent het werk laten doen. Let op: de output moet je nog wel controleren. Een agent die mappings schrijft kan fouten maken, zeker bij complexe componenten.
Heb je nog geen design system? Dan is dit een goed moment om na te denken over hoe je dat opzet. Niet als luxe voor grote teams, maar als fundament voor alles wat je met AI bouwt. Met een DESIGN.md leg je in één tekstbestand vast hoe jouw merk eruitziet, dat is een laagdrempelig startpunt als je geen volledig design system hebt.
Voor wie WordPress gebruikt en wil weten hoe AI past in het bredere plaatje van webdesign en development: AI inzetten voor WordPress-code begrijpen en verbeteren laat zien hoe je AI als sparringpartner gebruikt in plaats van als schrijfmachine.
Conclusie
Een goed design system zonder goede componentkoppeling levert AI slechte context en dus slechte code.
Code Connect verlaagde tokenkosten en implementatietijd elk met circa 22% in een gecontroleerde test.
Hoe sterker je AI-modellen worden, hoe meer de kwaliteit van je context bepaalt of de output klopt.
Veelgestelde vragen
-
Code Connect is een Figma-functie waarmee je een component in je design koppelt aan de bijbehorende component in je codebase. Je legt vast hoe de component heet in de code, welke properties hij heeft en hoe je hem gebruikt. Een AI-agent die vervolgens een design omzet naar code krijgt die informatie direct mee, zodat hij niet hoeft te raden. Meer over Code Connect in de officiële Figma-documentatie.
-
Ja. Code Connect is nuttig zodra je herhalende componenten hebt die een AI-agent fout kan interpreteren. Dat geldt al bij vijf à tien componenten. Je hoeft geen enterprise design system te hebben. Begin met de componenten die agents het vaakst fout doen: navigatie, formulieren en iconen zijn klassieke probleemgevallen. Een DESIGN.md is een laagdrempelig alternatief als je nog geen volledig design system opzetten wil.
-
Agent skills zijn instructies over hoe een AI iets moet bouwen: welke patronen te gebruiken, welke te vermijden. Code Connect geeft context over wat er al beschikbaar is in de codebase. Je hebt beide nodig. Skills zonder Code Connect leidt tot goed bedoelde maar verkeerde componentkeuzes. Code Connect zonder skills geeft goede componentkeuzes maar kan nog steeds slechte architectuurbeslissingen opleveren. Figma Skills werken als herbruikbare AI-instructies voor designers en zijn een goede aanvulling.
-
Maak Code Connect een onderdeel van je standaard componentworkflow: elke keer dat je een component aanmaakt of wijzigt, update je ook de mapping. Je kunt dit deels automatiseren door een AI-agent in te zetten die op basis van een componentenlijst de templates schrijft of bijwerkt. Controleer de output altijd, zeker bij complexe componenten met veel properties. MDN Web Docs biedt referentiemateriaal over componentstructuren in CSS en HTML dat helpt bij het opstellen van correcte templates.
-
De 22% is gemeten in een gecontroleerde testomgeving met een specifiek design en model. Voor kleinere projecten met eenvoudigere componenten kan het voordeel kleiner zijn. Maar het omgekeerde geldt ook: bij projecten met veel complexe of unieke componenten kan de besparing hoger uitvallen, omdat de agent minder zoek- en gistokens verbruikt. De hallucinatie van icoon- en illustratienamen verdween volledig na het instellen van Code Connect. Dat alleen al rechtvaardigt de investering.
-
Begin klein. Inventariseer welke componenten je het vaakst gebruikt en welke een AI-agent het vaakst fout doet. Koppel die als eerste via Code Connect aan je codebase. Heb je nog helemaal geen design system? Begin dan met een DESIGN.md: een tekstbestand waarin je vastlegt hoe jouw merk eruitziet, welke kleuren je gebruikt en welke componenten er zijn. Dat is al genoeg context om een AI-agent mee te sturen. Het Coinbase-team beschrijft stap voor stap hoe zij hun design system opzetten voor AI-gebruik.