Wow, I learned so much in quite a short bit of time. I am blown away at the depth of Figma. Just when I think I’m getting a handle on it, so much more comes out that I’m eager to learn and get after. Thank you for the great video. 👍
I 💖this, it's exactly what I needed to know. It's demystifying Figma, thank you. Great explanation and pace. Something interesting happens though when I place an instance of this tool tip into another component... The bubble reverts to a small size and leaves the text hanging out. The horizontal and vertical resizing then need to be reset to 'hug' and it's all good.
@@surajtarani5710 you can connect arrow and the bubble together with auto layout so it can be easy to enlarge/shrink by content. Also you can place the arrow easily with paddings.
Lovely. I could be beneficial to actually have two text layers, one for the main body of text and another for an optional heading, which you could also control with a visibility boolean property.
This may be sufficient for short, concise tooltips. In practice, however, it is unfortunately much more complex. Often you have actions that are located at the edge of the viewport, in which case the tooltip also moves out of the viewport. Then you have to align the tooltip left if the tooltip flows out of the viewport to the right. But what about multi-line tooltips? So that we don't have a long ugly line, we need a max width. But what happens when this width is reached? The tooltip should then grow dynamically.
I'm a bit confused as to why there is so many steps to do this ? Maybe I missed something but it feels like it could have been made more easily using just one layout with a frame inside ? I guess the point of the bubble wouldn't be as easy to replicate in all direction maybe without doing it the way you did but I still feel there has to be a more straightforward way ?
There are more straightforward ways to get a simpler tip box, yes. I am hinting at greater opportunities of boolean operations and constraints. The single seamless stroke around the bubble, the expanding aspects of it, and a simple way to approach component properties and have a flexible library item for resuse. This method, too, allows for cool approaches for making scalable frames around auto layout objects. I may follow up with another one to demonstrate the potential of constraints / boolean ops / absolute positioning.
Thanks for the video! Is there a way to set a max and min width for a component like this? Seems I lose the responsiveness when switching to a Fixed width (vs. Hug)
@0:23 you said you hit Ctrl+E / Cmd+E to expand it, but it did the opposite. The container hugged the object instead. This is a neat trick, but did you just say it wrong or is that expression correct? What do u mean by expand?
@@Underhills I’m calling it expand because the function is named that way in other software like illustrator. Where you are “baking” in non destructive operations… also sometimes called flattening.
@@Underhills think of it like the non destructive operations like point number are being expanded to the vectors. Not that the bounds are expanding out.
@@miggi-from-figgi Ok, thanks for clearing that up. I have always wondered how to actually make the container hug the content like that so the tip is great.
@@miggi-from-figgi Yes you can nest it into a seperate tooltip component. So you have "Tooltip bubble" loving inside a "Tool tip" Component which would be like a 24px x 24px frame.
clearly i did something wrong :( but idk what. See, affter created the text content, I try a long text in the original variant an the bubble does expand as it should, but when I made a copy of it it doesn't :( :( :( :(
There's alot of stuff not happening here. There's no way to set instance constraints cause all the constraints options are disabled when I try to add constraints to the instance of the main component. Also, when I scale the main component I made exactly by your instructions the bottom pointer doesn't grow with the bubble, it stays the same although everything is set exactly as instructed. I tried making the text and bubble from the beginning as one auto layout frame and added the pointer but then the bubble just vanished when I did the Union operation. Is it just me or is Figma very buggy?
1. Use rectangle as one shape 2. Then try to draw the polygon tool with pen tool (thats easy) and 3. Select union (first option) 4. Then select the bottom polygon shape put centre and bottom constraints 5. Select rectangle shape put left-right | top- bottom constraints
You can set constraints once something is inside of a frame or component. They need a parent to respond to. In the example I make the union, then convert to a component. The component behaves like a frame so I am able to set constraints on the children of the union.
@@tirumala_ch That doesn't work for me. Instead what worked is to create one base component with all the pointer shapes placed on all sides of the rectangle, then make component variants out of them by selectively hiding the redundant pointer shapes one by one on each variant. Top, bottom, left, right. I didn't have to wrestle with all the other stuff that I couldn't seem to get in order. I tried your approach three times before I gave up and tried the other solution that seems to be working with auto layout and component variants for the pointer variants.
why use this 'absolute' method over simply making an autolayout button and containing into another autolayout container with a triangle. Does the absolute method make the design more closer to what will be code implementation?
I tried to do without absolute position but strokes messed up. You can't add separated strokes to polygon. I couldn't get rid of top stroke of polygon. How you make this with old school auto layout? Can you share please?
Would have never figured this out without this video. Not sure if that's a compliment to the creator, or an insult to the usability of Figma.
I absolutely these videos. No fluff, no waffling, just pure learning, straight to the point. Love, love, love.
Absolute positioning is a such leap forward guys, much appreciated feature that makes Figma out of this world! Cheers ;)
This video just fried my brain in the best possible way. WOAH!!!!!
Wow, I learned so much in quite a short bit of time. I am blown away at the depth of Figma. Just when I think I’m getting a handle on it, so much more comes out that I’m eager to learn and get after. Thank you for the great video. 👍
I have the same! ^^
I 💖this, it's exactly what I needed to know. It's demystifying Figma, thank you. Great explanation and pace.
Something interesting happens though when I place an instance of this tool tip into another component... The bubble reverts to a small size and leaves the text hanging out. The horizontal and vertical resizing then need to be reset to 'hug' and it's all good.
When I tryed create component with layout, it was very complicated method. This one simple and advanced - thanks a lot!
This video has made my day happier!
Didn't know about outline mode! wow
BRAVO, BRAVO!! ENCORE!!! do you have more videos? Very easy to follow along and understand.
This was super helpful. Thanks Miggi!
I would use auto layout for the bubble and arrow.
Could you elaborate please?
@@surajtarani5710 you can connect arrow and the bubble together with auto layout so it can be easy to enlarge/shrink by content. Also you can place the arrow easily with paddings.
Simple and to the point. Thank you!
Amazing! Thanks for taking your time on this and showing the steps, you rock!!!
Exactly what I was looking for. Many thanks!
hey, after practicing 2-3 times i could make responsive component. This is superb :)
Lovely. I could be beneficial to actually have two text layers, one for the main body of text and another for an optional heading, which you could also control with a visibility boolean property.
It works, so helpful! Thank you so much!🤩
I had been looking for a video like this for so long. This helped me create a complex button shape! Thank you 🥹
thank you so much Figma
Amazing! Thanks for sharing Migi. Genio 🧞♂️!
This is really cool!
Thank you so much!
You da man Miggi!
This is just wow. Saving me ton of time.
This may be sufficient for short, concise tooltips. In practice, however, it is unfortunately much more complex. Often you have actions that are located at the edge of the viewport, in which case the tooltip also moves out of the viewport. Then you have to align the tooltip left if the tooltip flows out of the viewport to the right. But what about multi-line tooltips? So that we don't have a long ugly line, we need a max width. But what happens when this width is reached? The tooltip should then grow dynamically.
Wow great tip...Thank Bro
Awesome 👏
Awesome video, I loved it!
Super awesome.
I'm a bit confused as to why there is so many steps to do this ? Maybe I missed something but it feels like it could have been made more easily using just one layout with a frame inside ? I guess the point of the bubble wouldn't be as easy to replicate in all direction maybe without doing it the way you did but I still feel there has to be a more straightforward way ?
There are more straightforward ways to get a simpler tip box, yes. I am hinting at greater opportunities of boolean operations and constraints. The single seamless stroke around the bubble, the expanding aspects of it, and a simple way to approach component properties and have a flexible library item for resuse. This method, too, allows for cool approaches for making scalable frames around auto layout objects. I may follow up with another one to demonstrate the potential of constraints / boolean ops / absolute positioning.
This is awesome
Thanks for the video! Is there a way to set a max and min width for a component like this? Seems I lose the responsiveness when switching to a Fixed width (vs. Hug)
Woow great feature
The shape of the polygon gets distorted when scaling the bubble horizontally.
Hi! If the constraints are set properly it won't distort. Take a look at the community file in the description.
same here, and I have done it many times. :(
Thanks for sharing this amazing video sir!
somehow I am not sure where I have made a mistake; couldn't achieve the end which is shown here.. :(
Great tip!
DEEEEEEEEEEEEEEEEEE BEEEEESTTTTTTTTTTTTTTTTTTTTTTTTT
It's cool.
@0:23 you said you hit Ctrl+E / Cmd+E to expand it, but it did the opposite. The container hugged the object instead. This is a neat trick, but did you just say it wrong or is that expression correct? What do u mean by expand?
It expands it from a Polygon object to points. Notice the bounds on it change. This way it’s tight to the triangle.
@@miggi-from-figgi Hm, okay. Just found it hard to grasp the fact that somethings expands when its actually contracting.
@@Underhills I’m calling it expand because the function is named that way in other software like illustrator. Where you are “baking” in non destructive operations… also sometimes called flattening.
@@Underhills think of it like the non destructive operations like point number are being expanded to the vectors. Not that the bounds are expanding out.
@@miggi-from-figgi Ok, thanks for clearing that up. I have always wondered how to actually make the container hug the content like that so the tip is great.
union is not working for me, all styling is gone after i apply it
Thanx bro! 👍👍
Clean!
So smooth
Cool, And how did you set your figma in dark mode...?
Hello, to enable dark theme in Figma, click the Figma icon in the top-left of the toolbar > Preferences > Theme > Dark
This is great but it wouldn't work if you wanna make an interactive tooltip with the tooltip icon and bubble appear on hover :/
Why so? You can nest it inside an interactive component for that behavior or make it more suited to your needs.
@@miggi-from-figgi Yes you can nest it into a seperate tooltip component. So you have "Tooltip bubble" loving inside a "Tool tip" Component which would be like a 24px x 24px frame.
Fckin genius trick
Cool.
Great!
clearly i did something wrong :( but idk what. See, affter created the text content, I try a long text in the original variant an the bubble does expand as it should, but when I made a copy of it it doesn't :( :( :( :(
There's alot of stuff not happening here. There's no way to set instance constraints cause all the constraints options are disabled when I try to add constraints to the instance of the main component. Also, when I scale the main component I made exactly by your instructions the bottom pointer doesn't grow with the bubble, it stays the same although everything is set exactly as instructed. I tried making the text and bubble from the beginning as one auto layout frame and added the pointer but then the bubble just vanished when I did the Union operation. Is it just me or is Figma very buggy?
1. Use rectangle as one shape
2. Then try to draw the polygon tool with pen tool (thats easy) and
3. Select union (first option)
4. Then select the bottom polygon shape put centre and bottom constraints
5. Select rectangle shape put left-right | top- bottom constraints
You can set constraints once something is inside of a frame or component. They need a parent to respond to. In the example I make the union, then convert to a component. The component behaves like a frame so I am able to set constraints on the children of the union.
@@tirumala_ch That doesn't work for me. Instead what worked is to create one base component with all the pointer shapes placed on all sides of the rectangle, then make component variants out of them by selectively hiding the redundant pointer shapes one by one on each variant. Top, bottom, left, right. I didn't have to wrestle with all the other stuff that I couldn't seem to get in order. I tried your approach three times before I gave up and tried the other solution that seems to be working with auto layout and component variants for the pointer variants.
👏
How do I make unions now? the option is gone!
Make sure you're selecting at least two layers, it should appear then. LMK :)
@@surajtarani5710 I did exactly what he did in the video but when I selected both shapes the union didn’t show up for me or in the edit menu
What is outline status's shortcut?
Hello, you can enable outline mode by pressing Shift + O
CRACK!
magic
this is so confusing..
why use this 'absolute' method over simply making an autolayout button and containing into another autolayout container with a triangle. Does the absolute method make the design more closer to what will be code implementation?
That's right! Easier handoff.
I tried to do without absolute position but strokes messed up. You can't add separated strokes to polygon. I couldn't get rid of top stroke of polygon. How you make this with old school auto layout? Can you share please?