1.
Design Tokens
The what, they why & the how

2.
”In the world of UI,
design tokens are
subatomic particles.”
Brad Frost, Atomic Design

3.
”With design tokens, you can capture
low-level values and then use them to
create the styles for your product or app.
You can maintain a scalable and
consistent visual system for UI
development.”
Jina Anne, Salesforce

4.
”The themes are always
changing, but the tokens
stay the same”
Kyle Gach, CA Technologies

5.
Style Dictionary Demo

6.
primary1Color
Google Material UI

7.
primary1Color

8.
Header1
primary1Color

9.
Header1
primary1Color

10.
Header1
primary1Color
I’m a happy button

11.
Colors, Typography, Effects,
Border Radius, Spacing, Animation
Timing
Line height, Z-index, Opacity,
Transition, Media Query
Duet Design System
Basic Design Tokens

12.
Design Tokens beyond colors,
typography, and spacing.
”From a purely technical point of
view, design tokens are organised
lists of key-value pairs that
describe design decisions. So it’s
just a matter of convenience (and
context) what are the boundaries
that we assume when describing a
UI via design tokens.”
Advanced Design Tokens

13.
Why use design tokens?
”It holds the definitions of styles”
”Styles should be in a single source of
truth”
Style Dictionary Presentation

14.
Team Sketch2React
We develop design system tooling
Fredrik Ward Juan Maguid
sketch2react.io
Product Design
App Development
Words & Tutorials
Documentation
Support & Community
Product Design
Web Design
Words & Tutorials
Marketing & Sales
Support & Community

15.
Stratos Tokens Workflow
© Team Sketch2React 2018–2020

16.
Stratos Tokens
Workflow
Create & update your tokens in the
apps you ❤ and use every day
© Team Sketch2React 2018–2020

17.
Stratos Tokens
Workflow
Export to design tokens code
(JSON) via Stratos Tokens
You now have a live link between
your design app & Stratos Tokens
© Team Sketch2React 2018–2020

18.
Stratos Tokens
Workflow
Export to design tokens code
(JSON) via Stratos Tokens
Translate to iOS, Android & SCSS via our
built-in Style Dictionary support
© Team Sketch2React 2018–2020

19.
Demo Time!
😺😺😺

20.
Style Dictionary Demo #2
In this demo Fredrik shows
us our built-in Style
Dictionary support for
updating the demo iOS App

21.
Thanks, here’s some related links
🤖🤖🤖🤖
• The Nine rules of Stratos Tokens
• What is a Style Dictionary?
• More articles about Stratos Tokens
• Material UI Theme Generator
• Jump onboard our Stratos Beta Program
© Team Sketch2React 2018–2020