Design Tokens
A systematic approach that abstracts visual design decisions—such as color, typography, and spacing—into named variables, keeping design and code consistent and enabling theme switching. Tokens are typically maintained in JSON or YAML format and compiled into platform-specific formats via toolchains.
Core Facts
Timeline (last 90 days)
Open Inspector supports exporting a page's design tokens.
Tools such as Figma and Style Dictionary have widely adopted the concept of design tokens.
A single color-primary token can be output simultaneously as a CSS custom property, an iOS Swift constant, or an Android XML resource, achieving define-once, consume-everywhere across platforms.
The concept of Design Tokens was proposed by Salesforce in 2014 and has become the industry standard for design systems.
LLMs have difficulty directly parsing the binary structure of Figma files and scattered Design Tokens.
The concept of Design Tokens was first systematically proposed by the Salesforce Lightning Design System and has since been incorporated into the standardization track by the W3C Design Tokens Community Group.
All Facts (7)
The concept of Design Tokens was first popularized by the Salesforce Lightning Design System.
80%UnverifiedOpen Inspector supports exporting a page's design tokens.
50%UnverifiedTools such as Figma and Style Dictionary have widely adopted the concept of design tokens.
50%UnverifiedA single color-primary token can be output simultaneously as a CSS custom property, an iOS Swift constant, or an Android XML resource, achieving define-once, consume-everywhere across platforms.
50%UnverifiedLLMs have difficulty directly parsing the binary structure of Figma files and scattered Design Tokens.
50%UnverifiedThe concept of Design Tokens was proposed by Salesforce in 2014 and has become the industry standard for design systems.
50%UnverifiedThe concept of Design Tokens was first systematically proposed by the Salesforce Lightning Design System and has since been incorporated into the standardization track by the W3C Design Tokens Community Group.
50%