Designsystemen die een overdracht overleven
De meeste designsystemen vervallen zodra de ontwerper vertrekt. De systemen die blijven delen één bron van waarheid met de code, geen plaatje ervan.
Een designsysteem dat alleen in Figma leeft, is documentatie. Het beschrijft hoe het product eruit zou moeten zien, en beschrijft dat vanaf de dag van overdracht met afnemende nauwkeurigheid.
Het uiteenlopen is structureel, geen disciplineprobleem. Engineers bouwen een component, een afronding wordt benaderd, een spatiëringsstap op het oog gezet, een kleur uit de verkeerde laag gekopieerd. Niets daarvan is fout genoeg om aan te kaarten, en na een jaar zijn het bestand en het product twee verschillende producten.
De oplossing is tokens tot het gedeelde artefact maken. Kleur, typografie, spatiëring en elevatie één keer gedefinieerd, vanuit dezelfde bron geëxporteerd naar zowel het ontwerpgereedschap als de codebase. Verandert een token, dan bewegen beide, en neemt geen van beide kanten waarden met de hand over.
Componenten moeten daarna gekoppeld worden in plaats van beschreven. Code Connect verbindt een Figma-component met de daadwerkelijke implementatie, zodat een ontwerper bij het openen de props ziet die een engineer zal gebruiken. Dat neemt het meestvoorkomende overdrachtsgesprek volledig weg, want er valt niets te interpreteren.
Het laatste stuk is governance, en daar verzetten klanten zich tegen omdat het naar proces klinkt. Iemand is eigenaar van het systeem, bijdragen gaan door review, en wie een eenmalige variant wil toevoegen, moet die verantwoorden. Zonder dat wordt een systeem binnen twee releases een componentenkerkhof.
Wij meten succes aan één vraag, een jaar later gesteld: is het product afgedwaald van het systeem? Levert een team waaraan we hebben overgedragen er zonder ons nog steeds in op, dan heeft het gewerkt.