Jul 11, 2019
A New System for Designing Motion With Both Sketch and Figma
Introducing AEUX, a tool for integrating motion design into a UX workflow—with fewer speed bumps than ever.
Motion design helps guide users, giving context and providing clues on how to best navigate. But it hasn’t always been easy to integrate this new field into established UX design workflows.
As recently as 2016, it still felt like the dark ages of UX motion design. There were a lot of new patterns but this was still before Lottie let us actually render animation on device. Preparing a visual design for After Effects meant rebuilding art inside of Illustrator, taking on complex importing and conversion processes, and padding deadlines for repeating the whole dumb process because of inevitable design revisions.
To help eliminate these useless steps, in mid-2016 I started building an internal tool at Google called Sketch2AE. It was the first tool of its kind to transfer layer data between host apps. But it was more than a file importer. It was a way of giving time back to people. In 2017, it was released publicly and has helped both motion designers working in UX, and visual designers starting in After Effects.
Since then, the field of UX motion design has matured. Many design teams now think that UX includes thinking about how information gets experienced through time. Motion designers working with visual designers through many iterations can make a major difference in finding successful solutions. Since the first release of Sketch2AE, tools have grown and the integration demands for motion designers have increased. I’m really excited to share AEUX, a more robust system for working with UX motion design in After Effects.
Welcome to AEUX
One of the goals of the new system is to support more host apps and increase flexibility when working between teams. Exchanging data within the Adobe ecosystem is now well supported in XD and Illustrator, but with AEUX, you can import layers from Sketch and Figma, and support new Sketch features. Plus…
- Speed has been boosted by 93 percent on build time for complex artboards.
- Symbol overrides for text and nested symbols are now supported. Symbol masters are located more efficiently, putting an end to beach-balling.
- Image exporting has been reduced by drawing native Ae gradients and eliminating redundant images.
- Text layer accuracy has been majorly improved with position, tracking, leading, upper/lowercase overrides, rotation, and horizontal/vertical flipping.
- Groups have the option to be automatically created as Ae precomps. Additionally, groups of layers may be precomped and un-precomped with a click even if you don’t use the AEUX importer.
- Additional new features like nested booleans, layer and group masking, shape blurs, options to works with paths or parametric shapes.
AEUX + Figma
While Sketch is widely used, many visual designers have also begun using Figma. AEUX was designed to support working seamlessly when switching between teams.
Figma’s core feature is online collaboration, so exporting layer data is done through a web app that taps into the Figma API. As of right now, Figma plugins cannot run inside of the design environment, which means layer exporting is done as a more traditional export/import. With a design app that runs online, security is the most important consideration.
After authenticating the AEUX export app, you are asked to enter a Figma file URL. The app will gather all the data for each of the frames (artboards) within the file. Each frame may be downloaded individually and any required images will be processed and zipped up as well. Drop the new AEUX.json file into the AEUX panel in After Effects and layers will build.
Note: the AEUX app doesn’t track user data, and does not view or store your designs in any way. It is a blind robot that does the conversion of your designs into the AEUX JSON format right within the browser on your machine. Access to file data is managed by the owner of the file from the Share menu.
Lessons learned
Building tools based on how you imagine another designer working can be tough. Sometimes your best intentions aren’t really valuable or people find new paths that you hadn’t planned for. I learned a lot building Sketch2AE and then learned even more building Overlord (shameless plug for a commercial tool).
The biggest lessons I’ve taken from these projects are to limit the amount of mental mode switching. If someone is trying to design, let them design, instead of forcing them to read a manual.
Remove copy/paste
Layer data is now transferred behind the scenes in order to limit confusion. It’s not totally instant, but by the time you switch from Sketch to Ae, the panel should update to show new layers ready to build. This simplifies the transfer process and allows you to focus more on design.
Make it interactive
For me, one of the most compelling parts of the design process is trying things and finding what works and what doesn’t. This sits pretty contrary to file importing where you must restart everything again if you don’t prep one layer right. Overlord’s core idea is to let you transfer what you need when you need it. I wanted this concept to be central in AEUX, which required getting away from menu-diving and into a floating plugin panel for Sketch to more closely match the expected tool experience in Ae.
Show me what’s happening
In the previous version, notifications showed only after a successful export and were easily missed at the bottom of the Sketch window. So you had to wait, and guess if it worked. (This was a really poorly designed experience. I’m sorry about that.)
A new floating Sketch panel also provides a dedicated place for notifications (both success and failures). The idea of showing the process extends into Ae as well. From the panel updates to progress bars on heavy comps to failure notification for elements that Ae cannot currently draw.
Moving forward
UX motion design is growing and we’re all still learning what works and what doesn’t, and how to best execute and test these designs. As we do, we’re trying to share what we learn. I hope AEUX helps you work faster and enjoy the process more.
Interested in working with us? Learn more about Google UX and send us your portfolio or demo reel.
