Exploring Figma's Animation Magic: Achieving Fluid Flow Effects for Cloud Data Infrastructure

@Armin_Rouhanian Hi Armin, seeking your expertise again ! The way you explain and your innovative ideas are out of this world. Kindly suggest

Can anyone share their expertise ?

Hey there again, Rajeev. Unfortunately, I might not be able to help you with this case, at least not within the upcoming week.

The floating effect is possible. let’s say you want to give the floating effect to the object name “canvas”

you need to frame your canvas, convert it to a component, then create another variant just like the first one. then move your canvas inside the frames (one should be higher and the other should be lower). then, create an “after delay” interaction from the first to the second variant, set it to smart animate, and change the motion setting to get the desired effect.
then set another interaction from the second to the first variant with the same properties (both delays should be 1ms)

rotation effect is the same. instead of moving your canvas, you need to rotate the element inside the component.

for the flame in the middle, it’s a little harder, you need to break the flame into different parts and move each part so it seems like an actual flame.

for the light effect moving behind the arrows, I don’t have anything in my mind right now. I’m not sure if we have any easy way to drop the opacity when it reaches the labels.
I can try it later, If I got any results, I’ll share them with you.

I’m just wondering, why do you need to make this inside Figma? I mean it’s possible, but if your objective is to learn more about Figma animations, I suggest searching on youtube or even LinkedIn, there are much better practices than this.

I appreciate your response and thank you again for the concise overview. The fact that Figma is free and can be used within office firewalls is the main reason why I favor it. Drawing from your experience, could you recommend any tutorials that would assist me in achieving the desired outcome?

I’ve learned most of the tricks from Figma’s own best practices (search Figma prototype best practice. You’ll find good resources). I’ll also recommend Memorisely & Zanderwhitehurts pages on Instagram (or LinkedIn). they will post many useful shortcuts or tricks for free.

You only need to know how “smart animation” works on Figma. When you are changing an element to another, all elements in hierarchy with the same name and same path will considered as same element. if you change the hierarchy or rename any element, the smart animation wont work. (you should make sure they have also unique names):

See this for more: https://help.figma.com/hc/en-us/articles/360040522373-Prototype-animations

Thank you Armin . Let me check their blog but whenever you will get time next week, would it be okay to give it a try from your end based on your convenience . Meanwhile I will see what I can do

Hi Armin.
I just wanted to follow up with you and ask how things are going with your bandwidth for this week. Are there any chances that you will give it a shot? Thanks in Anticipation !

I am also looking at something like this and Figma looks really hard to digest for this work. What is the alternative? @Rajeev_Pandey Did you find anything?

You can do it with smart animate and smaller components for smaller pieces. Like flows and spins etc. one these pieces are done just combine them together in multiple stages

I was able to create spinning cogs as a part of a bigger scene

Thank you Pavel.

I am specifically looking for a white fluid flow effect that gif is showing here. Any sample that you can share ! White glowy circle that is moving in this gif