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 - 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.