Now, remember that donut image I pointed out at the beginning? I did something tricky here. Option + click this frame to create a new duplicate, and then click and drag that fake color picker to the top right hand side. So that’s actually all you’re doing on the screen. And that’s going to help a little bit with the contrast. While we’re here, let’s click on the + (plus) button to add a Stroke. Let’s click the Fill Color, choose the Eyedropper, and get an accurate colored like this. And you want this to appear when the user taps on the background. Press R to select the Rectangle Tool and then drag to make a small square. Option + click this frame to create a new one. And you barely had to break a sweat.īut let’s go back and do another one and get a little more interactive. And sure enough, you’ve got yourself a sweet animation. And let’s go ahead and check it out by pressing Present. Finally, in the Animation section, choose Smart Animate, which is where all the magic happens. And then choose the Alpha_editing 2 frame. For interaction, choose On Click and then Navigate To. So double-click on the donut image here in frame one click on Prototype Mode. However, you need a trigger to make that happen. But because all the objects were originally located in the first frame, Figma is going to animate everything that changes. So these two screens now look completely different. So change the Pass Through to 100% to bring this back up. I created this object beforehand and gave it an Opacity of 0 (zero). Last, look at the layer named Alpha instructions over in the Layers list and then click it. Go ahead and reposition it if you need to. 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. But let’s just go ahead and make a few more changes on frame two. And because they’re all grouped, if you go to the Layer menu and type 0% for Pass Through, they will all disappear. Then switch over to frame two, click on any image. Now do the same thing for the footer, making sure it’s completely outside the boundaries of the frame. And now you’ll begin to make some changes.įirst 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. The easiest way to see this is to Option + click frame one and drag it to the right to duplicate it. And the way that Smart Animate works is by comparing two frames, looking for matching layers, and then animating the differences between those frames. 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. 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. Specifically, you’re going to prototype this effect where a user can click and drag to create transparency for an image.
Figma animation how to#
In this tutorial, you’ll learn how to create advanced animations in Figma using the Smart Animate feature.
Figma animation code#
Embed Code - Embed HTML snippets that enhance your website functionality.Text Input - Add real Text Input fields that include input validation for Email, Password, and Numbers.Forms - You can set up forms and enable visitors of the website to submit information such as their contact information.Set as Homepage - Set frame as the homepage of your prototype of website.Breakpoints - A way to make your design look great in Mobile, Tablets, and Desktops.Links - Anima supports Figma’s native prototyping links and adds Anchor Links.High-Fidelity Prototypes ( Learn how you can create one)Īnima for Figma has 2 main sections: Flow.Anima also converts Figma, Sketch and Adobe XD designs to React, Vue or HTML/CSS websites that can be hosted on Anima servers or can be downloaded as a React, Vue or HTML/CSS code package and self-hosted. Anima App enables designers to create real experiences, rather than clickable prototypes, and offers collaboration tools to build consensus across teams and organizations.