Orange Tokens: Themes & Variables

About this plugin

Design Tokens and Figma Variables for Scalable Design Systems

Orange Tokens is a Figma plugin for generating design tokens, color variables, and typography styles from a single source of truth.

Create primitives, semantic tokens, and light and dark themes instantly using Figma Variables.

Built for designers and teams working on real design systems, Orange Tokens removes manual setup and keeps your tokens consistent, reusable, and production ready.

🚀 Key Capabilities

1. Generate color primitives and semantic design tokens
2. Create light and dark mode themes using Figma Variables
3. Auto generate typography tokens and synced text styles
4. Maintain clean, system ready token naming
5. View and document your full system in one Brandbook
6. Perfect for product teams, enterprise design systems, and multi theme workflows.

⚙️ How It Works

1. Enter base colors and typography
2. Configure tokens and themes
3. Click Generate
4. Variables, text styles, and system docs are created instantly.

✨ Core Features

1. Design token generation inside Figma
2. Figma Variables first workflow
3. Smart color scales with accessible contrast
4. Typography tokens and text styles auto synced
5. Non destructive updates with variable detection
6. Refreshed UI with advanced configuration options

📘 What’s New

1. Token generation alongside primitives
2. Light and dark mode color support
3. Integrated Brandbook for colors and typography
4. Editable primitives with auto detection
5. Improved performance and naming structure

🧭 Roadmap

Coming soon:

1. Advanced typography token customization
2. Spacing and layout tokens
3. Theme toggles and presets
4. Export options for developer handoff

Feedback or feature requests?

Comment on the plugin page or email [email protected]