Make Smooth Transitions with Easing in Figma and After Effects

Make Smooth Transitions with Easing in Figma and After Effects

[ad_1]

I really like creating easy transitions in Figma, each for ideas and last designs. However for additional finesse and management over easing varieties, you must export from Figma into Adobe After Results and end the job there—let me present you!

Easy(er) Transitions in Figma and Adobe After Results

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

In a typical UX design workflow, as we shut in on the deliverables stage, on the brink of hand information to builders, we refine and ideal the movement in our work. Figma will do numerous this for us, and we are able to add labels and feedback to speak what our intentions are. However to create actually easy transitions, and excessive constancy prototypes, we are able to take our Figma information and transfer all the things throughout into After Results.


Interface Transition Instance

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

To reveal the improved finish outcome Figma and After Results may give 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

The easiest way to do that in Figma is to work backwards from the top display screen. So you may 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 immediate transition, so gained’t want any person interplay to start.

Arrange Navigation Hyperlink

The primary transitions we created are all triggered routinely, 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.

on click open overlay in figmaon click open overlay in figmaon click open overlay in figma

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

Including Sensible Animation to Our Transitions

For those who had been to run the prototype in Figma now, you’d see that all the things occurs so as, however that the weather simply “pop” onto the display screen. There’s no route and is sort of disorientating for customers. It’s probably not clear the place issues are coming from, and the place they’re going when the person’s carried out.

By going again to our arrows in Figma’s prototype designer we are able to change them from Instantaneous, to Sensible animate.

smart animate transitionssmart animate transitionssmart animate transitions

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

The good animate has utilized easing to the movement to offer the movement authenticity.

Go Additional by Specifying the Easing

Easing describes how rapidly an object accelerates, achieves its prime velocity, then decelerates. With out easing in a digital atmosphere, animated components would transfer in a linear trend. They’d start at their prime velocity, keep it up all through the animation at that very same velocity, then merely cease. Easing offers transferring objects a extra genuine, real-world feeling.

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

3 types of easing3 types of easing3 types of easing

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. Commonplace easing is what you’d probably use for a component which stays on display screen, however strikes round for no matter motive.

Whereas Figma’s good animation applies a default of ease in (which is okay for our wants) I favor designing my movement with higher element. With a customized bezier curve we are able to outline precisely how rapidly our movement will get in control, and the way rapidly it attracts to a detailed.

custom beziercustom beziercustom bezier

Total, this has given the weather in our prototype way more genuine transitions.

Figma (sadly) doesn’t but enable customized bezier curves for the open and shut overlay transitions.

Even Higher Transitions in Adobe After Results

Figma has carried out a implausible job of constructing us an interactive prototype, with fairly genuine movement, however we are able to refine issues even additional utilizing After Results.

For instance, one factor we are able to’t but do in Figma is overlap the delayed components. We’ve got 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, quite than separate objects.

Export Design From Figma to After Results

Whereas we don’t have that degree 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 are able to 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 Group, so as soon as put in you’ll discover it underneath Plugins > Growth.

aeuz pluginaeuz pluginaeuz plugin

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

imported into after effectsimported into after effectsimported into after effects

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. We’ve got to do this ourselves by including keyframes alongside the timeline for every object we wish to animate. Let’s animate the welcome and the month-to-month exercise blocks.

  • Choose the layers/components you wish 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 originally of the timeline, and a few seconds later.
stopwatch iconsstopwatch iconsstopwatch icons

  • 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 we’ve got is a bit odd. By default AE has added linear easing, which appears to be like 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.

easy ease keyframeseasy ease keyframeseasy ease keyframes

It will give our ingredient an ease-in-out movement, however we are able to enhance on that. 

Separate Dimensions

The little chart icon to the highest left of the timeline offers us entry to the curve which defines the easing kind. However we are able to’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 are able to edit the curve to our liking.

separateseparateseparate

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

Tip: Stream Plugin for After Results

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

“Stream 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 velocity and affect (what do these even imply?) – simply make a curve, hit APPLY and also you’re gold!”

With the additional instruments Stream brings you may 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 may give your prototypes and movement design, by starting your work in Figma however then letting After Results take issues to the subsequent degree. After Results helps us get extra element and precision in our UX work.

Be taught UX on Tuts+

We’ve got a lot of UX video tutorials on Tuts+, from data structure, by means of core rules, to movement design, all taught by trade specialists. Have a look!

[ad_2]

We will be happy to hear your thoughts

Leave a reply

WebForgers
Logo
Enable registration in settings - general