Design Token Gallery
A common foundation for consistent digital products.
In Figma, I've built a Design Token Gallery that systematically documents colors, typography, spacing, radii, and effects. The goal is a scalable foundation for a design system and a common language between design and development.
My contribution: Token architecture, naming convention, Figma variables and documentation for handover to development.
Findings
Structure creates a common language
A good design system needs more than just visual components. The development of the gallery clearly demonstrated how clear structures and consistent rules support communication between design and development.
Clear naming supports scalability
Clear definitions and a uniform naming convention make tokens understandable and reusable. A well-designed architecture helps reduce complexity and inconsistencies, creating the foundation for more efficient workflows.
Tokens connect design and code
Design tokens translate design decisions into a common basis for technical implementation. They facilitate coordination and handover and support the consistent, maintainable, and sustainable development of digital products.
Responsibilities:
Development of the structure and architecture of the design tokens
Definition of a uniform naming convention
Creation and organization of Figma variables
Structure of the Token Gallery and documentation
Definition of design system rules
Preparing for a better handover between design and development
Structure of the token architecture
Primitive values define the basis. Semantic tokens describe their purpose and reference these values.
Example: color-text-default
Light: Gray/1000 → Standard text
Dark: Gray/0 → Standard text
The name remains the same, but the referenced value changes with the mode. This allows the same design role to be used consistently across different interfaces.
The Gallery in Detail
Colors: Semantic roles for text, areas, and interactions with references for light and dark.
Sizes: Common scales for radii, contour thicknesses, and icons.
Typography: References to font family, size and weight instead of isolated individual values.
Responsive values: Structured sizes and spacing for different layout contexts.
