Figma Tutorial Overlay

Figma is free to use UI design software. With Overlays, you can add modals to any frame in your prototype. In this video I show you how easy it is to add overlays to your application design.

In Figma you can modify the type of interaction (tap, touch down, hover, etc), the type of animation curve and duration as well as where the modal actually appears on the screen. You can easily pin the modal to a particular area or you can set it to manual and drag the modal to the exact location where you would like it to appear.

I show you:
0:48 - How to add interactivity to your prototype
1:13 - How to link frames together
1:35 - How to make the interaction an overlay
1:52 - How to pin the overlay to an area of the screen
2:30 - How to edit the animation
3:03 - How to manually set the overlay

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog:   / angeladelise