Design Tokens
at The Infatuation
Why are tokens important?
1. Consistency / Accuracy
within the same project (Figma, app...)
across different contexts (themes...)
2. Bridge Language
across domains (Figma, JSON, CSS...)
3. Change Management
iteration becomes easier
Token Levels
Level 1 - Core Tokens
color-blue-50#0066F1
color-gray-30#757575
Level 2 - Semantic
color-text-action$color-blue-50
color-fg-subtle$color-gray-30
Level 3 - Component
TBD How far we go with this!
component-link-color-default$color-text-action
component-hr-color-default$color-fg-subtle
What does having good tokens let you do?
Where is infatuation at now with design tokens?
Figma
Web App
Mobile App
V1, Starting V2
Level 1 (Core)
V1 (manual)
Working on V1
None
Likely in V2
None
Level 2
(Semantic)
What's next?
Standardized formats & naming conventions are coming
to this space!
Lots of SaaS competition in "Exporting out of Figma" into Git and to different formats. We might use one of these:
Design Tokens at The Infatuation
By Olex Ponomarenko
