Design Systems Formatted PDF

Design Systems
Emma Bostian
About me
Emma Bostian
Software Engineer @ LogMeIn
American in Germany
Ladybug Podcast && JS Party
Stack Overflow, Ultimate Courses, && Dev.to
LinkedIn Learning
What we'll cover
Design Systems
Design
Figma
Styled Components
Animations
Storybook
Tools & Resources
What this course is
This course is a high-level introduction to design

systems. It will teach you the foundational skills your
team needs to build a set of reusable components and
standards.
What this course is not
This course is not a comprehensive overview to design

systems. There is no industry-standard for what a
design system truly is, and as a result it can be
interpreted differently at different companies.
Course Information
Repo:
https://github.com/emmabosti
an/fem-design-systems
Docs: https://fem-design-
systems.netlify.com/
Design Systems
The internet was not originally
intended to host large-scale social
and enterprise applications.
Components
Allow us to maintain consistent

user interfaces which are
accessible by nature
What is a design system?
UI Kit
Color
Typography
Grid
Iconography
What is a design system?
Component library
Style Guide
A design system
is all
of these things.
Why do design systems matter?
Accessibility
Everyone, regardless of
circumstance, should be able to
achieve the same results from
your application.
Consistency
Your products should look and

feel like they're part of the same
brand identity.
Trickle-down updates
The style can be updated in one

component within the system,
and will propagate to each
product .
Responsiveness
Our web applications must

account for different screen
resolutions and devices.
Onboarding
There is one place for new team

members to go to get all of the
information they need to get
started.
Flexibility
A design system must serve a

variety of use cases, while setting
parameters on what exactly
those use cases can be.
Speed
Once your design system has

been established, time to
production is greatly reduced.
Drawbacks of design systems
Time
Design systems take time to
build.
Evolution
A design system is never

complete. It's a product serving
products.
Maintenance
A design system is a living,

breathing product which has
lifecycles and requires
maintenance.
Investment
We need designers, engineers,
and product managers to ensure
the success of the system.
Team structure
Centralized Model
Define the foundation & identity of the

system
Have veto power over the system
Manage & create the UI Kit,
component library, and style guide
Team structure
Distributed Model
No centralized core team

Built & maintained by the consuming
teams
Instills a sense of ownership
Influenced by many vantage points
Less down time
Team structure
Hybrid Model
Combines the centralized and

distributed models
Decisions are made quickly
“If a design system is by a company,
then it’s for the company. It might also
be open source, but any ol’ random
Who are developer who wants to use it isn’t the
target audience.”
design - Chris Coyier
systems for?
And You Thought
Nathan Curtis
Buttons Were Easy...
Design Systems Coach
Read the blog post here!
Foundation of Design Systems
FEM | March 2020
FEM | March 2020
FEM | March 2020
..............................................................
..............................................................
FEM | March 2020
..............................................................
..............................................................
..............................................................
..............................................................
FEM | March 2020
..............................................................
..............................................................
..............................................................
..............................................................
..............................................................
..............................................................
FEM | March 2020
..............................................................
..............................................................
..............................................................
..............................................................
..............................................................
..............................................................
..............................................................
..............................................................
How many buttons is that?
3 default buttons (primary, secondary, tertiary)

3 status buttons (error, warning, status)
4 status icon buttons
+ 4 default icon buttons
14 buttons

14 buttons X 5 states (i.e. hover) X 2 sizes


14 buttons X 5 states (i.e. hover) X 2 sizes
= 140 button combinations per theme...

How much does that cost...?
$300 per hour X 200 hours
Designer Engineer Quality Assurance
$100 per hour $100 per hour $100 per hour

$300 per hour X 200 hours = $20,000
Designer Engineer
$100 per hour
Quality Assurance
$100 per hour $100 per hour

$300 per hour X 200 hours = $20,000
50 teams X $20,000 = $1 million ... on buttons
Designer Engineer Quality Assurance
$100 per hour $100 per hour $100 per hour

Three pillars of design systems
Design Component Style Guide

Language Library
The set of standards and assets Set of components which turn the The documentation for the design
which guide the creation of a suite design language and UI Kit into language, UI Kit, and component
of products underneath a brand. living, breathing code. library.
Design language Foundation UI Kit
Color Buttons
The personality of a brand and Typography Text Fields
its corresponding design Grid Modals
assets. Spacing Dropdowns
Iconography Navigation
Illustrations Footer
Motion
Component Library Frameworks Technologies
Vue CSS Pre-processors
Can be built with many React CSS-in-JS
different frameworks and Angular Animation libraries
libraries Ember Testing libraries
Style Guide
Technologies
Storybook
The documentation for the Invision
design language, UI Kit, and Gatsby
component library. React Styleguidist
Building a design system
1. Define your design principles
2. Conduct a UI audit
3. Create your checklists
4. Define your workflows

Design principles
Design principles are the grounding

values which drive the creation of your
products.
"Bold, optimistic, and practical."
What do you want your users to feel

when using your product?
Ui Audit
Compile all components, in every

variation and state, in one place.
Group these components by

functionality.
Ui Audit
Prioritize the components which

have the highest impact on
unification of your products and are
easily achievable.
Prioritizing components
Does this request embody our design principles?


Does this request require a lot of design/development effort?

Does this request come with a high risk to the success of our
product?

product?
Does this request coincide with the product roadmap?

product?
Does this request improve the user experience of our
products?

product?
products?
Are we confident in this request or will it need to be revisited
in the near future?

product?
products?
Are we confident in this request or will it need to be revisited
in the near future?
Is this request technically feasible?
Adoption metrics Opposition metrics
Metrics which indicate that a Metrics which indicate that a
component has high priority. component has lower priority.
Impact Maintenance
Identity Risk
Confidence Effort
Calculating priority
Calculating individual scores
impact + identity + confidence = individual adopter total
individual adopter total / # adopter questions = individual adopter
Sum the scores from your adopter
questions and your opposer questions, maintenance + risk + effort = individual opposer total
then find the mean score by dividing by
individual opposer total / # opposer questions = individual opposer
the number of total questions for each
metric.
We take these individual scores and find

the mean across all survey participants.
Calculating mean scores
individual adopter totals / # survey participants = adopter score
These will become your (X,Y)
individual opposer totals / # survey participants = opposer score
coordinates which help you determine
the priority of your components.
(X, Y)
(adopter, opposer)
Priority 3 Priority 1
Weak adopter / weak opposer Strong adopter / weak opposer
Finish priority one and two Immediate adoption.

By visualizing the priority of each components before tackling.
component on this priortization graph,
we can easily determine what to spend
time on.
Parking lot Priority 2

Weak adopter / strong opposer Strong adopter / strong opposer
Try to mitigate the opposition

metrics prior to adopting.
Buttons
5
Buttons will have a high impact Buttons
because they'll unify your products
underneath your brand identity.
But buttons also require a lot of

-5 5
mainenance and effort and might have
to be re-visited several times before a Parking lot Priority 2
finalized design is found.
(adopter, opposer)
(4, 4)*
* On a 5-point axis -5
5
Accordions
Buttons
Accordions won't have a high impact
because they're not used often Accordions
throughout the UIs.
But accordions will take a lot of effort -5 5

to build and could have some
associated maintenance. Parking lot Priority 2
(adopter, opposer)
(-2, 3)*
* On a 5-point axis -5
Design checklist
Accessibility Content
Can all users, regardless of What type of content does this
circumstance, use this component? component rely upon?
Interaction Customization
How should a component respond Are aspects of this component
when a user interacts with it? customizable? If so, how?
Context Screen Resolution

How and where should this How does this component look on
component be used? varying screen resolutions?
Completion
Are all states, including neutral,
hover, focus, and disabled, defined?
Development checklist
Accessibility Error Handling / Prop Validation

Can all users, regardless of How do our components respond
circumstance, use this component? when something breaks?
Responsiveness Browser Compatibility

Our components must respond to Do the technologies we use work
browser window resizing and varying across all supported browsers or must
screen resolutions. we include polyfills?
Completion
Does this component account for
all aspects of the design?
Customization
Have we implemented all of the
customizable aspects of this
component?
Common mistakes
Starting for scale
While the ability to scale is good, building

your components for scale can be a
detriment.
Only scale when needed.

Common mistakes
Educating before building
Educating your teams about your design

system can negatively impact your rapport
if there's nothing to use.
Common mistakes
Not discussing workflow
If you going to be collaborating on a design

system, it's important to come to terms on
a working model.
Common mistakes
Not documenting decisions
Design systems require a lot of investment

and will often have lots of eyes on them.
Documenting decisions will save you and

your team the headache of having to
explain to each stakeholder why you're
doing something a certain way.

Design Systems Formatted PDF

Uploaded by

Copyright:

Available Formats

Design Systems Formatted PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Design Systems Formatted PDF

Uploaded by

Copyright:

Available Formats

What are some components mentioned in the document?

What are some components mentioned in the document?

What are some reasons why design systems matter?

What are some reasons why design systems matter?

Design Systems

This course is a high-level introduction to design

This course is not a comprehensive overview to design

Allow us to maintain consistent

Your products should look and

The style can be updated in one

Our web applications must

There is one place for new team

A design system must serve a

Once your design system has

A design system is never

A design system is a living,

Define the foundation & identity of the

No centralized core team

Combines the centralized and

3 default buttons (primary, secondary, tertiary)

3 default buttons (primary, secondary, tertiary)

14 buttons X 5 states (i.e. hover) X 2 sizes

3 default buttons (primary, secondary, tertiary)

14 buttons X 5 states (i.e. hover) X 2 sizes

= 140 button combinations per theme...

$300 per hour X 200 hours

Designer Engineer Quality Assurance

$100 per hour $100 per hour $100 per hour

$300 per hour X 200 hours = $20,000

$100 per hour $100 per hour

$300 per hour X 200 hours = $20,000

50 teams X $20,000 = $1 million ... on buttons

Designer Engineer Quality Assurance

$100 per hour $100 per hour $100 per hour

Design Component Style Guide

1. Define your design principles

3. Create your checklists

4. Define your workflows

Design principles are the grounding

What do you want your users to feel

Compile all components, in every

Group these components by

Prioritize the components which

Does this request embody our design principles?

Does this request embody our design principles?

Does this request embody our design principles?

Does this request embody our design principles?

Does this request embody our design principles?

Does this request embody our design principles?

Does this request embody our design principles?

We take these individual scores and find

Finish priority one and two Immediate adoption.

Parking lot Priority 2

Try to mitigate the opposition

But buttons also require a lot of

But accordions will take a lot of effort -5 5

Context Screen Resolution

Accessibility Error Handling / Prop Validation

Responsiveness Browser Compatibility