AI Reduplication: Fast duplicate, smart replace

As we consider the question, "how to integrate AI to simplify the UI design process for designers?" it naturally leads us to explore "how a set of UI elements is drawn step by step?"

We observed the workflows of three designers in our team, recording all the features they used and how they used them during the design process. This can be summarized in the image below:

Copy&Paste: One of the most common user activity

To maintain consistency in the product experience, the use of repetition is prevalent in the UI design. Repetition can be a dividing line, a color, a projection effect, a set of text styles (i.e. the combination of font size and font weight), a layout pattern, or a type of design style. Repetition can also be a button, a line in a list, a card, or a dialog.

It is easier to copy and paste similar content and then make some adjustments than to redraw it. So, it perfectly explains why copy and paste are used so often.

Copy&Paste + AI = ?

The key question is: what can AI do in a copy-and-paste scenario?

Returning to what users truly do, we focus on the copy-and-paste context this time, classify the contents copied, and consider the actions occurring before and after.

We found that the repetitive elements tend to be alike but slightly different. After copy-pasting, some adjustments are typically needed to address these differences. Perhaps this "tweaking" can be done by AI.

Making changes requires expertise.

Some changes are made to simulate real interfaces or to showcase the possible layout shifts arising from different content for developers.

For example:

• Case A: Repeated rows in the message list Action → Duplicate a row, replace the text and images, and adjust the relative position between rows.
• Case B: Repetitive content cards in the masonry layout. Action → Duplicate a content card, replace the text and images, and adjust the relative position between cards.

Such adjustments typically require designers to search for similar images, write similar text, and then replace them with duplicates. Although this process sounds simple, sourcing images and writing text can be tedious. In such cases, AI happens to have the ability to complete this simple yet tedious task.

From idea to implementation: Challenges and Solutions

Layouts that seem to be consistent may actually have significant differences.

Replacing text and images into duplicates seems simple, but involves understanding of layout design and making adaptive adjustments.

Directly replacing content with duplicates may lead to the following issues:

These types of issues often arise from text replacement, where changes in text length potentially lead to the following variables:

• How should the text align? Left, center, or right?
• If the text is in a frame with a background color or border (e.g. a button), should the frame resize accordingly?
• Should the subsequent text content also change its position?

Of course, if the input has been applied Auto Layout that can adapt to changes in text length, the above issues are easily resolved. However, we cannot assume users are used to using auto layout or willing to do extra steps before starting AI Reduplication.

AI Reduplication requires the ability to handle various inputs, understand users’ layout patterns, and make adjustments as accurately as possible.

To solve this problem, when replacing content, we will use another AI feature of Motiff - AI Layout. It can calculate the position and size of all layers after content replacement, apply the calculation result to the AI-reduplicated copy, and present the correct layout to the user.

Images and texts have their fixed matches

Most of the time, our expectations for AI-generated content are not high. We simply need it to be correctly categorized with variations in a certain range. For example, we can generate addresses, dates in the same format, cell phone numbers, etc.

However, sometimes we hope to maintain a certain level of relevance among various elements in a group of inputs, for example:

The knowledge required for this type of content matching doesn't entirely fall under common knowledge. Without additional input or instructions, AI may struggle to address this scenario effectively.

Nevertheless, these elements may be well-known to feature users, as they have been reused in prior design files. They might consist of content combinations that are previously used and manually arranged by designers.

For such scenarios, AI Reduplication not only refers to the text and image content of prior design files but also refers the "fixed collocations" between content, making the reduplicated results more suitable for users’ actual scenarios.

AI's learning speed VS. Designers’ creative tempo

One of the research topics in the field of search is: How to improve the update speed of search indexes?

During searches, what is being looked up isn't the full real content but rather the index. The actual content is changing every minute, and the index is trying to catch up with these updates, but the time lag cannot be avoided.

This issue is particularly evident for tools like search engines that need to retrieve vast amounts of data. For highly important websites, index updates could take place within minutes to hours; whereas for less frequently updated or relatively less important websites, updates might be delayed by several days or even weeks.

AI Reduplication faces similar challenges.

There is a process that AI needs to go through to learn your prior designs: recognizing repeated sections in the design files, understanding their corresponding and group relationships, establishing indexes, and so forth.

Designers continue to create new content every day, and AI is also continuously learning, but its speed is not as instantaneous as imagined.

UI design is different from search, and delays in search engine indexing may be difficult for users to perceive. However, AI Reduplication learns at a slower pace, which may impact the usability of the feature in some cases.

Imagine this scenario:

A designer has just drafted a new list view for a course page and imports several new images. Then, the designer moves on to construct the grid view for the same page. Ideally, the grid view could use the same images and text as the list view. AI Reduplication cannot invoke these newly created image and text contents in this scenario.

To reduce learning time, the structure of the AI Reduplication index has undergone several revisions. It evolved from individual indexes for each user to shared indexes for the same content. From uniform updates at regular intervals to more detailed updates for groups of files or frames.

After several revisions, we have greatly reduced the cost and improved the speed of AI Learning.

The current timeliness is as follows:

• For files that are newly included in the scope of AI Learning (such as imported files), indexes will be generated within a few minutes.
• For updates to existing files within the scope of AI Learning, AI will incorporate the updates into the index within 24 hours (actual update times may vary depending on the concurrency of updates).

However, this doesn't meet the scenario we just envisioned. We still need to continue observing the actual needs of users for index updates and carry out continuous optimization.

Continuous Exploration

From ideas to implementation, we've encountered a lot of challenges. While a small portion has been addressed, many more may remain undiscovered or are temporarily unresolved due to constraints such as time, technology, cost, or understanding of certain scenarios.

For example:

• The issue of learning speed discussed above.
• The issue of image generation. (Currently, AI Reduplication can only refer to images used in prior design files and cannot generate new ones or introduce external images.)
• The issue of dealing with multiple inputs. When users input multiple pieces of content simultaneously, how can we determine the segmentation of content within mere seconds, and identify whether there is a correlation among the segmented contents? If there is, should the subsequent outputs maintain this correlation?

There are quite a few challenges, but our research and experiments won't stop. When we come up with a solution, we will launch a new version of AI Reduplication as soon as possible.

Behind the scenes: Why Reduplication?

Before launching this feature, there was an unexpected discussion about the name for this functionality.

We had multiple discussions about the word choice. The main candidates were: Copy, Duplication, Replication, and Reduplication.

After careful analysis, we found that:

• Copy, Duplication, and Replication are used in different scenarios. Some of them are commonly used in daily conversations, while others are applied in specific fields. Despite these differences, they all emphasize that the duplicate is exactly the same as the original.
• Reduplication is relatively less common in everyday language. In terms of usage of this word, it doesn't necessarily emphasize an exact match between the duplicate and the original. The degree of consistency depends on the specific context. For example:
  • In art, “reduplicate” can refer to imitating the style of an artist or characteristics of a piece of work. The repetition here doesn’t aim for an exact copy but tries to capture and reproduce the spirit or style of the original.
  • In Biology, “reduplication” can refer to the process of duplicating genes or chromosomes, a key mechanism for evolution and functional diversification. Such repetition might lead to changes in gene expression, and even identical gene duplicates can diverge functionally due to environmental factors and mutations.

The AI + copy and paste feature creates objects similar but different from the original, which aligns with the meaning of Reduplicate.