Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: explain the difference between spacing and sizing in figma #1865

Merged
merged 4 commits into from
Apr 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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'
Expand All @@ -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'
Expand All @@ -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.
Loading