AE Intro videos

Part 1: How to import your Sketch file into After Effects

By the end of this video, you will be able to seamlessly bring your Sketch files into After Effects, and have them ready for animation! 

What you will learn

• How to download and install the AEUX plugin for Sketch and After Effects
• Learn how to export your design from Sketch using the 1-click workflow with the AEUX plugin
• Learn how to import your Sketch file into After Effects using the 1-click workflow with the AEUX plugin

Links used: AEUX, ZXP Installer

Part 1b: How to import your Figma file into After Effects

You'll need to watch the previous lesson to learn how to install the AEUX plugin for After Effects. Once you've done that, come back and watch this video. 

Basically AEUX is a plugin for AE, a plugin for Sketch, and a plugin for Figma. 

By the end of this video, you will be able to seamlessly bring your Figma files into After Effects, and have them ready for animation! 

Links used: AEUX, ZXP Installer

Part 2: How to build an icon animation in Adobe After Effects

By the end of this video, you will be able to turn your design into an icon animation in After Effects even if you have no previous experience!

What you will learn

• Learn the icon animation workflow 
• Learn how to work with vector shape layers
• Learn how to create and modify your keyframes and preview your animation in After Effects

Make sure you watch the next video where you will learn how to design polished looking timing in After Effects.

Part 3: How to design polished looking timing in After Effects

By the end of this video you will learn a simple and easy way to use the After Effects Graph Editor, how to work with velocity curves and easing, and how to create professional animation timing that feels great for your users. 

What you will learn

• Learn the icon animation workflow 
• Learn how to work with vector shape layers
• Learn how to create and modify your keyframes and preview your animation in After Effects

Part 4: How to present your icon animation on your phone and hand-off assets to engineers

In this step-by-step video, you will learn how to present your animation on your phone and how to hand-off your animation to your developers and engineers. 

You will be able to do all this with the free LottieFiles Website, LottieFiles After Effects Plugin and LottieFiles App.

What you will learn

• Learn how to install and use the free LottieFiles for After Effects Plugin
• Learn how to present your UI Animation directly on your phone using the free LottieFiles App (iOS and Android)
• Learn how to post your animation to the LottieFiles Website
• Learn how to hand-off your animation to your engineers using the LottieFiles Website

Links used: LottieFiles Website, Lottie Files After Effects Plugin, LottieFiles for iOS, LottieFiles for Android, ZXP Installer

Using the AE Flow plugin to apply industry standard easing

By far the easiest way, and the way endorsed by the most UI/UX & Product designers is to simplly use the Flow plugin.

The plugin costs $30 and lets you select the curve you want to use – and apply it across all your keyframes with a single click. In addition, I've created the iOS and Material Presets for you to use.

The plugin also allows you to create your own curves, save them, and share them with your team. In addition, the plugin allows you to use expressions, or apply the easing directly to your keyframes.

UI Animation with After Effects workflow (watch first)

Ok this is it. If you’ve never worked on a timeline, used keyframes, or manipulated motion or curves, this essential primer will get your head wrapped around the business of quickly and confidently creating video prototypes from your design source files. These are the basic concepts that I wish someone had explained to me when I first started doing this work.

After watching this lesson, you will be well on your way to being a UI Animation rockstar.

The workflow is as follows

✅ All of your imported design assets are externally linked files (just like placed files in Illustrator and not like embedded files in Illustrator). When you import them, they will be found in your project window.

✅ Compositions are like ‘layer groups’ in Photoshop. Think of them more like a musical composition (as a single entity comprised of multiple moving parts) and less like a static visual composition. They contain layers and animation, and can be ‘nested’ into other comps as a single layer for more complex animations.

✅ The timeline is where you’ll be spending most of your time. The timeline is layers based (just like in Photoshop) and is where your design assets will be animated.

✅ By creating and editing keyframes on your layer properties, you create animation. Keyframes are markers in time that hold values. When you change those values, animation happens! Keyframes are live and can be modified at any time.

✅ The graph editor is where you create smooth, gestural UI Animation You can also use a plugin like Flow that you will learn about in a few lessons. 

✅ When your work is done and looks awesome, you’ll need to render it out to share with your team, client, or stakeholders, or post to your portfolio site. This is typically a movie, a GIF file, or a JSON file.

Create one click GIFS with GifGun

Animated GIF files can be a critical part of the UI animation process. Whether you’re using them directly in your online portfolio, your social media, Dribbble, emailing to your client/boss/stakeholder, or posting to your team Slack channel, GIFs are a unique format with several pros. The main advantage is that they auto-play, loop, and can quickly communicate a key interaction under development in a way that is extremely powerful for selling your ideas. Nearly all platforms support GIFs.

Unfortunately, After Effects does not let you export GIFs directly.

The most common non-GifGun workflow involves importing video into Photoshop and going through a lengthy and painful export process that may have to be repeated to optimize for file size and quality.

GifGun is a one click tool that renders high quality GIFs nearly instantly. Since I adopted it, it changed my entire process and the quality of my life when I work. Now I can stay in the design flow and export GIFs as needed without interrupting my process.

• Link: aescripts.com/gifgun
• Cost: $29.99
• Free demo: Yes

Here are my 2 major reasons to adopt GifGun for UI animation.

✅ Speed

Because the UI animation workflow depends heavily on versioning and iteration, it is critical to have a frictionless workflow that lets you generate assets on the fly. Because GifGun is essentially plug-and-play, you can continue to focus on making great UI animation, rather than spending hours exporting your assets in Photoshop.

✅ Quality

Traditionally, exporting high quality GIFs has been challenging, to say the least. One of the things I love about GifGun is that the authors basically wrote their own compression engine. It consistently produces high quality files at a decent file size.