Spacing Token Generator
Generate spacing Tokens instantly, right inside Figma.
Plugin Preview
About this plugin
✨ Generate spacing tokens for Figma, without the manual setupBuild a clean, scalable spacing system in seconds.This plugin helps you generate spacing tokens for Figma variables using a 4pt grid, 8pt grid, or any custom base value. Choose your scale, define your multipliers, preview everything live, customize your token names, and generate a full spacing setup ready for your design system.Perfect for designers building design systems, UI kits, token libraries, and structured Figma workflows.🚀 Why Use It?Creating spacing variables by hand is slow, repetitive, and easy to mess up.This plugin gives you a faster and more flexible way to build a spacing system that stays consistent across your entire product.With it, you can:- generate spacing tokens automatically- preview token values in real time- create custom naming patterns- add tokens to new or existing variable collections- generate a spacing style guide directly in FigmaWhether you are starting from scratch or improving an existing design system, this plugin helps you move faster and keep everything organized.⚙️ What You Can Do1. Choose your base gridStart with a 4pt scale, 8pt scale, or any custom base value.2. Define your multipliersUse built in multipliers or add your own to generate the spacing steps you need, from small UI spacing values to large layout sizes.3. Customize token namingCreate your own naming pattern using placeholders:- {value}- {step}- {multiplier}4. Preview tokens liveSee your spacing tokens update instantly while you configure them, with visual size bars and zoom controls for easier inspection.5. Generate into Figma variablesCreate tokens inside a new or existing variable collection and choose how to handle duplicates:- skip existing- update existing- create only new ones6. Create a spacing style guideGenerate a visual style guide on the canvas with token names, values, and live variable bindings that stay synced with your variables.🔥 Best For- Figma variables- spacing tokens- design systems- UI kits- token based workflows- 4pt and 8pt grids- custom spacing scales- design to development handoff✅ Why Designers Like It- Faster than creating spacing variables manually- Cleaner setup for design systems- Real time token preview before generation- Flexible naming for any workflow- Works with existing collections- Built in documentation with a generated style guide- Helps teams stay consistent across components and layouts
Plugin Details
| Version | 6 |
|---|---|
| Created | April 1, 2025 |
| Last Updated | March 15, 2026 |
| Category | File organization plugins |
| Creator | Sevan |
| Stats | 80 installs, 28 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main:code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the File organization plugins category.