Google's design team released a motion effect tool that allows UI and motion effects to be seamlessly connected

Editor's note: In order to better promote UI and motion design, the Google design team has developed many new tools. One of them is the integration of Sketch2AE. Today's AEUX is also a newly upgraded motion tool for similar purposes.

The importance of motion in design is unquestionable. It can provide background information, guide users to interact and operate, and provide effective navigation clues. However, it is not always easy to integrate a new field and information into the established and existing UX design process.

Before the advent of motion rendering tools like Lottie, even in 2016, which is very close to now, it still feels like a dark age for UX motion, even though there were many new design patterns at that time. Preparing visual materials for AE usually means using AI to make the corresponding materials first, after complex imports and conversions, and after a lot of inevitable redesigns and adjustments, there are so many unpredictable situations that designers often exceed deadlines.

In order to eliminate as many useless steps as possible in the animation production process, I started building an internal tool called Sketch2AE at Google in mid-2016. It is essentially the first tool to transfer layer information between different applications. But it is not just a file importer, it is also a tool that gives time back to animation designers. In 2017, it was publicly released and helped many designers with UX animation design and designers who use AE for visual design.

The retro layer transfer process in Sketch2AE

In fact, since the time of Sketch2AE, the field of UX motion design has gradually matured. Now, when designing, many design teams have begun to think about how information changes over time. Since the birth of Sketch2AE, motion designers have mostly collaborated with visual designers to find successful solutions in the process of continuous iteration, which has also continuously promoted the development of tools, and new tools will gradually integrate the functions needed by designers.

Now, I’m excited to share AEUX with you, a more powerful design system for UX motion design in After Effects.

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 between team members. In the Adobe ecosystem today, XD and AI can already share and exchange data very well, but the commonality of data outside the ecosystem is not so good. However, with AEUX, you can import layers from Sketch and Figma, and support the latest features of Sketch. In addition, it has the following features:

• Create complex artboards 93% faster
• Supports symbol nesting and text symbol nesting, which can locate symbol masters more efficiently.
• Reduce image output by drawing native AE gradients and reducing redundant images.
• By adding functions such as position control, tracking, guiding, case override, rotation, and flipping, the precision control of text layers is greatly improved.
• Ability to automatically create groups like AE Precomps. Even if you don't use the AEUX importer, you can still perform recomp operations with a single click.
• Includes other new features such as nested Booleans, layer and group masking, shape blur, path and parametric shape options.

Click here to download AEUX

AEUX + Figma

Although Sketch is widely used nowadays, more and more visual designers are starting to use Figma. AEUX aims to help more teams collaborate seamlessly.

Figma’s core function is online collaboration, so importing layer data is done through a web application that accesses the Figma API. As of now, Figma’s plug-in cannot run in the design environment, which means that the import and export of layers can only be done in a more traditional way. The biggest issue with using an online program is always about security.

After verifying the AEUX export app, you will be asked to enter the document URL of Figma. The app will then collect all the data for each frame (artboard), and each frame can be downloaded separately. Any required images will also be processed and compressed. Drag and drop the new AEUX.json file into the AEUX panel in AE, and the layers will be built.

Note: The AEUX app does not track user data, nor does it view or store your designs in any way. It will help you convert the designs in your browser to AEUX JSON format locally. The access rights to the file data belong to the owner of the data.

What I Learned

It can be hard to build a design tool based on your own assumptions about how other designers work. Sometimes your intentions and ideas may not have real value, or the design path you carefully considered may not be as good as others have outlined. In fact, I learned more while building Sketch2AE than I did while developing Overlord (a commercial plugin).

The most important lesson I learned from these projects is to limit the amount of mental model switching. If someone wants to try to design, let them design it, instead of forcing them to read manuals and tutorials.

Stay away from complicated copy/paste patterns

Unlike the previous mechanism, in the new tool, we 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 layer panel will show that new layers are ready to be built. This mechanism simplifies the transfer process and allows you to focus more on the design itself.

Better interactivity

For me, the most impressive and exhausting part of the design process was trying to figure out what worked and what didn't. This is very different from importing files, where if something goes wrong you have to re-import the entire thing. But Overlord's core philosophy is very different, where you only transfer necessary data and content when you need it. I hope this philosophy will be the core philosophy of AEUX, allowing users to completely move away from complicated menus and plugin panels and enjoy an experience that matches the AE experience they expect.

Tell users what’s happening

In previous versions, data synchronization and export only push notifications after completion, and it is displayed at the bottom of the Sketch window, which is easy to miss. This caused many users to keep staring at the data import process, fearing that they would miss the information. (This design is really bad, I am sorry for this)

Now in Sketch, the new floating panel provides a dedicated location for import notifications, and this design is also carried over to AE. From content updates, progress bar displays to reminders of elements that cannot be drawn, everything is clearly explained and presented.

Keep moving forward

UX motion design is constantly evolving, and we are still trying to find more reasonable designs, determine which methods and techniques are effective and which are ineffective, and determine how to find the best design methods. I hope that the AEUX we created can help you advance motion design faster and have a smoother design process.