Hi friends! Miggi from Figma here with another Figma tip!
Today we are going to be making flexible tool tip components in Figma
So let's go! I am going to begin by drawing out a rectangle
and I am going to round off its corners by a value of 16
Next Im going ahead and choosing the polygon tool
and I am going to draw a little triangle here, I am going to rotate it and I am also
going to hit Command + E or Ctrl + E on Windows to expand it.
Im going to bring this down in size until its a value that I want
so lets have it about
40 by 24, and I am going to bring it right up
Against that shape until it snaps. Next, Im going to
select them both and make a union out of them
Im going to go over here and round out those corners a little bit so you see
we get these nice round corners around those edges
Im going to select that union object and come over here and draw out a stroke
value. I'm going to put the stroke on the center and have it be about
a value of 8. What I am going to do now is
select the create component button to make
that a component. Let's go ahead and name that. "Bubble"
So this is now our bubble component. Im going to command click on
the nub of the bubble and choose "Center"
constraints as well as "bottom" constraints.
Im going to command click (ctrl click for windows) on the rectangle in the bubble as well and choose "left + right" constraints
and "top and bottom" constraints. This way its going to scale
up and down and left and right, and the nub here is just going to follow
the bottom edge. So I am going to select the bubble object
that we have and you can see the bounds that we have down here
hold down the command key or ctrl key on windows to bring it up and
and snap it to a position right about here. You can confirm that by pressing
shift + O and checking in the outline mode so then this way you know that
its perfectly on the edge where you want it to be. Let's toggle that back
with shift + O. Next, let's create a text field
Im going to call this "tool tip" and what we are going to do
is make this an auto layout frame. So I am going to press shift + A
and you will notice that now you can see the auto layout
controls, the padding right on the canvas.
So I'm going to hold down the option key, or the alt key on windows along with the shift key
So option + shift and click
what that's going to do, is allow us to edit all
of those padding values at the same time. So I can set a value
padding of about 48. So now you can see here that 48
padding has been applied to each side. So I'm going to move that auto layout
frame here to the left. And now we are going to take a copy
of this component. So, an instance of this component
and paste it here, into this (auto layout) frame you will see it
that it is now in the auto layout stack
next what we want to do is make it absolute
position so that it is outside of that stack, then we are going to align left
align top, then we are going to send it to the back
so Im going to hit command + [ (left bracket) you can also move it back
on the layers panel itself. Let's select our text
and make that text black. And now we are going to select
that bubble instance and I am going to resize it
so that it will match the size of our auto layout instance. And once again, if you hit
Shift + O, you should be able to see where they align
so that way you can snap it exactly where you want it to be.
What we are going to do is select that instance once more
and set "left and right" constraints and "top and bottom" constraints
What that is going to allow us to do is to expand that bubble
based off of the text inside of it. Because its going to hug the text inside
and the bubble is going to expand to the auto layout frame.
So let's go ahead and call this "tool tip"
And let's make this a component
Im going to come up here, and create that as a component
lets move this over to the right
Now lets create a few component variants
So lets come up here and add a variant
When we select the component set, we can define the
property. So I am going to say "direction"
So we can set the first one as being "top"
we can select the second one and set it as being "bottom" and now
lets set it up so that it correctly matches that
lets open this up a little bit, lets move this
variant down a bit. We are going to select the
bubble instance inside, and we are just going to press shift + v
to flip that vertically. And now that is done. So lets create another
again a
another variant. So here we go, we have a third one. So this is going to be the left
side one
let's make sure we name it. Let's say "left"
Select the instance inside of it, and rotate it
hold down the option (alt) key and scale that down
hold down the option key and scale that up. On Windows that is going to be the alt key
And there we go, that looks pretty much done!
For the last one, lets go ahead and add one more variant. Let's select
the instance inside, now that all we have to do here is hit shift + h
to flip it horizontally and
make sure that we name it. So let's name this one "right"
So the last thing we can do is
we can make the text a component property
so I can select this text field, and it will then target the rest of
them and we can come down here to the content
area in the design panel and choose "add component property
So lets name this "tool tip text"
and give it a value of "tool tip copy"
And let's create that property. So now
we can drag out one of those instances. We can select
it, we can change it from being from top to bottom to left
to right. And we can add in the copy to represent it.
So
"thank you and happy designing"
iiiinnng. Thank you very much
hope you found this helpful
please check the comments for the community file and have a great day!