Visual design & handoff

Design system

Ludovic Delmas
November 6, 2020

A design system is the single source of truth that centralizes a company's best practices, uniting teams to build products at scale. In other words, a design system is a communication toolkit. 

Design systems help companies scale design practices, promote higher quality products that can be built more rapidly, and help users successfully achieve their goals. 

A design system isn’t just a series of components in a Sketch or Figma file. It's way more than that. While this is a non-exhaustive list, a design system is typically made of high-level articles, styles guides, a component library, and documentation. 

Decorative image

First let’s start with the high-level articles. Think of these like what you would see on a design team’s blog. These articles showcase interviews, case studies, opinions, events, and illustrate the design team’s culture and practices. Only really well established design teams include these in their system. A great example of this is Airbnb’s design site.

Next, there are style guides. Style guides contain visual and language guidelines, such as fonts, color, shadows, spacing, iconography, illustrations, voice, tone, etc. Style guides are often created at the brand, marketing, and product-level. 

Then, there’s the component library. It lives in design software like Sketch or Figma for the design team and in code for devs. For a design system to be beneficial and scalable, there needs to be a one-to-one relationship between the component living in the design software and the component built in code. This way, when you hand off designs to developers, they can easily find each coded counterpart and recreate your designs with minimal communication. 

The last piece of the design system is the documentation for the component library. It provides the information required for designers and devs to know how to successfully use each component. Without documentation, it's like driving a car for the first time without having anyone help you. Yikes!

A great example of a very well documented component library is Google Material Design. Their components are extremely well described. Each page's content follows a similar structure where they describe usage, anatomy, behavior, actions, theming, and specs. It’s also a great example of documentation that helps devs and designers by providing Do's and Don'ts, limiting the risk of misinterpretations. 

Design systems are how large teams that work across the globe can still produce consistent, high-quality experiences at scale. 

Back to library
406
Back to library
406
UX Design Bootcamp vs. Degree vs. Self-taught: How to choose?
0
Getting started
The UX process for absolute beginners (with free cheatsheet!)
1
Getting started
How to become a UX designer in 2021 (and beyond)
2
Getting started
UX vs UI
7
Getting started
Do UX designers need to know how to code?
8
Getting started
Recommended UX books
9
Getting started
6 brutal truths aspiring UX designers don't want to hear
14
Getting started
Difference Between Graphic Designer vs UX Designer vs UI Designer
15
Getting started
How to deal with design clients from hell 👹
16
Getting started
Introduction to UX research
20
Research & understanding
Finding a problem to solve
102
Research & understanding
SWOT analysis
103
Research & understanding
Competitive analysis
104
Research & understanding
Heuristic evaluation (usability evaluation)
105
Research & understanding
Task analysis
106
Research & understanding
Stakeholder interview
107
Research & understanding
Survey
110
Research & understanding
User interview
111
Research & understanding
Card sorting
112
Research & understanding
Customer journey map
113
Research & understanding
Empathy map
114
Research & understanding
Affinity diagram
115
Research & understanding
Personas
116
Research & understanding
Contextual inquiry
117
Research & understanding
Diary study
120
Research & understanding
Eye tracking
121
Research & understanding
Intro to IA
201
IA & wireframing
Layout + CRAP
203
IA & wireframing
Site map
204
IA & wireframing
Scenarios
205
IA & wireframing
Storyboards
206
IA & wireframing
Low vs high-fidelity
207
IA & wireframing
Sketching
208
IA & wireframing
Wireframes
209
IA & wireframing
User flows
210
IA & wireframing
Intro to usability testing
301
Prototyping & usability testing
Usability testing plan
302
Prototyping & usability testing
Prototypes
304
Prototyping & usability testing
Research report
305
Prototyping & usability testing
Typography basics
401
Visual design & handoff
Color basics
402
Visual design & handoff
Color accessibility
403
Visual design & handoff
Pixels vs points
404
Visual design & handoff
Layout + 8pt grid system
405
Visual design & handoff
Design system
406
Visual design & handoff
UX writing
408
Visual design & handoff
"Final" usability test
409
Visual design & handoff
UX portfolio basics
501
UX portfolio
Your portfolio is just another UX project
502
UX portfolio
Choosing a site builder for your UX portfolio
503
UX portfolio
UX portfolio inspiration
504
UX portfolio
5 tips for junior UXers asking for portfolio feedback
505
UX portfolio

Join hundreds of

designers learning UX

Take our free 7-day UX design course for graphic designers, complete your first UX project in just a few days, and see what you think.
😎 You're awesome! We'll send you an email with the next steps. 🎊
👻 It looks like there's a ghost in the machine. Please try again.