The team at LottieFiles explains how to recreate an animation from Apple’s iPad mini website.
Another cool artifact from William Wu’s work on spring animations.
I threw this together while working on @figma's new Spring Animations feature with @rickrajj and @nikolasklein. It's a quick HTML/CSS/JS prototype to help us explore the different kinds of animations that were possible.
— William Wu (@willyvvu) June 21, 2022
Each tile has a different animation which plays on hover. pic.twitter.com/lFByB9He8L
Love this behind-the-scenes video of Nikolas Klein and William Wu from Figma experimenting with how fast they can set a spring animation based on a feeling.
One more @figma behind the scenes around building the editor for spring animations w/ @willyvvu and @rickrajj.
— Niko (@nikolasklein) June 22, 2022
Once we got a rough version working we tried out how fast you can set a spring animation based on a _feeling_ (aka me making weird noises).
Have fun! pic.twitter.com/YOa5N81NiF
Aninix is a powerful UI animation plugin for Figma: “Easily create motion design systems, export animations for promos, and provide animation inspector for developers.”
Cool update to a LottieFiles plugin: “Instantly change the colors of your animation. Apply your own custom colors, or try out our carefully curated preset color palettes.”
Supafast!
🌁 Animating carousels in @figma, supafast! pic.twitter.com/1PYgLmsJ6g
— Zander Whitehurst (@zander_supafast) June 13, 2022
This deep dive into the making of the feature is my favorite kind of a blog post on Figma’s blog: “Building spring animations took our engineering team back to the classroom — to make animations that are both natural and accurate, we borrowed principles from physics. We’re excited to share the mechanics behind the movement, and the story of how spring animations bounced their way into Figma.”
Andrei Iancu shared two more kits with loading animations — see also his really cool Kit 3 with delayed steps.
Create more natural and fluid transitions for your prototypes with spring presets or a custom animation.
Dan & Xiang demonstrate what you can do with the LottieFiles Figma plugin.
A cool explainer of impressive interactive effects made with Figma, Spline, and Anima.
In this tutorial, one of the designers from Noun Project gives a few quick tips on using Figma’s “Smart Animate” tool to animate icons in your UI.
Cool walking animation by Bruno, Community Advocate for Figma in Portugal.
Cool (but creepy) character animation experiment by Miggi from Figgi.
Progress from today. Four frames, four component sets... creepy crawley gait / walkcycle in @figmadesign #prototype #animation #walkcycle pic.twitter.com/6fmmwTtv28
— ❖miggi_from_figgi (@miggi) January 10, 2022
Breakdown of using Figma to illustrate and animate Vijay’s first NFT.
Making Magic Potions in @figmadesign. Here is a sneak peek of my first NFT collection @magikpotions, which I'm working on. illustrated and animated purely in Figma. Yes, we can create animation in Figma as well. Breakdown below 🧵 pic.twitter.com/LRHF7SChC4
— vijay vΞrma (@realvjy) November 6, 2021
Miggi created a single-point infinity sign, then Vijay came up with a cool animation. Team work 🙌
Beautiful effect! See also the source file at the Community.
“In this video, we will guide you on how to select a single frame from a Lottie animation from the LottieFiles Library and export it to Figma. Then, we will use this new SVG and place it as part of our UI and animate it in Figma using the prototype feature.”