Introduction to
Design Systems
What is a Design System?
Let's start by defining "system"
What is a System?
"A system is an interconnected set of elements that is coherently organized in a way that achieves something."
- Donella H. Meadows
Thinking in Systems: A Primer
Systems are composed of:
• Elements
• Interconnections
• Function or Purpose
What is a System?
• Football Team
- Elements: players, coaches, field, the ball, etc
- Interconnections: rules of the game
- Purpose: win games, have fun, etc.
• School
- Elements: teachers, students, books, etc
- Interconnections: admissions, exams, grades, etc
- Purpose: education
Examples
What is a System?
Human Body
• digestive system
• nervous system
• circulatory system
• etc.
Systems within systems
What is a Design System?
"A set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product."
- Alla Kholmatova
Design Systems
What is a Design System?
Elements
• designers, developers, tools, components, etc
Interconnections
• patterns, practices, & processes
Purpose
• support other products and systems
What is a Design System?
Examples
• Lightning - Salesforce
• Polaris - Shopify
• Carbon - IBM
• US Web Design System - 18F
• Primer - GitHub
• Mineral UI - CA Technology
• Atlassian Design Language - Atlassian
• Gestalt - Pinterest
• purple3, shibori3, and malibu - Heroku
What is a Design System?
• Guidelines
• Style
• Components
• Utilities
Anatomy
What is a Design System?
• Accessibility
• Code Patterns & Consistency
• Testing Philosophy and Coverage
• Documentation
Guidelines
What is a Design System?
• Color
• Components
• Iconography
• Motion & Animation
• Purpose & Values
• Spacing
• Typography
• Voice & Tone
Style
What is a Design System?
• Grid Components
• Base Components
Components
What is a Design System?
• Translation
• Theming
• Time-formatting
• CLI tools
Utilities
Why Have a Design System?
• Maximize developer and designer effort
• Scaling UI / UX consistency
• Build apps faster
• Make updates cheap
• Make testing ideas cheap
• Faster onboarding
Should We Have One?
Many of the companies listed with our examples are far larger and have a lot more resources to support a design system
Some questions to consider:
• Will our current processes and structure scale for our needs?
• Could our UI be more easily maintained and updated?
• Are we able to test new ideas as quickly as they would like?
A Fair Question
Should We Have One?
As frontend and design tooling has improved, design systems have become more accessible for small-to-medium-sized companies.
Perhaps it makes sense to start by building tools to support immediate problems and build from there.
Other Considerations
Resources
Introduction to Design Systems
By Alan Smith
Introduction to Design Systems
- 445