Skip to content

Commit

Permalink
docs: explain the difference between spacing and sizing in figma (#1865)
Browse files Browse the repository at this point in the history
Co-authored-by: Barsnes <tobias.barsnes@digdir.no>
  • Loading branch information
mrosvik and Barsnes authored Apr 25, 2024
1 parent aeed607 commit 6c7073c
Showing 3 changed files with 30 additions and 3 deletions.
Original file line number Diff line number Diff line change
@@ -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';

<Meta
title='Størrelser og avstander'
@@ -20,9 +20,9 @@ export default ({ children }) => (
/>
);

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.

<TokenList
type='sizing'
@@ -33,3 +33,30 @@ Avstand (spacing) brukes til å sette marging og padding. Settet med avstander s
type='spacing'
hideValue={true}
/>

## 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).

<Image
src='/img/sizing.png'
alt='Skjermbildet viser hvor du kan bruke Sizing-variabler i Figma'
boxShadow={false}
/>

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

<Image
src='/img/spacing.png'
alt='Skjermbildet viser hvor du kan bruke Spacing-variabler i Figma'
boxShadow={false}
/>

<br />
<br />
Binary file added apps/storefront/public/img/sizing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added apps/storefront/public/img/spacing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6c7073c

Please sign in to comment.