7 little tricks to achieve the best results in UI animation
Working effectively with developers.
--
Although there are literally 97 tools outside to prototype your ideas, the finest animation tool is still After Effects. However, the issue is that you’ll be overwhelmed by so many plugins. I, therefore, chose one of the finest and most essential UI animation plug-ins.
№1. Start with the Sketch
- Make sure you name the layers properly otherwise it will be super hard to find your layers in AE.
- AEUX is a plugin that exports all Sketch layers to After Effects. Cool things for the dam
№2. Importing to After effects
- Download the aftereffects AEUX is a plugin and if you click on the build comp all your sketch layers will be copied to After effects
- You need to have ZXP Installer to install the aftereffects plugin.
№3. Download the plugin and design for workspace.
As I said, although aftereffects have powerful features, we only need 2 of the complete energy to perform UI animation. Only the layout the plugin I mentioned below and save your workspace. [ 3 ].
№4. Transition like sliding on snow.
Now you are ready with all the great plugin and you made some animation by watching youtube tutorials. Now comes the cool magic part.
- If you click on the graphic icon, it will be too chaotic to customize a lot of graphs. This is where plugins are helpful.
- Flow provides a simple interface for the adaptation of animation curves without touching the graph.
- Animation-composer’s keyframe wingman for easing your transition like sliding on snow.
№5. Exporting animation for Developers
How can developers make your animation without spending any time, that where plugin by Airbnb really shines.
- Click setting and add the demo file
- Select the destination folder and Render it
- Then preview inside AE
№6. Preview and share.
You can do it in lottiefiles if you want to preview or share your work with a community. You can even scan QR for mobile testing.
№6. Exporting UI interaction value.
Sometimes you work on the UI interactions on that time use Inspector Spacetime. It creates a value automatically for quick or android development.
- Just select the keyframes
- Select the pixel mode
- Click export you will get both text and json file
* Bonus export to gif in one click
Claps to, Adam Plouff, Google Design, TomasSinkunas, Mister Horse, AirbnbEng for making a great tool for us.
🔥 Feel free to comment your favorite plugins you use for UI animation
Recommended articles for you
- UI/UX case study for the New York Times app
- 11 Things every designer Needs To Know About Mobile App Interaction.
- Why is UX/UI designer the best job in the world?
- 5 Motivational Tips for Designers
- Lesson for Young designer from Elder Designers
My portfolio: http://johnyvino.com
