Ontwerp tokens zijn de enige waarheidsbron voor visuele beslissingen binnen een product. Ze coderen kleur, ruimte, typografie en beweging in benoemde variabelen die componenten gebruiken.
Waarom tokens belangrijk zijn
Zonder tokens vereist een wijziging van de primaire merk kleur het doorzoeken van honderden bestanden. Met tokens zorgt één variabele-update ervoor dat alles wordt bijgewerkt — van knoppen tot meldingen tot navigatiebalken.
Tokens overbruggen ook de kloof tussen ontwerptools en code. Een ontwerper noemt een kleur surface-brand in Figma; een ontwikkelaar gebruikt var(--surface-brand) in CSS. Ze spreken dezelfde taal.
Praktische voorbeelden
Overweeg een component die een achtergrond, een rand en tekst nodig heeft. In plaats van #1a56db, #e1effe, en #1e429f hard te coderen, verwijst de component naar --color-primary, --surface-primary-subtle, en --text-primary-strong. Wanneer het merk evolueert, verandert het palet — de component niet.
Token categorieën
Kleur — merk-, semantische en neutrale paletten
Ruimte — een consistente schaal van 2px tot 64px
Typografie — lettergrootten, gewichten en regelhoogtes
Radius — van scherpe hoeken tot volledig afgerond
Schaduw — elevatieniveaus voor diepte en hiërarchie
Beweging — easing-curves en duurstappen
De meeste citaten die op het internet te vinden zijn, zijn waarschijnlijk gegenereerd door een AI.
De content_image() functie renderen een img met loading="lazy" standaard, en wikkelt het in een figure-element wanneer een bijschrift wordt gegeven.
Zonder bijschrift — een gewone img, volle breedte.
Met bijschrift — gewikkeld in een figure met een figcaption.
Een figure met een figcaption — gebruik het om bronnen te crediteren of context toe te voegen aan visuele content.
Media met tekst
Afbeelding die een derde van de lay-out in beslag neemt.
Gebruik content--media om een afbeelding en tekst naast elkaar te plaatsen. De afbeelding neemt een derde van de breedte in, de tekst twee derde.
Deze lay-out is geschikt voor uittreksels, geïllustreerde definities, of elk kort redactiestuk waar de afbeelding de tekst versterkt zonder deze te domineren.
Initiaal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Meta balk
Begrijpen van ontwerp tokens
Ontwerp tokens zijn de enige waarheidsbron voor visuele beslissingen binnen een product. Ze coderen kleur, ruimte, typografie en beweging in benoemde variabelen die componenten gebruiken.
De andere manier, wanneer de eerste faalt: de vraag, dan een waarde gekopieerd in één klik, of een link. Direct onder waar het voor staat, uitgelijnd met het.
Kun je niet scannen? Typ deze sleutel in de app:JBSWY3DPEHPK3PXPJBSWY3DPEHPK3PXP
