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.
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)
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.
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?
@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.
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 :( :( :( :(
@@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.
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.
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!!!!!
This video has made my day happier!
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.
This was super helpful. Thanks Miggi!
When I tryed create component with layout, it was very complicated method. This one simple and advanced - thanks a lot!
Didn't know about outline mode! wow
BRAVO, BRAVO!! ENCORE!!! do you have more videos? Very easy to follow along and understand.
Simple and to the point. Thank you!
Exactly what I was looking for. Many thanks!
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.
hey, after practicing 2-3 times i could make responsive component. This is superb :)
Amazing! Thanks for taking your time on this and showing the steps, you rock!!!
It works, so helpful! Thank you so much!🤩
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.
thank you so much Figma
I had been looking for a video like this for so long. This helped me create a complex button shape! Thank you 🥹
You da man Miggi!
This is really cool!
Awesome 👏
Amazing! Thanks for sharing Migi. Genio 🧞♂️!
Wow great tip...Thank Bro
Thank you so much!
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.
This is awesome
Super awesome.
This is just wow. Saving me ton of time.
Awesome video, I loved it!
DEEEEEEEEEEEEEEEEEE BEEEEESTTTTTTTTTTTTTTTTTTTTTTTTT
Great tip!
It's cool.
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)
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.
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?
Thanx bro! 👍👍
Clean!
Woow great feature
union is not working for me, all styling is gone after i apply it
Cool.
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. :(
Great!
Fckin genius trick
So smooth
@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.
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.. :(
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 :( :( :( :(
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.
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.
👏
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
CRACK!
magic
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
this is so confusing..