size-ladybeetle

🐞

size-butterfly

🦋

size-squirrel

🐿️

size-dog

🐕

size-elephant

🐘

Imagine creating names with real-world analogies⤵

Mobile version

coming soon

Code, not design, is the definitive source. It's the final view for users.
We should have one central repository to pull and push design tokens.

Code ≠ design

Time to value

Our design system should be linked to our business. I see design tokens as a way to optimize. But with no structure, you can quickly spend more than you save.

Why is it so hard?

“I will just use this color here ...”

"Difficult to understand".

What are Figma Variables?

Oooops, scaling...😅

What does a design system mean to you?

What is Git?

Should we have a lot of tokens?

Omg,
so many
duplicates.

Too many tokens

What is the best

naming strategy?

I have no clue what composite tokens are.

Life before tokens was easier. 😅

“Token is deprecated”. What now?

Ohhh, no guides here. 🫠

Library is not updated. 😢

I will just use AI …

Common challenges

Collaboration

Developers

Designers

Content Specialists

QA

Product manager

Stakeholders

Accessibility Specialists

Design tokens

are

design decisions.

Less decisions,

less chaos.

You get:

Improved product development

Easier maintenance

Brand consistency

Scalability

green grass

too sunny

fire

##F8783A

barbie-light

my favourite

water bright

darker vanilla

I’m vanilla

they call me invisible

dark green

Design Token Categories

color

A

font

space

size

border

border radius

gradient

shadow

motion

time

icons

composite

z-index

Design token types

Raw value

#FFDF38

Primitive

Semantic

Component

Computational

Adaptive

light

dark

Composite design tokens

A

Text Style

font-size

weight

family

line-height

Border

color

width

style

Gradient

colors

Shadow

color

blur

spread

direction

"header-text-style": {
"font-family": "{font-family-header}",
"font-size": "{font-size-header}",
"font-weight": "{font-weight-bold}"

Token scales

1

2

3

4

5

numeric

100

200

300

400

500

numeric

xs

s

m

l

xl

xxl

sizes

low

medium

high

emphasis

level-1

level-2

level-3

levels

regular

active

heading

strong

sharp

pill

medium

card

small

full

instant

slow

medium

fast

What users see

Choosing theme

Applying design tokens

Connecting

with global

design tokens

User
Interface

Design

Multi-brand

Design
System

Components

Semantic

Design

Tokens

Foundations

Multi-brand design system

Workflow

components

components

1

Define foundations

2

Workshop

3

Documenting

4

MVP

5

Launch

6

Theming and scaling

02

Workshop

Workshop Goals

Understand current processes

General alignment

🕵️ Game: Name of the component?

Naming structure versions

Share experience

Choose tooling

Design Tokens Naming Structure

Names should be:

Short

Meaningful

Scalable

Flexible

Clear, no jargon

Some well-known approaches:

C-T-I approach

category

type

item

color-background-primary

BEM approach

block

element

modifier

color-background-primary

Functional approach

practical use

primary-background-color

tab-color-text-hover

CTO

designer

DS Manager

developer

Design Tokens Naming Playground 🛟

Make up a story:

🙋‍♀️

I need the

color

The button has the

background

for the

button

default

active

hover

focus

disabled

for the

base theme.

role.

I need it in all states (

)

optional

Start playing with names here⤵

Where?

What

Which

How

When

Examples

Shared

color

text

default

color

background

info

color

icon

default

A

text

weight

default

mixin

A

text

default

Specific

color

text

button

default

active

color

border

button

primary

active

color

background

button

primary

focus

color

background

card

default

hover

For more visual examples, check Figma template.

Get the Figma template

Code vs design

Code

Namespace can be added automatically ⤵

dsg-productX-

color-button-background-primary-active-onlight

productX-

color-button-background-primary-active-onlight

Figma

You don't need to add the namespace/theme in Figma ⤵

color-button-background-primary-active-onlight

Don't do it

What is the difference? 😥

size-100

size-200

size-300

size-400

size-500

size-600

space-padding-xsmall

space-padding-small

space-padding-medium

space-padding-large

space-padding-2xlarge

space-padding-3xlarge

spacing.desktop.small

spacing.desktop.medium 

spacing.desktop.large

spacing.mobile.small

spacing.web.small

font-size-12

font-size-14

font-size-16

font-size-18

font-size-22

Don't use exact values 😥

03

Documenting

What is related?

How do people find values?

Which tokens did we apply?

Who is responsible?

Where can I find the list?

From MVP to Launch

3

Inventory

Flow 1

Database 1

Database 2

Database 3

Flow 2

2

Workshop

1

Foundations

Flow 3

4

MVP

01

Define the scope of the MVP.

02

Develop the language and grammar.

Text Case, Separators, Scales

03

Define naming structure

04

Tooling

Code repos, Figma Libraries, Plugins

05

Testing, Feedback

6

Theming and Scaling

5

Launch v1

CI/CD pipelines

Version control

Automation

APIs

Testing

Code reviews

Linting

Visual

High contrast

Minimalistic

Light

Product/Brand

Brand X

Brand Y

Product X

Accessible

High contrast

Color Blindness

No animations

Platform

iOS

Android

TV

VR/AR

Low motion

3D elements

Airtable template

Figma template

Get my templates

Premium Step by Step Guide

Videos

Written guidelines

Examples

Templates

Database

Automations

Coming next week

Start small.

Play.

Blend in.

Mobile version

coming soon