Welcome to Motiff: UI design tool for AI era

Rewinding to 2021

Our journey on the Motiff project took off in October 2021. Unlike many startup stories filled with narratives of gathering a dream team, we already had a robust team with a strong engineering culture and some brilliant AI scientists. This group had previously launched several impactful global projects.

Looking back at the initial spark that led us to venture into a new business direction, it involves our experience with Github Copilot. Initially, most of our engineers were skeptical about its utility, feeling the era of AI guiding coding was far off. However, it didn’t take long before almost every engineer on our team became a Copilot convert. This profound turnaround highlighted a potent truth: Integrating AI into professional tools, given the right user scenario, could revolutionize efficiency. Witnessing the transformative potential of AI in professional tools sparked our excitement to dive in.

Having been inspired, the next big step was to determine “what we should focus on”. Following intense discussions, we settled on revolutionizing the “product design” realm for two main reasons:

• Our team had a longstanding passion and practice in designing and developing online products. Also, our members have always been keen on about utilizing advanced tools. We were confident in our expertise in this domain.
• Observing the vast world of UI revealed a fascinating pattern: despite variations in style, the similarity in design patterns across interfaces was striking. This consistency bolstered our belief in AI's potential to make significant contributions to this field.

Thus, we set off on our mission: Designing an AI-Era Design Tool. And that marked the beginning of our journey. Welcome to the future of UI Design with Motiff.

What features does a design tool for AI era need in its editor?

The editor lies at the heart of a product design tool. Sketch revolutionized the editing process by simplifying and improving Photoshop to develop a UI designer-focused tool. This was essentially an "editor revolution". The “infinite canvas”, “artboard”, and “vector tools” of Sketch defined the vector era of professional UI design tools. And then came Figma, using “collaboration” as the game-changer - the editor was directly put onto the cloud where designers could collaborate in real-time via a browser. This new revolution saw Figma outrun Sketch to become the more popular tool of the day.

Returning to Motiff, if we aim to spark yet another revolution for the AI era, what kind of editor would we need? Initially, we pondered broader questions: Should we completely overthrow current definitions or draw inspiration from them? If AI is to play a significant role in design tools, how different will the next-generation editor be from what we’re familiar with now?

These questions were complex with no straightforward answers. Still, our reflections revealed:

• AI’s impact on the editor might be incremental, as enhancing each feature independently with AI seemed like a standalone proposition. For continuous feedback and improvement, offering a comprehensive editor was crucial.
• "AI generation" could represent a non-incremental leap forward, inspired by the rapid advancements of LLM. However, we believe that superior designs necessitate human refinement, making a detailed and comprehensive editor indispensable.

Our journey of building and rethinking made one thing clear: a comprehensive editor was essential. It served as the foundation of a building, upon which we could effectively put the impressive "AI constructions" to good use.

Today, if you're exploring Motiff, you're interacting with a professional editor equipped with cloud collaboration capabilities.

Creating a comprehensive editor demanded significant effort from the Motiff team. We owe a debt of gratitude to Figma for paving the way. Figma’s creation of a complex yet refined online graphic editor has been a source of constant learning for us. Our product and technology team have benefited immensely from Figma’s blog shares. Moreover, we realized the critical importance of "performance" for an online graphic editor. Figma has always excelled in this, and Motiff aimed to do even better. In fact, we have optimized performance in many key scenarios to surpass what was previously possible. In our most recent robustness testing, Motiff was able to smoothly edit million layers in a single canvas, likely making us the world’s first online graphic editor to achieve this level of performance.

Motiff's positioning on AI application

Ever since the inception of Motiff, examining how to incorporate AI capabilities into professional design tools has been an essential topic of discussion for our team.

What problems can AI solve for UI design? After several brainstorming sessions, we have a long list of cool "ideas". Although it wouldn't be challenging to create prototypes for these ideas, the real obstacle has never been the lack of good ideas—it lies in whether these ideas could be stably and accurately implemented by AI.

In the past, almost any business requirement could be accomplished by product and development engineering—it was simply a matter of development time and quality. However, when it comes to AI functionalities, the key lies in finding a "PTF: Product - Technology Fit". Technological feasibility and product design need to meet at a certain intersection. We need to understand the range and boundaries of AI models' capabilities and define suitable product forms for accurate and stable application of existing AI capabilities.

From 2021 until now, we have managed to pinpoint some "PTF" scenarios and successfully implement them, providing direct assistance to designers and design teams in their day-to-day work.

Redefine all the design tools

One of our keys to innovation has been closely observing designers' daily routines. We asked ourselves, "If there are high-frequency but complex operations in their workflow, could AI simplify these?" Our product managers engaged in what could be dubbed a "boring yet interesting" activity: they analyzed hours of screen recordings from early Motiff users, identifying patterns, frequently used tools, and common procedures. This deep dive gave us incredible insights into how repetitive tasks dominate the design process.

The quest for repetition

Surprisingly, or perhaps unsurprisingly, we found that more than 50% of a product designer's operations aimed at “repetition". This cycle of copy-pasting, although mundane, is fundamental in ensuring consistency across the product's UI, hence reducing the cognitive load on the end-user.

"Paste" isn't the end of repetition for designers, who often use "copy-paste" for consistent design patterns with slight variations to suit different contents or reuse existing information.

"AI Reduplication" is birthed based on our reflections on the essence of repetition, a tool Motiff developed that streamlines this process.

If you want to learn more about the story behind it, you can check out our product manager Chloe's thoughts on "AI Duplication" in her share: "AI Reduplication: Fast duplicate, smart replace".

Auto Layout is excellent in many scenarios, but a disaster in others

The auto layout feature invented by Figma allows product designers to have a better structured layout capability - it's a groundbreaking feature. Motiff has also carried forward this highly practical function. However, while observing designers using auto layout on Motiff, we noted some phenomena:

• Many designers never used Auto Layout because they thought it had a high learning curve.
• If learning to use auto layout is a "hard mode", then modifying (especially other’s) auto layout is "hell mode". Absolute positioning can solve limited problems, but auto layout, when nested layer upon layer, makes it hard to go back to free-form.

Sho Kuwamoto’s 2021 Schema speech about classification of design into Free-form Design and Structured Design was quite enlightening. Given that designers need both free-form and structured layouts, we were inspired to find a solution: Is there a way to make it easier for users to create structured layouts while making the transition between freedom and structure less burdensome?

This is how the "AI Layout" feature came to be.

Currently, we support two modes to address the above problems. If you want to learn more, you can check out our Product Manager, Tim's sharing "AI Layout: The dream of dynamic flexibility". We hope Motiff, with AI, can help designers excel in both Freedom Design and Structured Design.

Design System: Effective efficiency improvement from the production process perspective

Since the pioneering concept of design systems was introduced in "Atomic Design," they have long been regarded as the best practice for keeping consistency in design.

We believe the true effectiveness of design systems began with the shift to collaborative cloud-based tools, which addressed many synchronization challenges. However, collaboration hasn't solved every issue. For instance, creating a design system requires significant time for organization. And each team's library of components and guidelines can be complex, making maintenance and application challenging.

If we examine the production process closely, we find it is laden with repetitive and creatively undemanding tasks. Many seasoned product designers find themselves mired in these tasks, leading them to question their value as designers.

Integrating AI into the practice of design systems seems like an intuitive and natural idea. AI can serve as an assistant in various scenarios, taking over tedious tasks. Currently, Motiff has leveraged AI to significantly enhance the efficiency of design system practices, including organizing interface inventories more efficiently when creating design systems, making system iterations more real-time during maintenance, and enabling designers to easily align with standards through intelligent checks during application.

If you want to learn more about AI Design System, you can check out Frank and Otis's thoughts on it in "AI Design System Creator: A new practice in the AI era with just one click".

Motiff Labs: Exploring the possibilities of collaboration between AI and humans

What does the future of integrating AI and UI fields look like? The debate over whether AI will entirely replace product designers has become a hot topic in the industry. Motiff believes that human creativity and aesthetics are challenging to replace in the long run, but the transformation of design tools could lead to "collaboration between AI and humans." Motiff Labs is exploring these new ways of collaboration.

AI Generates UI: Designers dream it, AI builds it.

The development of LLM has made "generation" the hottest topic. After all, we have seen the rapid development of text-to-image; there is no reason text-to-UI cannot be implemented. Compared to producing a cool "AI Generates UI Demo", Motiff's thinking on "generation" more carefully evaluates one thing: what does AI need to "generate" that is more valuable to the current work of product designers?

We believe that value will mainly arise in two directions:

• For newly established projects, designers only have a vague "Intention". Designers need more inspirations to refer to before doing specific designs. At this time, it is valuable for AI to quickly provide some blue prints
• For projects practicing design systems, designers need to build new interfaces more quickly with the existing design system. The Intention at this time might be a description or a Wireframe. If the narrative of the Intention is sufficient and the design system is perfect, it is possible to let AI generate the interface directly.

Our work in "generate" has been progressively developing around these two directions and continuously exploring how to integrate the capabilities of LLM.

AI Magic Box: Designers drag a box, AI finds the matches.

Just as product managers and designers continually communicate to complete a new product design, we believe that the relationship between humans and AI is not just a "top-down delivery" but can form a "Round Table" collaborative model.

The inspiration for the AI Magic Box was born under this assumption. We've observed that most product designs go through numerous sketches and trials by designers before settling on an appropriate solution. "Repeating" the use of previous elements or structures is a very frequent operation. Our previously introduced AI Duplication helps designers improve the efficiency of "repetition" in specific scenarios, while the AI Magic Box aims to enhance the efficiency from another dimension—dramatically improving the efficiency from having a nearly "repeated" "intention" to having this "intention" "presented" on the canvas interface.

With the AI Magic Box, designers only need to draw a box to "sketch their intent", and AI can then "refine the intent" based on the box and the context of its location.

Although the current capabilities of the AI Magic Box are limited to recalling past repetitive elements, we believe it will be able and combine generation to create more magic in the future. For more insights, you can read "AI Magic Box: Drag a box for future".

Welcome to try the design tool for AI era

June 2024, after polishing for two and a half years, we finally present to you Motiff - design tool for AI era. We encourage you and your teams to explore Motiff's innovative AI features. See firsthand how a product design tool in the AI era brings about improvements in efficiency, creativity, and productivity.

Motiff believes the value of a product design tool in the AI era lies in assisting designers and design teams. Therefore, we have offered a fair price so that you and your team can enjoy a comprehensive, fully functional, and high-performing basic design tool. At the same time, we're offering our AI functions for free for a limited time.

We look forward to AI helping you escape tedious work and returning to the essence of design. Try Motiff now and start your AI adventure right the way.