Tokens Studio is an open‑source design‑system platform that lets designers create and manage design tokens with logic‑first relationships and synchronizes them directly to code repositories and CI/CD pipelines. It provides native plugins for Figma and Penpot, a CLI/SDK, and exports tokens in JSON, CSS/SCSS, iOS, Android and Style Dictionary formats, enabling automated, version‑controlled delivery of multi‑brand and multi‑theme token sets to development teams.
Funding
Funding not disclosed
Founders
Product
Problem
Design teams often manage style values (colors, spacing, typography) in separate tools, leading to manual updates, mismatched token definitions, and fragile handoffs between design and development. This results in inconsistencies across brands, themes, and platforms and slows product iteration.
Solution
Tokens Studio provides a unified, open‑source design‑system platform that automates the entire token lifecycle. It lets designers define tokens with logic‑first relationships and inheritance, then synchronizes those definitions directly to code repositories and build pipelines. The platform integrates natively with Figma, Penpot, GitHub, and other tools via a CLI/SDK, eliminating the need to switch contexts or maintain duplicate sources of truth. Export formats include JSON, CSS variables, SCSS, iOS, Android, and Style Dictionary configurations, enabling developers to consume tokens without manual translation. Built on an extensible token architecture, Tokens Studio supports multi‑brand theming, versioning, and governance features that keep large design systems consistent at scale. All of this is delivered through a subscription model with optional coaching services to accelerate adoption.
Target Audience
Primary users are product design and engineering teams that maintain design systems—especially those handling multiple brands, themes, or platforms—and need reliable, automated token delivery from design tools to code.
Features
- Logic‑first token modeling with inheritance, conditions, and mode support, visualized through the Graph Engine editor
- Bi‑directional sync to Git repositories and CI/CD pipelines; tokens are emitted as JSON, CSS/SCSS, iOS, Android, and Style Dictionary files
- Native plugins for Figma and Penpot plus a CLI/SDK for custom integrations, ensuring tool‑agnostic workflow continuity
- Cross‑project versioning, branching, and release management with role‑based permissions and audit logs
- Multi‑brand and multi‑theme management (light/dark, seasonal, brand variations) with a single source of truth
- Open‑source core and W3C Design Tokens Community Group compliance for seamless portability across ecosystems
- Automated token generation (palette derivation, token recipes) and bulk application of variables across design files
- Enterprise‑grade security, including role‑based access control and encrypted data storage