Hopp til innholdet

Semantiske tokens forklart med én knapp

Åtte knapper som ser like ut, er ikke alltid like. Her viser jeg hva som skjer når farger og størrelser skrives for hånd. Og hvorfor semantiske tokens hjelper i store løsninger.

Dette innlegget finnes bare på norsk.

Dette innlegget er generert i Claude som et eksperiment i å lage læremidler med KI.

Hva er en token?

En token er en verdi med et navn. I stedet for å skrive fargekoden #2A49A6 overalt, gir vi fargen et navn.

Det finnes to slags tokens:

  • Primitive tokens sier hva fargen er. For eksempel blue.800, som er #2A49A6.
  • Semantiske tokens sier hva fargen brukes til. For eksempel color.primary, som peker på blue.800.

Knappen bruker color.primary. Den vet ikke hvilken blåfarge det er. Den vet bare at den er den viktigste knappen.

Fra komponent til farge

Det er lettest å se med piler. Gå gjennom stegene med «Neste». Se hvor mange piler som må flyttes når løsningen skal få mørk modus.

Tre komponenter, to semantiske tokens og seks farger fra paletten.

Den samme knappen på åtte sider

Under ligger den samme knappen på åtte sider i en tenkt løsning. Til venstre er knappene laget for hånd. Til høyre bruker de semantiske tokens.

  1. Se på boksen der alle åtte ligger oppå hverandre.
  2. Trykk «Vis koden bak knappene».
  3. Trykk «Bytt merkefarge».
Fargene og avvikene er laget for eksempelet.

Hva skjer med hardkodede knapper?

Hardkodet betyr at fargen og størrelsen er skrevet rett inn i hver knapp.

I en stor løsning lages knappene av mange personer over lang tid. Da sniker det seg inn små avvik. En knapp er 41 piksler høy i stedet for 40. En annen har fargekoden #2B4AA6 i stedet for #2A49A6.

Ingen ser forskjellen. Men den er der. Og den blir et problem når noe skal endres.

Når merkefargen skal byttes, søker man etter fargekoden og bytter den. Da finner man bare knappene med helt riktig kode. Resten blir stående med den gamle fargen.

Hvorfor semantiske tokens hjelper

Med semantiske tokens er det én knapp med én farge og én høyde. Alle sidene bruker den samme.

  • Én endring gjelder overalt. Ny merkefarge betyr at én verdi endres. Alle knappene følger med.
  • Mørk modus blir enkelt. color.primary kan peke på én farge i lys modus og en annen i mørk modus. Knappene trenger ikke vite det.
  • Det blir likt. Når ingen skriver fargekoder for hånd, kan de heller ikke skrive dem litt feil.
  • Det er lettere å samarbeide. Designere og utviklere snakker om color.primary, ikke om en fargekode.

Jo større løsningen er, jo mer betyr dette. Med åtte knapper kan man rette feilene for hånd. Med flere hundre går det ikke.

Slik bruker jeg det selv

I designsystemet jeg har bygd med Claude, kommer alle farger, avstander og skrifter fra tokens. Det står i reglene Claude får. Da bruker Claude tokens i stedet for å skrive fargekoder, og det jeg lager, ser likt ut fra side til side.