Juan Carlos Ruiz
Frontend developer at @AdevintaSpain 👨💻⚛️. CSS ❤️ passionate. Coffee addict and standards lover. Co-organizing @MurciaFrontend 🍋
#zapatillasFromMars 👟🚀
Design tokens with superpowers!
🖖 Hi from Mars!
Juan Carlos Ruiz
Frontend developer at Adevinta
Co-organizer of Murcia Frontend 🍋
@klaufel
We are a family of digital brands
!= DESIGN TOKENS
vars
Design tokens
are a methodology
Variables are just part of that story
Your design tokens,
same communication language
Design system distilled process
🎟
Design tokens
Colors, typography, layout, spacing, ...
🎨
Design components
⚛️
Atomic design
Atom / Molecule / Organism / Template / Page
Methodology
🛠
Develop components
THEME
📦
Catalog of components
Pattern library
Let's ”paint”! 🎨
UI design tools
😿
Figma
Sketch
inVision
Xd
Photoshop
👉
👉
👉
👉
👉
👉
👇
Design tokens definition
Color tokens
success - #109c42
error - #e5363a
warning - #ffa90d
Alert colors
80 - #333333
40 - #999999
20 - #cccccc
05 - #f2f2f2
00 - #ffffff
Neutral colors
Primary colors
light - #56a4c9
main - #2587b8
dark - #1d698f
Typography tokens
Headings
Default
Minions ipsum chasy baboiii bappleees
Family:
Open Sans (700)
Size:
28px
Line height:
40px
Normal
Minions ipsum chasy baboiii bappleees
Family:
Open Sans (700)
Size:
20px
Line height:
28px
Small
Minions ipsum chasy baboiii bappleees
Family:
Open Sans (700)
Size:
18px
Line height:
24px
Body
Normal
Minions ipsum chasy baboiii bappleees
Family:
Open Sans (400)
Size:
14px
Line height:
20px
Spacing tokens
8-Point grid system
4px* / 8px / 16px / 24px / 32px / 40px / 48px / 56px
xxs
xs
sm
md
lg
xl
xxl
do you need anything else?
More tokens!
Breakpoints
Radius
Shadows
Think LEGO bricks
Component
Default button
Color token
main
Primary
Corner
sm
Radius token
/ Body
normal
Color & typography token
00
Neutral
Spacing token
md
Spacing token
sm
Design tokens to vars
@ $ {} -- </>
Design tokens are agnostic
Frontend
Funcionality, perf, construction
Design
Layout, aestethics, usability
DESIGN TOKENS
as vars to any plattform
Web plattform
Preprocessor
CSS-in-JS
CSS
Native plattform
Android
iOS
The flow to generate tokens
The flow to generate tokens
Manual or
plugin export
Design file
Preprocessor
CSS
CSS-in-JS
Android
iOS
{ }
Tokens data
colors, typography,
spacing, ... as a
single JSON file
Manual or
plugin export
Design file
The "good" flow to generate tokens
👇
Style Dictionary
Style dictionary
CSS
Preprocessor
CSS-in-JS
Android
iOS
</>
[ ]
$
--
{ }
The AWESOME flow to generate tokens
Say hello to !
{ }
Tokens data
colors, typography,
spacing, ... as a
single JSON file
Design tokens
as variables
Figma API
Figma file
The AWESOME flow to generate tokens
CSS-in-JS
CSS
Preprocessor
Android
iOS
Show me the tokens... 🤑
👩💻
With great power
comes great responsibility 🕷
Let's start!
#zapatillasFromMars 👟🚀
👋💡
😘 Thanks!
@klaufel
Design tokens with superpowers!
By Juan Carlos Ruiz
Design tokens with superpowers!
When building our design system, there must be a beautiful collaboration between design and development so that our final product ends the quality it deserves.