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.
| Lag | Hvad det er | Eksempel |
|---|---|---|
| Design tokens | De mindste beslutninger gemt som navngivne værdier | Primærfarve, afstande, skriftstørrelser, hjørneradius |
| Komponenter | Genbrugelige byggeklodser i Figma og React | Knap, inputfelt, tabel, dialog, navigation |
| Mønstre | Faste løsninger på tilbagevendende opgaver | Filtrering, formularvalidering, tomme tilstande |
| Dokumentation | Hvornår og hvordan hver del bruges, med kodeeksempler | Retningslinjer 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
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
Kortlægning
Vi samler alle eksisterende skærme og finder dubletter, afvigelser og huller.
Tokens og fundament
Farver, typografi, afstande og ikoner defineres og navngives.
Komponenter
Hver komponent bygges i Figma og React med alle tilstande og tilgængelighed.
Dokumentation og overdragelse
Retningslinjer, kodeeksempler og en proces for bidrag og versioner.
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.
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.
FAQ
FAQ om designsystemer
Hvad er forskellen på et designsystem og en stilguide?
Hvad er design tokens?
Bygger I komponenterne i kode eller kun i Figma?
Hvad koster et designsystem?
Kan I bygge et designsystem til et eksisterende produkt?
Hvordan sikrer vi, at designsystemet bliver brugt?
Fortæl os, hvad der skal bygges
I får et skriftligt fastpristilbud inden for 24 timer. Intet salgsmøde nødvendigt.
