Digitaliseringsdirektoratet (Digdir) er i ferd med å utvikle et helt nytt felles designsystem med blant annet UI-komponenter, retningslinjer og mønstre.
Det nye designsystemet kalles rett og slett bare for Designsystemet, og målet er ifølge teamet bak at det skal bidra til mer effektiv produktutvikling og helhetlige brukeropplevelser på tvers av ulike offentlige nettsteder.
Designsystemet deles som åpen kildekode slik at andre kan bidra og samarbeide. Det er ingenting i veien for at andre utenfor offentlig sektor også kan bruke det.
– Det er mange som har meldt interesse for bruk og samarbeid, over 40 virksomheter har tatt kontakt. Det sier litt om behovet. Vi får mange nyttige tilbakemeldinger ved at flere velger å teste det, sier Marianne Røsvik, produkteier for Designsystemet, til kode24
Systemet består av:
- Grunnleggende designelementer ("design tokens"). Disse styrer hvordan komponentene skal se ut, som farger, typografi, størrelser, avstander og så videre.
- UI-komponenter for Figma og React.
- Mønstre og god praksis. Hvordan sentrale elementer skal plasseres i brukergrensesnittet og hvordan ting skal oppføre seg, for eksempel i dialogbokser, menyer, og så videre.
Begynte med Altinn-samarbeid
Røsvik forteller at Designsystemet er utviklet av flere etater gjennom Altinn-samarbeidet. Det brukes i dag i Digdirs fellesløsninger, inkludert Altinn Studio, som er et verktøy 70 ulike virksomheter bruker til å utvikle skjemaer og tjenester.
– Når vi skulle lage et designsystem som skulle fungere for så mange ulike virksomheter, var vi avhengig av å involvere og få input fra andre, sier Røsvik.
Designsystemet tok utgangspunkt i et eksisterende designsystem som var i bruk i Altinn Studio, men komponentene der var laget av mange ulike etater som hadde bidratt fordi de trengte komponenter i sine tjenester.
– Ved å løfte det inn i et eget designsystem kan vi sikre en mer rød tråd, fortsetter Røsvik.
«Ved å løfte det inn i et eget designsystem kan vi sikre en mer rød tråd.»
Hva med Aksel?
– Men det finnes jo andre offentlige etater med designsystemer, som NAV med sitt "Aksel"-system. Hvorfor må dere bygge hvert deres?
– Vi samarbeider på noen nivåer, som på mønstre og retningslinjer. Det kan vi samarbeide om, selv om vi har ulike tekniske elementer i bunnen, sier Røsvik.
De bruker også NAVs ikonbibliotek og bidrar med nye ikoner ved behov.
Røsvik forklarer at selv om NAVs Aksel og Designsystemet inneholder en del av det samme, så har NAV bygget ut fra sine behov og merkevare – mens Digdir må lage noe som kan brukes av flere etater og avsenderidentiteter gjennom fellesløsningene.
– Vi har nylig fått et produktråd med 13 virksomheter. NAV og Skatteetaten er to av medlemmene. Vi ser frem til diskusjoner med produktrådet om samarbeid og finansiering, for å nevne noe.
NAV feirer 2.000 åpne repoer - her er de nyttigste og rareste
Vil lage community
Målet er at designsystemet skal dekke de mest grunnleggende behovene som går igjen hos mange, slik at andre kan bygge videre på toppen av det. Derfor legger teamet bak vekt på å ha et "community" der interesserte kan delta, blant annet gjennom en åpen Slack-kanal.
Michael Marszalek er Tech Lead i Digdir og innleid fra Olavstoppen, og forteller at siden det opprinnelige designsystemet fra Altinn var basert på React, så var React-baserte komponenter også utgangspunktet for UI-komponentene i designsystemet.
De React-baserte UI-komponentene er "headless" UI-komponenter, det vil si at de ikke har noen styling. Dermed kan man style alt sammen selv som man vil, eller bruke en ferdig CSS-pakke og en egen pakke for tematisering av komponentene.
– Det er laget med tanke på tematisering. Et komponentbibliotek er bare en liten del av et designsystem, sier Marszalek.
Han forteller at de har laget de samme komponentene i designverktøyet Figma, og at dette er satt opp slik at hvis du endrer noe av det visuelle i Figma, så gjenspeiles det også i koden.
Alt tar utgangspunkt i en JSON-fil med "design tokens", og denne fungerer som bindeleddet mellom design og kode.
Vil frigjøre seg mer fra React
Teamet bak Designsystemet har latt seg inspirere av UI-biblioteker som Radix og Chakra UI. Men selv om de har latt seg inspirere av andre store UI-biblioteker, er alt laget fra bunnen av.
– Vi skal lage gode grunnsteiner og byggeklosser for utviklerne, slik at de ikke bare skal kunne bruke komponentene enkeltvis, men også bruke komponentene til å lage egne, sammensatte komponenter.
Det skal være lett for andre å kopiere kildekoden til Designsystemet og eventuelt endre det før de tar det i bruk som sitt eget.
Marszalek påpeker at de på sikt ønsker å frigjøre seg litt fra React, selv om komponentene i dag er laget med dette biblioteket.
– Planen er å på sikt lage et eget frittstående CSS-rammeverk og web-komponenter, sier Marszalek.
2 av 10 bruker web-komponenter: «Bra nok for YouTube, bra nok for deg»
CSS-rammeverket skal kunne brukes uavhengig av frontend-bibliotek. Når det gjelder web-komponenter må teknologien modnes litt før de kaster seg over det for alvor.
– Vi håper det modnes litt, og er spente på React 19. React slik det er nå spiller jo ikke så godt sammen med web-komponenter, sier Marszalek.
Men først skal versjon 1.0 av Designsystemet lanseres, og det skal etter planen skje i løpet av våren.
– Det er i beta nå. Vi ønsker å sikre god kvalitet og ivareta tilbakemeldingene vi har fått fra teamene som bruker designsystemet. Så er det overordnede målet å lage noe som mange har lyst til å ta i bruk! avslutter Marszalek.
