Wat zijn design tokens en waarom zijn ze belangrijk

Ontwerptokens zijn de elementaire beslissingen van een ontwerpsysteem, uitgedrukt als benoemde, herbruikbare waarden. In plaats van #3b82f6 hard te coderen in een stylesheet, definieer je color-primary-500: #3b82f6 en verwijs je overal naar die naam. De naam draagt de betekenis; de waarde kan worden gewijzigd zonder elke verwijzing bij te werken.

Tokens omvatten elke visuele eigenschap: kleurentokens (color-primary-500: #3b82f6), spatietokens (spacing-4: 16px), typografietokens (font-size-lg: 18px, font-weight-bold: 700), tokens voor afrondingen (radius-md: 8px), schaduwtokens en tokens voor animatieduur. Samen leggen ze de volledige visuele taal vast.

Tokens vormen één bron van waarheid die ontwerp en engineering delen. Ontwerpers definiëren de waarden in Figma en ontwikkelaars gebruiken ze in code. Wanneer de merkkleur verandert, werk je één tokenwaarde bij en weerspiegelt elke component die deze token gebruikt automatisch de wijziging — zonder een grep-en-vervangactie in duizenden bestanden.

Zonder tokens zijn kleur- en spatiëringswaarden hardgecodeerd in stijlbladen, componentbestanden en utilityklassen. Een blauwe kleur kan in verschillende bestanden voorkomen als #3b82f6, rgb(59, 130, 246) en blue-500. Als je de merkkleur wilt wijzigen, moet je elke instantie zoeken en vervangen, met een groot risico dat je er een mist.

Ontwerptokens vormen de basis van systemen met meerdere thema's. Voor de donkere modus verwijzen semantische tokens zoals color-background en color-text naar verschillende primitieve waarden, afhankelijk van het actieve thema. Je wijzigt één toewijzing, niet elke component. Lichte en donkere thema's delen dezelfde componentcode, maar verschillen alleen in hun tokenwaarden.

Voor een SaaS-platform voor meerdere merken maken tokens merkaanpassingen mogelijk zonder dubbele code. Merk A gebruikt blauw als primaire kleur en merk B groen — alleen hun semantische tokentoewijzingen verschillen. De code van de knopcomponent is identiek; deze leest color-action-primary, dat per merk naar een andere kleur wordt omgezet.

Tokens zijn georganiseerd in lagen. Primitieve tokens zijn onbewerkte waarden: color-blue-500: #3b82f6. Semantische tokens drukken betekenis uit: color-action-primary: {color-blue-500}. Componenttokens zijn het meest specifiek: button-primary-background: {color-action-primary}. Deze hiërarchie scheidt het "wat" van het "waar het wordt gebruikt".

Semantische tokens zijn de sleutel tot ondersteuning voor meerdere thema's. In het lichte thema is color-background: {color-white} ingesteld. In het donkere thema is dat color-background: {color-gray-900}. Componenten verwijzen naar color-background, niet naar een specifieke kleur. Als je het thema wijzigt, worden de toewijzingen van semantische tokens verwisseld — componenten hoeven niet te veranderen.

Figma Variables (geïntroduceerd in 2023) zijn ontwerptokens binnen Figma. Ontwerpers definiëren in Figma dezelfde tokenhiërarchie als engineers in code implementeren. Tools zoals Tokens Studio for Figma of de officiële Figma Tokens-plugin exporteren Figma-variabelen naar JSON, waarna Style Dictionary ze compileert naar CSS-variabelen of JS-objecten.

De W3C Design Tokens Community Group ontwikkelt een standaardindeling in JSON voor ontwerptokens. Het doel is interoperabiliteit: een tokenbestand dat werkt met elke ontwerptool (Figma, Sketch) en elke bouwtool (Style Dictionary, Theo, Panda CSS). Als je de indeling van de specificatie overneemt, blijft je tokensysteem ook in de toekomst bruikbaar.

Ontwerptokens vereisen beslissingen over beheer: wie nieuwe tokens mag toevoegen (ontwerp, engineering of beide), hoe tokens worden voorzien van versies, hoe verouderde tokens buiten gebruik worden gesteld en hoe tokenwijzigingen worden gecommuniceerd aan teams die ze gebruiken. Zonder beheer raakt een tokensysteem uit balans — er verschijnen nieuwe hardgecodeerde waarden naast het tokensysteem, waardoor het doel ervan teniet wordt gedaan.

Ontwerptokens zijn benoemde atomaire waarden (kleuren, spatiëring en typografie) die de woordenschat van een ontwerpsysteem vormen. Ze creëren één bron van waarheid tussen ontwerp en code. De hiërarchie met drie lagen — primitief (onbewerkte waarden), semantisch (betekenis) en component (specifiek gebruik) — maakt ondersteuning voor meerdere thema's en merken mogelijk. Figma Variables en de W3C-specificatie voor ontwerptokens zorgen voor betere synchronisatie tussen ontwerp en engineering. Tokenbeheer houdt het systeem op de lange termijn consistent.