Adobe Xd To After Effects

Like other Adobe tools, the great thing about working with After Effects is that it works seamlessly with other Adobe tools, and allows you to import and work with native files from other pieces of Adobe software, including Photoshop, Illustrator, Character Animator, Adobe XD, and Animate. Plus, it’s an award-winning tool.
When comparing Adobe After Effects CC vs Adobe XD, the Slant community recommends Adobe XD for most people. In the question “What are the best tools for prototyping mobile interactions/animations?” Adobe XD is ranked 2nd while Adobe After Effects CC is ranked 14th. The most important reason people chose Adobe XD is.

In this video, we're going to learn how to export Adobe XD files directly into Adobe After Effects, so that they are ready to be animated.-.

Auto-Animate, which enables you to easily create prototypes with immersive animated transitions, is the biggest addition to Adobe XD’s prototyping features yet. To demonstrate the slick effects you can create with Auto-Animate, we caught up with Howard Pinsky, senior XD evangelist at Adobe, who also runs a popular YouTube channel covering XD news, and Jonathan Pimento, senior product manager on Adobe XD.

Both Howard and Jonathan have been tinkering extensively with Auto-Animate, and in this article, they’ll show you some stunning examples of the new feature in action and how it can improve your UX designs.

First, let’s start with Jonathan’s animations:

Filter Coffee App

With the help of Adobe XD’s new Auto-Animate feature, I was able to animate the vector paths to modify the different levels of coffee, water, and milk. The ability to animate different vector paths enables you to create some nifty animations for icons and other UI elements.

Reel iPad App

Auto-Animate allows you to animate the difference in properties for the same object. Even without a timeline, you can achieve some basic sequencing in XD. Notice how the scenes slide up from the bottom in a sequence? You can achieve the same effect by moving them off the artboard on the start screen and stacking them so that they animate in one after the other.

Reel Mobile App

This example demonstrates how you can easily combine gestures like tap, drag and time with Auto-Animate to build end-to-end experiences for mobile. The subtle easing effects are achieved by using the new easing functions like bounce, snap and wind up.

Sliding Cards

This example shows how you can also animate the position of the mask and image using Auto-Animate. I’ve set up the example to use drag, and then with Auto-Animate, I’ve easily animated the card images by repositioning and resizing their masks.

Next, take a look at what Howard has been creating with Auto-Animate:

Burger Explosion

This was a fun interaction to work on. After stumbling across a static image of an exploded burger on Dribbble, I had the idea to bring it to life. With Adobe XD now supporting Illustrator files, I grabbed a delicious-looking burger spread from Adobe Stock and popped it straight into XD. From there, I utilized Auto-Animate and drag triggers to create the interactions to simulate how a user could simply drag toppings away.

Photo Editing Prototype

Creating smaller interactions is fun, but for this project, I wanted to dive into something more in-depth. Seeing that I’m constantly editing photos on my phone, I wanted to build out a similar experience using Adobe XD, complete with a gallery, cropping/rotating, and image adjustments. The cropping interaction, in particular, was a fun interaction to tackle as it involved animating masked shapes and images.

Mobile Scrolling Interaction

This shot came to be after a few users asked me if XD supports ‘scroll’ as a trigger. While it doesn’t (just yet), it is certainly possible to create a similar interaction using just two or three artboards and Auto-Animate.

Parallax Landing Page

I’m not sure why, but I’ve always been a fan of parallax interactions (when they’re done correctly), so once Auto-Animate was released, I decided to start experimenting. Like many of the other examples, I simply had to design the various artboards, and XD took care of all the complex keyframing in the background. The idea with this interaction is that a user would be able to hover overtop of the various destinations to expand them, then click on one to see more details and kick off the parallax effect.

Day to Night Toggle Switch

While I love designing complete projects, sometimes it’s fun working on a single element – like this switch! Using an imported Illustrator file, I added the various day/night layers into a pill-shaped mask, then designed both states (day/night), making sure to move the elements on each artboard. Since paths animate beautifully in XD, creating the shifting moon was quite simple.

Tesla Apple Watch Concept

As tech savvy as Tesla is, it surprised me to find out that they don’t have an official Apple Watch app. So like any curious designer would do, I started to think about use cases. Using XD, I envisioned how a trunk/frunk interaction could look and feel like using a simple drag gesture.

Adobe Xd Export To After Effects

Many more examples can also be found on Howard’s Dribbble page.

Join the community

The possibilities of what you can do with Auto-Animate are endless. We’d love to see what you are creating with the new feature, so please reach out to the team @AdobeXD on Twitter and make sure to include the #AdobeXD hashtag. You can also talk to the team on Facebook, and share your prototypes on Behance, tagging them with #MadeWithAdobeXD and selecting Adobe XD under “Tools Used” for the opportunity to be featured in the Adobe XD newsletter.

Let’s animate the web!

Further resources

For more UX insights sent straight to your inbox, sign up forAdobe’s experience design newsletter.

Design, prototype, and share all in one platform with Adobe XD. Adobe XD is the fastest way for design teams to create user experiences for websites, mobile apps, voice experiences, and more.

The latest release of Adobe XD introduces Auto-Animate, the biggest addition to the tool’s prototyping features yet. It enables you to easily create prototypes with immersive animations. Simply duplicate an artboard, modify object properties (such as size, position, and rotation), and apply an Auto-Animate action to create an animated transition between artboards.

“Adding Auto-Animate to XD was something that we’ve been thinking about for a long time,” explains Alex Poterek, a senior experience designer at Adobe who helped design Auto-Animate, and is now offering his best advice, tips, and tricks for using the animation feature. “For a while XD offered only basic transition types that mimicked your phone’s native transitions such as push, slide, and dissolve. Those offerings were great to get a very basic feel for user flow and build consensus among your team.”

“Today’s screen experiences, however, allow you to use motion in a more prominent way. It can be used to help a user create a mental model of where content is moving to and from, allowing them to orient themselves while navigating. In some cases it’s a way of creating a visual hierarchy, maybe a call to action or a temporary message that fades in and out of the screen. Motion can be used for an even more basic reason like creating a pleasant and less robotic experience for the user.”

The different types of animations easily achieved in Adobe XD: drag, navigate, and time.

Plan ahead with your animations

Adobe Xd To After Effects Free

The most important thing to be mindful of when using Auto-Animate is to have an actual plan for how it will animate. “When creating your first artboard, it’s best to know how the next artboard(s) will resolve,” Alex recommends. ”You might have one artboard that goes to two or three other artboards depending on where you click, so have a rough idea of how you want each of those artboards to animate if they’re all using the Auto-Animate feature.”

The reason planning ahead is important is because your layer structure matters. “With Auto-Animate we try to keep things as simple as possible for the user,” Alex points out, “so if XD sees the same two layers between artboards, it will automatically animate all the changes that happened to this layer.”

For XD to associate those layers, they have to share a name and live in the same group hierarchy. This means that if you have ‘Layer A’ in ‘Group B,’ and then on another artboard ‘Layer A’ in ‘Group C,’ XD will not recognize that layer as being the same and won’t animate. So, the way you design the layer structure of your first artboard will be important to the success of your next artboards.

With Drag Gestures you can take Auto-Animate a step further, as it enables you to simulate the drag experience of touch devices.

Adobe Xd Vs After Effects

“The new drag gesture is a really great complement to Auto-Animate because it’s essentially your finger scrubbing (dragging) a timeline,” Alex Poterek explains. “By that I mean your finger drag will scrub the animation between two artboards, just like you would scrub forward and backwards in a YouTube video. The start of the ‘video’ is your first artboard, and the end of the ‘video’ is your second artboard. When you assign drag to an object you’re saying this is the start of the ‘timeline’ and wherever the object ends up on the next artboard is the end of the ‘timeline’.”

You don’t have to define the drag direction in XD. It figures out the dominant direction and distance of the object’s changes between ‘artboard A’ and ‘artboard B,’ which results in a very easy and intuitive way of creating a drag gesture.

Here we see how quickly you can create a drag trigger by duplicating an artboard and making small changes.

We asked Alex to share his top ‘do’s’ and don’ts’ for using Auto-Animate in Adobe XD:

Adobe After Effects Animation

The do’s

Manage your layers and groupings from the start.
Copy and paste assets instead of re-drawing them. Duplicate your artboards, and then manipulate the duplicate — this way you know your layer structure and layer names are going to be consistent.
Use symbols when they make sense. If you have something repeated across multiple artboards, and you know the layers inside the symbol won’t ever animate, then use a symbol. This way, if you need to make a minor change to static layers, you won’t have to update all artboards. Otherwise, if you do have to update manually, you might notice you missed one, and it will auto-animate the differences of the old static layers and the updated ones.
Play around with the easing options. They can give you completely different feelings. Adobe XD now includes new easing options like ‘Snap,’ ‘Wind,’ ‘Bounce,’ and each of these can really change the feel of your web animation.
Use animation distance to give the illusion of objects moving at different speeds.
Use timed transitions to string together a series of animations. If you want a series of effects to happen, then add a duplicate artboard between animations and set the transition to “time.” From there you can start a new animation automatically.

The don’ts

Don’t change the layer structure in one artboard but not the other.
Don’t go too long without testing your web animations in the preview window.

The future of Auto-Animate

The XD team has a lot of plans for Auto-Animate in the future, but first we want to see how designers actually use the new feature.

“We gave users a lot of other possibilities by shipping After Effects support around the same time as Auto-Animate, to hopefully supplement what they can’t achieve yet in XD,” Alex Poterek explains. “One of the things we hope to find out is what is and isn’t enough control, and when does it become too complicated and fail to reach the principles we set for XD when it comes to simplicity and performance.”

Watch this space for more updates in the future and check out 10 examples for using auto-animate to improve UX.