A presentation at ReactFest Lodon in in London, UK by Siddharth Kshetrapal
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
Building high quality interfaces that are consistent across products is hard. Collaboration isn’t always easy with spec handovers, component states, achieving pixel perfection, etc.
Design Systems with React is the solution!
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.