Now, all that’s left to do is to hook up all these interactions and set the animations. Go back to Star-Down, select the star and scale it smaller and from the center by pressing Option+ Shift (or Alt+ Shift on Windows) at the same time, and then click and drag until you get to about a width of 20 (pixels).
Next, duplicate this frame and rename it Star-Focused. And for this fill, click the Eyedropper, and then click anywhere to get the color of the background. Select the star, go back to Design mode and change the Fill to 100%, then click on the Star-Bg layer. So duplicate Star-Hover and rename it Star-Down. And for this next behavior, when the user clicks or taps, the star will scale down, fill with yellow, and then scale back up to the original size. And sure enough, when you hover, the effect appears. Let’s test this by playing the prototype.
For Interaction, you want to change this from On Click to While Hovering and instead of Navigate To, you want Open Overlay.īy default, overlays are set to centered, but if you click on this menu (in the Overlay panel) and choose Manual, the frame of the Hover-Star will appear on top of the frame of the Default-Star. So click on Star-Default, click on the Prototype tab, and then click and drag this handle to Star-Hover. Now you want this outline to turn yellow when a cursor is hovering over it. Then click on the Star-Bg layer, which has that same yellow as a fill, and bring the Opacity up to 20%, and you’ll see the faint yellow circle appear. Select the star, change the Stroke color to D0D24B, which is a bright yellow. So first, let’s examine the Star-Default frame, and that has two layers - the star itself, and behind it, Star-Bg, a circle that currently has a fill of 0%.ĭuplicate the frame by Option (or Alt on Windows) clicking it and drag it outside the navbar ( Botton-Nav), and it’s going to be a little hard to see. Now, if you want to follow along, this is a URL where you can download the project file and this link is also available in the Resources section for this video. Microinteractions are supposed to be useful, but not intrusive. Now, I know it might not look like much, but that’s actually the whole point. You’ll learn how to make this animation, for when a user hovers over the star and then clicks or taps on it. In this tutorial, I’m going to show you exactly how to prototype a microinteraction in Figma. Examples include what happens when you favorite a tweet or the way an app updates its interface after a task is completed. Microinteractions are the small everyday events in digital products that can be a great way to enhance the overall experience for your users. Transcript Animating Microinteractions with Figma
0 kommentar(er)
