Design tokens with superpowers!

Slide 1

Design tokens with superpowers! #zapatillasFromMars 👟🚀 1

Slide 2

🖖 Hi from Mars! 2

Slide 3

Juan Carlos Ruiz Frontend developer at Adevinta Co-organizer of Murcia Frontend @klaufel 🍋 3

Slide 4

We are a family of digital brands 4

Slide 5

vars != DESIGN TOKENS 5

Slide 6

Design tokens are a methodology 6

Slide 7

Design tokens are a methodology Variables are just part of that story 6

Slide 8

Your design tokens, same communication language 7

Slide 9

Design system distilled process 8

Slide 10

Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 8

Slide 11

Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 Design components 8

Slide 12

Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 Design components Methodology ⚛ Atomic design Atom / Molecule / Organism / Template / Page 8

Slide 13

Design system distilled process 🎟 Design tokens Colors, typography, layout, spacing, … 🎨 Design components 🛠 Develop components Methodology ⚛ Atomic design Atom / Molecule / Organism / Template / Page 8

Slide 14

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

Slide 15

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

Slide 16

Let’s ”paint”! 🎨 9

Slide 17

UI design tools 👇 Figma Sketch inVision Xd Photoshop 10

Slide 18

UI design tools 👇 Figma Sketch inVision Xd Photoshop 10

Slide 19

UI design tools 👇 Figma 😿 Sketch inVision Xd Photoshop 10

Slide 20

UI design tools 👉 👇 Figma 😿 Sketch inVision Xd Photoshop 10

Slide 21

UI design tools 👉 👇👉 Figma 😿 Sketch inVision Xd Photoshop 10

Slide 22

UI design tools 👉 👇👉 Figma 😿 Sketch inVision Xd Photoshop 👉 10

Slide 23

UI design tools 👉👉 👇👉 Figma 😿 Sketch inVision Xd Photoshop 👉 10

Slide 24

UI design tools 👉👉 👇👉 Sketch inVision Xd Photoshop 👉 👉 Figma 😿 10

Slide 25

UI design tools 👉👉 👇👉 Sketch 👉 👉 👉 Figma 😿 inVision Xd Photoshop 10

Slide 26

Design tokens definition 11

Slide 27

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

Slide 28

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

Slide 29

Spacing tokens 8-Point grid system xxs xs sm md lg xl xxl 4px* / 8px / 16px / 24px / 32px / 40px / 48px / 56px 14

Slide 30

More tokens! Breakpoints Radius Shadows 15

Slide 31

More tokens! Breakpoints Radius Shadows do you need anything else? 15

Slide 32

Think LEGO bricks 16

Slide 33

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

Slide 34

Design tokens to vars @ $ {} — </> 18

Slide 35

Design tokens are agnostic Design Layout, aestethics, usability Frontend Funcionality, perf, construction 19

Slide 36

Design tokens are agnostic Design Frontend Layout, aestethics, usability Funcionality, perf, construction DESIGN TOKENS as vars to any plattform 19

Slide 37

Web plattform Preprocessor CSS-in-JS CSS 20

Slide 38

Native plattform Android iOS 21

Slide 39

The flow to generate tokens 22

Slide 40

The flow to generate tokens 23

Slide 41

The flow to generate tokens Design file 23

Slide 42

The flow to generate tokens Design file Manual or plugin export 23

Slide 43

The flow to generate tokens Design file Manual or plugin export Preprocessor 23

Slide 44

The flow to generate tokens Design file Manual or plugin export Preprocessor CSS 23

Slide 45

The flow to generate tokens Design file Manual or plugin export Preprocessor CSS-in-JS CSS 23

Slide 46

The flow to generate tokens Design file Manual or plugin export Android Preprocessor CSS-in-JS CSS 23

Slide 47

The flow to generate tokens Design file Manual or plugin export Android Preprocessor CSS-in-JS iOS CSS 23

Slide 48

The “good” flow to generate tokens 24

Slide 49

The “good” flow to generate tokens Design file 24

Slide 50

The “good” flow to generate tokens Design file Manual or plugin export 24

Slide 51

The “good” flow to generate tokens 👇 {} Design file Manual or plugin export Tokens data colors, typography, spacing, … as a single JSON file 24

Slide 52

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

Slide 53

Style dictionary 25

Slide 54

Style dictionary CSS Preprocessor CSS-in-JS Android iOS 25

Slide 55

Style dictionary

$ {} </> [] CSS Preprocessor CSS-in-JS Android iOS 25

Slide 56

The AWESOME flow to generate tokens 26

Slide 57

Say hello to ! 27

Slide 58

The AWESOME flow to generate tokens 28

Slide 59

The AWESOME flow to generate tokens Figma file 28

Slide 60

The AWESOME flow to generate tokens Figma file Figma API 28

Slide 61

The AWESOME flow to generate tokens {} Figma file Figma API Tokens data colors, typography, spacing, … as a single JSON file 28

Slide 62

The AWESOME flow to generate tokens {} Figma file Figma API Tokens data colors, typography, spacing, … as a single JSON file 28

Slide 63

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