A presentation at #zapatillasFromMars 👟🚀 by Juan Carlos Ruiz
Design tokens with superpowers! #zapatillasFromMars 👟🚀 1
🖖 Hi from Mars! 2
Juan Carlos Ruiz Frontend developer at Adevinta Co-organizer of Murcia Frontend @klaufel 🍋 3
We are a family of digital brands 4
vars != DESIGN TOKENS 5
Design tokens are a methodology 6
Design tokens are a methodology Variables are just part of that story 6
Your design tokens, same communication language 7
Design system distilled process 8
Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 8
Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 Design components 8
Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 Design components Methodology ⚛ Atomic design Atom / Molecule / Organism / Template / Page 8
Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 Design components 🛠 Develop components Methodology ⚛ Atomic design Atom / Molecule / Organism / Template / Page 8
Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 🛠 Design components Develop components Methodology Pattern library ⚛ 📦 Atomic design Atom / Molecule / Organism / Template / Page Catalog of components 8
Design system distilled process THEME 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 🛠 Design components Develop components Methodology Pattern library ⚛ 📦 Atomic design Atom / Molecule / Organism / Template / Page Catalog of components 8
Let’s ”paint”! 🎨 9
UI design tools 👇 Figma Sketch inVision Xd Photoshop 10
UI design tools 👇 Figma Sketch inVision Xd Photoshop 10
UI design tools 👇 Figma 😿 Sketch inVision Xd Photoshop 10
UI design tools 👉 👇 Figma 😿 Sketch inVision Xd Photoshop 10
UI design tools 👉 👇👉 Figma 😿 Sketch inVision Xd Photoshop 10
UI design tools 👉 👇👉 Figma 😿 Sketch inVision Xd Photoshop 👉 10
UI design tools 👉👉 👇👉 Figma 😿 Sketch inVision Xd Photoshop 👉 10
UI design tools 👉👉 👇👉 Sketch inVision Xd Photoshop 👉 👉 Figma 😿 10
UI design tools 👉👉 👇👉 Sketch 👉 👉 👉 Figma 😿 inVision Xd Photoshop 10
Design tokens definition 11
Color tokens Primary colors light - #56a4c9 main - #2587b8 dark - #1d698f 40 - #999999 20 - #cccccc error - #e5363a warning - #ffa90d Neutral colors 80 - #333333 05 - #f2f2f2 00 - #ffffff Alert colors success - #109c42 12
Typography tokens Headings Default Family: Open Sans (700) Normal Family: Open Sans (700) Small Family: Open Sans (700) Size: 28px Line height: 40px Minions ipsum chasy baboiii bappleees Size: 20px Line height: 28px Minions ipsum chasy baboiii bappleees Size: 18px Line height: 24px Minions ipsum chasy baboiii bappleees Size: 14px Line height: 20px Minions ipsum chasy baboiii bappleees Body Normal Family: Open Sans (400) 13
Spacing tokens 8-Point grid system xxs xs sm md lg xl xxl 4px* / 8px / 16px / 24px / 32px / 40px / 48px / 56px 14
More tokens! Breakpoints Radius Shadows 15
More tokens! Breakpoints Radius Shadows do you need anything else? 15
Think LEGO bricks 16
Component Spacing token sm Color token Primary Default button main Radius token Corner sm Spacing token md Color & typography token Neutral / Body 00 normal 17
Design tokens to vars @ $ {} — </> 18
Design tokens are agnostic Design Layout, aestethics, usability Frontend Funcionality, perf, construction 19
Design tokens are agnostic Design Frontend Layout, aestethics, usability Funcionality, perf, construction DESIGN TOKENS as vars to any plattform 19
Web plattform Preprocessor CSS-in-JS CSS 20
Native plattform Android iOS 21
The flow to generate tokens 22
The flow to generate tokens 23
The flow to generate tokens Design file 23
The flow to generate tokens Design file Manual or plugin export 23
The flow to generate tokens Design file Manual or plugin export Preprocessor 23
The flow to generate tokens Design file Manual or plugin export Preprocessor CSS 23
The flow to generate tokens Design file Manual or plugin export Preprocessor CSS-in-JS CSS 23
The flow to generate tokens Design file Manual or plugin export Android Preprocessor CSS-in-JS CSS 23
The flow to generate tokens Design file Manual or plugin export Android Preprocessor CSS-in-JS iOS CSS 23
The “good” flow to generate tokens 24
The “good” flow to generate tokens Design file 24
The “good” flow to generate tokens Design file Manual or plugin export 24
The “good” flow to generate tokens 👇 {} Design file Manual or plugin export Tokens data colors, typography, spacing, … as a single JSON file 24
The “good” flow to generate tokens 👇 {} Design file Manual or plugin export Tokens data Style Dictionary colors, typography, spacing, … as a single JSON file 24
Style dictionary 25
Style dictionary CSS Preprocessor CSS-in-JS Android iOS 25
$ {} </> [] CSS Preprocessor CSS-in-JS Android iOS 25
The AWESOME flow to generate tokens 26
Say hello to ! 27
The AWESOME flow to generate tokens 28
The AWESOME flow to generate tokens Figma file 28
The AWESOME flow to generate tokens Figma file Figma API 28
The AWESOME flow to generate tokens {} Figma file Figma API Tokens data colors, typography, spacing, … as a single JSON file 28
The AWESOME flow to generate tokens {} Figma file Figma API Tokens data colors, typography, spacing, … as a single JSON file 28
The AWESOME flow to generate tokens Design tokens as variables {} Figma file Figma API CSS CSS-in-JS Android iOS Preprocessor Tokens data colors, typography, spacing, … as a single JSON file 28
Show me the tokens… 🤑 29
30
With great power comes great responsibility 🕷 31
Let’s start! 🖍 figma.com/file/IGr2xoqcZX91CU7CDr4ZsI 📦 github.com/klaufel/pattern-library-skeleton PR are welcome! 32
#zapatillasFromMars 👟🚀 👋💡 33
#zapatillasFromMars 👟🚀 👋💡 33
😘 Thanks! slides.com/klaufel/design-tokens-with-superpowers @klaufel 34
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.
Talk resources:
Extra! Awesome design system (DOCS)
A collection of bookmarks, resources and articles of design systems focused on developers 👩💻
The following resources were mentioned during the presentation or are useful additional information.
An awesome design system for your products and experiences!
Figma file to generate correctly your design tokens in your applications.
A collection of bookmarks, resources and articles of design systems focused on developers.
Here’s what was said about this presentation on social media.
for free. You
can too.