Til hovedinnhold
Bilde av en skjerm som viser et designsystem. Fra Balazs Ketyi på Unsplash

Hva er et designsystem?

Hvorfor bør vi bruke et designsystem, og hvordan kan dette føre til et bedre samarbeid mellom utvikler og designer?

Et designsystem er et system som består av ulike designelementer, funksjonelle komponenter, regler og retningslinjer. Vi setter disse i et system slik at det enkelt kan videreutvikles eller endres av utviklingsteamet og designerne. Det er rett og slett en levende og dynamisk styleguide som er realisert som faktisk kode, i motsetning til en tradisjonell designmanual.

Hvorfor bør man ha et designsystem?

Ved hjelp av et designsystem får man en fullstendig oversikt over hvordan de ulike elementene i designet skal se ut og oppføre seg. Dette kan for eks. være ulike versjoner av knapper, linker, størrelsesforhold eller font-stiler. Å ha en felles kilde til dokumentasjon rundt hvordan og hvorfor er nyttig både for designer og utvikler.

Det tar mye tid å etablere et designsystem, men vil på sikt gi mange fordeler både internt og eksternt. En viktig fordel er blant annet at alle utviklere bruker samme kode på komponentene. Et annet godt argument for bruk av designsystem er at tempoet for utvikling øker og utviklerne er ikke nødvendigvis avhengige av nye designskisser for videreutvikling av produktet da designsystemet er en levende styleguide som viser byggeklossene i systemet samlet i et bibliotek. Dette kan også være svært kostnadsbesparende.

Hva kan et designsystem innholde?

Det er viktig å nevne at et designsystem ikke trenger å inneholde alt fra første stund. Vi anbefaler å starte med det mest grunnleggende og begynne rolig og enkelt. Designsystemet kan, og bør, videreutvikles og spesifiseres etterhvert som det skjer endringer i tråd med menneskene, produktene og teknologien. Her er likevel en noen stikkord med forslag til hva den kan inneholde:

  • Stiler (farger, fonter o.l)
  • Design tokens
  • Komponenter
  • Kode
  • Bilder og grafikk
  • Regler og retningslinjer