May 5, 2025
Quick Animations with Phase.com
Introduction
I often run into the same challenge of not having enough time to animate the little things that matter. Whether it’s a button hover, a transition, or a loading spinner, motion often gets deprioritised in the rush to deliver.
Recently, I discovered Phase.com, and it’s been a game-changer. As someone who rarely touches animation, I decided to try out Phase for some quick motion work.
In this post, I’ll walk you through how I tried using Phase for a quick concept animation. It’s a tool I’d genuinely recommend for a fun design exercise, whether you’re a designer or even a product manager. Take a break from the serious stuff and turn your creative ideas into playful, silly animations! ✨ 😎
About Phase
Phase is a browser-based motion design tool that lets you bring your Figma designs to life. No code, no steep learning curve.
Why Motion Matters in UX
Good motion design isn’t just about delight, it’s functional. Motion helps:
Communicate transitions: It shows users where they came from and where they’re going.
Guide attention: Animations can gently direct focus to important elements.
Provide feedback: Visual cues like loading spinners or micro-interactions offer reassurance that something is happening.
Without motion, some moments are harder to convey. And while tools like After Effects offer depth, they often require a steeper learning curve and longer setup time, not ideal when you're moving fast.
The interface is intuitive and user-friendly, allowing me to focus on creativity rather than technical hurdles or steep learning curves.
What Makes Phase.com Different
Here’s what stands out:
Timeline-based Interface: Intuitive drag-and-drop controls that feel more like prototyping than animation software.
Real-time Preview: See changes immediately as you adjust motion properties like opacity, scale, or position.
Figma Integration: Import your Figma designs with layout preserved, no rework needed.
Web-native Exports: Export your work as Lottie JSONs, GIFs or MP4, ready for handoff or embedding.
It’s clean, light, and doesn’t try too hard which is perfect for quick concept animations. 😌
It’s lightweight, intuitive, and lets me bring simple animations to life quickly.
Using Phase for Quick Animations
1. Importing from Figma
I used the Phase Figma plugin to send my design directly into Phase. It was fast, no need to export assets or rebuild anything.
2. Adding Animations
Some effects in Phase:
Fade In/Out: Great for transitions, modals, and overlays.
Trim Path: Perfect for drawing strokes like checkmarks or circular loaders.
Move/Scale: For sliding cards, expanding buttons, or hover effects.
Each effect can be added to layers on the timeline, and you can preview the animation instantly.
3. Exporting Your Work
Phase supports exports to:
Lottie JSON: Ideal for embedding in web or mobile apps (especially with tools like LottieFiles or Framer).
GIF: Quick and dirty for Slack, presentations, or documentation.
If your GIF looks pixelated, try exporting as Lottie and preview it in tools like LottieFiles for better quality and smoother playback.
Export your work as Lottie JSONs, GIFs or MP4, ready for handoff or embedding.
Once I exported my Lottie JSON, I can upload it to my Lottiefiles account. It's really quick and easy.
Next, I opened the LottieFiles plugin in Figma and went to Workspaces, where I had uploaded my Lottie JSON. From there, I inserted it as a GIF. (I used the small 500x500 GIF size, which is why it looks slightly pixelated. For higher quality, you can download medium or large sizes, but you’ll need to upgrade your LottieFiles plan.)
Voila! I am done with my quick concept animation.
Conclusion
Phase.com makes it easy to add motion to your designs without the complexity. It’s fast, fun, and fits perfectly into a busy design workflow. If you’ve been putting off animation because of time or tools, this is a great place to start! Hope you have fun creating your animations!
