Wat zijn design tokens?
In designertaal
Design tokens are design decisions, represented as data, that ensure systematically unified and cohesive product experiences.
Adobe Spectrum
In mensentaal
Design Tokens zijn een onderdeel van je design system. Het zijn verschillende designwaarden, zoals spacing, typography, color… die worden gebruikt om een designsysteem op te bouwen en te onderhouden.
Al die waarden (kleuren, afmetingen, afstanden, tekstopmaak…) – en dus data – leg je op een centrale plek vast. Zo kunnen alle teams die data gebruiken om de ontwerpkeuzes consistent toe te passen op diverse producten en diensten van één organisatie en vermijd je dat er een wildgroei aan elementen ontstaat.
Figma heeft een erg handige plugin voor Design tokens, namelijk “Token studio for figma”.
Hoe zit benaming van design tokens in elkaar?
In theorie
In design systems worden vaak 3 niveaus gehanteerd. De 3 lagen worden meestal benoemd als “core”, “semantic” en “component”.
- In de “core”-laag worden de ruwe, absolute waarden opgeslagen. Dit niveau vormt de basis van het designsysteem en is voornamelijk verantwoordelijk voor het uitzicht van het eindproduct.
- “Semantic” tokens verwijzen altijd naar een core token. Deze tokens worden het meest gebruikt in de hele applicatie. Ze vertegenwoordigen keuzes die designers hebben gemaakt in het design systeem.
- “Component” tokens verwijzen dan weer altijd naar een “semantic token” en binden zich aan een specifieke waarde van een component.
In de praktijk
Een voorbeeld: kleurtoken.
De core token heet “core.color.red-900” en verwijst naar een kleurcode. In de semantic tokens gaan we specificeren waarvoor die kleur gebruikt wordt. We gebruiken die kleur bijvoorbeeld als primaire kleur. Die token krijgt dan de naam “semantic.color.primary”.
Ten slotte gaan we die in de component tokens specificeren per component. Dat wordt dan bijvoorbeeld “component.button.background-color”.
In welke scenario’s gebruik je ze?
Design tokens zijn handig, erg handig. Maar wanneer zijn ze écht nuttig, of zelfs onmisbaar?
Wanneer je een designsysteem voor meer dan één platform of product gebruikt zijn design tokens erg handig. Daarnaast zijn tokens the way to go als je een gemakkelijke manier zoekt om de stijlen van je product te onderhouden en bij te werken. Ten slotte komen design tokens goed van pas wanneer je van plan bent het ontwerp van je product bij te werken of nieuwe producten en functies te bouwen.
Wat zijn de voordelen van design tokens?
Dat design tokens handig zijn is ondertussen duidelijk. We zetten de voordelen nog eens op een rijtje:
- Grote schaal. Design tokens zijn een geweldige manier om ontwerp op een grote schaal te beheren.
- Overdracht. Ze zorgen voor een betere overdracht van designer naar developer. Je kan immers eenvoudig dezelfde design token principes toepassen van in een front-end-framework op je design systeem.
- Thema’s. Je kan makkelijk switchen tussen verschillende themes in je designs.
- Communicatie. Ze verbeteren de communicatie tussen teams.
- Gesynchroniseerde bestanden. Er is maar één bron van waarheid, en consistentie op alle platformen.
- Makkelijk onderhoud. Je kan op één plek én alles tegelijk bewerken en updaten.
- Merkconsistentie. Het wordt toegankelijker, sneller en goedkoper met een transparant visueel hiërarchisch systeem.
Meer weten over design tokens, (UX) design in het algemeen of een specifieke vraag? Contacteer ons en we vertellen je er met plezier meer over!
