Kom i gang med Designsystemet

Så fint at du er interessert i å bruke Designsystemet! Her finner du informasjon om hvordan du kan komme i gang, og hva du kan forvente deg.

Designsystemet kommer uten en ferdig visuell profil, det betyr at du selv bestemmer hvordan løsningen din skal se ut. Du definerer farger, størrelser, typografi og andre visuelle egenskaper gjennom et eget tema. Temaet kan du enkelt 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.

Hvordan bruke Designsystemet?

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, men det går også an å bygge eget designsystem på toppen av Designsystemet. Fordelen med det 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. Eksempel på designsystemer som bygger på designsystemet.no kan du se hos Utdanningsdirektoratet og Mattilsynet. For å lykkes med dette anbefaler vi at dere har en designer og en frontend-utvikler som kan sette opp designsystemet og følge opp videre utvikling og vedlikehold. Ikke alle har mulighet eller behov for dette. Et designsystem er et produkt som krever kontinuerlig arbeid, det blir aldri «ferdig». Hvis dere vurderer å lage deres eget, bør dere sikre en felles forståelse av at det er en langsiktig investering. Ved å ta i bruk, eller bygge videre på byggeklosser fra designsystemet.no kan dere dele på en del av den investeringen.

Klikk på bildet eller trykk Escape for å lukke

Kom i gang med design og kode

Følg disse guidene videre for å lære hvordan du kan bruke Designsystemet med din profil i kode og Figma:

Bygg ditt tema

Kom i gang med kode

Kom i gang med Figma