I like creating smooth transitions in Figma, each for ideas and final designs. But for extra finesse and control over easing types, it is best to export from Figma into Adobe After Effects and finish the job there—let me show you!
Smooth(er) Transitions in Figma and Adobe After Effects
Smooth transitions in apps and web sites are where motion design can really shine. They enhance communication while bringing a level of pleasure to the user’s experience.
In a typical UX design workflow, as we close in on the deliverables stage, on the point of hand files to developers, we refine and ideal the motion in our work. Figma will do a number of this for us, and we will add labels and comments to speak what our intentions are. But to create truly smooth transitions, and high fidelity prototypes, we will take our Figma files and move the whole lot across into After Effects.
UI/UX Kits on Envato Elements
Before we dive in let me quickly let you know about Envato Elements; a library of creative assets all able to use with easy business licensing. You’ll get unlimited access to UI kits, web templates, fonts, and other useful stuff for any designer.
Interface Transition Example
The video above gives by far the most effective demonstration of the motion design on this tutorial, but here’s a fast text explanation too.
To exhibit the improved final result Figma and After Effects can provide you with we’re going to make use of this easy UI mockup. It’s a finance app, which shows a user’s balance, shows monthly activity, and has an off-canvas navigation for locating more options.
What we’d wish to do is construct each element of the UI onto the screen one after the other, to guide the user when it comes to what to take a look at, and in what order. We also need the menu block to slip onscreen, and slide offscreen when the user chooses.
Prototype in Figma
The most effective approach to do that in Figma is to work backwards from the top screen. So you’ll be able to see here I’ve duplicated the screen once to the left, then moved the monthly activity block off screen. I’ve then duplicated that screen, and moved the welcome block off from there.
We then click Prototype in Figma’s right sidebar menu, and begin dragging arrows to link each screen up. For the primary linkage you’ll see I’ve chosen for it to be triggered after a delay of 800ms. It’s an quick transition, so won’t need any user interaction to start.
Arrange Navigation Link
The primary transitions we created are all triggered robotically, each with a delay to construct the screen little by little.
The navigation block, nevertheless, will transition onto the screen when the “hamburger” button is clicked. So we select On click and decide to Open overlay.
We then arrange a Close overlay motion on the close button.
Adding Smart Animation to Our Transitions
For those who were to run the prototype in Figma now, you’d see that the whole lot happens so as, but that the weather just “pop” onto the screen. There’s no direction and it’s quite disorientating for users. It’s probably not clear where things are coming from, and where they’re going when the user’s done.
By going back to our arrows in Figma’s prototype designer we will change them from Quick, to Smart animate.
With the addition of this smart motion, it’s now clear where each element has come from.
The smart animate has applied easing to the motion to offer the motion authenticity.
Go Further by Specifying the Easing
Easing describes how quickly an object accelerates, achieves its top speed, then decelerates. Without easing in a digital environment, animated elements would move in a linear fashion. They’d begin at their top speed, carry on throughout the animation at that very same speed, then simply stop. Easing gives moving objects a more authentic, real-world feeling.
These three charts graphically show the foremost kinds of easing you’ll wish to use in UI design.
Enter easing is what you’d typically use when bringing something onto the screen. Exit easing is the reverse, for taking things off the screen. Standard easing is what you’d likely use for a component which stays on screen, but moves around for whatever reason.
While Figma’s smart animation applies a default of ease in (which is wonderful for our needs) I prefer designing my motion with greater detail. With a custom bezier curve we will define exactly how quickly our motion gets in control, and the way quickly it draws to a detailed.
Overall, this has given the weather in our prototype way more authentic transitions.
Figma (sadly) doesn’t yet allow custom bezier curves for the open and shut overlay transitions.
Even Higher Transitions in Adobe After Effects
Figma has done a implausible job of constructing us an interactive prototype, with reasonably authentic motion, but we will refine things even further using After Effects.
For instance, one thing we will’t yet do in Figma is overlap the delayed elements. We’ve got to attend for one transition to finish before one other is triggered. This can be a shame, as we’d just like the screen construct to feel like one big piece of orchestrated motion, quite than separate items.
Export Design From Figma to After Effects
While we don’t have that level of control in Figma, we do have it in After Effects. So a typical UI/UX design workflow could be, because the design nears completion, to maneuver this form of thing over to AE.
To maneuver our work over we will use a Figma plugin called AEUX, which you’ll be able to download from the developer’s website after which import to Figma via the Plugins > Manage plugins.. menu. It isn’t yet available via the Figma Community, so once installed you’ll find it under Plugins > Development.
With a few clicks you’ll have the ability to take your Figma file straight over to After Effects, and whilst you would possibly notice some things are a bit of misplaced (you’ll be able to fix this by repositioning the guilty elements) the whole lot will likely be neatly arranged in layers along the timeline.
Animating in After Effects
The weather we’ve brought into After Effects are all on their very own layers, but not one of the motion we created in Figma has been brought over. We’ve got to do this ourselves by adding keyframes along the timeline for every object we would like to animate. Let’s animate the welcome and the monthly activity blocks.
- Select the layers/elements you need to animate.
- Hit P for Position after which click the little stopwatch icons to put down a keyframe wherever the playhead is sitting on the timeline.
- I add a keyframe initially of the timeline, and a few seconds later.
- With 2 keyframes set for every block, move the playhead back to the primary keyframes and move the weather offscreen.
- We now have some animation!
You’ll notice, nevertheless, that the motion we now have is a bit odd. By default AE has added linear easing, which looks very unnatural as we mentioned earlier.
Easy Ease Keyframes
To repair this, select each keyframes from the primary object, then hit F9 to show them into “Easy Ease” keyframes.
This may give our element an ease-in-out motion, but we will improve on that.
Separate Dimensions
The little chart icon to the highest left of the timeline gives us access to the curve which defines the easing type. But we will’t edit it from here since it’s referencing each the X and Y axes. So to get access to mess around, we first must right-click the layer name and go Separate Dimensions. Now, once we click on the X Position we will edit the curve to our liking.
As a final improvement, stagger the monthly activity block in order that it enters the screen a bit of after the welcome block (but before it’s finished moving) and also you’ll have way more effective motion design to pass to the developers.
Tip: Flow Plugin for After Effects
To assist things much more, I like to recommend you try the Flow plugin for After Effects ($30). From the developer’s website:
“Flow brings a straightforward interface to After Effects for customizing animation curves, without having to enterprise into the ageing, confusing graph editor. Gone are the times of slow, heavy expressions, or fighting with speed and influence (what do those even mean?) – just make a curve, hit APPLY and also you’re gold!”
With the additional tools Flow brings you’ll be able to control your curves significantly better, save your favorite motion curves and apply them to multiple elements.
Conclusion
I hope this has helped you understand the additional finesse you’ll be able to give your prototypes and motion design, by starting your work in Figma but then letting After Effects take things to the subsequent level. After Effects helps us get more detail and precision in our UX work.
Learn UX on Tuts+
We’ve got a number of UX video tutorials on Tuts+, from information architecture, through core principles, to motion design, all taught by industry experts. Have a look!
