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 |