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

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…

Contents