Master Design Systems: Boost Your Design Efficiency!
Table of Contents:
- Introduction
- Effective Documentation
- Including Examples
- Tracking Component Updates
- Adding Code Examples and Links
- Anticipating Consumer Needs
- Choosing Documentation Location
- Hosting Documentation in Figma
- Creating Pages for Foundations, Components, and Patterns
- Using Labels and Additional Notes/Context
- Incorporating Spatial Definitions
- Testing and Gathering Feedback
- Conducting User Interviews
- Determining Evaluation Criteria
- Paying Attention to User Flows and Unique Problems
- User Testing Tips
- Establishing a Contribution Process
- Onboarding and Knowledge Sharing
- Internal vs. External Contribution Process
- Empowering Consumers for Improvements
- Managing Updates with Changelogs
- Semantic Versioning
- Coordinating Updates for Small Teams
- Branching and Merging for Large Organizations
- Advocating for the Design System
- Conclusion
Effective Documentation
Effective documentation is crucial for the success of a design system. It goes beyond simply naming conventions and descriptions for styles and components. Documentation that truly supports the ongoing success of a design system includes examples for correct and incorrect uses of patterns, tracks component updates, and provides code examples and links for developer implementation. It anticipates the needs of its consumers and is presented in a way that Speaks directly to them.
Developers may require cross-referencing of tokens and properties, while writers may need guidance on crafting error messages. It is essential to think about what parts of the system might need extra context and consider the needs of different audiences. Additionally, the location and accessibility of documentation can greatly impact its effectiveness. While dedicated websites can be highly customizable and necessary for larger companies with many products, smaller teams can use tools like Storybook or Notion to house their documentation in the same place as their design system.
Hosting Documentation in Figma
In the case of the habits team, a small team that aims to keep everything in one place, they have chosen to use their existing design file to host their assets and design documentation. They have created separate pages within their file for foundations, components, and patterns. Foundations include aspects like spacing, typography, and colors, while components encompass buttons, cards, toggles, and more. Patterns refer to specific patterns used, such as a day selector or navigation.
To better communicate their design decisions, the habits team uses a modified version of an eight-point GRID system. They have created elements to capture common spacing values, aligning designs with code and providing designers clear instructions on which values to use. These spatial definitions serve as illustrations to Visualize empty space and document system decisions, giving consumers a reference point. Additionally, spatial systems also set the basis for other elements like layout grids, padding, and nudges in Figma.
Testing and Gathering Feedback
To ensure the continuous improvement of a design system, it is essential to test and Gather feedback. User interviews are a common testing method that can be conducted one-on-one or in a group, virtually or in person. Before starting these interviews, it is important to determine what aspects You want to evaluate and what insights you hope to gather. Considering user flows and identifying problems unique to each group of participants can help in creating tasks for them to complete during the testing process.
During user testing, participants should be asked to complete tasks twice – once using their Current workflow and once using the design system or solution that has been built. This comparison helps determine how the design system has improved the user experience and quantifies the differences. It is crucial to observe how long it takes participants to find what they need, whether the assets are used as intended, and identify any areas where documentation may be unclear or confusing. Detachment of components or unexpected behavior may indicate areas for improvement within the design system.
Establishing a Contribution Process
Empowering consumers of a design system to make improvements themselves can greatly support the success of the system. Establishing a contribution process allows contributors to propose and implement suggestions in a structured manner. The process should provide timelines, guidance, and information on aligning contributions with design system goals and requirements. It can have two levels – an internal contribution process for those already maintaining the design system and an external one for people outside the design system team.
The internal contribution process handles onboarding and knowledge sharing to ensure consistency in contributions. However, enabling participation from system users requires more guidance, resources, and rigorous review processes. This approach expands the pool of ideas and solutions and helps evaluate a wider array of perspectives. By involving more users in the contribution process, it increases their investment in the design system's success.
Managing Updates with Changelogs
Design systems go through iterations, and it is crucial to manage updates effectively. Changelogs are a great way to track these updates and communicate them to users. Each version update should have its own changelog entry that highlights what's new, what has changed, and any bug fixes. Using a versioning scheme, such as semantic versioning, helps convey information about the update.
For smaller teams, coordinating updates within the group may be sufficient. However, in larger organizations, where more people are using the design system, it is important to consider the impact of changes or updates on users. Following a branching and merging approach, similar to that used in software development, allows changes to be explored in a separate environment and undergo a review process before being merged into the main code base.
Advocating for the Design System
Advocacy plays a crucial role in the success of a design system. It involves sharing, raising awareness, and educating others on the value of the system. By presenting work in progress and generating excitement and involvement, designers can get others invested in the success of the system. Advocacy can start early in the process, even before the first version is complete. Finding low-effort ways to Raise awareness, such as mentioning it in conversations or wider channels, can also help increase adoption.
Building a design system is an iterative process that requires flexibility and a focus on learning and improvement. It is important to remember that each design system is unique and tailored to the specific needs of the team and organization. By staying open to feedback and continually listening for ways to evolve and improve, designers can ensure the ongoing success of their design system.
Conclusion
Building a design system requires effective documentation, testing, feedback gathering, establishing a contribution process, managing updates, and advocating for its use. These steps support the ongoing success of a design system and help improve its adoption and impact within an organization. By prioritizing the needs of consumers and considering different perspectives, designers can Create a design system that is both user-friendly and beneficial to the entire team. Remember, building a design system is a marathon, and flexibility and continuous improvement are key to its success.