Figma’s hidden animation technique

Last week we upgraded some pixel-y avatars using Figma’s Edit Image feature. Got them nice and crispy. This week, let’s explore animation.

Looking at the student’s original design, there are some really cool overlapping circles cropping each avatar. It’s already a good design element on its own. But I wanted to take this opportunity to show how we can animate this. And this may not necessarily work for this screen, but maybe for a profile image. Or a quick intro animation. Or when you tap it. You don’t have to keep it animated at all times. There are always little things you can do with motion and interaction that give a little extra delight.

Now, if you weren’t interested in animations, you could just flatten the circles and create a mask. Or even create a union so you could adjust individual circles later. And sure, you could try to use Smart Animate to transition between one blobby shape to another, but you won’t like the effect. It’s not smooth; the static image would be better.

So how do you actually animate a masked image with smooth, fluid transitions between blobby shapes?

I remembered seeing this really cool technique from DoubleGlitch. He’s got some great Figma files on his profile showing different animation approaches here and here. This lava lamp, gooey animation technique is one of them. Shout out to him for figuring this out.

Start with your circles in a frame, select all of them and add a layer blur. I just put 8 pixels but you could experiment with different amounts. Duplicate the frame 4 times, then select all and turn them into a component with different instances.

Now create variants with the circles in different positions. Make some smaller, move them around, experiment with the composition. Set up Smart Animate between variants. I used 1600 milliseconds with a gentle easing curve, but play with this. Try different curves. Maybe create custom easing. Even after it seems dialed in, it might need tweaking once it’s in code.

Then two blend mode layers go on top. First layer is a pure black rectangle set to color burn. Second layer underneath that is a lighter gray rectangle set to color dodge. Put both of those into a frame and that becomes your filter. For the actual image, place your photo on top of everything and set it to screen blend mode. Screen only shows the image on the black areas and lets white bleed through. So your animated blob becomes a dynamic mask.

Quick recap: if you’re working with static masked images, union works fine. But for animation with that smooth, organic motion, try this blur plus blend mode technique.

I put together a Figma file so you can see the actual layer setup, and here’s a full walk through video where I show all three methods, explain why union fails, and build the entire blur+blend technique from scratch. Pull it apart and experiment with the settings.

Follow me on Instagram where I’ll show the short 60~ second video version of this technique.

Next week we’ll wrap up this short series with a before and after of the UI screen. I’ll walk through the visual changes I made and why, and what to look for when you’re refining your own designs.