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.)

Step 2: Learn from Vijay Verma how to create a cute animation using variables and conditions.

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.

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!”

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.

A simple but fun technique for creating cool animations with mirrored components.

Lauren shows how to create a micro animation (also known as micro interaction) using a heart icon. These interactions add a really fun touch, and I love that the tutorial uses a heart icon from another tutorial by Miggi.

With the Walkthrough widget, you can give your stakeholders an interactive tour with smooth animations without being there yourself. You can use it to introduce file content or explain a complex flow.

One-click export of Figma prototypes and animations to GIF, WebM, or MP4.

“The plugin Shape Move is specifically designed to allow you to create more dynamic and engaging animations within designs by animating the anchor points of vector shapes. An anchor point is a fixed point on a graphic object that serves as a reference for scaling, rotating, and positioning. You are able to customize the timing and easing of the animations, as well as the duration and delay of each animation.” See an impressive demo video.

Christine Vallaure shares a few practical prototyping techniques and advanced tips & tricks. They include using Auto Layout with Smart Animate, stateful transitions with sections, nesting prototypes, interactive components, and more. This video is also available as an article.

If that game wasn’t enough, check out these spatial 3D animations made using SkewDat plugin. There is a tutorial as well.

“This workshop will be a deep dive into the prototyping features in Figma. We will cover many of the basic frame-to-frame navigation prototypes for devices, and touch upon some of the more advanced capabilities that you can unlock with video, interactive components, and sections.”