UI/UX Animation Tutorial | Figma & Phase
Want to level up your UI/UX animation game? In this tutorial, I’ll show you how to animate like a pro using Figma and Phase – perfect for designers who want to bring their interfaces to life!
We’ll be recreating the carousel rotating animation from Klarna’s mobile app – a smooth, modern UI effect that’s perfect for fintech, e-commerce, or lifestyle apps. You’ll learn how to build the motion structure in Figma and then animate it beautifully in Phase.
📌 What you’ll learn:
How to prepare your Figma file for animation
Using Phase to create smooth, dynamic UI animations
Rebuilding Klarna’s iconic rotating carousel step-by-step
Pro tips to make your animations feel slick and natural
🔧 Tools used:
Figma (UI design) https://www.figma.com/community/file/...
Phase (advanced UI animation) https://phase.com/
💡 Perfect for: UI/UX designers, product designers, and creatives looking to add polish and personality to their prototypes.
👇 Don’t forget to:
👍 Like
💬 Comment
🔔 Subscribe for more weekly design tutorials
0:20 - Figma setup
1:48 - Animation 1
4:37 - Animation 2
6:56 - Animation 3
8:32 - Prototyping in Figma
👋 I'm here:
/ thedesignely
https://beacons.ai/designely
#UI #UX #Figma #design