AI Consistency Checker: A solution for consistency issues

Consistency may be the most well-known but also the most fragile design principle. We typically divide consistency into two categories:

• Visual Consistency and Functional ConsistencyThis involves achieving consistency in visual effects and functional experiences within the product. Visual consistency emphasizes using similar elements throughout the product, such as standardized fonts, font sizes, colors, and button styles. Functional consistency emphasizes that interactive elements in the product should behave in the same way, improving the product’s predictability. For example, actions like opening popups or navigating back should remain consistent.
• Internal Consistency and External ConsistencyInternal consistency focuses on keeping various parts of a single product consistent with each other, while external consistency concerns making sure the product remains consistent across different platforms or with other products. Examples include ensuring that the product looks and feels similar on both mobile and desktop devices, as well as maintaining consistent interaction logic across Adobe products for a better user experience.

How do you keep products consistent? Using a design system should be the top solution.

The purpose of creating a design system is not merely to compile a file for aesthetic pleasure. One of its main purposes is to guide the team’s future design efforts to be more consistent. Reusable components, styles, and interaction guidelines can ensure internal visual and functional consistency within the product. Moreover, it helps to address external consistency issues across different products or systems.

It seems like introducing a design system is the solution to consistency problems, but things are not that straight forward.

When using the "AI Design System Maintainer" to scan design files and extract new styles and components, we find some elements that should be incorporated into the design system, but we also come across many consistency issues. Surprisingly, these issues persist in product design files that have undergone reviews and have been released for users.

Where do consistency issues come from?

Further analysis of consistency issues reveals that most layers showing consistency issues don’t use styles or components from the design system. For example, can you spot the design consistency issues in the following set of interfaces?

There are a total of 3 consistency issues in the interfaces. They are:

1. 1.The text inside two buttons has different font weights.
2. 2.The two buttons have different fill colors.
3. 3.The lengths of the two buttons are different.

Have you noticed? These independent layers that do not reference the design system often have minor property differences that are difficult to spot with human eyes. This is why, even after thorough checks, these design files still have consistency issues.

It seems like removing all independent layers can avoid consistency issues. Sadly, it is impossible. Design systems cannot fully meet the requirements of design files:

• Design systems prioritize covering highly reusable design elements for efficiency.
• Design systems often lag behind the latest design needs. Implementing the approach of “Design Systems First” comes with a high cost.
• Typically, design systems are only introduced when the business reaches a certain scale, and adjustments based on historical design files also face the challenges of maintaining consistency with older designs.
• ...

So, is there a way to find these "independent" layers more efficiently?

This is the original intention behind the AI Consistency Checker.

Functional design of consistency checker

Many tools can inspect styles such as text and colors in design files, such as Style Organizer and Design Lint. Motiff aims to explore more possibilities by using the ability of AI on top of existing tools.

Identify elements in design files that don’t need to be checked

Many elements in design files don’t need to undergo consistency checks, such as:

• Experimental drafts or annotations that are not part of the deliverables
• Illustrations or marketing content in the design files that are usually not restricted by design systems
• ...

Not skipping these types of content means that the checking results are mixed with interfering factors, making it difficult to identify the real consistency issues.

Typically, the method to resolve this problem is to skip the "locked" layers and rely on users to manually lock them before inspection. This can solve the problem, but the extra steps complicate the inspection process.

Motiff tries to address this issue using AI. Unlike rule-based mechanical comparisons, "AI Consistency Checker" can intelligently scan the pages and identify content that doesn't require checking:

• Layers located outside the UI interface
• Layers under overlays
• Illustrations or marketing graphics
• ...

Of course, in order to fully meet designers’ needs, the AI Consistency Checker still supports skipping layers that users have locked or hidden.

Supports consistency checks for components

Unlike existing consistency check tools that only support style checking, "AI Consistency Checker" also supports component inspection. This means that common component differences can be flagged, such as the differences in size and padding, the misuse of text, color, and radius styles, as well as other consistency issues.

During the process of AI Consistency Check, layers in the design file that match common component characteristics are automatically identified and extracted. These layers are then compared with the main component in the design system. Layers that don’t reference components and those properties are not entirely consistent with the existing components will be marked for designers to review and double-check.

Currently, our consistency checker supports 8 types of components, which are typically the first to be included in design system specifications: Button, Tag, Checkbox, Dialog, Toast, Tabs, Navigation Bar, and Tab bar.

More details

Even with the help of AI, conducting a consistency check on thousands of layers is not easy. AI consistency checker also offers some detailed optimizations to enhance the efficiency of the inspection as much as possible. These include:

• Support for panning and zooming the canvas to inspect each abnormal layer individually, which is useful when dealing with complex design files.
• Support for one-click replacement of text and color styles with the same properties. If the same properties do not exist, it will recommend similar styles for replacement.
• Configurable options to ignore differences in text line heights during the checking process.

What’s more

We are working on expanding our style consistency checks to cover more style categories, such as rounded corners, effects, etc. We believe they will be available for everyone to use soon.

For component consistency checks, we aim to scan and understand how users organize and name components in their design system files, to compile preferences for component similarity within the design system. With this capability, component consistency checks will support recommending similar components and intelligently exclude components that have not yet been standardized in the design system.