Dette er en guide for å komme i gang med bruk av Tokens og komponenter fra designsystemet i Figma.

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: