diff --git a/apps/storefront/pages/grunnleggende/designelementer/storrelser-og-avstander.mdx b/apps/storefront/pages/grunnleggende/designelementer/storrelser-og-avstander.mdx index b75a943f7c..b1ceb77b73 100644 --- a/apps/storefront/pages/grunnleggende/designelementer/storrelser-og-avstander.mdx +++ b/apps/storefront/pages/grunnleggende/designelementer/storrelser-og-avstander.mdx @@ -1,7 +1,7 @@ import { RulerIcon } from '@navikt/aksel-icons'; import { MenuPageLayout } from '@layouts'; -import { Meta, TokenList } from '@components'; +import { Image, Meta, TokenList } from '@components'; ( /> ); -Størrelser (sizing) brukes til å definere bredde og høyde på elementer. +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. +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. + +## 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](https://tokens.studio/)". Som du kan se fra [dokumentasjonen til Token Studio](https://docs.tokens.studio/available-tokens/spacing-tokens) 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). + +Skjermbildet viser hvor du kan bruke Sizing-variabler i Figma + +### 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. + +Skjermbildet viser hvor du kan bruke Spacing-variabler i Figma + +
+
diff --git a/apps/storefront/public/img/sizing.png b/apps/storefront/public/img/sizing.png new file mode 100644 index 0000000000..984438db8b Binary files /dev/null and b/apps/storefront/public/img/sizing.png differ diff --git a/apps/storefront/public/img/spacing.png b/apps/storefront/public/img/spacing.png new file mode 100644 index 0000000000..88b205d785 Binary files /dev/null and b/apps/storefront/public/img/spacing.png differ