Codification is an integral part of evangelizing a design system and getting adoption from teams. A design system’s documentation must educate teams about usage, company policies, best practices, governance, and branding with examples and tutorials.
Enhance collaboration between design and development while creating a single source of truth with UXPin Merge. Bring interactive UI components to UXPin and discover how fast and efficient your prototyping gets. Discover more about Merge.
📚 This is an abridged version of the article about design system codification. Read the full article on UXPin’s blog: Codifying Design System.
What Codifying a Design System means?
The Cambridge Dictionary defines codification as:
“the act or process of arranging something, such as laws or rules, into a system.”
Design system codification is the process of organizing a design system’s components into a searchable archive or hub with guidelines, principles, documentation, tutorials, governance procedures, and more.
This centralized hub serves as a working document for team members to reference when building new products or searching for the correct component and how to use it–for example, proper color usage and header tag sizing.
The hub will also outline the design system’s governance procedures teams must follow to introduce new elements or promote patterns. Like Github’s Primer, some design systems display a release history so designers can learn what’s new and a design system roadmap for future releases.
Why Do You Codify a Design System?
Like any digital product, a design system needs documentation to learn and understand how to use it. Having a design system is one thing, but team members will invariably use its components based on opinion and interpretation without proper direction.
Providing Clear Instructions
For example, if you purchase a 1,000 piece Lego set without instructions, there are endless possibilities. But, if you follow the instruction manual, you’ll use every piece as intended to build a single structure, consistently the same, every time.
Design system codification ensures every team member follows the same guidelines for designing new products. So, no matter who the designer is, they should always get the same result.
Streamlining Onboarding
Another reason you want to codify your design system is to streamline onboarding.
Instead of someone sitting with new team members to teach them about the organization’s design system, they can visit the documentation and learn everything they need to know without oversight.
11 Tips to Codify a Design System
There is no standard “how-to” guide for documenting a design system, but there are several things you must consider. Here are eleven tips for codifying a design system.
1. Overview with Design Principles
Every design system must include the organization’s core principles and values–preferably on the home page, so it’s the first thing team members see. These principles answer the why behind your design system and choices.
For example, Salesforce outlines four core principles in its Design Guidelines Overview:
- Clarity: Eliminate ambiguity. Enable people to see, understand, and act with confidence
- Efficiency: Streamline and optimize workflows. Intelligently anticipate needs to help people work better, smarter, and faster
- Consistency: Create familiarity and strengthen intuition by applying the same solution to the same problem
- Beauty: Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship
We have a complete guide about design principles and how to establish them for your company here.
2. Brand Style Guide
A brand style guide provides teams with direction on how to represent the brand through design and copywriting. Some companies, like Stack Overflow, also include the correct usage of its name…
Continue reading the article at UXPin 👉 Codifying Design System.
