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.”
“In this workshop we will cover how to apply motion and animation when prototyping with Figma. We will cover concepts like transitions, delays, timing, smart animate, and interactive components.”
Yet another fantastic tutorial by Double Glitch. The use of dodge & burn in animations is really smart and produces a beautiful effect.
And here's the tutorial on how to create this animated heart in @figma
— Double Glitch 🇺🇦 (@double__glitch) February 14, 2023
Might be a bit long, so brace yourself! pic.twitter.com/5ws4dC8cPu
Figbruary submissions keep delivering gems! Double Glitch shows the behind-the-scenes process of making a cool animated light switch.
#Figbruary2023
— Double Glitch 🇺🇦 (@double__glitch) February 11, 2023
'Smart animate a unique toggle. Get creative with it!' by @rogie
Spilled some skeuo over this one.
Also, does it count as a late submission for the light switch 😅? @miggi @realvjy pic.twitter.com/wafXrJKYi3
Remember the gooey blobs in the previous issue? Well, Double Glitch took it to the next level with this Lava lamp demo. Beautiful effect and a very creative technique! See also this liquid swipe transition using the same approach.
Pretty cool tutorial and community file on creating custom animated blobs without any plugins. A really smart technique combining blur with classic dodge & burn!
How to create these gooey blobs in @figma ? Two ways:
— Double Glitch 🇺🇦 (@double__glitch) January 25, 2023
1. Grab my ready-to-use community file https://t.co/dVMwkCcy11
2. Follow the tutorial in this thread.
Lets go! ⬇️ pic.twitter.com/nCE2SjA88f
Vijay Verma with a smart workaround for rotating an object reflection with the key object. (And here is another one, if that wasn’t enough!)
Here's a small loading experiment I did last week in Figma. Shared behind the scene below 🙂 pic.twitter.com/Ban1wb24sC
— vijay verma (@realvjy) January 2, 2023
If programming shaders is a bit too much for you, check out this video on how to create an animated mesh gradient in Figma with a combination of a few plugins and built-in tools.
A short video showing how to create a hamburger menu transition in Figma.
Early beta of a new plugin for exporting Figma animations into a GIF.
Export Smart Animations to GIF in Figma 🔥
— Michael Yagudaev 🧑🏻💻🇨🇦 (@yagudaev) November 9, 2022
Love to hear your feedback 💜 👇 pic.twitter.com/iKr79EamiD
While it’s easy to dismiss this and other similar projects as impractical toys, I believe they’re giving us a glimpse into the future of creative tools. Years ago every project started as a blank canvas, while now we often build on a foundation of existing design systems. I can imagine that one day the AI will generate the first iteration of the UI based on the existing design system, patterns, tone, and voice of the project.
Introducing text-to-figma: build and edit @figma designs with natural language!
— Jay Hack (@mathemagic1an) November 7, 2022
Join the waitlist here: https://t.co/81KKqnZ3HO
1/n pic.twitter.com/Bw3sw31HaM
Beautiful interactive animation by Figmatelier pushes the limits of Figma. Don’t miss the community file as well.
Jan Mraz with a short video tutorial.
After some time, I'm back with the Figma tutorial. Today it's all about infinite loading circle animation.
— Jan Mraz - UX / UI Designer (@janm_uiux) November 10, 2022
Thank you for your huge support of my UX/UI design content! 💜 pic.twitter.com/i0vk7UoifI
A really cool hover effect, and a smart way to achieve it.
Made this button in @figma with no code pic.twitter.com/0TpKVYE0DF
— Nikita (@nikitakoshi) November 7, 2022
Really fun animation and interaction made by Figmatelier.
I have finally finished my animation/interaction Dynamic Island with @figma .Thanks @rogie for your Noise & Texture plugin, I animated it. You can find the Figma Community link below in the thread. I hope you will enjoy it :) pic.twitter.com/JHU5Y170FJ
— Figmatelier (@Figmatelier) September 19, 2022
Beautiful demo of a powerful animation plugin Aninix.
Hello, @apple.
— Aninix (@AninixApp) August 31, 2022
This is an animation created with a trim pass effect that you can do directly in @figma using @AninixApp.
It's quick simple and beautiful:) pic.twitter.com/EdqoL8a6BQ
Pavel Babkin shows how to move objects along the path using the Figma Motion plugin.
The makers of the Aninix plugin explain animation timing in this detailed Twitter thread.
It’s very common and complex question “How to choose timing for UI animation?”. That's why we've prepared a simple guide to help you choose the right timing for any UI animation. We use @Figma + @AninixApp as always😉
— Aninix (@AninixApp) August 15, 2022
More explanation and details in the thread 🧵→ pic.twitter.com/uxwu0oEU6k
Pavel Babkin explains how to use link animation for layer properties in his popular Motion plugin to easily animate complex scenes.