Steve Kinney

Figma Spacing Variable Generator

This tool will generate a JSON file of variables that you can import into Figma using this plugin. The values included here are roughly based on the default values that ship with Tailwind.

Download

Create a New Variable

Variable Value Code Syntax Remove
Container/Extra Small

375

375px
Container/Small

640

640px
Container/Medium

768

768px
Container/Large

1024

1024px
Container/XL

1280

1280px
Container/2XL

1536

1536px
Container/3XL

1920

1920px
Spacing/0

0

0px
Spacing/px

1

1px
Spacing/1

4

0.25rem
Spacing/2

8

0.5rem
Spacing/3

12

0.75rem
Spacing/4

16

1rem
Spacing/5

20

1.25rem
Spacing/6

24

1.5rem
Spacing/7

28

1.75rem
Spacing/8

32

2rem
Spacing/9

36

2.25rem
Spacing/10

40

2.5rem
Spacing/11

44

2.75rem
Spacing/12

48

3rem
Spacing/14

56

3.5rem
Spacing/16

64

4rem
Spacing/20

80

5rem
Spacing/24

96

6rem
Spacing/28

112

7rem
Spacing/32

128

8rem
Spacing/36

144

9rem
Spacing/40

160

10rem
Spacing/44

176

11rem
Spacing/48

192

12rem
Spacing/52

208

13rem
Spacing/56

224

14rem
Spacing/60

240

15rem
Spacing/64

256

16rem
Spacing/72

288

18rem
Spacing/80

320

20rem
Spacing/96

384

24rem