Make Easy Transitions with Easing in Figma and After Results

Easy transitions in apps and web sites are the place movement design can actually shine. They improve communication whereas bringing a stage of enjoyment to the person’s expertise.

In a typical UX design workflow, as we shut in on the deliverables stage, on the point of hand recordsdata to builders, we refine and ideal the movement in our work. Figma will do a number of this for us, and we will add labels and feedback to speak what our intentions are. However to create really easy transitions, and excessive constancy prototypes, we will take our Figma recordsdata and transfer every little thing throughout into After Results.

Interface Transition Instance

The video above provides by far one of the best demonstration of the movement design on this tutorial, however right here’s a fast textual content clarification too.

To exhibit the improved finish end result Figma and After Results can provide you we’re going to make use of this easy UI mockup. It’s a finance app, which reveals a person’s steadiness, reveals month-to-month exercise, and has am off-canvas navigation for locating extra choices.

What we’d love to do is construct every ingredient of the UI onto the display screen one after the other, to information the person by way of what to have a look at in what order. We additionally want the menu block to slip onscreen, and slide offscreen when the person chooses.

Prototype in Figma

One of the best ways to do that in Figma is to work backwards from the top display screen. So you possibly can see right here I’ve duplicated the display screen as soon as to the left, then moved the month-to-month exercise block off display screen. I’ve then duplicated that display screen, and moved the welcome block off from there.

We then click on Prototype in Figma’s proper sidebar menu, and begin dragging arrows to hyperlink every display screen up. For the primary linkage you’ll see I’ve selected for it to be triggered after a delay of 800ms. It’s an on the spot transition, so gained’t want any person interplay to start.

Arrange Navigation Hyperlink

The primary transitions we created are all triggered mechanically, every with a delay to construct the display screen little by little.

The navigation block, nonetheless, will transition onto the display screen when the “hamburger” button is clicked. So we choose On click on and select to Open overlay.

We then arrange a Shut overlay motion on the shut button.

Including Good Animation to Our Transitions

If you happen to had been to run the prototype in Figma now, you’d see that every little thing occurs so as, however that the weather simply “pop” onto the display screen. There’s no path and is kind of disorientating for customers. It’s not likely clear the place issues are coming from, and the place they’re going when the person’s completed.

By going again to our arrows in Figma’s prototype designer we will change them from Immediate, to Good animate.

With the addition of this sensible movement, it’s now clear the place every ingredient has come from.

The sensible animate has utilized easing to the movement to provide the movement authenticity.

Go Additional by Specifying the Easing

Easing describes how rapidly an object accelerates, achieves its prime pace, then decelerates. With out easing in a digital surroundings, animated components would transfer in a linear vogue. They’d start at their prime pace, keep on all through the animation at that very same pace, then merely cease. Easing provides shifting objects a extra genuine, real-world feeling.

These three charts graphically present the primary varieties of easing you’ll need to use in UI design.

Enter easing is what you’d usually use when bringing one thing onto the display screen. Exit easing is the reverse, for taking issues off the display screen. Customary easing is what you’d seemingly use for a component which stays on display screen, however strikes round for no matter purpose.

Whereas Figma’s sensible animation applies a default of ease in (which is ok for our wants) I desire designing my movement with larger element. With a customized bezier curve we will outline precisely how rapidly our movement will get on top of things, and the way rapidly it attracts to a detailed.

General, this has given the weather in our prototype far more genuine transitions.

Even Higher Transitions in Adobe After Results

Figma has completed a improbable job of constructing us an interactive prototype, with moderately genuine movement, however we will refine issues even additional utilizing After Results.

For instance, one factor we will’t but do in Figma is overlap the delayed components. Now we have to attend for one transition to finish earlier than one other is triggered. This can be a disgrace, as we’d just like the display screen construct to really feel like one bathroom piece of orchestrated movement, reasonably than separate gadgets.

Export Design From Figma to After Results

Whereas we don’t have that stage of management in Figma, we do have it in After Results. So a typical UI/UX design workflow could be, because the design nears completion, to maneuver this type of factor over to AE.

To maneuver our work over we will use a Figma plugin referred to as AEUX, which you’ll be able to obtain from the developer’s web site after which import to Figma by way of the Plugins > Handle plugins.. menu. It isn’t but out there by way of the Figma Neighborhood, so as soon as put in you’ll discover it underneath Plugins > Improvement.

With a few clicks you’ll be capable to take your Figma file straight over to After Results, and while you may discover some issues are slightly misplaced (you possibly can repair this by repositioning the responsible components) every little thing can be neatly organized in layers alongside the timeline.

Animating in After Results

The weather we’ve introduced into After Results are all on their very own layers, however not one of the movement we created in Figma has been introduced over. Now we have to try this ourselves by including keyframes alongside the timeline for every object we need to animate. Let’s animate the welcome and the month-to-month exercise blocks.

• Choose the layers/components you need to animate.
• Hit P for Place after which click on the little stopwatch icons to put down a keyframe wherever the playhead is sitting on the timeline.
• I add a keyframe at the start of the timeline, and a few seconds later.

• With 2 keyframes set for every block, transfer the playhead again to the primary keyframes and transfer the weather offscreen.
• We now have some animation! 

You’ll discover, nonetheless, that the movement now we have is a bit odd. By default AE has added linear easing, which seems very unnatural as we talked about earlier.

Simple Ease Keyframes

To repair this, choose each keyframes from the primary object, then hit F9 to show them into “Simple Ease” keyframes.

This can give our ingredient an ease-in-out movement, however we will enhance on that. 

Separate Dimensions

The little chart icon to the highest left of the timeline provides us entry to the curve which defines the easing sort. However we will’t edit it from right here as a result of it’s referencing each the X and Y axes. So to get entry to mess around, we first must right-click the layer title and go Separate Dimensions. Now, after we click on on the X Place we will edit the curve to our liking.

As a last enchancment, stagger the month-to-month exercise block in order that it enters the display screen slightly after the welcome block (however earlier than it’s completed shifting) and also you’ll have far more efficient movement design to cross to the builders.

Tip: Circulation Plugin for After Results

To assist issues much more, I like to recommend you try the Circulation plugin for After Results ($30). From the developer’s web site:

“Circulation brings a simple interface to After Results for customizing animation curves, without having to enterprise into the ageing, complicated graph editor. Gone are the times of sluggish, heavy expressions, or combating with pace and affect (what do these even imply?) – simply make a curve, hit APPLY and also you’re gold!”

With the additional instruments Circulation brings you possibly can management your curves significantly better, save your favourite movement curves and apply them to a number of components.

Conclusion

I hope this has helped you perceive the additional finesse you can provide your prototypes and movement design, by starting your work in Figma however then letting After Results take issues to the subsequent stage. After Results helps us get extra element and precision in our UX work.

Study UX on Tuts+

Now we have plenty of UX video tutorials on Tuts+, from data structure, by means of core ideas, to movement design, all taught by trade specialists. Have a look!