Designtokens förklarade
Av CodexierPublicerad 4 min läsning
Varje gränssnitt byggs av hundratals små beslut: just den blå, just den grå, just det avståndet, just den hörnradien. När besluten kopieras för hand till varje vy och varje fil betyder en ändring att man måste leta upp varje kopia. Designtokens sparar varje beslut en gång, under ett namn som både designer och utvecklare använder. Den här guiden förklarar vad tokens är, hur de organiseras, hur de tar sig från Figma till kod och hur ni börjar utan ett stort projekt.
Vad en designtoken är
Tänk på en knapp. Utan tokens är bakgrunden en hexkod som skrivs in i designfilen och sedan igen i stilmallen. Med tokens står det color-action-primary i designen och samma sak i koden. När marknadsavdelningen justerar varumärkets blå ändras ett värde, och varje knapp, länk och markering som använder det följer med, både i designfilen och på den publicerade sajten. Principen är en mellanhand: komponenter pekar på namn, och namn pekar på värden.
Bas-, semantiska och komponenttokens
De flesta tokensystem har tre nivåer. Det är nivåerna som gör ändringar billiga, eftersom varje nivå svarar på en egen fråga och kan ändras för sig.
| Nivå | Exempel på namn | Svarar på frågan |
|---|---|---|
| Bas | blue-600, space-4, radius-2 | Vilka värden har vi? |
| Semantisk | color-text-default, color-action-primary, color-feedback-error | Vad används värdet till? |
| Komponent | button-primary-background, card-padding | Vad använder den här komponenten? |
Komponenter ska använda semantiska tokens, inte basvärden. En knapp som använder blue-600 direkt går sönder i samma stund som mörkt läge behöver en annan blå.
Små team kan hoppa över komponentnivån i början. Bas och semantiska tokens täcker det mesta, och komponenttokens är värda att lägga till först där en komponent verkligen måste avvika från den allmänna regeln.
Från Figma till kod
I Figma lever tokens som variabler, grupperade i samlingar med lägen som ljust och mörkt. Den praktiska frågan är hur de når koden utan att skrivas in på nytt. Den vanliga vägen är att exportera dem till en JSON-fil, enligt det format som W3C:s grupp för designtokens håller på att standardisera, och med ett byggverktyg omvandla filen till CSS-variabler, ett Tailwind-tema eller värden för iOS och Android.
- Definiera tokens som variabler i Figma med överenskomna namn.
- Exportera dem till en JSON-fil som ligger i kodförrådet, inte på någons dator.
- Kör ett omvandlingssteg som skapar CSS-variabler eller plattformsfiler från JSON-filen.
- Använd bara de genererade variablerna i komponenterna. En hexkod direkt i en komponent är en bugg.
- Ändra tokens samma väg varje gång, så att design och kod aldrig glider isär.
Teman och mörkt läge
Semantiska tokens gör teman enkla. Mörkt läge är en andra uppsättning värden för samma semantiska namn: color-surface-default är nästan vit i ljust läge och nästan svart i mörkt, och ingen komponent behöver veta om det. Samma grepp fungerar för en white label-produkt med ett tema per kund eller för ett undervarumärke. Kontrollera kontrasten i varje tema, eftersom ett färgpar som klarar kraven i ljust läge kan misslyckas i mörkt. Guiden om varumärkesfärger som klarar kontrastkraven förklarar kvoterna.
Börja i liten skala
Färg
En baspalett plus semantiska namn för text, ytor, kanter, handlingar och återkopplingslägen.
Typografi
Typsnittsfamiljer, en textskala med storlekar och radavstånd samt vikter.
Avstånd
En avståndsskala, till exempel steg om fyra eller åtta pixlar, för utfyllnad, mellanrum och marginaler.
När ni inte behöver tokens: en liten marknadssajt med en utvecklare och inga planer på teman klarar sig med en välorganiserad stilmall. Tokens lönar sig när flera personer designar och bygger, när det finns mer än en produkt eller plattform, eller när en ny profil eller ett mörkt läge är på väg. Läs behöver ert företag ett designsystem först. Blir svaret ja sätter vårt designsystem och UI-kit upp tokens i Figma och kod samtidigt. Se prissidan eller boka ett samtal.
Vanliga frågor
Är designtokens samma sak som CSS-variabler?
Nej, men de levereras ofta som CSS-variabler. En token är designbeslutet och dess namn, och CSS-variabler är ett av flera utdataformat. Samma token kan också bli en inställning i Tailwind eller ett värde i iOS eller Android.
Behöver vi ett designsystem innan vi använder tokens?
Nej. Tokens är ofta första steget mot ett designsystem och är användbara på egen hand. Även utan ett komponentbibliotek tar gemensamma tokens för färg, typografi och avstånd bort mycket inkonsekvens.
Hur ska tokens namnges?
Namnge semantiska tokens efter syfte, inte utseende: color-text-muted i stället för grey-light. Kom överens om namnmönstret innan ni skapar många tokens, eftersom ett namnbyte senare påverkar varje fil som använder dem.
Vem äger tokens?
Helst design och utveckling tillsammans, med en källfil i kodförrådet och en enkel granskning av ändringar. När bara den ena sidan äger dem börjar den andra sidan gå runt dem.
Sätt upp tokens som design och kod delar
Boka ett kort samtal och berätta om era produkter, plattformar och team. Vi berättar om tokens skulle löna sig nu och vad en första uppsättning bör täcka.
Boka ett kostnadsfritt 15-minuterssamtal