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 PalettesInput a single Hex code and get a complete, balanced tonal scale (50 to 950).Automatically creates variables like Primary/500, Primary/100, etc.Includes contrast checking in the preview.abcd Typography with Deep BindingDefine your font families, sizes, and weights.The Magic: The plugin automatically creates Variables (String & Float) AND Text Styles.Deep Binding: The generated Text Styles are automatically linked to the variables. If you update the variable later, all styles update instantly.📐 Smart Spacing SystemGenerates a comprehensive spacing scale (none, xxs, sm, md, xl, etc.).Scoped Variables: Spacing tokens only appear in Gap, Width, and Height fields, keeping your UI clean.🔲 Radius TokensDefine your corner radius scale.Scoped Variables: Tokens only appear when adjusting Corner Radius properties.⚡️ Why use DS Builder?Zero Setup: No complex configuration needed.Native Variables: Built 100% on Figma's Variables API.Clean Output: Creates organized Collections (Colors, Typography, Spacing, Radius) without cluttering your file.Made with 💙 by felipe.uxFeedback and suggestions are welcome!