Gnist. er Møller Mobility Group sitt designsystem. Det gir deg ferdigbygde komponenter, design tokens og verktøy for å bygge tilgjengelige, konsistente brukergrensesnitt, opprettholde visuell konsistens og kvalitet i MMG sine løsninger. — raskt.

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.

Fordeler ved designsystemet

• Mindre dobbeltarbeid, raskere ut i produksjon og enklere skalering.
• Mye av arbeidet med Universell Utforming kommer med gratis.
• Én kilde til sannhet gir en helhetlig brukeropplevelse på tvers av våre produkter, designjusteringer når alle flater raskt.
• Bedre kunnskapsdeling ved å spille hverandre gode - vi kommer lenger sammen.Figma

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å nyttKontakt 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.

Designprosess:

Før du begynner å designe løsninger for MMG, bør du bli kjent med merkevarene og våre visuelle identiteter for å lære mer om mål, visjon, løfter og designprinsipper.

Vi forvalter Audi, VW, Skoda og Cupra bilmerkene. Har også Bilhold, Møller Bil og interne systemer som det er rettningslinjer for. Her finner du lenker til de visuelle identitetene under ressurssiden.

Verktøy

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 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 Enturs Figma, kontakt oss på Slack på #gnist-designsystem

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

Gå igjennom styleguiden i Figma-biblioteket eller kompinensiden for å se dokumentasjonen, lese retningslinjer og bli kjent med eksemplene. Dette biblioteket er tilgjengelig for alle som jobber med å videreutvikle de digitale produktene til MMG.

Vedlikehold

Siden Gnist. er et levende produkt vil dette biblioteket bli kontinuerlig oppdatert i henhold til våre visuelle identiteter 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.