"In June 2024, we introduced a redesigned Figma-called UI3. With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content. - Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI - Learn more about overlays in Figma: help.figma.com/hc/en-us/articles/360039818254-Create-overlays-in-your-prototypes"
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.
Figma sadly is a one and done. They say a thing and they treat it like that is the end of their responsibility. You would think a UX tool would have better character to how they support users. Honestly? I think this is something Adobe can improve upon. Sorry...bitter. LOVE Figma. Hate the company and lack of care or support of users. No response seems to be their standard.
For those wondering how to do this in the latest version of Figma (as of Dec, 2023): - Click on prototype and connect your main screen to the overlay screen (note that the overlay frame should only be the size of the overlay, not the screen you want to overlay on) - Click on the arrow connecting both screens - Click on the 'Navigate to' dropdown and select overlay (you'll also get an option to add a background here below the overlay)
We're excited to finally announce Overlays in Figma! If you missed the blog post, check it out here: www.figma.com/blog/introducing-overlays-taking-prototyping-to-the-next-layer/
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
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🤣)
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.
Thanks for the feedback Ira! We're still small and have to be scrappy about when and where we can record our audio, and we're always looking to improve. If you have any suggestions on videos you want to see in the future, let us know!
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?
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!!
I have to say this was an amazing tutorial. The speaker's tone is a little distracting at first but once you get past and focus on the content, it's amazing. Thanks.
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!
The content is amazing, I am learning so much, but I would love to have someone with a voice that is a little bit more... pleasant to listen to, for lack of a better word.
How to use hover state to swap component instance. For example, to prototype hover on a button and swapping the instance with a darker background color version.
This is awesome. I am already excited to use this xD Quick question though: if I make a dropdown menu with 3 items, and I have to make hover states for each item. Should I have to make 3 different frames for each item and use swap feature? Or is there a better way?
I'm having issues trying to program this: click button in overlay > navigate to another frame. Mine keeps just navigating back to my first frame, even though I've done exactly what's directed as about ~4:00 mark in video. Any tips ?
ty, Figma team, it's awesome! But will u do a menu for HOVER styles. Ex, there is a link color: blue; text-decoration: underline Than I wish open HOVER menu and set link color: red; text-decoration:none. Will u do this?
I'm having such a hard time figuring out how to create hover states in a drop down menu with this method. I much prefer it to duplicating a whole page/frame, but I think I'm missing something super obvious perhaps because I can't seem to get my hover states on my menu to work. Any tips?
This is amazing! The Figma team rules! Thanks for consistently improving the product. Question, any way as of now to add a shadow to the overlays? I noticed a shadow on the frame for the overlay, but not in the prototype. I'm having trouble with that in my prototype as well.
We're looking into fixing this! Right now, as a workaround, you can wrap your Frame inside of another Frame that is large enough to contain the Drop Shadow.
Another excellent feature my friends. However I can't seem for the life of me, get vertical scrolling to work for the "parent" frame, if an overlay is open. Is there any workaround for that?
How do you select where the dropdown animation begins? When I click on my dropdown menu, the menu drops down from the top of the frame, rather than dropping down from where the button was.
Yo figma, yall need to update your tutorials. Although these tutorials are suppose to serve as being helpful, it causes more confusion because the UI has changed so much.
I have one question. When opening Prototype and Connect button together with the flow charts, how can I enable the Prototype menu to have two elements like yours: Trigger & Action tabs. Thank you!
Honestly i want to smack myself in the head, all this time i could have used overlays instead of duplicating everytime. Video was very helpful, thank you.
Hi Figma Tutorial, can you make a overlay scroll menu tutorial, i try to build it but when scroll, overlay always showing overlap outside the frame or auto layout.
Sorry, I know this video is old by now but I will love to ask a question regards the content "Swap" prototype precisely. Can it work for multiple instances for a side menu?
I have an overlay screen dragging up from my mobile screen but the overlay screen is going over my navigation bar. How do I place my navigation bar in front of the overlay screen when I drag it up?
Hi, is there a possibility to add multiple actions to an item? For e.g. I have a button, which on hover displays a tooltip (I'm using an overlay for this) and then, I need to click the button, but when I link it with needed screen (on click), on hover action disappears.
Great video! Does anyone know if it's possible to create an overlay screen that is also scrollable? eg: A share bottom layout that hides more content beneath the fold.
the 'move in' animation looks weird, the overlay slide in from the top edge of the entire frame, I think it would be more natrual if the 'move-in' animation origin is the mouse position where the user click the trigger element
Can you "Close an overlay to a different Frame from its starting frame? I ask this because the starting frame is a hover state. I want it to go back to the base state and not the hover
Hey can someone please help me with this problem I'm facing? I've used overlays while hovering over an icon to show what the icon does but now when I try to use 'on click' action for the icon it shows a little exclamation sign on its left and it does not transition to the destination when I click the icon. Why is this happening?
Dear Figma-Team, the automatic transfer of previous prototyping settings to a new one like in 7:02 does not work for me. Do you have an idea, how I could get this feature, too?
My prototype menu does not look like this. I only have "interaction details" as an option and I need to be able to close a overlay by clicking outside of it. How do I get my prototype menu to look like this?
I have created an overlay frame and applied inside my Android frame and while I scroll the page my overlay frame is coming forward seperately. At that point I get frustrated and move on to make a duplicate slides. Can anyone share the solution for this!!
Are there certain prerequisites that must always be fulfilled? For example that the objects may only be the same size. Or no frames may be etc. etc. etc. …? I have a layout. This is a registration form. I can't get a simple hover for button status (register now). Either the background is black, or it is called ... The link dit not valid And I can't see what I'm doing wrong :-(
When I set overlay animation to 'Move in', the overlay just slides in from the bottom of the entire frame, it feels unnatural to me. Is there a way to set the 'boundary' of the animation ?
It seems that when you click to delete photos in your first example...the photos are deleted but the overflow menu does not close. How do we make that overflow menu close while also closing the modal?
You know...or you could just not answer and not support your users. Seems like the standard at Figma. Why have a channel if you will not support it? Causes more harm than good.
We're creating a UI Kit for the VueJS community (Vuetify) and we'd like the buttons to have a hover effect but these buttons then must be used by the end user and allow for the user to assign click navigation. In essence we want both HOVER and CLICK and we want the click event to be configured from the original button rather than requiring the user to go into the hover button and assign the click event here. Is this possible? If not is this on the roadmap?
![COLOMBIA vs. CHILE [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/TDjN4W3yy1k/mqdefault.jpg)
"In June 2024, we introduced a redesigned Figma-called UI3.
With UI3, some parts of this video might not match what you see in the product today. We appreciate your patience while we update our content.
- Find where features moved to in our guide: help.figma.com/hc/en-us/articles/23954856027159-Navigating-UI3-Figma-s-new-UI
- Learn more about overlays in Figma: help.figma.com/hc/en-us/articles/360039818254-Create-overlays-in-your-prototypes"
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.
same opinion.
Agreed, my options look significantly different
Figma sadly is a one and done. They say a thing and they treat it like that is the end of their responsibility. You would think a UX tool would have better character to how they support users. Honestly? I think this is something Adobe can improve upon. Sorry...bitter. LOVE Figma. Hate the company and lack of care or support of users. No response seems to be their standard.
For those wondering how to do this in the latest version of Figma (as of Dec, 2023):
- Click on prototype and connect your main screen to the overlay screen (note that the overlay frame should only be the size of the overlay, not the screen you want to overlay on)
- Click on the arrow connecting both screens
- Click on the 'Navigate to' dropdown and select overlay (you'll also get an option to add a background here below the overlay)
Overlays are absolutely incredible. I am very happy that you created them.
We're excited to finally announce Overlays in Figma! If you missed the blog post, check it out here: www.figma.com/blog/introducing-overlays-taking-prototyping-to-the-next-layer/
Pin this
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
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🤣)
Right?! I had a difficult time just looking up what did functionality was called
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 :)
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.
Thanks for the feedback Ira! We're still small and have to be scrappy about when and where we can record our audio, and we're always looking to improve. If you have any suggestions on videos you want to see in the future, let us know!
Highly anticipated. Highly appreciated 👍🏻
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?
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!!
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.
Well, this is too cool. I see now why everyone is crazy about Figma.
Oh I've been waiting for overlays for so long!
Great job!
I have to say this was an amazing tutorial. The speaker's tone is a little distracting at first but once you get past and focus on the content, it's amazing. Thanks.
Thanks Figma Team. You are the best👍
awesome lesson, really clear and comprehensive!
Seriously one of the best apps in my arsenal, Figma is the best 🤩
Love this feature
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!
Wow, well done!! Hope to see more animation in Figma! Really enjoying your product
Bravoooo!!!!!!!! you totally nailed it. Best christmas gift for us designers! All the best for you.
Круто! Молодцы! Долго ждал эту функцию.
The content is amazing, I am learning so much, but I would love to have someone with a voice that is a little bit more... pleasant to listen to, for lack of a better word.
How to use hover state to swap component instance. For example, to prototype hover on a button and swapping the instance with a darker background color version.
Thank you Figma! Just what I needed the most :)
Very nice and well explained. This tutorial is very helpfull to everyone who's learning to use Figma.
Acabei de se convencer a migrar de vez para Figma. Adeus Sketch!
This is fantastic! Appreciate this so much 🎉
This video was SO helpful, thank you sm!
Отличная новость! Наконец-то!
blyat
This is awesome. I am already excited to use this xD
Quick question though: if I make a dropdown menu with 3 items, and I have to make hover states for each item. Should I have to make 3 different frames for each item and use swap feature? Or is there a better way?
I just love figma! UI designing have never been so interesting....
Впечатляет! Вы молодцы! Надеюсь, в будущем будет еще и возможность для создания анимаций, не хуже, чем в Protopie.
Nice !! Just what I needed :P Thank you Figma Team :)
This is fantastic, Thank you Figma!
Thank you for another excellent tutorial.
This update is amazing! However please add option for blurred background.
OMG Figma is amazing, loving it.
I'm having issues trying to program this: click button in overlay > navigate to another frame. Mine keeps just navigating back to my first frame, even though I've done exactly what's directed as about ~4:00 mark in video. Any tips ?
ty, Figma team, it's awesome! But will u do a menu for HOVER styles. Ex, there is a link color: blue; text-decoration: underline Than I wish open HOVER menu and set link color: red; text-decoration:none. Will u do this?
you can do this in prototype tab by changing from "Click" or "Tap" to "Hover" and connect to another frame
I love Figma. 💜
I'm having such a hard time figuring out how to create hover states in a drop down menu with this method. I much prefer it to duplicating a whole page/frame, but I think I'm missing something super obvious perhaps because I can't seem to get my hover states on my menu to work. Any tips?
this is amazing
Awesome! Thanks!
This is amazing! The Figma team rules! Thanks for consistently improving the product.
Question, any way as of now to add a shadow to the overlays? I noticed a shadow on the frame for the overlay, but not in the prototype. I'm having trouble with that in my prototype as well.
We're looking into fixing this! Right now, as a workaround, you can wrap your Frame inside of another Frame that is large enough to contain the Drop Shadow.
This is great. Thank you
You're simply the best
I made the connection, but I can't see the "Action" section on the right panel to choose for "overflowmenu". Am I missing something? Please help
Короче нашего брата больше здесь))) Самые работящие мы)
Thank you! Thank you! Thank you! Thank you! Thank you!
It'll be great if you guys can upload the same file to practice. If it's already there, I wasn't able to find it.
Figma is LOVE ❤️
Howdy Figma, this is great. Is there a tutorial available for a push/slide side menu also?
Thanks FIGMA!
This is amazing! Thank you so much!
Very well done!
Another excellent feature my friends. However I can't seem for the life of me, get vertical scrolling to work for the "parent" frame, if an overlay is open. Is there any workaround for that?
How do you select where the dropdown animation begins? When I click on my dropdown menu, the menu drops down from the top of the frame, rather than dropping down from where the button was.
Yo figma, yall need to update your tutorials. Although these tutorials are suppose to serve as being helpful, it causes more confusion because the UI has changed so much.
very helpful! thank you
Thank you for this magic :)
Man, thanks. The bot works fine, but where do I get the names of the new tokens?
I have one question. When opening Prototype and Connect button together with the flow charts, how can I enable the Prototype menu to have two elements like yours: Trigger & Action tabs. Thank you!
FigmaTeamForever!
Great!
Honestly i want to smack myself in the head, all this time i could have used overlays instead of duplicating everytime. Video was very helpful, thank you.
I'm using overlay as hamburger menu but "Scroll to" doesn't affect to main frame
Hi Figma Tutorial, can you make a overlay scroll menu tutorial, i try to build it but when scroll, overlay always showing overlap outside the frame or auto layout.
Sorry, I know this video is old by now but I will love to ask a question regards the content "Swap" prototype precisely. Can it work for multiple instances for a side menu?
I have an overlay screen dragging up from my mobile screen but the overlay screen is going over my navigation bar. How do I place my navigation bar in front of the overlay screen when I drag it up?
This is dope 👌
Love it.. Thank you. Figma Rules
The prototype interface/options are not this on my computer. Very frustrating
Hi, is there a possibility to add multiple actions to an item? For e.g. I have a button, which on hover displays a tooltip (I'm using an overlay for this) and then, I need to click the button, but when I link it with needed screen (on click), on hover action disappears.
same question!
Great video! Does anyone know if it's possible to create an overlay screen that is also scrollable? eg: A share bottom layout that hides more content beneath the fold.
is this still relevant if it's from years ago, what with all the updates?
YES! How no to love Figma! YEAH
the 'move in' animation looks weird, the overlay slide in from the top edge of the entire frame, I think it would be more natrual if the 'move-in' animation origin is the mouse position where the user click the trigger element
Can you "Close an overlay to a different Frame from its starting frame? I ask this because the starting frame is a hover state. I want it to go back to the base state and not the hover
Hey can someone please help me with this problem I'm facing? I've used overlays while hovering over an icon to show what the icon does but now when I try to use 'on click' action for the icon it shows a little exclamation sign on its left and it does not transition to the destination when I click the icon. Why is this happening?
Dear Figma-Team,
the automatic transfer of previous prototyping settings to a new one like in 7:02 does not work for me. Do you have an idea, how I could get this feature, too?
My prototype menu does not look like this. I only have "interaction details" as an option and I need to be able to close a overlay by clicking outside of it. How do I get my prototype menu to look like this?
I have created an overlay frame and applied inside my Android frame and while I scroll the page my overlay frame is coming forward seperately. At that point I get frustrated and move on to make a duplicate slides. Can anyone share the solution for this!!
Can you scroll an overlay? I have an overlay that pops up when you click 'search for a destination' and I need it to scroll down.
Is there a way you can get a modal to disappear after say 5-10 seconds? Example: A notification to say "You are now viewing as..."
I love you!!
this is so cool
Does exist some Sketch alternative solutions for the same functions (overlays in prototypes)? Thanks for answer.
Are there certain prerequisites that must always be fulfilled? For example that the objects may only be the same size. Or no frames may be etc. etc. etc. …?
I have a layout. This is a registration form. I can't get a simple hover for button status (register now). Either the background is black, or it is called ... The link dit not valid
And I can't see what I'm doing wrong :-(
When I set overlay animation to 'Move in', the overlay just slides in from the bottom of the entire frame, it feels unnatural to me. Is there a way to set the 'boundary' of the animation ?
tks
Perfect
It seems that when you click to delete photos in your first example...the photos are deleted but the overflow menu does not close.
How do we make that overflow menu close while also closing the modal?
You know...or you could just not answer and not support your users. Seems like the standard at Figma. Why have a channel if you will not support it? Causes more harm than good.
We're creating a UI Kit for the VueJS community (Vuetify) and we'd like the buttons to have a hover effect but these buttons then must be used by the end user and allow for the user to assign click navigation. In essence we want both HOVER and CLICK and we want the click event to be configured from the original button rather than requiring the user to go into the hover button and assign the click event here. Is this possible? If not is this on the roadmap?
I cannot find overlay in my newest version Figma. Elaborate, please!
This video needs an update!
I do not see the action section under prototype after connecting the frames :")
how to make one object show tooltips while I hovering through it and swaping when I click on it?
Wow!!