Understanding Design Tokens, from UX tool to production - Débora Barreto Ornellas

1. Understanding design tokens
From UX tool to production
Débora Barreto Ornellas
Application Engineer at the LEGO Group
©2022 The LEGO Group | All Rights Reserved

2. SCENE 1: A normal day in the office
©2022 The LEGO Group. Page 1
The primary
button color
is #00A3DA.
Designer
Cool, I’ll add it
to a variable.
Developer A
I’m in a hurry, I’ll
hardcode the
color…
Developer B

3. SCENE 2: The update
©2022 The LEGO Group. Page 2
We’re changing our
branding. New color
is #008CBE
Designer
Ok, I’ll change
the variable. that
should do it...
Right?
Developer A
Oh no!
Developer B has changed
teams.

4. SCENE 3: The result
The design
looks
inconsistent…
This is not fun!
I have no idea how
many places are
using the wrong
color!
Designer Developer A
Now I must look for
all hardcoded values.
©2022 The LEGO Group. Page 3

5. What are the main goals of this talk?
Understand the design
tokens lifecycle
See a demo of a tokens
playground
Learn from a team that
has them in production
©2020 The LEGO Group. Page 4

6. A quick intro about myself
Hi, I’m Débora Ornellas! J
Full-stack application engineer at the LEGO Group since
February 2022.
3+ years experience as a software developer.
Brazilian 🇧🇷 living in London 🇬🇧
GitHub/LinkedIn: deboraornellas
©2022 The LEGO Group. Page 5

7. A quick intro about the LEGO Group
One of the world's leading manufacturers of play
materials.
1000+ employees in Digital Technology
Offices in London 🇬🇧, Billund 🇩🇰 and Copenhagen 🇩🇰
We’re hiring! 😊
(And paying for relocation if needed)
Page 6
©2022 The LEGO Group.

8. Page 7
What problem
do we want to solve?
©2022 The LEGO Group.

9. How can we improve design and developer
collaboration on teams and reduce repetitive work,
while still allowing frequent design iterations?
The problem we want to solve…as a question
©2022 The LEGO Group. Page 8

10. What are
design tokens?
And how can they help us?
©2022 The LEGO Group.

11. What are design tokens?
Key-value pairs for style properties
©2022 The LEGO Group. Page 10
Colors
Spacing
Typography
Sizes
Breakpoints
font-size-150 0.75rem
color-blue-100 #8cc9f5
breakpoint-x-large 100rem
2.5rem
spacing-500

12. Tokens and Aliasing
©2022 The LEGO Group. Page 11
font-size-150 0.75rem
color-blue-100 #8cc9f5
breakpoint-x-large 100rem
2.5rem
spacing-500
font-size-small
color-primary
max-width-desktop
margin-large
button-font-size
button-default-color
banner-width
top-header-margin
Aliasing:

13. Tokens and Aliasing
©2022 The LEGO Group. Page 12
font-size-150 0.75rem
color-blue-100 #8cc9f5
breakpoint-x-large 100rem
2.5rem
spacing-500
font-size-small
color-primary
max-width-desktop
margin-large
button-font-size
button-default-color
banner-width
top-header-margin
Aliasing:
font-size-200 1rem
font-size-medium

14. Designer & developer responsibilities
Page 14
©2022 The LEGO Group.

15. Page 15
A starter kit on
design tokens
Understanding with practice
©2022 The LEGO Group.

16. What do we need to get started?
©2022 The LEGO Group. Page 16
Tokens
Plugin
Code repository Webpage
Tokens as
JSON
Tokens as CSS,
JS, TS variables
UX Tool
Manual
token edit
The basic pipeline, from UX tool to the browser

17. Design-tokens-starter-kit repo
©2022 The LEGO Group. Page 17

18. What do we need to get started?
©2022 The LEGO Group. Page 18
Tokens Studio
Plugin
(free tier)
design-tokens-starter-kit
(figma-sync branch)
Local
environment
Figma
(free account)
Our starter kit pipeline, from UX tool to the browser
style-dictionary
(open-source)
Manual
token edit
Tokens as
JSON
Tokens as
JSON
CSS, JS, TS
variables

19. What will we be seeing in the demo?
©2022 The LEGO Group. Page 19
Tokens Studio
Plugin
(free tier)
Local
environment
Figma
(free account)
Our starter kit pipeline, from UX tool to the browser
Manual
token edit
Tokens as
JSON
Tokens as
JSON
CSS, JS, TS
variables
Warning:
Some “magic”
will happen here J

20. Demo time!
Let’s see tokens in action!
©2020 The LEGO Group.

21. Page 21
How is LEGO.com
using design tokens?
The learnings and challenges
©2022 The LEGO Group.

22. Why we migrated to design tokens
©2020 The LEGO Group. Page 22
A need for a centralized design system
Design-owned source of truth
Brand consistency

23. How it works for us
©2022 The LEGO Group. Page 23
Global design
tokens
Domain
component
library
Domain
component
library
Domain
component
library
Domain squad
Domain squad
Domain squad
Domain squad
Domain squad
Domain squad
Domain squad
Domain squad
Domain squad
Design
systems team
Domain alias
tokens
Domain alias
tokens
Domain alias
tokens

24. The LEGO.com design tokens pipeline
©2022 The LEGO Group. Page 24
1 2 3 4
Figma design-systems Component
library
App monorepo

25. Skrøll: A LEGO.com component library, built with tokens
©2022 The LEGO Group. Page 25

26. How are we using it at LEGO.com
©2022 The LEGO Group. Page 26
Responsive
font-size, line-
height
All colours
(default,
active, hover,
focused)
Padding,
margin, max-
width Icon size,
color

27. Challenges
and learnings
©2022 The LEGO Group.

28. Naming is hard!
©2022 The LEGO Group. Page 28
CHALLENGES:
• Keeping token names coherent though time
• Scaling the system without breaking what’s there
#1
color-blue-light: #ADD8E6 color-core-blue-light: #ADD8E6
color-blue-light: #0CCDCF
color-blue-light: #ADD8E6
BREAKING CHANGE!
NOT A BREAKING CHANGE!

29. Naming is hard!
©2022 The LEGO Group. Page 29
CHALLENGES:
• Keeping token names coherent though time
• Scaling the system without breaking what’s there
LEARNINGS:
• Alias everywhere! Avoid consuming global tokens in the code
• Consider scalability from the start
• Apply breaking changes sooner rather than later
#1

30. Versioning is hard!
©2022 The LEGO Group. Page 30
CHALLENGES:
• Ensuring consistency among consuming teams
• Deciding when and how to release
LEARNINGS:
• Controlling the version for everyone works for us
• Semantic versioning can be painful, but it’s worth it
#2

31. Communication is hard!
©2022 The LEGO Group. Page 31
CHALLENGES:
• Dev/design misalignment
• Handling questions and requests from users
• Convincing & advocating
LEARNINGS:
• Pairing sessions!
• Sign-off before changes
• Open communication channels with users
#3

32. Recap & conclusion
©2022 The LEGO Group.

33. Recap & conclusion
Page 33
Design tokens are key-value pairs of design
properties, created in an UX tool and synced into a
code repository.
Their aim is to ensure consistency & save time for
both designers and developers when updating a
design system.
©2020 The LEGO Group.

34. Recap & conclusion
Page 34
With tokens, developers and designers gain more
clarity and control over their domains.
The main challenges are: communication, token
naming and versioning.
Tip: agree on strategies to mitigate these as early as
possible.
©2020 The LEGO Group.

35. Resources
Page 35
©2022 The LEGO Group.
Scan this QR code to see a list of design tokens
resources (including the starter kit repo)!

36. Page 36
Thank you!
©2022 The LEGO Group.

37. Figma Tokens
Page 37
©2022 The LEGO Group.

38. The app
Page 38
©2022 The LEGO Group.

39. The app
Page 39
©2022 The LEGO Group.

40. The app
Page 40
©2022 The LEGO Group.

41. Figma Tokens
Page 41
©2022 The LEGO Group.

42. Token-transformer | style-dictionary
Page 42
©2022 The LEGO Group.

43. After running yarn figma-sync
Page 43
©2022 The LEGO Group.
Before