Variabler i Figma

Når du lager nye komponenter i Figma, bør du koble størrelser, avstander og farger til riktige variabler. Da vil komponentene fungere som forventet i ulike størrelser, og fargene vil følge valgt theme og fungere i både light og dark mode.

Size-variabler

Size-variabler brukes til å sette både avstander og størrelser.

Størrelser kan definere bredde og høyde på et element, mens avstander definerer luften mellom ulike elementer. Avstander setter du under "Auto Layout" i Figma. Der kan du definere avstand over, under, ved siden av, eller mellom.

Klikk på bildet eller trykk Escape for å lukke

Fargevariabler i Figma

Fargevariabler er navngitt etter hva de er tiltenkt å brukes til: background, surface, border og text.

• Er du ute etter en border-farge kan det være effektiv å søke på "border" for å se alle tilgjengelige farger.
• Er du ute etter en fill-farge på et element kan det være effektiv å søke på "surface" for å se alle tilgjengelige farger.
• Er du ute etter en farge for tekst eller ikon kan det være effektiv å søke på "text" for å se alle tilgjengelige farger.

Les mer om farge-tokens og hva de brukes til.

For å sette opp egne fargevariabler se guiden "Designsystemet med eget tema"

Hva er Color-moden?

Color er en egen mode i Figma som simulerer funksjonaliteten til data-color fra kode. Den finnes kun i Figma og lar deg styre hvilken farge en komponent skal bruke, basert på kontekst.

Les mer om hvordan den brukes i modes i Figma

Dette gir deg to viktige fordeler:

1. Du kan bruke egne navn på fargene
   Hvis du hadde brukt selve fargevariablene direkte i komponentene, ville det ført til feil hver gang noen importerte eller byttet ut farger. Ved å bruke Color-moden, refererer komponentene til en abstrakt farge, og du kan endre innholdet uten å påvirke strukturen.
2. Du slipper å lage én variant per farge
   I stedet for å lage separate komponenter for blå, rød, grønn osv., kan én og samme komponent endre farge basert på hvilken farge-mode som er satt. Det gir mindre vedlikehold og gjør det lettere å holde orden i filen.

Farger i Figma Dev Mode

I Figma Dev Mode vises farger på to måter:

• Color: Brukes for fleksible farger, tilsvarende data-color i kode. Du setter en farge-mode (for eksempel accent), og komponenten arver riktig farge. Dette gjør det enklere å gjenbruke komponenter uten å lage nye varianter. Modusene er cascading - du kan sette dem på page, frame eller element.
• Eksplisitt farge: Brukes når en farge alltid skal være den samme, uansett mode. Visningen i Dev Mode vil da vise en spesifikk variabel, akkurat som i kode.