Effortless Design System Documentation
The Design Tokens Block allows you to organize and display your system’s foundational design decisions—colors, spacing, typography, radii, shadows, and more—as structured, visual tokens. Synced directly from Figma Variables or custom data, each token is shown with name, value, preview, and context, helping teams align on usage, semantics, and implementation across platforms. It’s the bridge between your design intent and development execution.
The Benefits
Unlock the full benefits of this feature.
01
Token Groups by Category
Display tokens in logical groups—colors, typography, spacing, borders, shadows—for better readability and structure.
02
Name + Value + Preview
Each token includes its name, variable reference, actual value (e.g., 16px, #1E1E1E), and a live visual sample.
03
Synced with Figma Variables
Tokens are pulled directly from Figma’s variable system, ensuring your documentation reflects the source of truth.
The Impact
Turn System Decisions Into Usable, Shareable Assets
Design Tokens Block gives your system a solid foundation—documented, visualized, and ready to ship.
Common Use Cases
Designers
Quickly reference and update tokens without hunting through files—semantic structure and preview included.
Developers
Access token values and names formatted for code—with visual clarity and less ambiguity.
Product Managers
Understand how values like padding, font sizes, or corner radii are standardized—without needing to dive into Figma.
Enterprises
Standardize and govern design values across platforms and brands—with visual tokens, not raw variables.
Why UI Vault?
Because systems begin with decisions—and tokens are the language of those decisions. The Design Tokens Block makes them clear, visual, and universal.
Figma-Synced or Manual
Pull directly from Figma Variables or enter custom values manually for hybrid workflows.
Structured, Visual Output
Semantic Token Support
Show both core (e.g. gray-100) and semantic (e.g. background-surface) tokens—grouped and explained.
Developer Handoff Ready
Display tokens in developer-friendly syntax formats to bridge the gap between design and code.