From the course: Figma: Building Animations and Interactions
Unlock this course with a free trial
Join today to access over 24,700 courses taught by industry experts.
Animating the navigation interactions - Figma Tutorial
From the course: Figma: Building Animations and Interactions
Animating the navigation interactions
While our navigation links are currently functional, they do not exhibit the interactive hover animations present in the Figma design prototype. We can remedy this with some simple CSS transitions. We can see in our web piece that there really is no animation going on inside the navigation whatsoever. Inside of our Figma prototype, however, we have rich animation whenever we hover over any of our navigation items. Transitions in CSS are applied as rules within the CSS across multiple definitions with shared property value differences. Let's go into our Figma design file, and we'll locate one of our pieces here. This one's water. And we'll look at the selection color for H+ Green, seeing that it's BFC22A. Clicking on this copies it to our clipboard. Now if we click this button here, we can go to our main component. And this is going to give us some extra information around the animation. Looking down below, we can see that while hovering, it has an ease-out of 500 milliseconds. This is…
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.