Icon animation for UX/UI & product designers

Lessons (7)

7:34

Import your Sketch file into After Effects (Part 1)

4:18

Import your Figma file into After Effects (Part 2)

9:02

Build an icon animation

8:34

Design polished looking timing

9:18

Preview your animation on mobile and hand-off assets to engineers

1:14

UX in Motion Bonus Content

3:00

UX in Motion Live Design Team Workshop

Lesson details

Import your Sketch file into After Effects (Part 1)

Before you get started, make sure you download these course assets so that you can follow along.

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! (Watch chapter 1b to learn how to get your Figma files into After Effects).

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

Resources: Sketch AEUX ZXP Installer or you can use Anastasiy's Extension Manager.

In the next chapter you will learn how to build an icon animation in After Effects.

UX in Motion

Issara is the founder and instructor of UX in Motion, a website that helps UX/UI & Product Designers learn UI animation fast. He's given trainings to design teams at companies such as Dropbox, Airbnb, Slack, Oracle, and Salesforce to name a few.

Comments

UX in Motion