Figma Animation Lava Effect

I want to show you a secret animation technique inside of Figma. Now, this static avatar looks fine, but watch what happens when we turn it into a living, blobby animation. Let's start with a few circles of various sizes and positions behind the avatar. There are a few ways we can combine these shapes to mask our image. First, select all the shapes, hit command E to flatten. Then control command M to use as a mask. Or we can combine the circles as a union with a Boolean operation. This is great if we want to move the circles around later, but if we want to animate them, not so much. We could also put the circles in a group and mask the image with the group. This would give us control over animating the circles, but it looks a bit basic. So to get everything fluid and gooey, there's another secret way. First, turn the circles into their very own component. Add a layer blur onto the shapes. Click Add Variant a few times to have a variety. Now move and resize the circles differently per variant. Go to prototype mode and wire up the variants with Smart Animate. Now to pull it all together. For the Lava effect, we're going to stack three objects with different blend modes. Light gray rectangle on the bottom, set to color dodge. Black rectangle above, set to color burn. Finally, the avatar on top set to screen. Hit Shift spacebar to test in a device frame and tweak positions and easing until it feels alive and gooey, just like you want it. Follow if you want to see the next video covering the full before and after redesign, with every UI decision explained step by step.