Et designsystem, I kan bygge videre på
Et fælles bibliotek i Figma samler komponenter, farver, typografi og regler, så designere og udviklere har samme reference. Omfanget tager afsæt i jeres produkt og det team, der skal bruge systemet.
Når flere arbejder på det samme produkt
Et designsystem bliver relevant, når nye sider og funktioner skal ligne resten af løsningen, og flere personer er med til at bygge dem.
Jeg tager udgangspunkt i jeres eksisterende design og samler de mønstre, I har brug for at genbruge. Det kan indgå i et digitalt designprojekt eller være en selvstændig oprydning i et eksisterende interface.
- Flere personer publicerer eller udvikler på samme løsning
- Nye sider tager for lang tid, fordi alt designes fra bunden
- Hjemmeside, app og kampagner ligner tre forskellige virksomheder
Fra eksisterende design til fælles komponenter
Gennemgang
Jeg gennemgår produktet, Figma-filerne og den visuelle identitet. Vi vælger, hvilke mønstre der skal bevares, samles eller ændres.
JSTo primærknapper. Vælg én.
JSSpacing hopper mellem 12 og 18
Fælles grundlag
Farver, typografi, afstande og hjørner defineres som genanvendelige værdier. Navngivning og struktur afstemmes med dem, der skal bruge systemet.
Ink#10253aAccent#d9b26fSurface#f4f1eaLine#e2ddd3OverskriftGT SectraAaBrødtekstInterAaHjørnerMedium · 8 pxAfstand4 – 48Komponenter
Jeg bygger de aftalte knapper, felter, kort og øvrige komponenter med relevante varianter, fejltilstande og interaktioner.
Knap Felt E-mailnavn@firma.dkTelefon12 34Ugyldigt nummerStatus AktivKladdeAfventerFejlValg Dokumentation og overlevering
I får Figma-filer og en kort vejledning. Hvis udvikling indgår, afstemmes komponenterne med koden. Vi aftaler også, hvordan systemet vedligeholdes.
srcuibutton.astroLayout.astroButton.astrobutton.astroLayout.astro1---2const variants = ['primary', 'ghost'];3const { variant = 'primary', disabled } = Astro.props;4---5<button class={variant} disabled={disabled}>6<slot />7</button>8<Button variant="primary">Send</Button>9<Button variant="ghost" disabled>Venter</Button>
Hvad koster et designsystem?
Prisen afhænger af, om I starter fra et eksisterende UI, og hvor mange komponenter der skal dokumenteres. Vælg Designsystem i beregneren, og justér leverancerne.
Udfyld den, og få et interval med det samme.
Forventet investering
—
Ekskl. moms ·
Få en konkret vurdering
Send dine valg til mig, så kigger jeg på scope og anbefaler den rigtige løsning og næste skridt.
Tak. Jeg kigger på det.
Jeg vender tilbage med en konkret vurdering.
Hellere tale sammen? Book 30 min. gratis digital indsigt
Udvalgte referencer
Ofte stillede spørgsmål om designsystemer
Hvad er et designsystem?
Et designsystem samler genanvendelige UI-komponenter, designværdier og regler for deres brug. Det giver designere og udviklere et fælles grundlag, når de bygger nye sider og funktioner.
Hvordan adskiller det sig fra en brandguide?
En brandguide beskriver virksomhedens visuelle identitet. Et designsystem omsætter blandt andet den identitet til digitale komponenter og deres tilstande. De to kan derfor supplere hinanden.
Har en mindre hjemmeside brug for et designsystem?
Ikke altid som et separat projekt. På en mindre hjemmeside kan komponenterne udvikles undervejs. Et selvstændigt system er mere relevant, når flere personer eller produkter skal dele samme design.
Kan du arbejde videre på vores Figma-bibliotek?
Ja. Jeg begynder med en gennemgang af filerne og aftaler, hvad der skal ryddes op i eller udvides. I behøver ikke starte forfra, hvis det eksisterende bibliotek fungerer.
Hvad koster et designsystem?
Prisen afhænger af udgangspunktet, antallet af komponenter og den nødvendige dokumentation. Brug beregneren og vælg Designsystem for at få et foreløbigt interval.
