OUR

FRONTEND

WORKFLOW

siddharth kp

@siddharthkp

youtube.com/siddharthkpshow

❤

OUR

FRONTEND

WORKFLOW IS BROKEN

IS BROKEN

QUALITY

CONSISTENCY

COMMUNICATION

HAND OFF

HAND OFF

SOLUTION?

2011

LEAKY ABSTRACTION

COMPONENT IS THE RIGHT ABSTRACTION

design systems

Karri Saarinen 
 Design Language System Lead @Airbnb

Set of shared and integrated principles and patterns that define the overall design of a product

@NateBaldwinArt

Te c h n i c a l
stuff

TOKENS

SPACING

BASE 
 COLORS

BRAND 
 GUIDELINES

TOKENS

COMPONENT LIBRARY

API

compound components

API

API

API

API

DOCUMENTATION IS THE
PRODUCT

DESIGN DECISIONS BAKED IN SYSTEM 


SYNCED DESIGN ASSETS

airbnb/react-sketchapp brainly/html-sketchapp

Component Symbol prop override

PRO TIPS

#1 Consistency over Flexibility 
 #2 Build abstractions but ship all the building blocks 
 #3 Adoption is the only metric that matters.

HOW DO YOU CONVINCE YO U R C O M PA N Y ?

PEOPLE RUIN EVERYTHING

#1 Show people what’s wrong 
 #2 Speak their language #3 Build support from developers

siddharthkp github.com/auth0/cosmos