A collection of fun interactions made by Nitish Khagwal.
Andrei Rybin shows his tools and methods for interface animations. Rive is a very interesting product I’ve been meaning to try for a while!
Nanda Syahrasyad explains how to export SVGs with individual paths from Figma to be animated with CSS. This article is a part of his Interactive SVG Animations course that will be launched this fall.
Benji Taylor on creating guiding principles and designing interactions for the Family crypto wallet app: “This is not a technical post or tutorial. There are many good resources about how to craft smooth animations or design pixel perfect UI, by people much smarter than I am. This is about how we made something complex feel welcoming. It’s about what makes Family feel familiar.”
The other day, I was looking for a tutorial on a specific animation technique and found this course by Tim Gabe. It’s free and has high-quality content — worth checking out!
Vijay shared his collection of loader prototypes in the community.
“Lottielab’s editor offers the easiest, fastest and most robust way to create animations for your websites and apps, exported as Lotties, GIFs and MP4s and allows you and your team to manage all these assets in one place. And with the Lottie format being supported natively by almost all major design tools out there (Canva, AdobeXD, Origami, Webflow, Framer etc), we’ve become the most complete way for designers to create animations for all platforms.”
Christine shows how to use a Scroll To action to seamlessly connect navigation on a single-page website, create horizontal scroll effects, and scroll in multiple directions.
A great practical guide showcases the principles of transition animation with examples that are basic, compact, and can be used immediately by anyone in their design process. These insights are not rules set in stone, but rather guiding considerations for new product creation.
A quick how-to video from Zander on creating a glowing animation inspired by the Disney logo. (And one more with a hover scale effect.)
Glowing loading animation in figma, supafast.
— Zander Whitehurst (@zander_supafast) October 16, 2023
Celebrating Disney turning 100 🥳 pic.twitter.com/uzXZSTFjFr
Step 2: Learn from Vijay Verma how to create a cute animation using variables and conditions.
Create something spooky! Here's a quick tutorial to design this little guy in @figma using variables and conditions 👻. Small video shared and also get the code cheatsheet shared below. 📷✨ pic.twitter.com/K0TsE9iSiK
— vijay verma (@realvjy) October 20, 2023
Rad product and home page! “ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It’s available on your favorite tools, like Framer, Figma, and React.”
Lottielab is a new tool for creating and managing Lottie animations that won Product of the Day at ProductHunt this week. Images can be imported from Figma, SVGs, or Lottie files, and exported as Lottie, GIF, or MP4 to any platform. From Drew, a co-founder of Lottielab: “We are streamlining this cluttered process into a simple, seamleass, all-in-one workflow, with all the benefits of modern design tooling fit for today’s product development teams — being web-based, collaborative and easy to use — no After Effects knowledge needed.”
A new tutorial from Vijay Verma on creating an animation for a loader indicator shaped like a glass filled with liquid. The prototype uses a few variables and conditions, and he shares them in the cheat sheet in the thread.
Another quick @figma tutorial to create this animation using variable and conditions 🥤. Small video to create this included. And get the code cheatsheet shared below. ✨ pic.twitter.com/VSiyS9jLSu
— vijay verma (@realvjy) July 19, 2023
One of the fun test files that Figma engineer Willy Wu used for testing advanced prototyping. “With stuff like this, we’re entering Turing-complete territory… it’s only a matter of time before someone gets Doom running in Figma!”
In light of #config23, just wanted to share this fun test file I made while working on Advanced Prototyping. Stuff like this is now possible in @figma using Variables and Conditionals. pic.twitter.com/kCvUCwmOzk
— Willy Wu (@willyvvu) June 21, 2023
The all-new LottieFiles is the hottest release of this week: “Create production-ready animations within Figma and export them as a Lottie. Apply animated presets to a single frame or string together multiple frames to create your fun animation. Bring the power of motion to your designs with LottieFiles for Figma.”
“Learn how to create an immersive parallax effect right inside Figma, in less than 15 minutes.”
Tutorial from Samarth Jajodia on creating a cool animation with a few shapes, gradients, and blend modes with Smart Animate.
Cool technique from Nitish Khagwal for creating animated liquid mesh gradients.
How I create liquid mesh gradients in @figma without any plugins, a thread 🧵... pic.twitter.com/5Vhm02h0FP
— Nitish Khagwal ✨ (@nitishkmrk) May 3, 2023
A simple but fun technique for creating cool animations with mirrored components.
Random silly Monday fun in @figma with mirrored components pic.twitter.com/jfFRgvzCFN
— Double Glitch 🇺🇦 (@double__glitch) May 1, 2023