Vi sier “Vi bruker Aksel når vi lager grensesnitt i NAV”, men hva betyr egentlig det?
Først, en rask forklaring av de delene av Aksel som brukes til å lage grensesnitt:
Hvorfor vi bruker Aksel i NAV
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.
Hvordan design bruker Aksel
For designere foregår bruken av Aksel i Figma. Gjennom Figma-bibliotekene våre får designerne tilgang til stylingen og komponentene (nivå 1 og 2). Stylingen som brukes i Figma er lik design tokens i kode som frontend bruker. Det samme gjelder komponentene. Når Skisser bruker 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, så kan det designes noe som passer basert på det som finnes i Aksel fra før. Les hvordan man kommer i gang med Figma her.
Hvordan frontend bruker Aksel
For frontend-utviklere er bruken av Aksel mer nyansert og avhengig av nivået. Design tokens (nivå 1) funker for alle 🤩. Bruk av komponentene (nivå 2) er avhengig av teknologien som brukes. Aksels komponenter er skrevet i React. Om løsningen din bruker en annen teknologi må du fikse 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 kode som kopieres og blir ikke automagisk oppdatert fra Aksel. Endringer og variasjoner i malene vil være en dialog vi i NAV. Les hvordan man kommer i gang med kodepakkene her.
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 en støtte for dark/light mode på tvers av NAVs løsninger kun funke om alle prosjektene bruker Aksel design tokens. Komponentene (nivå 2) skal brukes om prosjektet bruker React. Det legges ned betydelige ressurser på å vedlikeholde og kvalitetssikre komponentene i NAV. Det er tid og kompleksitet teamene blir spart for, som de kan bruke på andre ting.
Vi pleier å si "start med Aksel". Det betyr at man starter med det vi har, før man begynner å bli kreative. Da er det lettere å finne ut av hva teamet må bruke tid på å lage selv, eller bruke fra andre rammeverk. Bruk gjerne #aksel-designsystemet om det er noe du lurere på.
Se egen artikkel om samarbeid med team Aksel og bidrag.