Відео

Glad to hear it was helpful!

Glad it helped!

Glad it was helpful!

Hey there, yes the video is a bit old now after many releases but "mouse leave" still works same way today. What are you struggling with? btw there's an easier way to build this which is to wrap the dropdown on another auto-layout and just add invisible padding on top so when your mouse travels it doesn't travel on an empty area that will cause the dropdown to trigger-off

Hey, for sure. You just need to change the interaction from “on click” to “while hovering”

Hey Pat, what do you mean by "dynamic layout"? if i understand it correctly you should be able to use this same technique in a button

@@AdrianoReisDesign What I'm trying to do with buttons is pretty much what you say can't be done with the input size @0:40 - I want to be able to put whatever text as a prop and the button resizes accordingly.

@@patduss174 yeah unfortunately i don't know of a better way to do that

Hi Fatima, this technique work mostly for vectors/non-image items. I believe the best way would be to export the images from XD to your computer and then drag or import them into Figma

​@@AdrianoReisDesign Thanks a ton for the assistance!

Hey there, a simple command/control + V should do the same. But if the right click context menu doesn’t show at all to you, you may want to troubleshoot. I found this relating to it: forum.figma.com/t/right-click-context-menu-not-working/23167

It shouldn’t because it’s not really a “timer” it’s just a delay for the dropdown to show so it gives you enough time for the mouse to hover over. You can also achieve the same thing by using a container wrapping the dropdown with extra invisible padding on the side so the hover doesn’t trigger off

haha thanks I use Screen Studio to do those transitions with one click. If you want to take a look: screenstudio.lemonsqueezy.com?aff=o8NNq

Obrigado! Que bom que foi útil!

Hey Angie, glad it helped! 🙏

You’re welcome! Glad it helped!

Glad it was helpful! Yeah Frames are way more useful!

Thank you for your response @@AdrianoReisDesign If you don't mind I would love to connect with you and maybe have a 20mins clarity call to help strengthened my perspective on UI/UX Designing.

Hey ​@@daferichards I’m pretty booked until about the end of February. But feel free to reach out on Twitter(@deereis) and/or send a loom with your thoughts concerning and I can try to help as much as I can asynchronously for now

Glad this still works! 😅 and happy to help!

Thanks for the sub! 🙏

Thank you, glad it helped!

Glad it was helpful!

If I understood correctly you need to add a slight delay so the flickering doesn’t happen anymore. If you still have a hard time can you share the link to the file so I can take a look?

I did add a delay but it still flickers. It looks like a conflict between mouse leave and mouse enter on different elements at the same time. Could you upload the actual file you used as the current one uses options that are not available in the latest Figma.

@@tasteconsultancy the work file in the description is the only file I have. The interactions are the same as “Mouse enter” and “Mouse leave” which are currently available in Figma. Feel free to share your file link with me or invite me to it and I can take a look

@@tasteconsultancy adrianoreis.design@gmail.com

Same issues😢😢😢

In the shorter video I got a lot of the same question so I pinned the comment there and added a loom link to show how to achieve that: ua-cam.com/video/IHgaG6_asjg/v-deo.htmlsi=c2sr9n-zPm4qlFQb Hope that helps!

Heyy, you're welcome! Hm make sure the Auto layout is set to the vertical direction and also set to "hug content" additionally check if the line is not marked as "absolute positioning" You can find the absolute positioning if you select the line and then go all the way on the top right of Figma next to the Y dimensions/positioning. The icon should look like a plus sign inside a box. Let me know if you were able to figure that out. :)

Glad it was helpful! And btw now the dev tools in Figma there’s a section you change values to show from px to rem

@@AdrianoReisDesign Awesome! Thanks a lot for the info. Will check that out

can't believe i wasn't subscribed to yalls channel either 🫣

@@AdrianoReisDesign better late than never hehe 🤭

You can just copy and paste that in a site and it'll behave the same. Just make sure whatever the accordion's parent container is, that it is an auto-layout layer and its height is set to "hug contents"

I'm not sure why you're not able to edit the file, if you are able to edit the file you should be able to edit anything in it. When you open this link: www.figma.com/community/file/1088505283210920914 you just need to click on "Open in Figma" and you should be able to edit anything in it. If you're completely new to Figma i'd suggest watching their beginner tutorials on their youtube channel to get up to speed

glad you liked it!

Hey, you should still be able to select the simple frame and convert it into an auto-layout frame by hitting let me know if that works!

@@AdrianoReisDesign I have the same problem. Tried converting to auto layout again and it's like back to square one

@@emi-ifefaluyi8399 are you able to share a link where I can duplicate the file to my drafts?

Thanks!! it would basically be the same thing but the "answer" auto-layout would be in a horizontal direction with two items inside (image and the text). you just need to make sure of two things: 1- the text is set to <fill> 2 - the height of its parent auto-layout(the one that's wrapping the text and the image) is set to <fit> and that should work just fine, if you have any trouble let me know and/or share a link and I can try to see where the problem is.

Nice! glad it worked for you

Hi, i use a lot of shortcuts if you slow the video down or pause at that specific moment you'll see that i just hid the description/answer from the "closed" variant by using the shortcut. In the description you can get the Figma link so you can duplicate the file and see how everything is set up. Hope that helps

Hi, it's a bit hard to guess what may be going wrong. If you are able to send a link that I can duplicate the file I'd be happy to take a look and see if i can find out what is the issue

Hi, maybe if you download the file it’ll help you understand what’s happening in the video more easily? Let me know if there’s anything I can help with

@@AdrianoReisDesign Thanks in the end I found a slower video and did my menu with it👌🏿

Hi sorry for the delayed response. There are many approaches to that. if you have 2 elements inside the auto layout you can simply set the "horizontal gap" to "auto" and it'll push the two items apart to whatever space is available. If you have 3 elements like in the video and let's say the text is a logo, I'd wrap two of them in another auto layout(the left caret + logo) and call it something like "left group" and then go to the parent and set the horizontal gap to "auto" like mentioned above. I'll try to illustrate it below: no auto layout children - parent horizontal gap set to "auto": [ icon logo icon ] icon + logo wrapped in a child auto layout + parent with horizontal gap set to "auto": [ [icon logo] icon ] let me know if that makes sense!

​​@@AdrianoReisDesigngreat explanation.

I'm glad that was helpful! i've realized that there's also another way which is just adding some padding so that empty space is still part of the element where the hover belongs to but you end up not leaving the element because you have that transparent padding. Anyway, the mouse enter/leave is always a helpful option to have!

Hey, feel free to send me the file link to take a look, you can dm me on Twitter @deereis also

@@AdrianoReisDesign hey i dont have a twitter could i share it with you through instagram?

Hi Rohan, yeah I’d be happy to share feedback and/or take a look at your file setup. You can reach me on twitter.com/deereis and share the link(s) thru DM