Et designsystem kan være veldig mange ting. For oss er et designsystem et sett med felles verktøy som hjelper oss å bygge digitale produkter og tjenester i MMG.

Gnist skal gjøre det enklere å bygge gode, helhetlige og merkevareforankrede digitale produkter/tjenester ved å tilby et gjennomtenkt, fleksibelt og effektivt designsystem. Vi er her for å støtte kreativitet, styrke håndverket og systematisere det beste – slik at utvikling går raskere uten å miste kvalitet eller særpreg. – slik at produktteam kan skape med frihet, bygge med trygghet og levere med kraft.

Hvordan bruke designsystemet

Gnist. 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.

Figma

For å komme i gang med å designe for digitale flater i MMG trenger du tilgang til Figma. Dette verktøyet bruker vi for å lage design skisser, samarbeide, gi tilbakemelding, utvikle prototyper til brukertesting og versjonshåndtering. Vi bruker også Figma for å vedlikeholde UI-biblioteket med verktøykassen og gjenbrukbare komponenter.

Generelt sett så er det designerne som har editor-rolle i Figma, men produkteiere og utviklere kan få view-status til å kommentere direkte i verktøyet, samt få tilgang på kodespesfikasjoner. For å få tilgang til MMG Figma, kontakt oss på Slack på #gnist-designsystem.

Design tokens

Design tokens representerer de små, designbeslutningene som utgjør det visuelle uttrykket i et designsystem. Tokens er verdier som trengs for å konstruere og vedlikeholde et design, for eksempel mellomrom, farger, typografi, objektstiler, animasjon og mer. De er en "sannhetskilde" for å sikre at produktopplevelsene føles enhetlige og sammenhengende.

Tokens erstatter statiske verdier, som heksadesimalkoder for farger, med selvforklarende navn. Ved å bruke design tokens i stedet for hardkodede verdier, kan arbeidet med å bygge, vedlikeholde og skalere produkter med et designsystem effektiviseres.

Token Studio er en plattform som lar oss organisere, oppdatere og dele design tokens. Vi bruker Tokens Stuido i det vi designer i Figma for å enkelt applisere tokens og bytte bytte mellom temaer. Under kan du lese om hvordan du setter opp og bruker Token Studio.

Design tokens blir laget og strukturert i en plugin til Figma som heter Tokens Studio.

Hvordan bruke Tokens Studio

1. Åpne plug-in
2. Husk å hver dag pulle fra Github for å forsikre at du har de siste endringene inne
3. Pass på at brandless er huket av i toppen av Tokens Studio.
4. Greit å ha endret til Apply to selection så man slipper å endre åp hele pagen i FIGMA
5. Løsriv deg fra høyremenyen i Figma, og bruk heller tokens i plugin-vinduet når du lager skisser

Tips: Hvis tokens (med valgt merkevare) ikke appliseres umiddelbart, sjekk innstillingene dine nederst i pluginen, og eventuelt restart før du applyer på nytt
Kontakt Gnist-teamet på Slack hvis du lurer på noe, oppdager at noe ikke fungerer som det bør, eller har ideer om forbedringer.

Komponentbibliotek

Gnists UI-bibilotek i Figma er en fil med alle våre UI-komponenter som er klare til bruk. Disse komponentene skal brukes til å designe produktsider og funksjoner. Ved å koble seg til biblioteket får du tilgang til universale komponenter som farger, typografi, knapper, inputfelter, navigasjon og lignende. Slik kommer du raskt og effektivt i gang med å sette opp brukergrensensitt for din applikasjon. Alle komponenter sorteres i tydelige kategorier som du kan velge mellom når du importerer biblioteket til din arbeidsfil i Figma.

Vedlikehold av UI-biblioteket

Siden designsystemet er et levende produkt vil dette biblioteket bli kontinuerlig oppdatert i henhold til vår grafiske profil og vedlikeholdt basert på tilbakemeldinger.

Det er derfor viktig å holde din Figma-fil og UI-biblioteket synkronisert. Dette er en av de viktigste fordelene ved å ha det, for å sikre at eventuelle endringer eller nye komponenter kommer med. Når UI-biblioteket oppdateres vil det dukke opp et varsel nede i høyre hjørne. Ved å klikke på varselet får man se hvilke komponenter som er endret og deretter muligheten til å oppdatere disse i sin egen fil.

Kom i gang med komponenter

Dersom bibliotekene ikke ligger i Figma-prosjektet ditt allerede, må du legge det til. Slik legger du til Gnist komponentene i figma prosjektet ditt: