In this tutorial, you’ll learn how to create advanced animations in Figma using the Smart Animate feature. Specifically, you’re going to prototype this effect where a user can click and drag to create transparency for an image. You can follow along by downloading the lesson file at this URL or by clicking on the link in the Resources section for this video.

Once you open up the lesson file, you’ll see a single frame that I’ve set up for you as well as a donut image that will come in very handy a little bit later. And the way that Smart Animate works is by comparing two frames, looking for matching layers, and then animating the differences between those frames. The easiest way to see this is to Option + click frame one and drag it to the right to duplicate it. And now you’ll begin to make some changes.

First on frame one, click on the header, and then press your Shift key and nudge it upwards until it’s out of sight above the frame. Now do the same thing for the footer, making sure it’s completely outside the boundaries of the frame. Then switch over to frame two, click on any image. And because they’re all grouped, if you go to the Layer menu and type 0% for Pass Through, they will all disappear. But let’s just go ahead and make a few more changes on frame two. So click on the donut image here, press and hold the Shift key, and then drag the anchor points until that image fits the entire width of the screen. Go ahead and reposition it if you need to.

Last, look at the layer named Alpha instructions over in the Layers list and then click it. I created this object beforehand and gave it an Opacity of 0 (zero). So change the Pass Through to 100% to bring this back up. Cool. So these two screens now look completely different. But because all the objects were originally located in the first frame, Figma is going to animate everything that changes. However, you need a trigger to make that happen.

So double-click on the donut image here in frame one click on Prototype Mode. For interaction, choose On Click and then Navigate To. And then choose the Alpha_editing 2 frame. Finally, in the Animation section, choose Smart Animate, which is where all the magic happens. And let’s go ahead and check it out by pressing Present. Click on the donut. And sure enough, you’ve got yourself a sweet animation. And you barely had to break a sweat.

But let’s go back and do another one and get a little more interactive. Option + click this frame to create a new one. Press R to select the Rectangle Tool and then drag to make a small square. So this is a fake color picker. And you want this to appear when the user taps on the background. Let’s click the Fill Color, choose the Eyedropper, and get an accurate colored like this.

While we’re here, let’s click on the + (plus) button to add a Stroke. And that’s going to help a little bit with the contrast. So that’s actually all you’re doing on the screen. Option + click this frame to create a new duplicate, and then click and drag that fake color picker to the top right hand side.

Now, remember that donut image I pointed out at the beginning? I did something tricky here. I made this donut image with a checkerboard pattern in Photoshop, and then I imported it into Figma. So now drag this image over the original donut. Take a few seconds to align it like so. You can test that it’s perfectly aligned by turning this visibility off and on. That looks pretty good. When you’re satisfied, delete the original donut layer, but also reposition this new image and make sure that the color picker at this rectangle is above it like so.

Now, let’s go ahead and animate. Go back to the Alpha_editing 2 frame. Double-click on the donut image. In Prototype Mode, set the Interaction to On Click. And in Navigate, set it to Alpha_editing 3. All this step does is make the color picker appear. That’s it.

So in the next frame, click on the color picker. And for the interaction, choose On Drag, which is very important. Then click Navigate To and then Alpha_editing 4. In the animation section, click on the menu in choose Smart Animate. To preview this, go back to the Alpha_editing 2 frame and click on it because that’s the screen where you want to start previewing.

Go ahead and press the Preview button. Click anywhere in the bottom left, and that little color picker appears. Cool. You can go ahead and drag that back and forth for a while. Keep in mind that the second you let go, you’re going to be stuck on the screen because you haven’t created an exit for the user. But you know how to do that, right?

That’s it. Thanks for watching. If you like this Take 5 clip, be sure to check out the rest of the series, as well as the entire course catalog at Gymnasium.