Building a design system requires your product teams to communicate and work closely together. Design tokens allow them to better collaborate and ensure brand consistency across any platform. What are they? What role do they play in a design system? And how can you start using them today?

1. Design tokens
for dummies
Design Systems: from theory to practice Louis Chenais / @Chuckn0risk

2. Presentation progress
• Who am I?
• Why do we need design tokens?
• How do we set design tokens?
• Demo
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

3. About me
!3
• Co-Founder & Lead Front-End Developer @ Specify
• Teacher @ HETIC
• Design System enthusiast
• I try to build the web people deserve
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

4. Why do we need
design tokens?
1

5. !52018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

6. !62018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

7. !7
Current workflow
Design decision
in design tool
Developer is
notified of the update
Codebase and repository
are updated
Designer validates
or not
The live product
is updated
Update validated
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

8. Pitfalls
• The designer depends on the developer which slows down the design process 😢
• The time taken to do this change is less time for a developer to work on something
valuable for the organization 😢
• Since we often track project tasks with a task manager, this change would imply
another ticket to deal with 😕
• This time lost by the company also delays the go to market of its products ⏰
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

9. Designers need the power to handle a
design decision from its creation to its
deployment.
!92018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

10. What is a design token?
!10
A design token is an abstraction of the smallest design
decision possible that must be represented by a human-
readable variable.
It is stored in a cross-platform data format and will sync all
the related files in the design system.
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

11. Design tokens examples
!11
spacing
sizing
font related value
color
gradient
shadow
z-index
animation
border-radius etc…
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

12. Design tokens allow product teams to
better collaborate and ensure brand
consistency across any platform.
!122018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

13. How do we set
design tokens?
2

14. !14
➡ https://www.lightningdesignsystem.com/design-tokens/

15. !15
➡ https://github.com/salesforce-ux/theo

16. !16
➡ https://amzn.github.io/style-dictionary

17. What’s design tokens generator?
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

18. Example of a design token file (JSON / Yaml)
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

19. What it means for the designer
• This is now the designer’s job to reference and organize the design tokens in the
design system.
• The tokens name must be understandable by everyone, and especially developers
who will end up using them in their codebase.
• According to the organization deployment flow, the designer can from now on
update a token an see its effect on the final interface.
• The designer should be able to define tokens in JSON or YAML files since these
formats are easy to read and write.
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

20. What it means for the developer
• The developer doesn’t have to update small design decisions anymore. This is now
taken in charge by the designer.
• If not already the case, the product codebase should have way less hardcoded
values.
• If the a design token name changes, the developer still must update its name in the
codebase.
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

21. 2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

22. Enhanced workflow
Design decision
in design tool
Design tool updates the design system
with the new design token value
Developer is notified of the update and
allows the design system to update the
codebase
Update validated
2018 - Design Tokens For Dummies Louis Chenais / @Chuckn0risk

23. !23
Demo
3

24. ➡ https://specifyapp.com

25. !25
Thank you
😀