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