- Why you need a design system
- 1. Style Guide
- 2. Component Library
- 3. Design System
- Building the Design System
- Create an Inventory of Existing Design Patterns.
- Establish Design Principles and Begin a Style Guide.
- Define Your Design Tokens.
- Create or Identify an Icon Set
- Using SVGs,
- Choose Languages/Frameworks Supported.
- Evaluate CSS/Sass Vs. CSS-In-Js.
- Create a Component Library.
- Have fun
Why you need a design system
Every website starts simple. Then, slowly, it begins to scale. More pages are added and new features are built.
Unless you think about your design and development process upfront, you will run into issues later as you scale.
To prevent this issue from happening, or to fix the existing lack of consistency in your products, you need three things:
1. Style Guide
A style guide is a set of rules for how your brand should be displayed. This is both visual (design & imagery) as well as written content (voice & tone).
The purpose of a style guide is to allow multiple contributors to create content clearly that cohesively represents the brand
2. Component Library
A component library is living, breathing implementation of your style guide. It's a shared set of UI components that developers can consume to build applications reflecting your brand. Some notable benefits:
- Having a component library means less custom code for consumers.
- Since there's a central location, you can ensure all components meet accessibility requirements.
3. Design System
A design system is a complete set of standards, documentation, and principles along with the components to achieve those standards. It is the marriage between your style guide and component library.
A design system, contains:
- Content -- The language to design a more thoughtful product experience.
- Design -- The visual elements of the design system.
- Components -- The building blocks for developing new products and features.
- Patterns -- The individual pieces for creating meaningful product experiences.
Building the Design System
Create an Inventory of Existing Design Patterns.
Unless you are starting from scratch, you will need to identify all the design patterns currently in use in your interface and document any inconsistencies.
The goal should be the same user experience regardless of which part of the product the user is in.
Establish Design Principles and Begin a Style Guide.
Establish Design Principles and Begin a Style Guide. Make sure that using tools you are familiar with practices like components, nested components, autolayout.
Define Your Design Tokens.
A shared language between designers and developers.
This includes things like:
Create or Identify an Icon Set
If you already have existing icons, you'll need to determine which to keep. It might not make sense to create your own icons depending on the size and priorities of your company.
You can make the icon library your single source of truth. Your process might look like this:
- Designers create/provide raw SVGs.
- Optimize and compress the SVGs using SVGO.
- Automatically create React components using SVGR for developers.
- Output PNGs and JPEGs at different sizes/resolutions for marketing.
- Compile SVGs into a bundled font for mobile applications to use.
Choose Languages/Frameworks Supported.
What languages or frameworks are you currently supporting?
Which should the component library support? It's important to think about this ahead of time so you can properly architecture your library.
Evaluate CSS/Sass Vs. CSS-In-Js.
I've come to prefer CSS-in-JS, especially styled-components.
There's a variety of different CSS-in-JS options outlined here.
The major selling points for styled-components for our component library were:
- React & React Native support
- Auto-prefixing vendor styles
- Scoped styles which eliminate global CSS conflicts
Create a Component Library.
With your technical requirements defined and your style guide started, you should now be able to begin constructing a component library.