The importance of motion in design is unquestionable. It provides background information that guides users to interact and operate, providing effective navigational cues. However, it is not always easy to integrate a new domain and information into an established, existing UX design process.

Before the birth of the dynamic rendering tool like Lottie, even in 2016, which is close to the present, it still feels like a dark age of UX effects, even though there are many new design patterns at that time. Preparing visual material for AE usually means using AI to make the corresponding material first. After complicated import and conversion, after a lot of inevitable redesign and adjustment, this unpredictable situation is too much, so that designers often So beyond Deadline.

In order to eliminate as much as possible the useless steps that may occur during the dynamic production process, I started building an internal tool called Sketch2AE inside Google in mid-2016, which is essentially the first to transfer a layer letter between different applications. Information tool. But it's not just a file importer, it's a tool to return time to a motion designer. In 2017, it was released to the public and helped many designers to design UX for ergonomics and visual design with AE.

Retro layer transfer process in Sketch2AE

In fact, from the time of Sketch2AE, the field of UX motion design has gradually matured. Now, many design teams have begun to think when designing, and information is changing over time and changes inexperience. Since Sketch2AE birth, move -efficient design Normal and visual designers with more than collaboration, constantly iterative process to find a successful solution, which also continues to promote the development of tools, new tools which will be gradually integrated designer The features you need.

Now, I am very happy to share the AEUX tool with you. This is a more powerful design system for UX motion design in the After Effect.

Guide to Material Motion in After Effects

Welcome to AEUX

One of the goals of the new system is to support more mainstream applications and facilitate the flexibility of collaboration among the various members of the team. Nowadays, in Adobe's ecosystem, XD and AI have been able to share and exchange data well, but the commonality of data outside the ecology is not so good. However, with AEUX, you can import layers from Sketch and Figma and support the latest features of Sketch. In addition to this, it has these features:

• Create complex artboards increased by 93%
• Symbol nesting and symbol nesting of text are supported. You can locate symbol masters more efficiently.
• Reduce image output by plotting native AE gradients and reducing redundant images.
• The addition of functions such as position control, tracking, guidance, capitalization, rotation, and flipping greatly improves the precision control of text layers.
• Ability to automatically create groups like AE Precomps. Even if you don't use the AEUX importer, you can perform resynthesis related operations by clicking on it.
• It includes other new features, such as nested Boolean, layers, and group's Mongolian board, vague shapes, paths, and options such as shape parameters.

Poke here to download AEUX

AEUX + Figma

Although Sketch is widely used today, more and more visual designers are using Figma. AEUX is designed to help more teams work together seamlessly.

The core function of Figma is an online collaboration, so importing layer data is done through a web application that accesses the Figma API. As of now, Figma 's plug-ins are not yet able to run in the design environment, which means that the import and export of layers can only be done in a more traditional way. With programs that run online, the biggest problem is always about security.

After verifying the AEUX export app, you will be asked to enter Figma 's document URL , which will then collect all the data in each frame (panel), each frame can be downloaded separately. Any needed image will also be processing and compression, new AEUX.json drag and drop files into the middle of AE AEUX panel, then the layer will be built up.

Note: The AEUX app does not track user data and does not view or store your design in any way. It will help you convert the design in your browser to the AEUX JSON format locally. Access to file data is owned by the owner of the data.

What I have learned

Building a design tool can be difficult based on your own imagination of how other designers work. Sometimes, your intentions and ideas may not have real value, or the design path you have carefully considered is not as good as others. In fact, what I learned during the construction of Sketch2AE was more than the middle of developing the Overlord (a commercial plug-in) process.

The most important lesson I have learned in these projects is to limit the number of mental model switches. If someone wants to try to design, let them design, instead of forcing them to read the manuals and tutorials.

Stay away from complex copy/paste modes

Unlike the previous mechanism, in the new tool, we now choose to use the background to transfer layer data to avoid confusion. They are not completely real-time, but when you switch from Sketch to AE, the Layers panel shows you are ready to build a new layer. This mechanism simplifies the transfer process and allows you to focus more on the design itself.

Better interactivity

For me, the most impressive part of the design process, and the most frustrating place is trying to find out what is useful and what is not. This is completely different from the file import itself. Usually, if something goes wrong when importing the file, you must re-import the entire content. But Overlord's core philosophy is very different, and users transmit the necessary data and content when they need it. I hope this concept will become the core concept of AEUX, allowing users to stay away from complex menus and plug-in panels, allowing users to enjoy the experience of matching AE.

Tell the user what is happening

In previous versions, the synchronization and export of data were only pushed after the completion of the notification, and it was displayed at the bottom of the Sketch window, which is easy to miss. This has caused many users to keep staring and afraid to miss information during the process of importing data. (This design is really bad, I am sorry for this)

The new floating panel in Sketch now provides a dedicated location for import notifications, and this design continues into AE. From content updates, the progress bar displays to reminders that you can't draw elements, they are all clearly stated and presented.

Continue to move forward

UX motion design is evolving, and we are still trying to find a more rational design, determine which methods and techniques are effective and which are not, and determine how to find the best design method. I hope that the AEUX we created will help you move your motion design faster and have a smoother design flow.