Figma prototyping tutorial: Overlays | Transitions & Interactions
Вставка
- Опубліковано 20 сер 2024
- 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:
• Figma tutorial for beg...
Using constrains within a frame for creating responsive designs:
• Figma tutorial: Constr...
Using Auto layout to build smarter screens and easy to change screen components as buttons, menus, content cards and so on:
• Figma tutoria: Auto La...
#yarivbe
I've watched almost every Figma tutorial of yours. Very helpful. Please keep sharing with us! Thank you so much!
Hi Han. Thank you so much! Amazing feedback ♥️ and of course more cool ones are coming ahead :)
This is the most informative tutorial about figma overlays and interactions! Thank you very much for your work!
You are most welcome Malika! Thank you so much for this amazing feedback! ✨Its highly appreciated ❤
Great video 🙏love your small laugh in between 😊
Thanks a lot Tammana for this really great feedback! I highly appreciate it and happy to know that i also (maybe) put a smile on face - very happy if so 🙂🔥
is a simple, clear n great tutorial !!
Thank you so much for the great feedback! 💥I really appreciate it! 🙂
Incredible job, thank you very much.
You are most welcome! Thanks a lot for the great feedback! 🔥
once again thank you.
Thank you so much for your great feedback tori! Its highly appreciated 💥
bro another video,thank you brother ❤
Thanks a lot for your great feedback Sheak! I highly appreciate it! Thats what is keeping this channel live 🙂⚡
You are AMAZING!!!!!
Thank you so much for this amazing feedback Dianna! ♥I highly appreciate it ✌
That was really helpful , thanks!!!
Thanks a lot for the feedback Noga! 🙂
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?
Hi there :)
It can be achieved either with dynamic prototyping with variables or just in more simple way (which is perfectly good as well) to demonstrate a screen behavior, to animate to different screen having the pinned icon.
Its a bit hard to explain how to do it with variables in a few lines - maybe i'll do a tutorial about it 🙂
Thank you! Is it possible to change the parent screen (the screen behind the overlay) whenever the overlay is closed? Thanks!
Hi Dustin. Thanks a lot for your feedback! I appreciate it 🙂
To your question - not really - not possible. The only thing you can is from the overlay to go to another screen.
You are welcome!
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?
Hi Hadi and thank a lot for the great feedback! I really appreciate it 🙂
To your question - as i understand, you mean a notification on the bottom navigation bar in mobile - assuming that this is the question, depends on the case, you can demonstrate a notification that shows up when go another page, or, in a different case, you can show a notification that shows up after some time on the navigation bar as an interactive component.
Does it answer your question? And i know that its not super understandable like that because its difficult to explain it in a few words... :)
@@YarivBE thanks to reply :) when i have a navigation bar in main frame i put it on bottom center frame and then i set fixed property for that, now under this navigation bar i want to slide notification top but when i do that prototype of this frame doesn't work and notification frame should be out of frame and i can't put it main frame and under navigation bar, could you get my meant? ;)
@@hadirahmani7943
Hi Hadi :) You are most welcome about the answer.
Honestly, i am still not 100% sure i get this all the way :) If you can give a link to something similar that i can see - it will be great for a better reference.
If i understand correctly, the notification should appear above the navigation bar which is in a fixed position? If yes, than it needs to be an interactive component that contains both, the nav bar and the notification. I hope it helps because i am still not exactly that i got this all the way...
@@YarivBE excuse me, You removed my figma link?
@@hadirahmani7943
Hi Hadi. Which figma link? I don't think i saw a figma link in any of the comments. If you want to share something - than go ahead :)
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?
Hi Nanuka and thanks a lot for your great feedback! I highly appreciate it 🙂
To your question -
Make the overlay frame shorter than the content its holding (just the frame itself), give it an overflow behavior of "Vertical", meaning, you apply a vertical scroll behavior to it. I guess that should do the work.
If any issues with it - let me know an i will solve it - no worries :)
Thank you very much! I'll try. Good luck to you!🤩@@YarivBE
@@nanukatadumadze8150
Your are most welcome 🙂
Good! Let me know :)
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
Hi Maryam 😊 Ok - definitely possible but not with an overlay - this needs to happen either between screens (frames basically) or to make an interactive component that does that. Will do! I guess in next few days ❤ Will keep you posted 😊
@@YarivBE Thanks alot. yes i have tried it throug componnent , not succesfull. I wanted to have an some how complex Inteaction (add sth in basket, remove it and steadly have an behavior between add to Card and the Nummer in the basket). By the Way i have introduced you to my Frame and share your Linke. thats nothing agains your help. Have a nice weekend.
@@maryamabaee332
Hi Maryam 🙂Thanks a lot for the good weekend wish - i missed it for some reason. It took some time, but - the tutorial you requested is up - Adding to Shopping Bag interaction and animation 🙂 Let me know if it was helpful - thanks again! 👃
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.
You are welcome Tohan! Thanks a lot for your feedback ⚡I appreciate it:) You can place a component on the overlay - no problem with that - does it answer your question? If no, please let me know and i will explain further ;✌
@@YarivBE Thank you for your answer, I'm a newbie, I'm learning figma and I don't understand this case, I'm watching your playlist video. Thank you again.
@@toanbui1691
You are most welcome Toan. Great - keep learning more - always ask what is not all understandable. Thanks a lot! ⚡
@@YarivBE I try to do it with Component and Variants but it not work for other page.
@@YarivBE Thank you.
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 ?
Hi Maryam. You are most welcome and thanks a lot for your feedback! 🙂
To your question - yes, i can show how to do it - will make a tutorial about it soon :) and yes, you should have a bigger version of the image apart, as an overlay - that's 1 option, and can be also an interactive component but in some cases it can be a bit problematic, depending on the case of course. With an overlay it should be fairly easy - only on desktop of course / any screen that uses a mouse when it's a hover interaction.
@@YarivBE thanks for Answering me. I look forward to hearing from your new video about that 😀🙋🏻♀️
@@maryamabaee332
You are welcome 🙂 will keep you informed about it ✌️
@@maryamabaee332 Hi there :) The tutorial you wanted is up. Thanks!