Mei L.
Sample Lottie section was practical
Knowing which features Lottie does not support saved me from rebuilding animations after developers tested them.
After Effects for UI motion: animate interfaces with intent
Animate buttons, transitions, loaders and app walkthroughs in After Effects, then export videos, Lottie files and clear motion specs
Created by Kenji Mori
- Updated August 2026
- English
- Intermediate
What you will learn
- Plan interface motion around purpose: feedback, orientation and focus
- Use keyframes, easing and the graph editor to control timing precisely
- Import Figma designs into After Effects as editable layers
- Build reusable rigs with parenting, nulls, mattes and expressions
- Produce an app walkthrough video with a phone mockup
- Export Lottie animations and write motion specs for developers
Course content
Motion with a purpose
Bringing designs in from Figma
- Article: Preparing Figma files for animation 8 min
- Article: Importing layers with AEUX 10 min
- Article: Shape layers and imported art 9 min
- Article: Organising a motion project 7 min
Core interface animations
- Article: Button press and feedback 8 min
- Article: Loaders and progress indicators 9 min
- Article: Screen transitions 12 min
- Article: Staggered lists 9 min
- Article: Toggles, checkboxes and success states 9 min
Rigs and expressions
- Article: Parenting and null objects 9 min
- Article: Masks and track mattes 10 min
- Article: Useful expressions for UI work 11 min
- Article: Controls and reusable templates 8 min
Making an app walkthrough video
- Article: Storyboarding the walkthrough 8 min
- Article: Phone mockups and touch indicators 10 min
- Article: Text, captions and pacing 9 min
- Article: Sound and final timing 8 min
Export and handoff
- Article: Rendering for web and social 8 min
- Article: Exporting Lottie with Bodymovin 11 min
- Article: Writing motion specs for developers 9 min
- Quiz: Final check 6 min
Requirements
- Adobe After Effects (Creative Cloud subscription or trial)
- Basic familiarity with Figma or another design tool
Description
Motion explains interfaces. A sheet that slides up from the button that opened it, a list that settles into place, a button that responds the instant you press it: these details make products feel clear and solid. After Effects remains the standard tool for designing and presenting this kind of motion, and this course teaches it specifically for interface work.
What you will create
Working from a sample fitness app designed in Figma, you will animate a series of real interface moments and finish with a short product walkthrough video.
- Button feedback, toggles and loaders
- Screen transitions and staggered lists
- A rigged phone mockup with touch indicators
- A 30 second app walkthrough for a landing page or app store
- Lottie exports and motion specs developers can implement
What makes this course different
Most After Effects training targets broadcast graphics or visual effects. Here every technique is chosen for product work: timing that matches real interfaces, easing curves you can hand to developers and file structures that survive design changes. We spend a lot of time in the graph editor because that is where good motion is made.
You should be comfortable with basic design tools and ideally have opened After Effects before, though section 1 reviews the essentials. The course uses a current Creative Cloud release of After Effects. Free plugins such as AEUX for importing Figma layers and Bodymovin for Lottie export are covered where they help.
Who this course is for
- Product and UI designers adding motion to their work
- Motion designers moving into product and app work
- Marketers who produce app demo videos
Instructor
Kenji Mori
Motion and 3D designer teaching Blender, After Effects and interactive animation for product work
- 4.3 instructor rating
- 22 reviews
- 6,250 students
- 3 courses
- Sample
I work as a motion and 3D designer for digital products. Most of my week is spent animating interface concepts, making product renders for landing pages and building small interactive animations that ship inside apps.
I started in graphic design, so I teach 3D and motion for people who think visually but find the software intimidating. We focus on the handful of tools and settings that do most of the work: modelling with modifiers in Blender, lighting and rendering with Cycles and EEVEE, the graph editor in After Effects, and state machines in Rive.
I keep projects small and finishable. You will not spend hours on a scene you never complete. Each course ends with pieces you can put in a portfolio or hand to a developer.
Student reviews
Jakub M.
Sample The graph editor finally makes sense
I had been using easy ease on everything. The lesson on shaping ease out curves changed my work overnight.
Ravi N.
Sample Walkthrough video landed on our homepage
I followed the storyboard approach and our app walkthrough is now live. Captions for muted autoplay was a great tip.
Priscila O.
Sample Very relevant to product design
Unlike most After Effects courses, this one sticks to interface motion. The motion spec section is excellent.
Anna W.
Sample AEUX workflow saved hours
Importing from Figma used to be painful. The preparation checklist alone is worth it.
Olumide A.
Sample Good balance of craft and process
The timings in frames approach is simple and it made my animations feel much tighter.
Diego F.
Sample Assumes some After Effects knowledge
Section 1 helps, but complete beginners might struggle with the pace of the rigs section.
Keep exploring
All 3D and Motion courses
More in 3D and Motion
$59.99
Enroll now