#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.

  • 4,491