Figma prototyping tutorial: Overlays | Transitions & Interactions

A figma tutorial about creating and interacting with overlays in our designs. With overlays you can design menus, pop-up messages, notifications, dialogs - to any type of screen you are designing. Desktop website design, mobile designs, tablet designs and so on.

If you are less familiar with basic prototyping and transition types, please check put this tutorial:

Using constrains within a frame for creating responsive designs:

Using Auto layout to build smarter screens and easy to change screen components as buttons, menus, content cards and so on:

#yarivbe

[handoan]

I've watched almost every Figma tutorial of yours. Very helpful. Please keep sharing with us! Thank you so much!

[МаликаМакаева-гс]

This is the most informative tutorial about figma overlays and interactions! Thank you very much for your work!

[TamannaTalan]

Great video 🙏love your small laugh in between 😊

[franceslim]

is a simple, clear n great tutorial !!

[SheakmohammadAbujor]

bro another video, thank you brother ❤

[imdp]

I have a query regarding a specific interaction I'm trying to create in Figma. Here's what I want to achieve:

Interaction Details:

Scenario: I have a tab with an unpin icon. When a user taps on the unpin icon, I want a pop-up overlay to appear in the center of the design, asking for confirmation.

Desired Action: Upon tapping "Yes" in the confirmation overlay, the unpin icon should change to a pinned icon.
Could you please guide me on how to set up this interaction in Figma?

[dustinhodges]

Thank you! Is it possible to change the parent screen (the screen behind the overlay) whenever the overlay is closed? Thanks!

[hadirahmani]

thanks so much, that was what i want to implement, i have a question, how can i show notification under navigation bar on bottom of page?

[nanukatadumadze]

Very useful tutorial! One question, if overlay frame is longer than main frame (for example, in mobile version rules and conditions) I cant scroll it, any ideas how can I fix it?

[toanbui]

thank you for your tutorial. But how it work with component? can you help me. I want to use Overlay with component and use for many page.

[maryamabaee]

Thank you very much. Could you please show us how to make a Portotype when maus comes on the image, the image will be shown bigger (not by clicking, only by While hovering). should we design a bigger Version / Scale of our image i think, right ?

[maryamabaee]

Hi Yarive, i am again here 😀• could you please Show us how to make a portotype for buying Prozess. choosing something and the number of chosen Produkt supposed to be shown in basket ! Thanks a lot