Skip to main content
The Silver Bullet
of Product
Development
Building a design system. The true story.
Hello!
Role: CEO and Co-founder at UXPin. Design Ops team.
Background: UX Design & Psychology
Passion: Design and Development at scale. Product Strategy.
Design Ops. Design Systems.
@marcintreder
The Full-Stack UX Platform
Agile UX in one place: design systems, prototyping, and documentation together
UXPin in a Nutshell
Mission: To streamline the product development process with the
power of design and collaboration!
Customers: +150 countries. Focus on enterprises (PayPal, Sapient…)
Team: 70 people. 2 offices (Mountain View, CA and Gdansk, Poland)
www.uxpin.com
Building a Design System
The Roadmap
Why? What? How?
Ready?
As always, it all started with the research...
+40 interviews with design leaders
“What is the biggest problem your team is facing in the design process?”
Sophia Baboolal via Unsplash
The Impossibility of Scale
• UI gradually decays into inconsistency

• User happiness decreases

• Teams become slower and slower
The entropy of a sufficiently complex digital
product always increases.
Is design doomed?
Is design doomed?
No.
Enter: Design System
Yes
No, but we're currently working on one
No, and we aren't working on one
I don't know
0% 10% 20% 30% 40%
Does your company have a pattern library or
design system?
Answered: 3,157
Does your company have a pattern library or
design system?
Answered: 3,157
What is a Design System?
And how does it help solve the problem of design inconsistency?
“A scalable framework of decisions & team
behaviors across a product portfolio to
converge on a cohesive experience.“
- Nathan Curtis
It’s the Process, not the Result
What Does it Contain?
UI Patterns Hi-Fi
UI Patterns Lo-Fi
Implementation Guidelines
Code snippets/Code reference
Color Palettes
Icon Families
Typographic Scales
Grid/Layout definitions
Brand Guidelines
Design Principles
0% 22.5% 45% 67.5% 90%
Structure of a Design System
Analyzed: 39 systems
Let’s get this organized. 
s
The Structure of a Design System
Color Palettes Typographic Scales Grid Definitions Icons & Assets
Templates Modules Components Elements
Design Principles Implementation Guidelines Editorial Guidelines
Building Blocks
UI Patterns
Rules
Patterns? Styleguides?
That’s not new! You've probably heard that many times before.
History
Non-extensive, subjective, history of Design Systems
Design Patterns. Elements of
Object-Oriented Software
A Pattern Language
Christopher Alexander
YUI Library
Sass CSS
Bootstrap
Salesforce Lighting
ES6 JS Modules
Why Today?
Why this time Design Systems are going to reach scale.
Digital matters: 6/10 top 10 companies in the world are tech companies (Apple, Alphabet,
Microsoft, Amazon.com, Facebook, Alibaba). 
Experience matters: Design was never more important. Business value of user experience is
widely recognized.
Technology is ready: Web technology became modular (js modules, and libraries e.g. React,
CSS preprocessors, task managers...)
Is design ready?
How?
How can you start building a design system?
1. Accept that building a Design System is
an ongoing process.
Make it part of your product development. Start building it now.
“A design system isn’t a project. It’s a product serving products.”
- Nathan Curtis
Design system is a process and therefore is
simultaneously always ready and never done.
Design system with one color defined, properly named,
implemented and accepted by an organization is better
than a full static style guide.
2. Form a multidisciplinary design operations team.
Designers, engineers and content managers should run the DesOps house
and gradually solve problems of a product organization related to the
consistency of experience and efficiency of design/development process
3. Build your interface inventory
The Interface Inventory is a neatly organized box with all the pieces of your
product. It shows all the glaring inconsistencies and serves as a kick-off to
the process of building a design system.
Do you want to see a real interface inventory?
4. Build your building blocks
Step by step start standardizing your building blocks. Take colors, basic
properties, typography, iconography - improve it, organize it, document and
deliver to your product teams.
UXPin Color Palette
From a mess of 116 color variables to a systemic palette
Color Research
Our Senior UI Architect counted all the instances
of specific color variables in code.
Variables matching
I created a spreadsheet matching new and old colors
Naming is Hard
Naming is difficult, yet crucial. Keep one convention!
Primary/base colors and other properties:
Secondary/accent colors and other properties
@blue-base: #006cff;
@blue-lighten-15: lighten(@blue-base, 15%); // #4d98ff
Typography?
Text styles + LESS mixing
Now, make it available.
Let’s take a look at an actionable design system
6. Accept that in a Design System - Design
and Code go arm in arm
One of Your Tools
Icons Management - Performance
45 Icons Test 3 Icons test
Median Average Median Average
React.js SVG Icons Component 575ms 583.3ms 558ms 566.5ms
Individual PNG Icons Encoded with Base64 578.5ms 580.3ms 587ms 583.3ms
PNG Sprite 608.5ms 633.1ms 596ms 549.9ms
SVG Loaded as CSS background Data URL 620ms 628.3ms 607ms 630.6ms
SVG Sprite 660.5ms 694.6ms 584ms 651.8ms
Individual SVG Icons Encoded with Base64 666.5ms 671.4ms 580.3ms 580.3ms
Icon Font 973.5ms 1131.2ms 630ms 643.2ms
Individual PNG Icons 1485ms 1514ms 675.9ms 675.9ms
Individual SVG Icons 1550ms 1584ms 680ms 743.6ms
7. Kick off the process of standardizing
and documenting patterns
Start Small
Start with elements and go category after category, then
move to components, modules and templates...
Putting it all together: Actionable Design System
Thank you!