I Figma kan du bruke modes for raskt å justere størrelse, farger og typografi. Tidligere måtte slike endringer gjøres manuelt for hver komponent, men nå kan du justere alle valgte elementer samtidig, kun med et klikk. Dette betyr at du raskt kan endre et helt grensesnitt til en annen størrelse.
Hva er modes i Figma?
Modes er forhåndsdefinerte innstillinger i Designsystemet som lar deg enkelt bytte mellom ulike temaer, farger, størrelser og typografi. Dette gjør det enklere å tilpasse designet uten tidkrevende manuelle justeringer.
I Core UI Kit har du følgende modes:
- Theme – Velg mellom ulike tema
- Color scheme – Bytt mellom lys og mørk modus
- Main og support color – Velg hvilken farge som skal brukes på komponenter
- Typography – Endre skrifttype og stil
- Size – Juster størrelse på komponenter, tekst og avstander
Nedenfor går vi gjennom hvordan disse fungerer.
Theme
I Theme mode velger du hvilket tema designet skal bruke. Når du bytter theme, oppdateres hele designet seg automatisk, fra farger og typografi til øvrige designelementer, uten at du trenger å justere hver komponent manuelt. Dette gir deg muligheten til raskt å tilpasse designet etter organisasjonens visuelle identitet og spesifikke behov. For noen organisasjoner holder det med ett tema, mens andre trenger flere. Temaene som vises avhenger av hvilke tema som er satt opp for din organisasjon. Temaer kan bygges i Designsystemets temabygger.
Videoen under demonstrerer hvordan du kan endre Theme i Figma:
Color scheme
Color scheme mode lar deg bytte mellom Light og Dark mode. Du kan bruke denne innstillingen på hele designet eller bare på spesifikke områder, som for eksempel en header eller footer. Når du bytter fargevalg på en seksjon, endres kun den delen, mens resten av designet forblir uendret.
Slik bytter du mellom Light og Dark mode i Figma:
Main color og Support color
For å tilby muligheten til å endre farger på komponentene har vi laget to modes som heter main og support color. Disse vil inneholde fargene du la inn i temabyggeren. I henholdsvis hovedfarger (main) og støttefarger (support). Komponentene kommer enten i support eller main varianter. For å endre farge på main og support variantene bruker du modes. Merk deg at komponenten må være en main eller support variant for at valget skal dukke opp i modes menyen.
Slik bytter du Support Color på en komponent:
Typography
I Typography mode kan du enkelt endre skrifttype på hele designet. Når du bytter mode, oppdateres all tekst automatisk, slik at du slipper å justere hver komponent manuelt. Dette gir deg muligheten til raskt å tilpasse designet etter organisasjonens typografiske retningslinjer eller spesifikke behov.
Her ser vi hvordan du kan bytte Typografi i Figma:
Size
I Size mode kan du kan endre størrelsen globalt for hele designet eller justere spesifikke områder, som en header, card, eller overskrifter. Du kan velge mellom forhåndsdefinerte størrelser som small, medium og large, avhengig av kontekst og behov. Dette gir fleksibilitet til å tilpasse designet for ulike skjermstørrelser og bruksområder.
Slik justerer du størrelsen på elementer i Figma:
Tilpass farger og preferanser i temabyggeren
I temabyggeren kan du definere farger og andre visuelle innstillinger for designet ditt. Se guiden Bruk designsystemet med eget tema for å komme i gang.