Spacing

PRO

You can edit 8 Components for free. Get premium for unlimited access.

Overview of the space scale and scaling options.

Figma

Spacing values are derived from a 18-step scale, which is used for props such as margin and padding. These props accept numeric strings from "p_0" to "p_96" ,which correspond to the steps in the scale below.

Step
Base value
p_0
0 px
p_2
2 px
p_4
4 px
p_8
8 px
p_12
12 px
p_16
16 px
p_20
20 px
p_24
24 px
p_28
28 px
p_32
32 px
p_36
36 px
p_40
40 px
p_44
44 px
p_48
48 px
p_56
56 px
p_64
64 px
p_80
80 px
p_96
96 px

SwiftUI

Spacing values are derived from a 18-step scale, which is used for props such as margin and padding. The prop Spacing accept numeric strings from "p_0" to "p_96" ,which correspond to the steps in the scale below.

Step
Base value
p_0
0 px
p_2
2 px
p_4
4 px
p_8
8 px
p_12
12 px
p_16
16 px
p_20
20 px
p_24
24 px
p_28
28 px
p_32
32 px
p_36
36 px
p_40
40 px
p_44
44 px
p_48
48 px
p_56
56 px
p_64
64 px
p_80
80 px
p_96
96 px

Jetpack Compose

Spacing values are derived from a 18-step scale, which is used for props such as margin and padding. These props accept numeric strings from "p_0" to "p_96" ,which correspond to the steps in the scale below.

Step
Base value
p_0
0 dp
p_2
2 dp
p_4
4 dp
p_8
8 dp
p_12
12 dp
p_16
16 dp
p_20
20 dp
p_24
24 dp
p_28
28 dp
p_32
32 dp
p_36
36 dp
p_40
40 dp
p_44
44 dp
p_48
48 dp
p_56
56 dp
p_64
64 dp
p_80
80 dp
p_96
96 dp

React Native

Spacing values are derived from a 18-step scale, which is used for props such as margin and padding. The prop Paddings accept numeric strings from "p_0" to "p_96" ,which correspond to the steps in the scale below.

Step
Base value
p_0
0 px
p_2
2 px
p_4
4 px
p_8
8 px
p_12
12 px
p_16
16 px
p_20
20 px
p_24
24 px
p_28
28 px
p_32
32 px
p_36
36 px
p_40
40 px
p_44
44 px
p_48
48 px
p_56
56 px
p_64
64 px
p_80
80 px
p_96
96 px

Discover more content

You have questions or need help?

E-Mail

You want to try?

Test for free

Save time and money?

Get Pro Version