This lets you build complex animations artboard by artboard and stitch them together.
Animating items outside artboards
In XD, artboards can be placed anywhere. This lets the designer organically scale his or her design. However, the drawback to this is that you’ll need to manually make room between artboards so that when contents of artboards bleed out, it is not hard to make out in which artboard content lives.
Often you’ll want to animate objects coming in from outside the artboard. This is possible in XD, and here’s how:
- Switch to prototype mode and wire up an interaction between two artboards, then choose Auto-Animate as the action.
- Now select an object that exists on both artboards (it should have the same name and be at the same group hierarchy).
- Drag the object outside the artboard. The object will remain inside the artboard as long as (1) and (2) remain true. You can even switch to design mode and continue to manipulate the object.
- If this object is dragged over another artboard, it will re-parent to that artboard instead, unless it is in a group.
Note: If the object moves to the Pasteboard, check if there is a matching object in the artboard that it has been wired to.
The future prospect of a timeline
As a design tool, what we do best is help you create and edit designs. However, a big part of animation is not the manipulation of visuals, but also the manipulation of time. How to manipulate the delays and durations of an artboard or an individual layer is something we’ve thought a lot about.
My colleague, Senior Experience Designer Alex Poterek, relates it back to one of his professors in design school, who assigned the class a branding project and asked him and his fellow students to create a logo. “He encouraged us to keep interacting and adding to the logo until we felt like it told the brand story — no need to worry about how it looked at the end,” said Alex. “The results? Some pretty horrible looking logos. He then used a metaphor that I still use in every aspect of design: ‘take the design you think is telling your story and roll it down a hill, what are the first things that would fly off?’
Those familiar with more advanced animation tools like After Effects, Premiere, and even Flash can attest to how powerful a timeline can be to an animator. They can also tell you how complex things can become, like how one change in the middle of a timeline can cascade unintended changes to other parts of the animation. We understand the utility and power of having a timeline.
We’ve designed a timeline, reviewed it, and now we’ve all but started to build it in the app. We also took a step back and asked ourselves how much a designer can accomplish without one. This led us to look towards the design community for examples of micro interactions and other UI/UX animations; what we found out is that we can do a lot with just the basic idea of storyboard-style authoring.
This is how we approach designing Adobe XD, and in our first iteration of Auto-Animate, the timeline was the first thing to fly off when we rolled it down the hill. Does that mean we won’t eventually have one? No. But it does mean we want to find a better way to fit in the things a timeline would offer us.
Building on top of other features
When creating new features in XD, we like to look at our current tools and build off of them to compliment a new workflow. This is pretty obvious when you look at a our Time Trigger workflow we released right before our Auto-Animate feature was made public.
Time triggers and Auto-Animate were built side-by-side with the understanding that, as a stand alone, Time Triggers have its own merits. However, when you pair it with Auto-Animate, it becomes a pivotal part of the workflow. Users can chain a complex sequence of artboards together and loop them or transition them into a new sequence of artboards. This allows for a familiar way of authoring more complex (and sometimes very simple) animations.
The entire idea of chaining artboards together stemmed from the understanding that designers like to duplicate them. They do not design one artboard and then recreate that same design in a different state from scratch. Due to this being the natural case, we rely on the layer names being consistent. If a user wants something not to auto-animate they can simply change the layer name.
We’re committed to making Auto-Animate, and other features that empower UX designers, the very best they can be. To learn more about prototyping with the platform, check out our article on The Evolution of Prototyping and How to Use Them in Adobe XD, and to let us know what you’d like to see in XD, head over to adobexd.uservoice.com.