As a data engineer by profession, I am eager to explore the possibilities that Figma offers in enhancing my data engineering endeavors, particularly in creating captivating animated cloud infrastructures. Lately, I have noticed an upsurge in the utilization of Adobe After Effects, resulting in some extraordinary examples. Inspired by these achievements, I am keen to explore how we can achieve a similar fluid flow effect using the remarkable tool, Figma.
I kindly request the expertise of this community to guide me in understanding the techniques and processes involved in creating such effects within the Figma platform. Your valuable insights and assistance would be greatly appreciated as I embark on this exciting journey.
Actual Creator of this image : [Chandresh Desai]
Image Source : LinkedIn
Thank you in advance for your support and contributions.e
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):