Design tokens with superpowers!

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 👉👉 👇👉 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

Style dictionary

$ {} </> [] 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 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

😘 Thanks! slides.com/klaufel/design-tokens-with-superpowers @klaufel 34