Designsystem: ét fælles sprog for design og kode

Det korte svar: Et designsystem er et samlet bibliotek af farver, typografi, komponenter og regler, som både designere og udviklere bygger fra. Vi bygger det i Figma og i React, dokumenterer det og sætter en proces op for, hvem der må ændre hvad. Prisen står fast i det skriftlige tilbud inden for 24 timer.

2.0
Designsystem leveret til WorkPoint
4
Lag: tokens, komponenter, mønstre, dokumentation
24
Timer til fast pris i skriftligt tilbud

Kender I det? Tre forskellige blå knapper. En dato skrives på fire måder. Det nye modul ligner ikke resten af produktet, fordi teamet ikke kunne finde de rigtige komponenter. Hver gang der skal laves en ny skærm, starter designer og udvikler næsten forfra. Et designsystem løser det ved at gøre de rigtige valg til de nemme valg. Det er ikke en stilguide i en PDF, men et levende bibliotek, der bruges hver dag i UX/UI-design og i koden.

Hvad består et designsystem af?

Fire lag. Hvert lag bygger på det forrige.

LagHvad det erEksempel
Design tokensDe mindste beslutninger gemt som navngivne værdierPrimærfarve, afstande, skriftstørrelser, hjørneradius
KomponenterGenbrugelige byggeklodser i Figma og ReactKnap, inputfelt, tabel, dialog, navigation
MønstreFaste løsninger på tilbagevendende opgaverFiltrering, formularvalidering, tomme tilstande
DokumentationHvornår og hvordan hver del bruges, med kodeeksemplerRetningslinjer for tekst, tilgængelighed og tone

Tokens er det lag, der oftest bliver overset, og det vigtigste. Når en farve eller en afstand er defineret ét sted og brugt overalt, kan I skifte tema, understøtte mørk tilstand eller tilpasse et white label-produkt til en ny kunde uden at gå hver skærm igennem. Tokens er også broen til jeres brand: identiteten bliver oversat til værdier, som koden kan læse.

Komponenterne er også det sted, hvor tilgængelighed bliver løst én gang for alle. Når knappen, dialogen og formularfeltet har korrekt kontrast, fokus og skærmlæserstøtte indbygget, arver hver ny skærm det automatisk. Det er langt billigere end at rette de samme fejl skærm for skærm, og det gør det lettere at dokumentere, at hele løsningen lever op til kravene.

Hvornår har et produkt brug for et designsystem?

Tid til et designsystem

  • Flere produkter eller moduler, der skal ligne hinanden
  • Flere teams eller leverandører, der designer og koder
  • Et SaaS-produkt, der vokser med nye features hvert kvartal
  • Krav om tilgængelighed på tværs af hele løsningen

Et komponentbibliotek er nok

  • Én hjemmeside eller én mindre webapp
  • Ét lille team, der sidder sammen
  • Produktet er stadig ved at finde sin form
  • Få skærme, der sjældent ændres
Et designsystem er en investering. Den skal passe til produktets størrelse.

Alle vores løsninger bygges med et fælles sæt komponenter, så selv en lille webapp får konsistens fra start. Et fuldt designsystem med dokumentation og governance giver mening, når flere mennesker skal bygge på det samme over flere år, typisk i SaaS-udvikling og større platforme.

Fra Figma til kode: sådan bygger vi det

1

Kortlægning

Vi samler alle eksisterende skærme og finder dubletter, afvigelser og huller.

2

Tokens og fundament

Farver, typografi, afstande og ikoner defineres og navngives.

3

Komponenter

Hver komponent bygges i Figma og React med alle tilstande og tilgængelighed.

4

Dokumentation og overdragelse

Retningslinjer, kodeeksempler og en proces for bidrag og versioner.

Design og kode udvikles side om side, så de ikke glider fra hinanden.

Governance: hvem ejer designsystemet?

Et designsystem uden ejer forfalder. Efter et halvt år har teamene lavet deres egne varianter, og biblioteket er ude af trit med produktet. Derfor aftaler vi fra start, hvem der godkender nye komponenter, hvordan ændringer versioneres, og hvordan teams foreslår tilføjelser. Det lyder bureaukratisk, men i praksis er det en kort proces og en fast rytme, der sikrer, at systemet bliver brugt. Typisk er der én ansvarlig på designsiden og én på udviklingssiden, et fast sted at foreslå ændringer og en changelog, så alle kan se, hvad der er nyt i hver version.

Hos WorkPoint har vi i et toårigt samarbejde lavet Design System 2.0 til WorkPoint Core, Automate og Express 365, med en designer placeret i produktteamene. Den nærhed er ofte det, der afgør, om et designsystem lever. For Systematic arbejdede vi med UI-design på stedet til Columna Cura, omsorgsjournalen til danske kommuner, hvor konsistens og tydelighed er afgørende for dem, der bruger systemet hele dagen.

Hvad koster et designsystem?

Omfanget varierer meget: et fundament med tokens og kernekomponenter til ét produkt er noget andet end et system til en hel produktfamilie med flere teams. Vi skriver derfor prisen som en fast pris i tilbuddet inden for 24 timer, efter vi har set jeres produkt. Mange starter med en UX audit, som viser, hvor inkonsistensen koster mest, og bygger designsystemet derfra. Send os et link, så ser vi på det.

Udvalgte cases

Bygget af os, i drift i dag

SaaS · Microsoft 365 · WorkPoint

Design System 2.0 til WorkPoint Core, Automate og Express 365.

Sundhed og omsorg · Systematic

UI-design på stedet til Columna Cura, omsorgsjournalen til de danske kommuner.

Det siger vores kunder

Vi har arbejdet sammen med Ceptiv om flere af vores digitale løsninger, og de er blevet en naturlig del af teamet. De arbejder hurtigt og omsætter idéer til nye designs og klikbare prototyper på kort tid, så vi kan teste med kunderne tidligt i stedet for at diskutere på papir.
Szabolcs Nagy · Lead Global Product Manager, GrundfosLæs casen

FAQ

FAQ om designsystemer

Hvad er forskellen på et designsystem og en stilguide?
En stilguide beskriver, hvordan tingene skal se ud: logo, farver og skrifttyper, ofte i en PDF. Et designsystem er et værktøj, der bruges direkte i arbejdet. Det rummer tokens, komponenter i både Figma og kode, mønstre og dokumentation. Stilguiden fortæller, hvad en knap skal ligne. Designsystemet giver udvikleren den færdige knap.
Hvad er design tokens?
Design tokens er navngivne værdier for de mindste designbeslutninger, fx primærfarve, standardafstand eller overskriftsstørrelse. De defineres ét sted og bruges både i Figma og i koden. Når en token ændres, slår ændringen igennem overalt. Det gør det muligt at skifte tema, understøtte mørk tilstand eller lave white label-versioner uden at gennemgå hver skærm.
Bygger I komponenterne i kode eller kun i Figma?
Begge dele. Et designsystem, der kun findes i Figma, glider hurtigt fra det, der faktisk er i produktet. Vi bygger komponenterne i React og TypeScript, så de kan bruges direkte i jeres løsning, og holder Figma-biblioteket i sync. Hvis jeres produkt er bygget i en anden teknologi, tager vi det med i vurderingen, før vi skriver tilbuddet.
Hvad koster et designsystem?
Det afhænger af, hvor mange produkter, komponenter og teams systemet skal dække, og om I har brug for en designer placeret i teamet over længere tid. Vi skriver prisen som en fast pris i et skriftligt tilbud inden for 24 timer. Et godt udgangspunkt er en kort gennemgang af jeres nuværende skærme, så omfanget bliver konkret.
Kan I bygge et designsystem til et eksisterende produkt?
Ja, det er det mest almindelige. Vi starter med at kortlægge de skærme, I har, og finder de komponenter, der går igen, og dem, der afviger. Derfra bygger vi fundamentet og udskifter komponenter gradvist, så produktet ikke skal fryses imens. Nye features bygges i det nye system fra dag ét, og gamle skærme opdateres i takt med, at de alligevel skal røres.
Hvordan sikrer vi, at designsystemet bliver brugt?
Ved at gøre det lettere at bruge systemet end at lade være. Det kræver god dokumentation, komponenter der virker i koden, og en klar ejer, der godkender ændringer. Hos WorkPoint sad vores designer i produktteamene, hvilket gjorde systemet til en del af hverdagen. Vi aftaler governance fra start, så I ved, hvem der gør hvad efter overdragelsen.

Fortæl os, hvad der skal bygges

I får et skriftligt fastpristilbud inden for 24 timer. Intet salgsmøde nødvendigt.

Dennis Nielsen

Dennis Nielsen

Head of Operations, Ceptiv

Gratis konsultation

En gratis time med gode råd, før I går i gang.

Beskriv jeres projekt, så kontakter jeg jer hurtigst muligt, og vi aftaler et uforpligtende møde. I går derfra med gode råd til, hvordan projektet kommer godt fra start.

  • Gratis
  • 1 time
  • Uforpligtende