Figma Tutorial: Overlays

With Overlays, you can reuse a single Frame or Component across multiple screens to create consistent interactions without having to duplicate Frames.

Timestamps:
0:00 - What are Overlays
0:30 - How to use Overlays
1:54 - Overlays in the Properties Panel
2:34 - Manually positioning Overlays
3:00 - Changing the Overlay background color
3:24 - Closing when clicking outside of the overlay
4:17 - Navigating back to original frame
4:50 - Demo 1 - Presentation View
5:39 - Demo 2 - Hamburger Menu, Transitions, and Swap
6:24 - Using Transitions
7:24 - Using the Swap Navigation Type
8:24 - Additional ways to use Overlays
9:05 - Review

#Figma #FigmaDesign #FigmaTutorial #Overlays

[mantastrumpickas]

I love you, Figma ♥ Animated overlays is exactly what i was looking for! Now I can use it in my prototypes. You don't know how much I appreciate your work. THANKS

[natali-g]

Overlays are absolutely incredible. I am very happy that you created them.

[TintoProductions]

Appreciate the tutorials on overlays! It would be better if the videos can be updated to reflect the newest version of Figma since there's been a significant change in the UI since this video was released.

[martacondedesigner]

Thanks for share!! I learn a lot with this tutorials, the unique thing is that in the new versions there are options which are disappear or change.

[kirassik]

Oh I've been waiting for overlays for so long!
Great job!

[oneLve]

Wow, well done!! Hope to see more animation in Figma! Really enjoying your product

[marbellaalberto]

Clear and concise. I remember trying to learn how to do this on my own and failed miserably 😅 Thank you for providing such useful content for Figma newbies like me!!

[onihachi]

you totally nailed it. Best christmas gift for us designers! All the best for you.

[MorpainM]

Highly anticipated. Highly appreciated 👍🏻

[LeornianCyng]

Omg Thank you guys so much for Overlays. Makes life slot easier. Please could you do a tutorial video, showing us how to create a nav bar using Overlays?

[ErikBjrgum]

Thank you Figma! Just what I needed the most :)

[germanbrito]

Very nice and well explained. This tutorial is very helpfull to everyone who's learning to use Figma.

[irasanchez]

Thanks for following up on the nav dropdown video. Sound quality has improved a lot, and I can actually hear it now. Thanks for improving, following up, and sharing a cool tool.

[williamvargas]

awesome lesson, really clear and comprehensive!

[FFFF]

This is fantastic! Appreciate this so much 🎉

[georgexervas]

Nice !! Just what I needed :P Thank you Figma Team :)

[tedcoyle]

Thank you for another excellent tutorial.

[trulyjane]

I really appreciate these tutorials Figma. May I suggest that before going over the tutorial, showing a couple examples of what an overlay looks like and what it is would be nice for beginners like myself. Then afterwards proceed with how to make it. Some of us are curious and self taught users of Figma and not UX design people or nor have studied related subjects. Thanks!

[tesskon]

this helps A LOT. I don’t understand why people don’t talk about this in most tutorial videos. I felt so stressed when I didn’t know overlay existed. (i tried to search for dropdowns and plugins and didn’t know this functionality is named overlay🤣)

[Nevencilica]

One important fact, every object used as overlay must be on a screen.
Didn't know that and no one mentioned that detail.
Great tut, tnx :)