welcome to dttb

Design Tokens Toolbox

Build faster. Maintain consistency. Save hours on every release.

Theme Manager

Manage and scale design token themes with ease

Define how your design token themes are structured and shared across platforms.

Theme Manager lets you create, edit, or import theme definitions no coding required while keeping full control over structure and output.

Go to Theme Manager

English Tutorial

Arabic Tutorial

Define theme names, collections, and modes

Upload or paste token JSON files (single or multiple)

Create or edit theme files without coding experience

Automatically detect and apply theme structure

Export tokens to platform-ready code (CSS, SCSS)

Control naming format, prefixes, and output files

Style Dictionary is built in—no setup needed

More platforms coming (iOS, Android, Flutter, and more)

Tokens Generator

Plan, create, and structure design tokens — fast

Create primitive, semantic, or component-specific tokens without overthinking structure or naming.

Tokens Generator helps you plan, name, and export token sets quickly—ready for Figma and future multi-tool workflows.

Go to Tokens Generator

English Tutorial

Arabic Tutorial

Create primitive, semantic, and component tokens

Control naming with drag-and-drop

Automatic handling of types, values, and Figma variable scopes

Preview tokens in a structured table

Copy or export tokens and import into Figma

Future support for Tokens Studio and Penpot exports

Variables to JSON Figma Plugin

Easily convert Figma variables into structured JSON code, fully compatible with Style Dictionary Configurator and Multi-Theme Generator.

Go to plugin

English Tutorial

Arabic Tutorial

Export all variable collections into a single JSON file.

Export all variable collections into a single JSON file.

Create and manage your project Themes.

Create and manage your project Themes.

Comparable with "Style Dictionary, and Theme Manager from dttb (design tokens toolbox)

Comparable with "Style Dictionary, and Theme Manager from dttb (design tokens toolbox)

Supports all variable types: Color, Number, String, and Boolean.

Supports all variable types: Color, Number, String, and Boolean.

Generate correct values for "Font Family, Font Weight, Opacity, Boolean"

Generate correct values for "Font Family, Font Weight, Opacity, Boolean"

Support Variables Modes or Themes

Support Variables Modes or Themes

Design Tokens Resource Hub

Learn design tokens for free

Explore and master design tokens with a structured, curated library A centralized collection of high-quality resources designed to help designers learn, apply, and scale design tokens effectively.

Design Tokens Resource Hub brings together 300+ carefully selected materials organized by skill level, focus area, and resource type—making it easier to move from fundamentals to advanced implementation with clarity.

Go to Tokens Resources

Structured by learning level: Beginner, Intermediate, Expert

Organized by focus areas: Understanding Tokens, Design Systems, Applying Tokens, Delivering Value, How to Grow

Categorized by resource type: Articles, Case Studies, Courses, Documentation, Tools, Plugins, Templates, Podcasts, Videos, Interviews, Libraries, and more

Advanced filtering options: Language, Contributors, Tools, Difficulty Level, Free vs Paid

Designed to support both theoretical understanding and practical implementation

Created for designers who want structured growth—not scattered bookmarks