I'm Adriano (he/him), I’m a self-taught Brazilian designer currently living in NYC & working as a Senior Design Manager at eko.com
I've worked on pretty much all areas of design but in the past 5yrs, I've found that building digital B2B/C products & design systems is what I'm most passionate about!
My goal for this channel is to share knowledge with anyone that may benefit from it because when I started back in Brazil I depended on this same thing and also pirated copies of adobe CS products before it became adobe CC.
Today I use mostly Figma for everything but I love to explore new tools, currently really enjoying Pitch and Framer sites
Leave a comment or hit me up on Twitter @deereis if you have any questions ✌️
🎓 Self-taught ❖ Figma Nerd 🎮 Rocket League ⚽️💥🚗 🥁 Air Drummer ☕️ Barista
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
Anyone know a hack to have dynamic layout with cutout? I'm trying to design a button where the text is cut out to show whatever background color is there behind the 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.
Hi Adriano! I want to import my website prototype from XD to figma. I tried this but images in it aren't transferring. I'm a very beginner and unable to figure this out. Please help.
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
If I want to change the text color and icon color while hovering. How can I do that? It works for the text but I encountered an issue with the icon. Only the exact icon I used as a main component changes the color, while the replaced icons stay the same color as default state.
Hi on the nav item hover variant if you change the color of the icon there it should change it when you hover if it’s not changing make the sure the icon has the exact same name and structure as the one from the default state. If it’s still not changing it may be a bug that you need to reach out to the support team for help. Hope that helps
I mean they should have the same name in the default and hover state. If you’re using components for the icons make sure that the icons themselves(not the frame that wraps them) are flattened and have a consistent name. I add the icon names to their parent frame and the vector itself I flatten (command/ctrl + E) and name them all “shape”
Also you shouldn’t need to create new variants just to have different icon. If the icons are components and their structure are the same (as I mentioned above) they should work
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
Doesn't this create the issue that the hover state with the drop-down is on a timer, and means the user can't hover over a tab and read the drop-down options without moving their mouse?
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
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
i’m really struggling to get this to work properly. I’ve downloaded your attached file inside Figma and it uses ‘Mouse move inside’ and ‘Mouse move outside’ which don’t appear to be available in the interaction options! if I switch them to use ‘Mouse enter’ and ‘Mouse leave’ the first level (second menu item) and the submenu flicker on and off constantly when I hover the second menu item. Any ideas?
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
When you open another Q the previous one should close on its own ( I mean it shouldn't be two clicks only one click to open the one you want and close the previous one) please can you make a tutorial on that
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-IHgaG6_asjg.htmlsi=c2sr9n-zPm4qlFQb Hope that helps!
Hello, thank you for the content. How do you make the "line" go up when you hide the text layer? i did auto layout- vertical for all the layers before doing content. But my line stays at the same place.
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. :)
Nice trick that you can use is to set font-size property on html element to 62.5% and then you just divide number of pixels with 10. So 40px becomes 4em. And in order to not mess with default user settings for the font size you have to scale up in body element font-size to 1.6rem. This way everything stays the same and you get thinking in fractions od 10 when you perform conversions.
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
So very clean and a great walk-through tutorial. What about if my client wanted to place images within the FAQ answer content to reveal a small thumbnail to the right side of the text?
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.
At about 1:57 when you make the layer disappear and somehow make it an auto layout doesn't make sense. I tried and tried and eventually had to give up as I could not get it working.
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! THis was super useful but I'm having a hard time with making an expandable card with auto layout. The icons keep shifting within the box even though it is large enough and when I copy paste, the interactions aren't working. Any suggestions?
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
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!
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!
Hi adriano, I have been working on a self project which utilises accordions a lot, although I haven't been able to get the animation right, is there a way I can reach you with my prototype for feedback?
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
when watching this video, it absolutely looks like me making prototype in Figma (deja vu), but the difference is that you SOLVE the problem! thank you so much for sharing this
Anyone can help me? so i want to make some sidebar with nested submenu, and i use this accordion technique to wrap and reveal the submenu, but my problem is, i cant keep the submenu opened when move on to the next frame after the submenu was clicked. Are there any cleaner solution for my problem rather than making all the submenu frame possibilities one by one. thanks
Hey, hm that sounds like a tricky one. Maybe by creating a component set with 2 variants, a closed and an open one, then when you go to the next frame you'd have to have the open variant as a starting point. Just make sure you're using auto layout on everything. Not sure if that helps but I'd be happy to take a look at the file to try to help better too. Let me know :)
