InVision DesignSystemsHandbook PDF
InVision DesignSystemsHandbook PDF
InVision DesignSystemsHandbook PDF
Roy Stanfield
Contents
Introducing design systems
The power of scale
Appendix
More resources
INTRODUCING DESIGN SYSTEMS
Chapter—01
Introducing
design systems
The power of scale
By Marco Suarez
5
“software crisis."
number of applications.
work. Now it’s time for design to realize its full potential and
join them.
Here are what things usually look like inside a company that’s
investing in design:
own various parts of your products? How will you empower all
Standards
Understanding not only the what, but the why, behind the
product teams.
Components
can serve their use cases well, but this complexity limits the
components are, the less you need to maintain, and the easier
scale becomes.
product team with a system that is easy to use, and you give
them an understanding that clearly links the what with the why.
Scale design
13
design and code overhead low, while still allowing you to grow
Design consistently
experience.
Prototype faster
faster.
Improve usability
Build in accessibility
Let’s debunk common myths you’ll hear as you sell the idea of
afternoon.
19
Myth: Once the design system is designed and built, the work
is complete.
Conclusion
Design systems are not a fad or even an untested hypothesis.
system, let’s dive into the actual design process in the next
chapter.
Further reading
Software Crisis
Material Design
Shopify Polaris
Chapter — 02
Designing your
design system
Step by step
By Jina Anne
25
your design system and how the team will work together.
interface quickly.
to think about the team you’ll need to bring it to life. Who needs
just designers.
• Content strategists who can help the team nail the voice
needs
customer needs
leadership
who can drive decisions forward. Know who on the team can
your goals.
companies.
team keeps the system well maintained, but they may not be
insight into what is needed for all the product features and user
Many teams are moving away from the solitary model to the
system.
sustainable.
DESIGNING YOUR DESIGN SYSTEM
there are situations where it can work quite well. In the midst
centralized team model. And to get the most buy-in and shared
With the team and the model that organizes them established,
it’s time to start your design system just as you would any new
Interviewing customers
research. Who will be using your design system and how will
they use it? Your design system will get used much more
research
define principles that will help others use the system properly,
important.
to be created:
37
visual language
components
doesn’t yet exist you can skip this step and jump straight to
look at the CSS used to create all of those elements you just
you have in your style sheets. More relevant, it will show you
how many unique colors, font sizes, and font families you have.
It also shows a bar chart for the number of spacing and sizing
remove values.
39
Creating a visual
design language
DESIGNING YOUR DESIGN SYSTEM
language:
• Colors
border spacing)
texture)
• Motion
• Sound
it. There may be an icon next to the label to create a visual cue.
user. Though a button may seem simple, there are many design
disabled, with icons, social, small, small with icons, small social, as
Design tokens
properties you want to manage. With the values for all design
platforms.
Design System.
Color
The colors you choose for your design system are more than
typography
and button color, then you may have an extra color for that
as well. It’s a good idea to use the same color for links and
interactive elements.
these colors to see how well they work together and refine as
needed.
45
system.
PRO TIP
users.
appear brown.
giving designers the flexibility they need. You can always add
Figure 11: The Pivotal UI style guide chooses to give a wide range of
color tints and shades with their design tokens. While I personally
prefer to only give a leaner set of options (as seen in the Sass style
which approach works for you as you balance concerns like creative
Typography
DESIGNING YOUR DESIGN SYSTEM
The fonts you choose have a high impact on both your brand
their brand, but pay special attention to how you use them as
typefaces: one font for both headings and body copy, and a
design systems do not have a need for more, unless you have
WEB CONTENT
ACCESSIBILITY GUIDELINES
( WCAG) 2.0
W3C
DESIGNING YOUR DESIGN SYSTEM
These days it’s trendy to use a font at a very thin weight, but
Type scale
When selecting the size to set your type, consider the legibility
works well. It’s the default font size in most browsers, and it’s
quite easy to read for most people. I like using 16px as it works
You can use a modular scale for larger or smaller font sizes
generate the next number. You keep applying the ratio to the
typography.
DESIGNING YOUR DESIGN SYSTEM
Figure 13: The Modular Scale tool helps you find one that works for
you. It even provides a Sass version of the tool, which you could add
devices. And for much larger displays, you have the room to
bump up sizes.
You can also use viewport units to scale your type based on a
55
Leading
can vary depending on the font face and the line length, a
Initiative.
It also makes your math more predictable, but you don’t have
measurement and the browser will do all the hard math for you.
Figure 14: Tachyons also use 1.5 for body and 1.25 for headings.
The system you use for spacing and sizing looks best when
layouts more predictable and more likely to “fit” and align well.
much better.
scale for many reasons. Both iOS and Android use and
systems, for icons tended be 4-based (16, 24, 32, etc.) so that
more likely to fit in place and line up. And finally, responsive
Figure 15: The Google Android design guidelines (before this site was
the font size. But for vertical spacing, I tend to use a 12-based
case-by-case basis.
much easier if you let elements flow to fill the space they’re
Images
File formats
preset widths for images if you don’t want it to go full width (for
DESIGNING YOUR DESIGN SYSTEM
screens.
Iconography
around them first. Will they be filled or outline? What is the line
weight? Will they use more than 1 color? What sizes will they
You may have different styles for different icon types. For
settings cog icon) may be solid and one color, while navigation
Figure 16: Apple shows the different icon types in their ecosystem:
Illustrations
product. You can use these for empty states, loading screens,
your illustrations.
Visual form
When you define your visual language, motion and sound might
different way. But motion and sound can have a high impact on
areas as much as I’d like to admit, but there are some great
Figure 19. IBM’s animation guidelines draw upon their rich history of
Creating a user
interface library
Before we conducted a visual inventory, which looked at
forms, and more. Where visual language is all about the visual
Let’s take a look at each of these design elements and the role
After you complete the inventory, you can merge and remove
document what the component is and when to use it. This will
most is that you show what’s necessary for your team to get
Conclusion
Creating a design system not only helps your team produce
DESIGNING YOUR DESIGN SYSTEM
Further reading
Priyanka Godbole’s Design System article series
Chapter — 03
Building your
design system
A strong foundation
By Katie Sylor-Miller
77
focus on some common pitfalls and how you can avoid falling
BUILDING YOUR DESIGN SYSTEM
tools that will help you along the way, but remember this: Your
Foundations
Regardless of the technologies and tools behind them, a
standalone dependency.
minimal bugs.
Consistency
semantics for your code. Code syntax is the set of rules for
theoretical perfection!
your system, help your contributors write code that follows the
process.
Self-contained
85
later)
architecture
closer the pieces are to each other, the easier it is to trace and
Reusable
Successful design systems are highly reusable. Bootstrap,
dependencies
patterns
reusable patterns.
Whether you use one of these systems or roll with your own,
WEB ACCESSIBILIT Y
INITIATIVE ( WAI)
W3C
BUILDING YOUR DESIGN SYSTEM
managed way
flexible components
your system.
Accessible
For too long, accessibility, or a11y, has been misunderstood
ADVOCATE
the A11y Project. You can inspect the current state of your
readers.
Robust
A robust design system has a strong foundation of tests
work."
ADVOCATE
date quickly! You can narrow the scope of your tests and gain
fixtures.
Types of tests
design system:
Systems.
Common challenges
BUILDING YOUR DESIGN SYSTEM
later regret, no matter how much time you put into designing
Maintaining documentation
The first time I built a front-end component library, my team
Automate documentation
under the hood, so you can save and view content offline on
supported devices.
BUILDING YOUR DESIGN SYSTEM 104
Library Builder).
Handling change
As adoption grows and your design system becomes more
widely used, you will invariably realize that you didn’t get it all
right the first time, and you will need a plan to handle breaking
BUILDING YOUR DESIGN SYSTEM
Initially, all of the CSS and JavaScript for Etsy’s Web Toolkit
lived in the same monorepo with the rest of the team’s site
had to also contain fixes and updates for every single usage
maintenance nightmare.
which can be shared with other projects. Git allows you to tag a
like npm and Yarn allow you to package up and publish multiple
npm.
versions
backward compatible
file size of assets sent over the wire on each page. This can
Mobile first
pages that take longer than 3 seconds to load, yet the majority
competitive edge.
Leverage modularity
they work with the dependency manager that your team uses.
Forward-thinking
Design tokens
Cross-platform sharing
.
115
systems.
Multi-product theming
You can also use tokens to “theme” the same structural styling
for multiple brands. One brand wants orange buttons and the
values for each brand, then combine each to the same, base
way, all of the classes are the same, and all of the accessible
Conclusion
Systematizing your front-end code benefits everyone in your
and feel very different, each shares a common goal and is built
driving your front-end will look very different than it does right
now. If you build for the long-term and plan to handle change,
grows.
right out of the gate. Even if your team can only implement
mistakes, learn from each other, and create new and better
Further reading
Website Styleguide Resources
Rebuilding Slack.com
Chapter — 04
Putting your
design system
into practice
Better together
By Diane Mounter
123
redesigns.
Large-scale redesign
When a team takes this approach, it often means they
guidelines.
"In From Design Systems: Pilots & Scorecards," Dan Mall writes
02. Potential for common patterns. Does this pilot have many
the organization.
required?
from other legacy design and code that there are clear
PUTTING YOUR DESIGN SYSTEM INTO PRACTICE
126
TINA KOYAMA
T WITTER
127
08. Marketing potential. Will this work excite others to use the
design system?
use.
Documentation is key
exist.”
guidelines.
lead people down the wrong path and cause frustration. It’s
styles. Writing docs on the fly helps you test your code and
writing the code while it’s fresh in your mind than waiting to do
it later.
feature from the backlog that would help them get familiar with
guide documentation.
131
131
Post-rollout follow-up
your team takes, makers need to stay in touch with the needs
A few months after rolling out the new design system at Etsy,
teams. Our goal was to learn how to improve the experience for
Contributors
PUTTING YOUR DESIGN SYSTEM INTO PRACTICE 132
BRAD FROST
AUTHOR, ATOMIC DESIGN
PUTTING YOUR DESIGN SYSTEM INTO PRACTICE 133
134
contributors.
guide.
usage.
Product managers
136
collaboration is worthwhile.
Incremental rollout
Not all design systems teams are able to take the time to
138
When I joined GitHub and began exploring how the small, then-
incrementally.
typography styles.
140
findability.
The style guide also lacked search and hid styles behind
originally used for the style guide, we decided it was worth the
142
repurpose an old web app at first—it may not have been ideal,
it grows.
When you don’t have that big moment to launch your design
your goals are—take some time to share those goals and how
you plan to reach them. These details are helpful when you’re
matters.
and the design systems team. Here are a few ways we made
changes in line with the new design system, and point people
We spread the word about our team and our availability to help
channel.”
changes.
PUTTING YOUR DESIGN SYSTEM INTO PRACTICE
144
to another part of the website and literally copy and paste the
review.
recommendations.
Figure 4: First responders use a hubot script to see which items need
their attention.
146
Figure 5: The GitHub Design Systems team are available to help in our
slack channel.
Publishing and
distribution at scale
Most of my recent experience working on design systems has
how to set your design system up for scalability will benefit you
in the future.
isn’t just important for how you code your system or use things
more control over the changes made and when those changes
148
Not all these sites need the full suite of styles we use for
updated too.
For example, you may have updated your font styles, added a
get all of those changes together. This still gives teams the
and your utility styles into another, they would each have
You can still maintain a package that includes the entire set
150
individual modules.
initial setup because you need to work out what to boil each
module down to. For instance, should you have a module for
system can choose to upgrade just the bits they need. Giving
overall.
Your publishing workflow needs to work for both the users and
getting.
152
boards.
time as a major release. This means we can take our time with
also shipping timely updates and bug fixes in minor and patch
releases.
153
updates are included with it, and therefore what type of testing
we need to do.
updates.
As your system and its number of users grow, you might find
154
You might decide that making the source code public isn’t right
for your team, but you want to make the documentation public.
code.
The US Web Standards, Primer, Help Scout, and Solid are all
156
GitHub.
private, you could choose to share the code for your design
contributions, but are still happy to share the code for use by
others.
PUTTING YOUR DESIGN SYSTEM INTO PRACTICE
158
requires staff login. People frequently think the style guide had
much hassle.
the benefit is that you get feedback and insights from a wider
PUTTING YOUR DESIGN SYSTEM INTO PRACTICE
range of people.
Conclusion
There’s a lot that goes into the rollout of your design system,
build your system, who you’re working with, and the best way
your end goals and how your strategy supports those, and
Design systems are always evolving, and the way you share
Further reading
Chapter — 05
Expanding your
design system
More than the sum of its parts
By Marco Suarez and Sophie Tahran
167
168
Vision
A vision statement moves everyone toward a common
yet attainable.
to celebrate the things that went well and identify the things
Design principles
Designers often operate with their own implicit set of
design-principles).
173
top of mind. Task your most senior designers with using them
but these principles aligned the team and helped them keep
Process
Providing a clearly defined process for how user experience
build velocity.
optimal solutions.
02. It builds data within each step that can be referenced and
performing launches
competitive research.
journeys.
marketing teams.
over again.
Every writing guide should cover both voice and tone. While
right now, so when you do steer away from them, you’ll know
this subject line,” turns into, “Hey, let’s test how emoji perform
only how you sound now, but also what you aspire to be and
voice and tone, carry that same thinking into the tangible.
You may find that you have a need for multiple guidelines—
off.
words.
Conclusion
Just as design is far more than the sum of its parts, your
exciting forms.
Further reading
The Importance of Product Vision to Product Leaders
A Matter of Principle
Nicely Said
MailChimp’s VoiceandTone.com
EXPANDING YOUR DESIGN SYSTEM
189
THE FUTURE OF DESIGN SYSTEMS
Chapter — 06
The future of
design systems
To infinity and beyond
By Roy Stanfield
191
design systems.
But, I’m getting ahead of myself. Let’s start with nuts and bolts.
THE FUTURE OF DESIGN SYSTEMS
its web platform. During my time there, the team built the
web toolkit with the core website as its primary focus. Later,
to native implementation.
order to exist.
shared conventions.
Creating a single
source of truth
The elements that make up a design system—principles,
this layer, and therefore should own the design system and its
Our tools
JON GOLD
AIRBNB
THE FUTURE OF DESIGN SYSTEMS
Multiple implementations
this tool, layered Sketch files can be generated from the React
with real data and rendered to a Sketch file. It’s another reward
ALAN K AY
LEGEND
205
does not have to change their workflow and can use more
workflows.
would flow from a single source of truth and would plug right
including with Lona, our tool for defining design systems and
Intelligent systems
compose themselves
If you’ve not heard of Alan Kay, make sure to look him up.
firmly inside of the world that Kay and his peers built, it’s worth
listening to him.
THE FUTURE OF DESIGN SYSTEMS
stretch goal for the future of design systems and tools in the
design files, and other internal tools can lead to insights that
polled, and usage stats could come straight back to the design
Layout aware
instantly swap abstracted data sets to, for instance, see how
sense.
could then choose the best option, only correcting the layout if
needed.
the next stage in the flow, then we generally call the design
213
products that work for most users, systems design and AI will
tools.
Conclusion
As digital product designers, we’re asked to ride the waves
apps, and just a little later, all our work was available in mobile
scale.
that grow the system. We’ll have to think more holistically, and
to explore the ideas we feel may have the biggest impact, and
certain.
Further reading
Thinking in Symbols for Universal Design
Changing Design
Creativity — Chapter 01
Project Phoebe
THE FUTURE OF DESIGN SYSTEMS
217
THE FUTURE OF DESIGN SYSTEMS
Chapter — 07
Appendix
More resources
219
Airbnb
Atlassian
BBC, Gel
Buzzfeed, Solid
FutureLearn
Github, Primer
Google, Material
INTRODUCING DESIGN SYSTEMS
IBM, Carbon
MailChimp, Patterns
Microsoft, Fabric
Nordnet
Salesforce, Lightning
SAP, Fiori
Shopify, Polaris
Ubuntu
WeWork, Plasma
Yelp
221
INTRODUCING DESIGN SYSTEMS