"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"
@TintoProductions4 жыл бұрын
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.
@sleatery32892 жыл бұрын
same opinion.
@nlenzphotography2 жыл бұрын
Agreed, my options look significantly different
@kennethlucas Жыл бұрын
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.
@JD.TheMusician9 ай бұрын
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)
@natali-g5 жыл бұрын
Overlays are absolutely incredible. I am very happy that you created them.
@tesskon5672 Жыл бұрын
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🤣)
@marbellaalberto8689 Жыл бұрын
Right?! I had a difficult time just looking up what did functionality was called
@Nevencilica5 жыл бұрын
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 :)
@LeornianCyng5 жыл бұрын
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?
@MorpainM5 жыл бұрын
Highly anticipated. Highly appreciated 👍🏻
@irasanchez12655 жыл бұрын
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.
@Figma5 жыл бұрын
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!
@oscarzezatti57354 жыл бұрын
Well, this is too cool. I see now why everyone is crazy about Figma.
@martacondedesigner4 жыл бұрын
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.
@МаксимТ-ц5к5 жыл бұрын
Thanks Figma Team. You are the best👍
@Foxygrandpa21314 жыл бұрын
Seriously one of the best apps in my arsenal, Figma is the best 🤩
@marbellaalberto8689 Жыл бұрын
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!!
@williamvargas41795 ай бұрын
awesome lesson, really clear and comprehensive!
@FLeite-br9qd5 жыл бұрын
Acabei de se convencer a migrar de vez para Figma. Adeus Sketch!
@danielalcivar63953 жыл бұрын
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.
@sergeyd21995 жыл бұрын
Круто! Молодцы! Долго ждал эту функцию.
@Abhishek.Saini283 жыл бұрын
Love this feature
@georgexervas85255 жыл бұрын
Nice !! Just what I needed :P Thank you Figma Team :)
@julius6817 Жыл бұрын
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.
@germanbrito3472 жыл бұрын
Very nice and well explained. This tutorial is very helpfull to everyone who's learning to use Figma.
@tedcoyle81355 жыл бұрын
Thank you for another excellent tutorial.
@trulyjane4 жыл бұрын
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!
@alericia11 ай бұрын
This video was SO helpful, thank you sm!
@zenaxiong Жыл бұрын
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.
@SergeiShmatov-o4s5 жыл бұрын
Отличная новость! Наконец-то!
@yesman.4 жыл бұрын
blyat
@eduardopinheiro46645 жыл бұрын
This is fantastic, Thank you Figma!
@SiyamSheikh-p5j10 ай бұрын
I love Figma. 💜
@shonenonmyouji3202 жыл бұрын
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
@theAraAra4 жыл бұрын
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?
@jackdoe13125 жыл бұрын
Впечатляет! Вы молодцы! Надеюсь, в будущем будет еще и возможность для создания анимаций, не хуже, чем в Protopie.
@sparkplug9644 жыл бұрын
OMG Figma is amazing, loving it.
@ultratux20005 жыл бұрын
this is amazing
@СлаваУкраїні-э6ф5 жыл бұрын
Thank you for this magic :)
@nicknickneachtain4242 Жыл бұрын
The prototype interface/options are not this on my computer. Very frustrating
@wizardzeegaming50704 жыл бұрын
Figma is LOVE ❤️
@emilyemslee Жыл бұрын
This video needs an update!
@FrancisLara-c2x Жыл бұрын
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 ?
@Desadesain4 жыл бұрын
Thanks FIGMA!
@osasferguson2 жыл бұрын
This is great. Thank you
@rutrezv5 жыл бұрын
Короче нашего брата больше здесь))) Самые работящие мы)
@ajgaming71672 жыл бұрын
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.
@h4zmeister Жыл бұрын
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.
@Chickenwing38nigeria3 жыл бұрын
very helpful! thank you
@GokdenizCetin2 жыл бұрын
I'm using overlay as hamburger menu but "Scroll to" doesn't affect to main frame
@elise.jones142 жыл бұрын
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?
@skvsk5 жыл бұрын
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?
@mantastrumpickas55085 жыл бұрын
you can do this in prototype tab by changing from "Click" or "Tap" to "Hover" and connect to another frame
@aprilyang48355 жыл бұрын
Very well done!
@CatalinBoroi5 жыл бұрын
I love you!!
@brianbremges1112 жыл бұрын
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
@1732ashish5 жыл бұрын
this is so cool
@sanasharma99913 жыл бұрын
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?
@1augh0utL0UD3 жыл бұрын
Figma is amazing.....
@CharlyMARTIN15 жыл бұрын
This is dope 👌
@vaishnaviv76762 жыл бұрын
I do not see the action section under prototype after connecting the frames :")
@keshiaaxel1413 Жыл бұрын
Man, thanks. The bot works fine, but where do I get the names of the new tokens?
@Troy-ol5fk2 жыл бұрын
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
@aashnasehgal824 жыл бұрын
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.
@dhinesh.partha Жыл бұрын
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!!
@olgamelnyk14905 жыл бұрын
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.
@pasthen55505 жыл бұрын
same question!
@figmauser19964 жыл бұрын
Wow!!
@stylishtechnical11744 жыл бұрын
tks
@mbarr5 жыл бұрын
Howdy Figma, this is great. Is there a tutorial available for a push/slide side menu also?
@mihaijianu79684 жыл бұрын
Sorry for disturbing, but I'm the only one that try to use more than 1 manual overlay and that block the app? If I use centred or some already done command work, with manual it bugs :(
@juanbosnic4 жыл бұрын
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?
@BorjaMiramon4 жыл бұрын
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.
@Yeims13 жыл бұрын
How can I show an automatic toast message that disappears after 3 seconds?
@dailyui6362 жыл бұрын
How can I make overlay transparent?
@mdalmahdi57273 жыл бұрын
why we can't open a overlay which is inside a frame?
@VcrThunder3 жыл бұрын
why don't overlays work with scrolling or close on scroll
@mainjohnson51265 жыл бұрын
how to make one object show tooltips while I hovering through it and swaping when I click on it?
@lauarga4084 жыл бұрын
I don't have the Action settings in my Prototype menu. Does anyone know why?
@FondaLaShay5 жыл бұрын
YAY!!!
@samyuintodesign9 ай бұрын
anyone pls tell me how long it will take to learn figma
@justussteinfeldt51694 жыл бұрын
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?
@karaokewaala91074 жыл бұрын
it doesn't show the option for me, someone help.
@nqbus.collection5 жыл бұрын
How to put some Rounded corners on that overlay?
@tristanle54174 жыл бұрын
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!
@AlessandroBroll4 ай бұрын
grande video😎😎
@Troy-ol5fk2 жыл бұрын
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 ?
@mahditayeb10464 жыл бұрын
how to use after delay ?
@damiankomonski10445 жыл бұрын
Does exist some Sketch alternative solutions for the same functions (overlays in prototypes)? Thanks for answer.
@gilbertumeh4 жыл бұрын
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?
@sergeyd21995 жыл бұрын
Судя по комментариям, пора пилить русскую локализацию :)
@МаксимТ-ц5к5 жыл бұрын
Найди в VK группу Figma Design, там есть мануал по локализации. P.S. Проще работать в оригинале
@sergeyd21995 жыл бұрын
@@МаксимТ-ц5к проще тем, кто знает английский. Вот мне просто, а жене проще было бы в русской локализации.
@alyu63515 жыл бұрын
Crionic _ необязательно знать. Я половину названий не знаю, достатаочно знать их назначение
@mischugo5 жыл бұрын
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 :-(
@xbalya5 жыл бұрын
Ура!
@dvfexx2 жыл бұрын
how do you delete just one photo?
@blackfoxly49575 жыл бұрын
Is there any way to copy Transition properties instead of recreate them? (at 7:10) Thanks.
@AdamSabla5 жыл бұрын
HOOOOOLY SHIT THIS IS AWESOME....
@yankee-in-london5 жыл бұрын
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?
@Uxarif5 жыл бұрын
wow
@jimj5125 жыл бұрын
Making hover on mobile possible :)
@Figma5 жыл бұрын
Because they are more narrow, mobile prototypes allow us to use the side-by-side view where we show the prototype next to the canvas for extra context. Sometimes you have to stretch the rules a bit :)
@firestarter6145 жыл бұрын
Ребят, кто Русскоговорящий) чет не получается сделать так чтобы оверлей оставался на экране.Ставлю эту галочку, что бы он исчезал при клике за пределами оверлея, но он все равно пропадает в момент когда я убираю мышку с иконки которая вызывает всплывашку:))HELP
@Polymeroid5 жыл бұрын
Ты наверное выбрал действие не по клику, а ховер. То есть у тебя при наведении сразу вылезает оверлей. Выбери клик в настройках этого оверлея
@4MXW2 жыл бұрын
For a moment I thought she said "Fakema".
@eva-mariadinwoodie45873 жыл бұрын
YAAAAAAAAS
@hardiksolanki49083 жыл бұрын
please na guys now its 2 years make new videos on some old topics its confusing to see old videos
@ynovenkov5 жыл бұрын
Снимаю шляпу, это 5
@clariceism5 жыл бұрын
09:52 to 10:19??? sup!??!? :D lol
@amyleslie634 Жыл бұрын
I'd like a refund for the search bar component I purchased and cannot open.
@ladysan31703 жыл бұрын
seriously?! I don't have Trigger in my prototype menu!!!!!!!! I just have Interactions! if companies are using different versions of Figma because Figma was updated to different versions. Provide ppl video tutorials. I'm so tired of watching thousands of useless videos. this is very frustrating. Figma is more difficult than InVision and Principle