DS Builder: Variables & Tokens

About this plugin

🚀 Stop wasting time creating Variables manually.

DS Builder is the fastest way to kickstart your Design System foundation in Figma. In just a few clicks, generate organized Collections for Colors, Typography, Spacing, and Radius—all properly scoped and ready to use.

✨ Key Features:

🎨 Instant Color Palettes

1. Input a single Hex code and get a complete, balanced tonal scale (50 to 950).
2. Automatically creates variables like Primary/500, Primary/100, etc.
3. Includes contrast checking in the preview.

abcd Typography with Deep Binding

1. Define your font families, sizes, and weights.
2. The Magic: The plugin automatically creates Variables (String & Float) AND Text Styles.
3. Deep Binding: The generated Text Styles are automatically linked to the variables. If you update the variable later, all styles update instantly.

📐 Smart Spacing System

1. Generates a comprehensive spacing scale (none, xxs, sm, md, xl, etc.).
2. Scoped Variables: Spacing tokens only appear in Gap, Width, and Height fields, keeping your UI clean.

🔲 Radius Tokens

1. Define your corner radius scale.
2. Scoped Variables: Tokens only appear when adjusting Corner Radius properties.

⚡️ Why use DS Builder?

1. Zero Setup: No complex configuration needed.
2. Native Variables: Built 100% on Figma's Variables API.
3. Clean Output: Creates organized Collections (Colors, Typography, Spacing, Radius) without cluttering your file.

Made with 💙 by felipe.ux

Feedback and suggestions are welcome!