Previous
¶ Design System
¶ What it is
A design system is a set of standardised guidelines, reusable components, and patterns used to design and develop digital products and user interfaces consistently. It provides a shared language and framework for designers and developers to follow, which helps to ensure that the products they create are visually and functionally consistent.
¶ Why it is useful
A design system is valuable for creating consistent and cohesive user experiences across digital products and services. When implemented well, it streamlines the design and development process by providing standardised design elements and guidelines that can be used across various teams (improving communication and collaboration) while allowing for scalability and replicability in design.
¶ When to use it
Creating a new product can help ensure alignment among team members and design consistency. When maintaining an existing product, it can be used to update and maintain design standards and guidelines, ensuring that the design remains consistent over time. Additionally, when working on products with a high level of complexity, a design system can be especially useful in maintaining consistency and streamlining work through reusable user interface components and elements.
It is important to note that a design system can become a manageable collection of components and code if adequately maintained. As such, consider the scale of your project and the resources and time at your disposal.
¶ How is it done
- Understand the need and processes of the product team, using the Information to list the requirements and the structure of the design system.
- Make sure the visual design direction is aligned and confirmed.
- Establish guidelines and design principles before working on the design.
- Study the existing design files, and identify frequently used styles, patterns, and components.
- Create the design library with the design software of your choice. Start from the styles and then gradually move towards complex components.
- Create documentation for the design system.
- Create the basic structure of the documentation base on what is included in the design library.
- Add detailed guidelines for each segment.
- Create visual assets if needed. For example, do’s and don’ts comparison.
- Create video demos if needed—for example, a demo of the transition of an interactive component.
- Add component front-end code if needed.
- Maintain and update the design system.
¶ Do's & Don't
Do's
- Consider if there is the capacity for managing the design system before starting to build it.
- Consider how the design system will be managed, for example, individual or group contributors.
- Communicate and document the updates and changes.
- Constantly update the component library so that the latest design software features are utilised.
¶ Tools needed
- Figma
- Design system management tool
¶ Example
¶
¶ Useful Tips
¶ Elements of a Design System
A design system is composed of the key elements: the design repository, which holds the components and assets, and the people responsible for maintaining it.
Design Repository
Style guides contain guidelines, visual references, and design principles that outline how a product should be designed. They include typography, colour, layout, and interaction design, and they can also include voice and tone.
Component libraries (also called design libraries) are collections of pre-designed and reusable UI elements that can be used to quickly and consistently create new designs. They can include things like buttons, dialogue boxes, cards, and other common interface elements. They provide a central location for designers and developers to access and use specific UI elements.
Pattern libraries contain collections of grouped UI elements (UI elements organised together in a layout). They typically feature templates for content structures and layouts. They can include things like navigation menus and page layouts. Similarly to components, the patterns are meant to be reused and adapted.
People
To ensure that a design system remains relevant and useful, it is important to have a dedicated team in charge of its ongoing maintenance. This includes regularly reviewing and updating the system to prevent it from becoming outdated or cluttered with redundant elements. The team should provide support in areas such as defining interaction-design guidelines, creating visual examples, and providing implementation specifications for each element.
