Forberedelser

Designsystemet er laget for å brukes sammen med din egen visuelle profil. Du definerer farger, størrelser, typografi og andre visuelle egenskaper gjennom et eget tema. Temaet kan du lage i Temabyggeren. Dette gir deg friheten til å bruke Designsystemet i alt fra små interne verktøy til store offentlige tjenester med sterk visuell identitet. Ved å bruke grunnleggende byggeklosser fra Designsystemet kan du selv bygge mer sammensatte komponenter som dekker spesifikke behov i de ulike løsningene dine.

Designsystemet fungerer som en verktøykasse, du trenger ikke bruke alt. Du kan plukke ut de delene du har behov for. Noen bruker bare tokenstrukturen, noen bruker React-biblioteket, noen bruker CSS-biblioteket, noen bruker bare retningslinjene, mens andre bruker hele pakka. Du velger selv hva som gir mest verdi i din kontekst.

Designsystemet kan

• brukes direkte inn i løsninger
• brukes som fundament for ditt eget designsystem

Klikk på bildet eller trykk Escape for å lukke

Bruk Designsystemet direkte inn i løsninger

Designsystemet kan brukes direkte i dine løsninger ved å ta i bruk komponentbiblioteket sammen med ditt eget tema. Dette er den enkleste måten å komme i gang på, og passer fint for å teste ut Designsystemet i mindre prosjekter eller for å bygge enkle sider og verktøy.

Slik kommer du i gang:

• Start med å bygge ditt tema og legg det i et repo.
• Trenger du Figma, kan du bruke Designsystemet - Core UI Kit, hent variabler fra ditt tema, publiser filen.
• Ta i bruk komponentbiblioteket i React eller bare CSS-biblioteket i webprosjekter uten React.
• Importer og bruk komponentene i dine løsninger sammen med ditt tema.

Bruk Designsystemet som fundament for ditt eget designsystem

Fordelen med denne tilnærmingen er at du kan gjenbruke den underliggende strukturen og alle de grunnleggende komponentene, samtidig som du kan tilby dine mer unike komponenter som en del av ditt eget designsystem. Det krever en investering å etablere et designsystem, men forvaltningsjobben blir betydelig mindre når dere slipper å forvalte alt det grunnleggende selv. Med Designsystemet som fundament kan dere utvide der dere har behov og begrense der det gir verdi. Eksempel på designsystemer som bygger på designsystemet.no kan du se hos Utdanningsdirektoratet og Mattilsynet.

For å lykkes trenger dere:

• En dedikert designer og frontend-utvikler som kan sette opp designsystemet og forvalte det.
• En felles forståelse i organisasjonen for et designsystem er et produkt som krever kontinuerlig arbeid, det blir aldri «ferdig». Hvis dere vurderer å lage deres eget, bør dere sikre en forpliktelse til å vedlikeholde det over tid.

Under beskriver vi en anbefalt tilnærming basert på erfaringer fra etater som allerede har bygget egne systemer på toppen av Designsystemet.

Tema

Begynn med å få på plass temaet som skal brukes i kode og Figma. Temaet definerer farger, typografi, spacing og andre visuelle egenskaper. Temabyggeren hjelper deg å få opp en semantisk tokenstruktur, og du kan tilpasse den deres profil.

Kode

En anbefalt modell er:

• Bruk Designsystemet som avhengighet.
• Legg egne tilpasninger som konfigurasjon oppå, ikke som erstatning.
• Unngå å kopiere komponentkode inn i eget repo hvis det ikke er nødvendig.

Da vil oppgraderinger av Designsystemet kunne gjøres direkte via versjonsoppdatering, mens egen styling og konfigurasjon bevares automatisk. Dette reduserer risiko for merge-konflikter og gjør vedlikehold enklere.

For å unngå at det blir for omfattende å rulle det ut i organisasjonen, er det lurt å lansere komponentene gradvis og utvide etter hvert.

Figma

Designsystemet deles som en community-fil i Figma. Den kopieres inn i deres miljø og blir et startpunkt for deres eget bibliotek.

Vær klar over at:

• Det finnes ingen direkte teknisk kobling tilbake til originalfila. Nye versjoner av community-filen kan ikke merges automatisk.
• Endringer dere ønsker å ta inn må overføres manuelt. I praksis skjer dette sjelden og er håndterbart, særlig hvis dere har gjort begrensede visuelle tilpasninger.

En anbefalt praksis er:

• Publiser et eget Figma-bibliotek som bygger på Designsystemet. Legg egne komponenter i samme bibliotek, men merk tydelig hva som er deres egne.
• Behold tokenstrukturen fra Designsystemet for farger, typografi, spacing, radius og semantikk. Bruk tokens når dere bygger nye komponenter.
• Gjør visuelle tilpasninger basert på deres behov. Dokumenter hva dere har justert, slik at endringer er enkle å forstå over tid.
• Fjern eventuelle varianter dere ikke ønsker skal brukes i organisasjonen.

Dokumentasjon

En anbefalt praksis er å bruke et nettsted eller Storybook for all dokumentasjon. Retningslinjer og bruk bør ikke beskrives i Figma, da designerne ofte legger inn komponenter via Assets-panelet, og det vil heller ikke være naturlig å søke etter retningsliner der for utviklere.

Mange velger å:

• Bruke designsystemet.no som felles referanse for standardkomponenter og grunnleggende prinsipper. Eventuelt kopiere deler av dokumentasjonen inn i egne flater, med ansvar for videre vedlikehold selv.
• Etablere egen dokumentasjon for egne komponenter, tilpasninger og retningslinjer. Utvide med profilrelevante ting, som logo, font, illustrasjoner, grafiske elementer og ikonbruk.
• Lenke til mønstre og retningslinjer som er relevante for deres bruk.

Kort oppsummert

• Bruk Designsystemet som grunnmur, ikke som ferdig fasade.
• Pakk det inn i egne Figma-bibliotek og kodepakker.
• Bygg videre der dere har behov.
• Begrens der det gir verdi.
• Oppgrader jevnlig og kontrollert.