Supa Design Tokens (Beta)

About this plugin

📦 Supa Design Tokens – Design tokens made easy in Figma.

✨ Generate, manage, and sync design tokens as Figma Variables and Styles in seconds, not weeks.

Supa Design Tokens is the all-in-one plugin to create, organize, document, and export design tokens directly inside Figma. Skip endless manual setup and spreadsheets—Supa helps you build a scalable design system in a fraction of the time.

⸻

🎨 What you can generate:

Build and manage multiple token categories in one place:

– Colors: Advanced palette generator with modes for matching libraries, lightness or opacity scales, and custom easing. Supports P3, OKLCH, and accessibility, with options for contrast preservation, and shade control. Ready for design systems and code export.

– Typography: Generate tokens for headings, body, and custom text styles using modular scales (golden ratio, minor/major second, or custom). Control font family, size, weight, line height, letter spacing, and style, with support for multiple variants and naming conventions.

– Effects: Shadows and blurs for consistent UI

– Dimensions: Spacing, sizing, and border radii tokens

– Layout: Breakpoints and container configurations for responsive design

⸻

⚡ Core features:

– Popular Design System Libraries: Pre-built tokens from Tailwind, Material UI, and other design systems to jumpstart your workflow

– Generate hundreds of tokens with smart algorithms

– Sync instantly as Figma Variables and Styles

– Bulk operations to manage tokens at scale

– Multi-format export: CSS, Tailwind, SCSS, JSON (W3C DTCG), TypeScript

– Visual documentation: cards, tables, and tile layouts inside your Figma file

– Accessibility and contrast data for color tokens

– Advanced search to handle thousands of tokens

⸻

🚀 Why Supa Design Tokens?

✅ Save weeks of manual token creation

✅ Build consistent design systems in less time

✅ Scale from indie projects to large teams

✅ Integrate seamlessly with developer workflows

✅ Export tokens ready for production

⸻

🔗 Learn more: supa-tokens.com

🐦 Feedback & Support: DM @angeloldesigns

⸻

💥 Ready to save time and scale your design system?

Try Supa Design Tokens today and take your design-to-code workflow to the next level.

⸻