Aksel er Nav sitt designsystem

Aksel fungerer som et felles språk mellom produktteam, og mellom designer og utvikler. Det gjør det lettere å snakke sammen og ha lik oppfatning av virkeligheten. Aksel gjør det også lettere for oss å lage løsninger som er like og har lik interaksjon, uten å måtte finne opp hjulet på nytt. Vi bruker en del tid og ressurser på å gjøre bitene i Aksel så tilgjengelige som mulig, ofte forbi minstekravet fra WCAG. Og når noe oppdateres er det mye lettere å rulle dette ut fra en sentral plass.

Designsystemet består av tre nivåer:

Hvordan designere bruker Aksel

Gjennom Figma-bibliotekene våre får designerne tilgang til alle nivåene i Aksel. Stylingen (nivå 1) som brukes i Figma er lik design tokens som utviklerne bruker. Det samme gjelder komponentene (nivå 2) og malene (nivå 3). Når skissene har styling og komponenter fra Aksel er det enkelt for hele teamet å bruke de samme begrepene. Om du har behov for komponenter som ikke dekkes av Aksel, kan du designe noe som passer basert på design tokens.

Hvordan utviklere bruker Aksel

For frontend-utviklere er bruken av Aksel avhengig av teknologistacken. Design tokens (nivå 1) funker for alle 🤩. Komponentene (nivå 2) er skrevet i React. Om løsningen din bruker en annen teknologi må du kode komponentene selv. Det er likevel et krav om at de ser like ut og oppfører seg likt som de fra Aksel. Malene (nivå 3) er React-kode som kan kopieres og blir ikke automagisk oppdatert ved endringer.

Er Aksel obligatorisk?

Det korte svaret er ja. For designere skal Aksel brukes i Figma. For frontend-utviklere er det mer sammensatt. Design tokens (nivå 1) kan og skal brukes av alle, fordi det kan tilpasses alle teknologier. For eksempel vil støtte for dark/light mode på tvers av Navs løsninger kun fungere om alle bruker Aksel design tokens. Komponentene og malene (nivå 2 og 3) skal brukes om prosjektet bruker React. Det legges ned betydelige ressurser på å vedlikeholde og kvalitetssikre løsningene i Aksel. Dette er tid og kompleksitet teamet ditt blir spart for, som dere kan bruke på andre ting.

I Nav skal vi bruke designsystemet vårt, men vi ønsker også innovative og kreative løsninger. Den balansen kan være utfordrende. Uansett hva du skal utvikle er det fornuftig å starte med Aksel. Brukerne våre kan møte løsninger som er laget av flere team i en enkelt økt. Derfor er det viktig at byggeklossene i brukergrensesnittene passer sammen og gir mening. Start med Aksel, så har vi alle det samme utgangspunktet før vi finner nye løsninger på unike utfordringer.

Bruk gjerne #aksel-designsystemet om det er noe du lurer på. Se også egen artikkel om samarbeid med team Aksel og bidrag.