An Interactive Guide with Playbook
Design Tokens Naming Playbook
An Interactive Guide with Playbook
Design Tokens Naming Playbook
An Interactive Guide with Playbook
Design Tokens Naming Playbook
size-ladybeetle
🐞
size-butterfly
🦋
size-squirrel
🐿️
size-dog
🐕
size-elephant
🐘
Imagine creating names with real-world analogies⤵
Mobile version
coming soon
Code, not design, is the definitive source. It's the final view for users.
We should have one central repository to pull and push design tokens.
Code ≠ design
Time to value
Our design system should be linked to our business. I see design tokens as a way to optimize. But with no structure, you can quickly spend more than you save.
Why is it so hard?
“I will just use this color here ...”
"Difficult to understand".
What are Figma Variables?
Oooops, scaling...😅
What does a design system mean to you?
What is Git?
Should we have a lot of tokens?
Omg,
so many
duplicates.
Too many tokens
What is the best
naming strategy?
I have no clue what composite tokens are.
Life before tokens was easier. 😅
“Token is deprecated”. What now?
Ohhh, no guides here. 🫠
Library is not updated. 😢
I will just use AI …
Common challenges
Collaboration
Developers
Designers
Content Specialists
QA
Product manager
Stakeholders
Accessibility Specialists
Design tokens
are
design decisions.
Less decisions,
less chaos.
You get:
Improved product development
Easier maintenance
Brand consistency
Scalability
green grass
too sunny
fire
##F8783A
barbie-light
my favourite
water bright
darker vanilla
I’m vanilla
they call me invisible
dark green
Design Token Categories
color
A
font
space
size
border
border radius
gradient
shadow
motion
time
icons
composite
z-index
Design token types
Raw value
#FFDF38
Primitive
Semantic
Component
Computational
Adaptive
light
dark
Composite design tokens
A
Text Style
font-size
weight
family
line-height
Border
color
width
style
Gradient
colors
Shadow
color
blur
spread
direction
"header-text-style": {
"font-family": "{font-family-header}",
"font-size": "{font-size-header}",
"font-weight": "{font-weight-bold}"
Token scales
1
2
3
4
5
numeric
100
200
300
400
500
numeric
xs
s
m
l
xl
xxl
sizes
low
medium
high
emphasis
level-1
level-2
level-3
levels
regular
active
heading
strong
sharp
pill
medium
card
small
full
instant
slow
medium
fast
What users see
Choosing theme
Applying design tokens
Connecting
with global
design tokens
User
Interface
Design
Multi-brand
Design
System
Components
Semantic
Design
Tokens
Foundations
Multi-brand design system
Workflow
components
components
1
Define foundations
2
Workshop
3
Documenting
4
MVP
5
Launch
6
Theming and scaling
02
Workshop
Workshop Goals
Understand current processes
General alignment
🕵️ Game: Name of the component?
Naming structure versions
Share experience
Choose tooling
Design Tokens Naming Structure
Names should be:
Short
Meaningful
Scalable
Flexible
Clear, no jargon
Some well-known approaches:
C-T-I approach
category
type
item
color-background-primary
BEM approach
block
element
modifier
color-background-primary
Functional approach
practical use
primary-background-color
tab-color-text-hover
CTO
designer
DS Manager
developer
Design Tokens Naming Playground 🛟
Make up a story:
🙋♀️
I need the
color
The button has the
background
for the
button
default
active
hover
focus
disabled
for the
base theme.
role.
I need it in all states (
)
optional
Start playing with names here⤵
Where?
What
Which
How
When
Examples
Shared
color
text
default
color
background
info
color
icon
default
A
text
weight
default
mixin
A
text
default
Specific
color
text
button
default
active
color
border
button
primary
active
color
background
button
primary
focus
color
background
card
default
hover
For more visual examples, check Figma template.
Get the Figma template
Code vs design
Code
Namespace can be added automatically ⤵
dsg-productX-
color-button-background-primary-active-onlight
productX-
color-button-background-primary-active-onlight
Figma
You don't need to add the namespace/theme in Figma ⤵
color-button-background-primary-active-onlight
Don't do it
What is the difference? 😥
size-100
size-200
size-300
size-400
size-500
size-600
space-padding-xsmall
space-padding-small
space-padding-medium
space-padding-large
space-padding-2xlarge
space-padding-3xlarge
spacing.desktop.small
spacing.desktop.medium
spacing.desktop.large
spacing.mobile.small
spacing.web.small
font-size-12
font-size-14
font-size-16
font-size-18
font-size-22
Don't use exact values 😥
03
Documenting
What is related?
How do people find values?
Which tokens did we apply?
Who is responsible?
Where can I find the list?
Get the guide
What's inside:
Step-by-step guide with screenshots
Video instructions
Instructions
Workshop Instructions
Ready to use Airtable database (complete)
Ready to use Figma template
List of Automations with set-up guides
Prompts and examples you can copy and use immediately
List of useful tools
Useful Airtable Extensions
Airtable Database
Short desc
Instructions
.pdf, .fig, video
Video instructions
Access to video lectures
From MVP to Launch
3
Inventory
Flow 1
Database 1
Database 2
Database 3
Flow 2
2
Workshop
1
Foundations
Flow 3
4
MVP
01
Define the scope of the MVP.
02
Develop the language and grammar.
Text Case, Separators, Scales
03
Define naming structure
04
Tooling
Code repos, Figma Libraries, Plugins
05
Testing, Feedback
6
Theming and Scaling
5
Launch v1
CI/CD pipelines
Version control
Automation
APIs
Testing
Code reviews
Linting
Visual
High contrast
Minimalistic
Light
Product/Brand
Brand X
Brand Y
Product X
Accessible
High contrast
Color Blindness
No animations
Platform
iOS
Android
TV
VR/AR
Low motion
3D elements
Start small.
Play.
Blend in.
Learn more
48,1% of respondents still prefer to craft their own naming conventions saying they values "ease of understanding" as their priority when naming.
Mobile version
coming soon