Emotional Slider Animation / After Effects and Figma / Design Course

hey everyone today we're going to break down another sweet effect which by the way was applied in a few taxi applications we'll work in figma and after effects also this case was developed by our tech team and the source code was published on github the source files for the design and animation however will definitely be available in patreon for our subscribers in general this isn't the first ever effect that we're encountering in real applications so don't be shy and just enjoy playing around with it make awesome stuff and don't let anyone tell you any bs about bad user experience bad user experience only applies when you've tried it out on your target audience and highlighted the errors now let's do this i am in figma making an art board for iphone 11 pro adding the header how was your drive let's make the font size 42 pixels like the header this is the sub screen so we can close it and draw a cross icon i'm changing the icon size and the border width [Music] ride status is front and center ride finished reducing font size and evening it out [Music] below adding one of the states for reviewing the ride all in all we'll have three of them now i'm sketching an emoji for the good state below i'm making a button for leaving [Music] comments [Music] lower down i'm placing a done button creating a rectangle adding text [Music] now i'm adjusting the font changing the text and aligning it with the rectangle let's round down the button's edges to 14 pixels and change the color to black all we have to do now is add a slider for reviewing the ride [Music] the slider is going to be the done button with rounded edges i'm drawing a line and shifting one layer down so it doesn't cover the slider getting back to our emoji and finishing up the eyes [Music] do the screen prototype is ready to go now it's all about the visual components adding color adjusting font styles working out our emoji's actual emotion checking all indents between elements and don't forget about the add a comment [Music] icon [Music] so [Music] [Music] [Music] so [Music] [Music] [Music] the screen's first condition is all set now let's make other states which will be okay and hideous [Music] so [Music] [Music] [Applause] [Music] [Applause] so [Music] so [Applause] [Music] [Applause] [Music] so [Music] [Music] so the design is ready and it's time for animation all work and after effects to export artboards quickly you'll need a e u x which is a free plugin so if you don't have it yet set it up in figma and after effects by following the site's instructions i'm selecting the artboard opening a e u x in figma and clicking send selection to after effects and the selected artboard gets exported with all the layers into after effects let's repeat with the other two artboards [Music] the plugin shortens exports considerably but not necessarily accurately so i'm uploading my reference png screens from figma while adding reference screens into after effects it's clear that some design elements have shifted around that's how the plugin works but it's not a big deal and an easy fix [Music] ready now i'll do the same thing for the other screens and all they need is to fix up the emoji [Music] shapes let's move all the emojis to the main [Music] screen [Music] [Music] [Music] [Music] check everything one more time it's time to focus on the transition from the good to the okay condition the layers with eyes need to be dismissed so they're not in our way i'm creating a keyframe for the path now let's repeat the process for another eye style i select the keyframe and copy it by pressing command c or ctrl c for windows and putting it into the necessary layer as a keyframe we can already see the animation of transitioning from one condition to the other but right now it looks really rough before finishing this up i'm shifting all the emoji layers to a separate pre-composition to make things easier let's set the guidelines and flip the eyes along the vertical axis now the path morphs smoothly without unnecessary eye movements i'm copying the eye and flipping it horizontally ah here i add the keyframe rotate to make the eye slope match the design it's time to add the mouth animation so i'm doing the same thing i did with the eyes i'm copying the path and putting it into the necessary layer as a keyframe i'm moving on to the next emoji condition adding new keyframes so that there is a brief pause between emotions [Music] copy the keyframe again from the path and adding it to the end the morphine looks crooked we'll have to adjust the shapes manually i'm substituting a screen reference now i'll displace the shape points to new positions so that it's the same form as in the reference now the morphine is nice and smooth copying the left eye and putting it into the right one's place [Music] i'm putting up opposite values into the keyframes for rotate i want to increase the timeline to make the animation longer so i'm pressing command k and typing 10 seconds into the composition settings window i'm copying and putting in the path from the layer with the hideous condition [Music] [Music] the emoji conditions are all done now we have to loop the animation and i'm putting all the keyframes into reverse order for future pupil animation i'm adding keyframes to the same spots the eyes have let's smooth out the motions and change linear keyframes to bezier curves i'm using the motion plugin but you can also do it with a regular graph editor let's try it the animation flows better i'm finishing up the pupil animation now i'm creating keyframes and moving them randomly i've already added keyframes to the pupils and that's where the eyes will be returning to their original position finishing up the timings [Music] during the animation for the hideous condition i had the idea of having the emoji vibrate a bit to do this i'm adding a null object and using parenting layers with [Laughter] eyes i'm adding the keyframe positions with the alt key held down and that's how an expression is created let's write wiggle 10 comma 5. [Music] the numbers represent frequency and amplitude value so the emoji's mouth doesn't move i'm using parenting for the null object as you can see the wiggle animation works using parenting for the pupils too let's select appropriate values for wiggle to have wiggle work on a particular section of the timeline i'm adding expression control slider control [Music] let's select 10 for the first value and use parenting for the first slider control effect we do the same thing for the second five value but adding slider control to the second effect oops we messed up here we're missing a right parentheses symbol first i'm adding keyframes with a zero value then the values i selected beforehand to complete the wiggle effect i'm putting the values in reverse order so they revert to zero let's shift the keyframes to the spot where i need to activate this effect and adjust timings and values i'm adding a change of background color creating a rectangle and dragging it all the way down i'm copying the color from figma and creating keyframes with that color in after effects i'll do the same thing with other colors in the places where the background needs to change [Music] [Music] [Music] now i'm animating the slider adding keyframe positions to the places where the background color changes and moves along the x-axis [Music] so [Music] [Music] [Music] the last thing we have to do is the status text okay good and hideous so let's add keyframes to position and opacity the sign will appear transparent on the right and then disappear on the left adjusting the timings [Music] now just duplicating the layer for other states [Music] changing the text for every emoji condition [Music] let's adjust the timings one last time and bam the animation is all set [Music] our development team brought this animation to life the source code is in our github there are lots of interpretations later on in adobe xd html java and others in my honest opinion this animation is lit and totally deserves some love in the form of feedback see you again soon

Channel: Cuberto Design

Views: 43,797

Keywords: design, cuberto, web design, learn, ui ux, figma, after affect, ux design, ui design, graphic design, ui ux design, figma tutorial, ui tutorial, ui animation, ux, ui design tutorial for beginners, cuberto design, digital design, digital, course, after effects, after effects уроки, product design, after effects animation, liquid swipe after effects, uxd, liquid, ui design tutorial, figma уроки, figma web design, figma plugins

Id: zVSvDU17pxE

Length: 28min 13sec (1693 seconds)

Published: Tue Sep 15 2020