Tilbake til alle innlegg

Fremtidens design

Hva er det neste for designsystemer i Fremtind?

Kategori
Strategi
Publisert
10.03.2026
Lesetid
3 min.

Vi hadde nettopp avsluttet et prosjekt der vi lanserte samme UI i tre merkevarer. Knapper, skjemaer, navigasjon — alt visuelt ulikt, alt bygget på nøyaktig same kode. Uten design tokens hadde det vært måneder med manuell stilopprydding. Med dem tok det en dag. Det er ikke magi — det er arkitektur. Og det er der fremtiden til designsystemer ligger.

W3C Design Tokens Community Group jobber med en åpen standard for design tokens. Jøkul følger dette arbeidet tett og planlegger å adoptere standarden etterhvert.

Tre lag du bør kjenne til

Tokens finnes ikke i ett lag — de er et system av referanser som gir mening på ulike nivåer. Forstår du lagstrukturen, forstår du how theming faktisk fungerer:

Primitive tokens
Råverdier uten kontekst: --color-granitt-90: #1a1a1a. Disse endres nesten aldri. De er paletten, ikke reglene.
Semantiske tokens
Her skjer magien: --color-text-default: var(--color-granitt-90). I mørkt tema peker den samme semantiske tokenen på en lys farge. Komponentene bryr seg ikke — de leser alltid den semantiske verdien.
Komponent-tokens
Scoped til én komponent: --button-bg: var(--color-interactive). Gir finkornet kontroll uten å ryste resten av systemet.

Feilen de fleste gjør

Jeg har sett det skje gang på gang: team starter med tokens, men bruker dem som glorifiserte fargevariabler. De lager --color-blue og ender der. Neste gang noen vil endre primærfargen fra blå til grønn, må de oppdatere hundre steder i stedet for én.

Riktig tilnærming er å gå gjennom semantiske tokens: --color-interactive peker på --color-blue, og alle komponenter peker på --color-interactive. Én endring, alt oppdateres.

AI og tokens — mer relevant enn du tror

En interessant bieffekt av veldefinerte tokens er at AI-verktøy faktisk kan bruke dem. Når du beskriver komponentene dine i form av semantiske tokens, kan et språkmodell generere UI-forslag som allerede er på-merkevare — fordi den har tilgang til de faktiske designbeslutningene, ikke bare generiske fargenavn.

Vi har eksperimentert med å gi Copilot tilgang til token-manifestet vårt. Forslagene ble vesentlig bedre. Det er ikke science fiction — det er en naturlig konsekvens av god tokenstruktur.

Design Tokens W3CStyle DictionaryAI-assistert designMulti-brand theming
Style Dictionary i praksis — steg for steg

Style Dictionary lar deg definere tokens én gang og transformere dem til CSS, SCSS, JavaScript, iOS og Android automatisk. Slik setter vi det opp:

  1. Installer: npm install style-dictionary
  2. Definer tokens i JSON-filer organisert etter kategori (color, spacing, typography)
  3. Konfigurer transformasjoner i config.json
  4. Kjør npx style-dictionary build i CI for å generere output

Med Token Studio for Figma kan designerne jobbe med de samme tokens direkte i designverktøyet og synkronisere til koderepoen via en GitHub Actions-jobb. Designere og utviklere jobber aldri ut av sync — det er en game changer.

Fremtinds mål: null friksjon ved branching

Det langsiktige målet er at et produktteam skal kunne spinne opp en ny merkevarevi uten å involvere designsystemteamet i det hele tatt. Bytt ut de semantiske tokenene, og resten følger med. Vi er ikke der ennå, men vi er nærmere enn vi var for ett år siden. Maksimal fleksibilitet, minimal friksjon — det er mantraet.