Тёмный

Stop wasting your time with tooltips with Tooltip Wrappers! 

AM Design
Подписаться 33 тыс.
Просмотров 13 тыс.
50% 1

Опубликовано:

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 53   
@alejandroamsel
@alejandroamsel 8 месяцев назад
Thanks a lot for this video! The most annoying thing for me about the tooltips was the extra space they take if I don't absolute the position for them, and you took that point straight away, YOU ARE AMAZING!
@diogopacheco2107
@diogopacheco2107 Год назад
Dude, let me just tell you the most important characteristics of your RU-vid videos that I appreciate so much and make you stand out from the crowd: Myself, and every Designer in the world that strives to get better at it, consumes a lot of content, and RU-vid is our library, so I'm your "Persona", or at least, one of them. So I'll give you user-feedback to help you out: 1 - You go straight to the point. (Maybe this will change when your channel grows, but for now it's top-notch) 90% usable information is really amazing. I can´t skip your video, and that says a lot! :) 2 - Super useful tips and tricks that someone ALREADY working in UX and using Figma could need. Most content is for fresh beginners, not a lot for mid-range experienced Designers. 3 - You focus on Speed, and productivity. This is what makes and brakes real-life Designing work: TIME. Everything that saves time improves our skills as Designers. We talk about just a few seconds of saved time, but repeated Thousands of times in a day amounts to a huge difference for the best. I've discovered you only now, so I've still to watch all your content, but will do in the next month or so, for sure. Hope my two cents helped you in some way. If not, just take on the praise and use it as fuel for your endeavors. Cheers man
@AMDesignAndDev
@AMDesignAndDev Год назад
These were extremely helpful Diogo. My earlier videos may not be up to the notch, so hope you're not disappointed by them. But I'll strive to provide value to you all :)
@teegees
@teegees Год назад
Agreed! And AM I also appreciate that you respond to comments. Your pace is a bit fast for my taste, but it’s easy enough to rewind. Keep up the good work!
@shibambiswas415
@shibambiswas415 2 года назад
Ohh God.. I was searching for this all day long. Thanks Brother. ❤️
@shibambiswas415
@shibambiswas415 2 года назад
I hope you don't mind me calling you Brother. 😌😌😌
@AMDesignAndDev
@AMDesignAndDev 2 года назад
No worries and for sure not! Glad I could be of help
@Sofia0S0S
@Sofia0S0S Год назад
Always impressed with how much you teach me! Thanks
@thatproductguy
@thatproductguy 2 года назад
Cool tip. I should consider this in my next project. Keep up the good job you are doing.
@diogopacheco2107
@diogopacheco2107 2 года назад
Really, really valuable tips and knowledge man. 😊 I appreciate what you’re doing. 👍🏼 thanks
@adada1st
@adada1st 2 года назад
Thanks again! As always, a very helpful tutorial. Keep it up ;)
@SlimKhmissi
@SlimKhmissi 2 года назад
You're my hero man! Thanks a lot keep going!👍
@trombone0926
@trombone0926 2 года назад
so helpful, thanks again!
@CaylisMalania
@CaylisMalania Год назад
Thanks for this great tutorial!! When it comes to replacing the button with a different component, I'm having trouble getting the tooltip to be centered on the new component. I remade the component and made sure autolayout was on top center, resized the larger component the same way you did in the video (fixed width for "Tooltip wrapper", "fill container" for new component), etc. but can't figure it out. What am I doing wrong/what should I be doing to make sure it centers on the new component regardless of size? Thank you!
@marlondelgado3761
@marlondelgado3761 9 месяцев назад
I'm having the same problem and I can't solve it. Please tell me if you were able to solve it.
@danielamorue
@danielamorue 2 года назад
The power of of interactive components
@salisuoluwaseun5971
@salisuoluwaseun5971 2 года назад
Thanks bro
@okishan
@okishan 8 месяцев назад
One problem with absolutely positioning the tooltip will not function well if we want it appear BELOW the element. If the element in focus is of different size, then the component will not follow the 16px space that you designed.
@AMDesignAndDev
@AMDesignAndDev Год назад
Here's my official Figma paid course which you can check out on: www.asaadmahmood.com/courses/figma-noob-to-pro Use AMSUBSCRIBER voucher to get a 50% off. I can’t wait to see you all inside.
@gversuti
@gversuti 5 месяцев назад
Man, your video is the only one I've seen all day which not only goes straight to the point, but actually is concerned with integrating the element into an ACTUAL LAYOUT. Even Figma's official channel has a video about tooltips that looks pretty amateur from my point of view (they teach the basics without considering how it will fit into the layout where you place the object afterward)
@AMDesignAndDev
@AMDesignAndDev 5 месяцев назад
Thanks a lot! I don't really like doing the basic stuff.
@cultofcrypto6724
@cultofcrypto6724 Год назад
Amazing!
@PEDROID97
@PEDROID97 2 года назад
You’re a genious
@karachishani
@karachishani Год назад
Thank you AM Design
@TorneloChess
@TorneloChess Год назад
Hi! Long time fan, first time writer. How do I make the tooltips appear on top of everything else? If I use the component in complex frames, it ends up being hidden under near by components, even thought the layer with a tooltip is higher than the surrounding layer. Is there a way around it?
@moransotto256
@moransotto256 Год назад
You've got it?
@TorneloChess
@TorneloChess Год назад
@@moransotto256 No, I don't think it's possible. You have to setup an overlay for prototyping, but on component level it doesn't work.
@saadabd2211
@saadabd2211 2 года назад
one more thing, ive made a design system in which header a component in a different page of the same file, i want my header fields to navigate to certain page, like services and about us page, how can i do that in prototype...
@AMDesignAndDev
@AMDesignAndDev 2 года назад
You can just copy an instance of your header and place it in your page where you have the other pages you want to navigate to. Then I would suggest using a component on top of the header, and then linking the frames. That way, any updates to the header are preserved by the main component, and this instance which is wrapped up in a new component allows you the navigation flexibility.
@abulut
@abulut Год назад
You're a hero. But the only thing is, the tooltip cant be a instance in this method because the 'content' field doesn't show up in Figma when I try to use a instance of a tooltip
@diogoalvim2985
@diogoalvim2985 2 года назад
Hey man! I'm a brazillian guy and i love your videos. Your Design System playlist is amazing, Seria pedir muito, Would it be too much to ask, an updated playlist with Figma's new component format? Keep passing us knowledge, you are wonderful!
@AMDesignAndDev
@AMDesignAndDev 2 года назад
Hey thanks a lot for your feedback. I’ve already created a video on component properties, you can check it out below. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cOGyjb9qgBw.html
@sarojgurung9536
@sarojgurung9536 2 года назад
So does this kinda mean its a two step process in a way? Because it seems that you have to use the tooltip wrapper component to bring the tooltip first. Then change the component from button to input field.
@AMDesignAndDev
@AMDesignAndDev 2 года назад
Yup
@djashawe88923
@djashawe88923 Год назад
Hi, Thanks a lot for the tooltip wrapper tutorial which was very useful. At 6:10 I just can't seem to figure out how you put the text field into the button. I watched it so many times, but I couldn't figure out how you can just replace or paste the text field into where the button is. Help would be much appreciated. Thanks. 🤓👍
@feelcollins4358
@feelcollins4358 11 месяцев назад
I'm pretty late but you have to select the instance component you want to swap, then open your components section by pressing Shift + I and then hold down Ctrl (Windows)/ Alt (Mac) while clicking on the component you want to swap it with. Hope this helps :P
@saadabd2211
@saadabd2211 2 года назад
hey....im making a dashboard with the fields " name, company, DOB, etc" ....so i made a horizontal auto layout component of this...when i display this on the page...i replicate the variants 20 times (basically data of 20 individuals is shown vertically), so issue im facing is that everytime i try to change the name of each individual or company or any other field in other components, i do it by pressing ctrl+shift+click...and then i click to other respective fields and then i change the names via content reel plugin, same goes for avatars , when i have to change each avatar , i have to do this lengthy process everytime....is there any short way of doing this...
@AMDesignAndDev
@AMDesignAndDev 2 года назад
Yes, use the find/focus plugin or other layer selection plugins.
@teegees
@teegees Год назад
Why is the absolute positioning important? I never use that feature.
@moransotto256
@moransotto256 Год назад
Hi, thanks for your video! I followed your instructions in the video, but when I make a Tooltip Wrapper to the right or left - when I edit the text in toltip it hides the button content :( Is there a solution for this?
@AMDesignAndDev
@AMDesignAndDev Год назад
Have you adjusted the top/bottom constraint? And can you share the file?
@roeldekkers7451
@roeldekkers7451 Год назад
nice tutorial! one problem, when i try to change the tooltip text on the right direction, it automatically alligns to the right and causes a lot of spacing between the two elements. Do you know how i can fix this?
@AMDesignAndDev
@AMDesignAndDev Год назад
Can you record a video or send a figma file so I can understand the issue?
@lambisstratoudakis
@lambisstratoudakis Год назад
Amazing your channel. I have some problems when i try to replace a component. in that case the tooltip is not anymore there. Have to do with the naming of the components and variants?
@AMDesignAndDev
@AMDesignAndDev Год назад
Are you sure you’re replacing the child inside of this component and not the whole component?
@lambisstratoudakis
@lambisstratoudakis Год назад
@@AMDesignAndDev That was the issue. The Devil lies in the details!!! Thank you. Do we use the same technique if we like that the tooltip have more variants? Again, thank you so.
@AMDesignAndDev
@AMDesignAndDev Год назад
@@lambisstratoudakis yup.
@Jada-li9tv
@Jada-li9tv Год назад
Hover isn't user friendly on mobile devices
@AMDesignAndDev
@AMDesignAndDev Год назад
That’s true
@rameezkhan7645
@rameezkhan7645 11 дней назад
this whole thing is simple but you made is difficult by delivering things fast and using shortcut very fast, your approach is amazing but your way of tutorial is zero. that is way I am dislike it.
@AMDesignAndDev
@AMDesignAndDev 11 дней назад
Amazing! Thanks for the dislike!
@rameezkhan7645
@rameezkhan7645 10 дней назад
@@AMDesignAndDev thanx for replying and improve your tutorials
@appustudio8637
@appustudio8637 2 года назад
Love it, keep going
Далее
Amazing Figma Update: Widgets!
9:18
Просмотров 3,9 тыс.
Mistakes Designers make with Figma Components
17:46
Просмотров 58 тыс.
skibidi toilet multiverse 042 Trailer
01:57
Просмотров 2,6 млн
Figma Token and Variable Setup: Top Mistakes to Avoid
14:18
Creating a Design System - Awesome Textfields!
17:50
Просмотров 23 тыс.
Creating a Design System - Typography Basics
9:42
Просмотров 76 тыс.
Interactive tooltip in Figma
5:32
Просмотров 4,2 тыс.
STOP doing DROPDOWNS like this - Figma variables 2023
15:35
Thinking on ways to solve TOOLTIPS
20:41
Просмотров 19 тыс.