What is AI Design System Maintainer?

Does the design system require maintenance?

Of course it does.

After you have gone through the hard work of creating a design system and recommending it to designers, your journey with implementing the design system has just begun. For more insights of Motiff's considerations on creating design systems, you can check out AI Design System Creator: start an intelligent practice in AI era by Frank (2024).

In this blog, I will introduce you to our thoughts on “design system maintenance” in the AI era.

Why should we maintain design systems?

Since the rapid evolution of business trends leads to the emergence of new patterns, design systems cannot remain static. After creating a design system, regular maintenance is essential for teams implementing it to keep the system in optimal working condition.

As Nathan Curtis mentioned, a design system is a product that evolves continuously with the “ecosystem” it serves.

This evolution includes:

• Gathering: Collect feedback from users of the design system.
• Comparison: Review and adjust existing components and styles to ensure alignment with the latest design guidelines and brand styles.
• Update: Introduce new components or styles to the design system.
• ...

These tasks are periodically repeated under the guidance of the roadmap and backlog, constituting the maintenance process of the design system.

Once the design system is not maintained on time, it will gradually become outdated and even obsolete.

A design system that is not maintained in a timely manner may force users to ignore using the system because it lacks the required components or styles.

The decline in the usage of design systems also widens the gap between the system and actual design needs, which makes the maintenance process even more challenging.

There is more than one way to prevent a design system from falling into a vicious cycle.

The “Design system first” practice recommended by Brad Frost provides a key solution to address this issue. It suggests that you should begin your design work by looking at components and patterns that are already available in your design system. If the current design system doesn’t meet your requirements, you need to adjust it first and use the improved ones in the design files.

The approach of “Design system first” ensures that your design system is one step ahead of the latest design needs. Every design inherently becomes a maintenance opportunity for the design system, preventing the gaps between the design system and the design needs from the very beginning.

Reference: Maintaining Design Systems

However, “Design system first” makes the collaboration between design system users and design system makers more complicated. Design system users must provide feedback to system owners and wait for the system to be updated, which leads to longer and unpredictable output times for design needs. Many teams find this approach unacceptable.

Timely maintenance of the design system is also a viable solution. Although it may not completely eliminate the gap between the design system and the needs of users, high-frequency maintenance keeps this gap dynamically controlled within a smaller range.

But performing timely maintenance on the design system is also challenging.

What are the difficulties of timely design system maintenance?

Maintaining a design system relies heavily on the communication between design system owners and design system users. When users find that the design system doesn't meet their needs, they can provide feedback to the maintenance team. The team will examine whether the feedback is valid and decide whether to incorporate it into the design system to meet the needs of other users.

However, in our communication with almost every beta tester, we have found that no matter how smooth the feedback channels are or how timely the response from the maintenance team is, users will always discover new components and styles in the design files that are outside the design system, and they never received feedback about these elements. This is because some users choose to "quietly endure" and solve the problems on their own.

Consequently, the design system maintenance team is forced to regularly review the latest design drafts to identify and summarize new elements and add them to the design system. This process requires the following steps:

• Scan through design files: Review each of the new design files since the last maintenance and summarize components and styles.
• Compare to find new elements: Compare the components and styles from the process of scanning design files with those already in the existing design system to identify newly added elements.
• Evaluate and update the design system: Evaluate new components and styles. Decide whether to update the design system based on usage scenarios and reuse frequency.

This process requires a significant amount of their time. Ultimately, instead of quickly sorting things out, design system maintenance turns into a year-end overhaul.

Can AI Help Us?

Luckily, AI can free us from the tedium of routine tasks, which is why we launched the "AI Design System Maintenance".

1. 1.Scan through design files

With AI Design System Maintenance, you simply need to select the design files you want to scan, and then you can start AI recognition with a single click. Motiff's unique AI model will start a series of analyses:

• Identify the interface within the design files that are used for handoff, excluding other layers that are used for analysis and annotation.
• Identify and exclude parts of the interface that typically don’t have reusable value, such as illustrations, marketing graphics, etc.
• Based on context and features, identify and extract styles, as well as 18 types of components like buttons and dialog boxes.

Compare to find new designs

With the use of AI Design System Maintainer, AI will automatically start comparing differences after scanning the design files to identify components and styles that need maintenance but are not yet incorporated into the design system. Unlike the rigid “pixel-level” comparisons, Motiff's AI offers a more intuitive design judgement:

• Ignore the differences in text length and icon vectors within the components.
• Ignore minor size differences in certain scenarios.
• You can choose to ignore differences in text line heights if your team hasn’t standardized it yet.
• You can adjust settings to ignore “long-tail” styles that are rarely used in just one click.

Evaluate and update the design system

With AI Design System Maintainer, each newly discovered style and component is clearly labeled with the number of times it has been used in the design file. You can click to view the specific usage scenarios.

Finally, Motiff AI leaves the final decision-making to designers. Design system maintenance is completed after you have decided whether to add or remove styles and components in the design system based on your team’s requirements.

Further thoughts on AI design system maintenance?

AI design system maintenance is a complicated task. We are actively delving into new capabilities.

Can AI help me analyze defects in the design system?

Currently, analyzing defects in an existing design system relies on statistics from referencing and separating actions within the system, combined with feedback from users. However, AI can receive and process a broader and more complex range of data.

We are still exploring new possibilities.