Variabler i Figma

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 main og support?

Main og Support er egne modes i Figma som simulerer funksjonaliteten til data-color fra kode. De finnes kun i Figma og lar deg styre hvilke farger komponenter skal bruke, basert på kontekst.

I Figma uten enterprise-lisens kan du bruke 4 farger per mode, altså 8 farger totalt fordelt mellom main og support.

Les mer om hvordan disse 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 main/support, 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 mode (main eller support) 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:

• Main / Support: Brukes for fleksible farger, tilsvarende data-color i kode. Du setter en mode som main/border-default, 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.