Størrelser (sizing) brukes til å definere bredde og høyde på elementer.
Avstand (spacing) brukes til å sette marging og padding. Settet med avstander som er definert i tokens gir oss mulighet til å definere verdier for "Auto Layout" i Figma og sikrer dermed konsistent design på tvers av grensesnitt.
@digdir/designsystemet-theme
Border-radius
| Navn | Rem | Px (16px) | Visualisering |
|---|---|---|---|
| min(0.25rem*0.5,0.25rem) | |||
| min(0.25rem,0.25rem*2) | |||
| min(0.25rem*2,0.25rem*5) | |||
| min(0.25rem*3,0.25rem*7) | |||
| 0.25rem | |||
| 624.9375rem |
Spacing
| Navn | Rem | Px (16px) | Visualisering |
|---|---|---|---|
| 0rem | |||
| 0.25rem | |||
| 0.5rem | |||
| 0.75rem | |||
| 1rem | |||
| 1.25rem | |||
| 1.5rem | |||
| 1.75rem | |||
| 2rem | |||
| 2.25rem | |||
| 2.5rem | |||
| 2.75rem | |||
| 3rem | |||
| 3.25rem | |||
| 3.5rem | |||
| 3.75rem | |||
| 4.5rem | |||
| 5.5rem | |||
| 6.5rem | |||
| 7.5rem |
Sizing
| Navn | Rem | Px (16px) | Visualisering |
|---|---|---|---|
| 0rem | |||
| 0.25rem | |||
| 0.5rem | |||
| 0.75rem | |||
| 1rem | |||
| 1.25rem | |||
| 1.5rem | |||
| 1.75rem | |||
| 2rem | |||
| 2.25rem | |||
| 2.5rem | |||
| 2.75rem | |||
| 3rem | |||
| 3.25rem | |||
| 3.5rem | |||
| 3.75rem | |||
| 4.5rem | |||
| 5.5rem | |||
| 6.5rem | |||
| 7.5rem |
Men hvorfor må vi ha både sizing og spacing når de er helt like?
Fordi vi ønsker å holde variablene i sync mellom Figma og kode. For å gjøre dette bruker vi foreløpig en plugin som heter "Token Studio". Som du kan se fra dokumentasjonen til Token Studio er pluginen avhengig av å skille størrelser og avstander.
Sizing-variabler i Figma
Størrelser (sizing) er det du setter under en "Section", "Frame" eller "Group" i Figma. Der kan du definere bredde (W) og høyde (H).
Spacing-variabler i Figma
Avstander er det du setter under "Auto Layout" i Figma. Der kan du definere avstand over, under, ved siden av, eller mellom.
