An animation tool for UX designers who dont have time for AfterEffectsCreating any kind of UX animation is a challenging process because there are sooo many moving partsthe design elements (color, shadows, etc.), the trigger (what activates the animation), the timing (what happens when), and soon.Not only that, theres a multitude of animation tools to select from, like Rive and Adobe AfterEffects.Dont get me wrong, you can do some cool animations in Rive and After Effects, but theyre pretty advanced (and pricey). I dont know about you, but my brain goes blank trying to figure out After Effectseach time I open the app, I quickly closeit.But I recently tried Phase to create a few micro-animations, and I didnt have my typical brain freeze when building the animations (as a side note, its alsofree!).Phase offers templates to use to help getstartedPhases interface kinda feels like Figma, so using its tools and navigating the site came naturally. Its tools are simplified so you dont need a lot of practice or learn hidden tricksjust go in and start animating.Build a micro-animation inPhaseTo get a better look at Phase, lets go over the process to create a micro-animation in Phase by demoing the Submit button animation below.Submit button animation, created inPhaseHere are the main steps wellreview:Design in Figma (or natively inPhase)Import designs toPhaseCreate the micro-animationExport the animationHandoff to developers1. Design in Figma (or natively inPhase)First things first, you need to build your UI element. I dont think I need to tell you how or where to designdo whats best foryou.Before we get into animating with Phase, there are some best practices to keep inmind:Create text layers natively in Phase: If exporting from Figma, the text will import as vectors (you can only scale it), so create your text in Phase if youll need to manipulate it.Create simple shapes in Phase: If youre only using simple shapes (circles or squares), create them in Phase so you have better control over properties, like scaling theradius.Name layers in Phase: I know, I knowthis one is painful. But you need to name your layers in Phase to keep better track of the design (this is especially crucial when selecting a layer to animate).Use Phases version history: Animating is hardif you make a big mistake that Command+Z cant fix, the version history can save the day (Phase autosaves every 30 minutes as you work, but you can manually create versions in the version history).Using Phases version historyfeature2. Import designs toPhaseTheres multiple ways to import designs to Phase (from Figma, Illustrator, or whichever design tool you use), so choose whichever import strategy works best for yourflow.I. Use the Figma to Phase ExportpluginThe Phase Export plugin helps bring design elements straight from your Figma file to a new file in Phases desktop site. This avoids having to download and upload files for a faster designflow.Note: Using the plugin creates a new file in Phase, but you can simply copy/paste the layers from one Phase file toanother.How tosteps:In Figma, search for the Phase Export plugin in the bottomtoolbarRun the Phase ExportpluginSelect an element in the canvas Select Export to PhasebuttonPhases Figma plugin allows you to export straight to a new PhasefileII. Import asSVGIf you use Illustrator or Sketch (or dont use Figma plugins), you can download your designs from the tool as a SVG, then import into Phase without losing quality orlayers.How tosteps:In your native tool, download the designs asSVGIn a Phase file, open the hamburger menuSelect Insert SVG Select correct SVGfileImport SVGs into Phase without losing quality orlayersIII. Import as image (PNG orJPEG)If you dont need to manipulate specific properties like fill or borders, then you can import an element as an image into Phase using the same process as above (except select Insert image in the Phasemenu).3. Create the micro-animationNow for the fun partanimating. Similar to Figmas dev mode, you can toggle the Animate mode on and off (or use keyboard shortcut, A).Ill demo animating the Submit button (shown above) that transitions from its default, hover, and loadingstates.I. Position all elements in their startingplaceAfter importing all needed elements, you need to position each in their starting places for the beginning of the animation.For the button animation, I have four main elements: a background for the button, a text layer, a loader symbol, and a mouse-pointer.Note: Even though the loader symbol will be hidden at the start of the animation, I have it visible so I know its initial position iscorrect.Position all design element in their correct places in the PhasefileII. Toggle Animate modeonWhen Animate mode is on, a timeline appears at the bottom of the interface which is used to manipulate the animation duration as well as create keyframes.On the left of the timeline, you can change the total duration of the animation, and the current time the time-picker is on (or use the picker itself to move throughout the sequence).Above the timeline, a small toolbar appears that you can toggle Animate mode off, play the animation, loop the animation, and change the playbackspeed.Phases interface shows a timeline when Animate mode is toggledonIII. Create keyframesOk, oknow we really start toanimate.What I want to animate: The mouse-pointer hovers over the Submitbutton.Select the mouse-pointer Go to the right properties panel Keyframe its current XY position at 0s time-mark (Select the diamond that appears in the propertys textfield)Move the time-picker to 0.3s time-mark Drag the mouse-pointer to the new position (this will automatically create a new keyframe)Move the mouse-pointer from its initial place to hover over the SubmitbuttonWhat I want to animate: The button transitions from its default to hoverstate.Move the time-picker to when the mouse pointer touches the button (about 0.15s) Keyframe the buttons background current fill and bordercolorsMove the time-picker to 0.3s Swap the button background fill and border colors (from purple toblack)Swap the fill and border colors to indicate the buttons hoverstateWhat I want to animate: The mouse pointer emulates a click so the button activates.Move the time-picker to 0.8s Keyframe the mouse pointers XY scale(100%)Move the time-picker to 0.95s Decrease the mouse pointers XY scale to65%Move the time-picker to 1.1s Increase the mouse pointers XY scale to100%Decrease and increase the mouse-pointers scale to emulate aclickWhat I want to animate: The button activates and shows the loadersymbol.Keyframe the width of the button background (102px) when the mouse pointers scale is increasing (at1.0s)Move the time-picker to 1.2s Increase the button background to 130px (to fit the loader next to thetext)*Move the time-picker to 1.0s Keyframe the loader symbols opacity(0%)Move the time-picker to 1.2s Increase the loader symbols opacity to100%*Note: You may also need to keyframe the layers XY position if you have unintended movement in the animation.Increase the buttons width so the loader symbol can appear next to thetextWhat I want to animate: The loader symbol rotates to indicate the request is processing.Move the time-picker to 1.0s Keyframe the rotation of the Active layer of the loader (the purple section) at 0degreesMove the time-picker to 3.0s Increase the rotation to 450degrees**Note: You may need to edit the layers origin so it rotates properly, shown in the nextstep.Rotate the loader symbol to give feedback that the request is processingEdit a layersorigin:Move the time-picker to 0s Select the element Select Edit origin under Transform in the right properties panelPosition the origin at the middle of the element (0,0) so it rotates about the center (the origins position depends on your animation needs)Use Edit origin mode to modify a layers origin so it animates asintendedWhat I want to animate: The button disappears (I.E., the webpage completed the submission).Move the time-picker to 2.7s Select all layers Keyframe the opacity(100%)Move the time-picker to 3.0s Change the opacity to0%Decrease all layers opacity at the end of the animation4. Export the animationOnce youre happy with the animation, its time to export it (yay!). Phase allows you to export in 4 file types: Lottie (.json), dotLottie (.lottie), MP4, orGIF.All you gotta do is select the bold, blue Export button at the top-right of the interface.Export your Phase animation in GIF, MP4, Lottie, or dotLottieI recommend exporting the animation as a Lottie (.json) since its vector-based and scales the animation without losing quality. But if you need to export as GIF or MP4, duplicate the file and increase the animation size for exporting purposes (and hand-over the original file to developers).5. Handoff to developersYou may not need to export and just need to hand-off the animation to developers so they can implement the animation (they need specs like timing, interpolation, etc.).I. Share the file to collaboratorsHow tosteps:Select Share at the top-right of the interfaceInvite collaborators by email Change the file privileges to Can view or CaneditOR copy the collaboration link at the bottom of the modal to send directly (this will only work with existing file collaborators)Invite collaborators to the Phase file through the SharebuttonII. Use the inspect feature to view the animations specsHow tosteps:In the animation file, select the Inspect mode toggle at the top-right of the interface (it looks like Figmas dev modetoggle)Select preferred color value (HEX, RBG, etc.) and time unit (seconds or percents) in the Inspect settings (under the 3-dot menu in the top-right corner)Select a layer from the left layerspanelReview each property specification on the rightpanel**Note: Each animation property tells you the initial value and the start and finish specs for time-marks, value, ease, and bezier. (This really helps close the gap by breaking down the animation for developers.)Use the Inspect feature to get the animation specs per eachlayerThat was a lot, but Phase makes creating animations and collaborating on fileseasy.If youve wanted to dive into micro-animations, but tools like Rive or After Effects felt hard to learn (or expensive), Phase is a great tool to put in your animation toolbox. Its interface is comfortable, and its quick to get the hang of creating any kind of animation.Let me know what you think of Phase in the comments!Happy (micro)animating!Level up your UX micro-animations with Phase was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.