From the course: Designing Microinteractions with Figma

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Use Figma's native animation types

Use Figma's native animation types - Figma Tutorial

From the course: Designing Microinteractions with Figma

Use Figma's native animation types

- [Instructor] If you follow me along, we just reviewed triggers in Figma and now it's time to move to the animation section to review eight animation types that you can apply to your micro-interactions. So first of all, in this dropdown we have an instant animation, and this is a default animation type that gets applied as soon as you create your connection. And with instant, basically the destination frame will be immediately shown after you interact with the hotspot. In our case, when we immediately click on this button. Let's go again to this dropdown and select dissolve and in contrast with the destination frame, it will fade in on top of the initial frame. With dissolve, you also have easing settings that you can choose from this extensive list, but for now, let's keep it as ease out. You also have a duration input field. By default is 300 milliseconds, but you are free to change it to, for example, 600…

Contents