Modes i Figma

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

Hvordan ser du hvilke mode som er valgt?

Designere kan enkelt bytte mellom ulike modes i Figma og se informasjon om den valgte mode. De som har visningstilgang vil ikke kunne se informasjon om hvilken mode som er valgt - som Tema, Fargeoppsett eller Typografi. Denne informasjonen er bare tilgjengelig for dem som har redigeringstilgang, eller for de som bruker Dev Mode i Figma.

Slik ser det ut med visningstilgang (view only):

Her kan du se at informasjon om valgt mode ikke er synlig i visningstilgang.

Klikk på bildet eller trykk Escape for å lukke

Slik ser det ut med redigeringstilgang:

Når du har redigeringstilgang, kan du se hvilken mode som er valgt for hele designet.

Klikk på bildet eller trykk Escape for å lukke

Slik ser det ut i Dev Mode:

Hvis en mode er satt på en hel frame, vises den kun i Dev mode når selve framen er valgt. Dev mode ser kun hvilken mode som er satt på elementet det er satt, ikke lenger nedover.

Klikk på bildet eller trykk Escape for å lukke

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:

Color

For å tilby muligheten til å endre farger på komponentene har vi laget en Color mode. Den inneholder alle fargene du la inn i temabyggeren, med én mode per farge. Ved å velge en fargemodus i Figma bestemmer du hvilken av temaets farger som er i bruk.

Modusene er kaskaderende, så du kan sette dem på hele designet eller enkelt områder. Dette lar deg enkelt tilpasse designet og tilpasse det til forskjellige kontekster og behov.

Slik bytter du farge 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.