Skip to main content

How To Make & Prototype A Tool Tip In Figma

Lesson 86 from: Figma UI UX Design Essentials

Daniel Walter Scott

How To Make & Prototype A Tool Tip In Figma

Lesson 86 from: Figma UI UX Design Essentials

Daniel Walter Scott

new-class art & design

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

86. How To Make & Prototype A Tool Tip In Figma

<b>In this lesson we will make and prototpe a tool tip in Figma. The tool tip is used to help inform users if they are unsure about an element of the design or information.</b>

Lessons

Class Trailer
1

Introduction to Figma Essentials

02:53
2

Getting Started with Figma Training

03:06
3

What Is Figma For & Does It Do The Coding?

03:46
4

What's The Difference Between UI And UX In Figma

05:22
5

What We Are Making In This Figma Course

09:18
6

Class Project 01 - Create Your Own Brief

04:01
7

What is Lo Fi Wireframe vs High Fidelity in Figma?

02:34
8

Creating Our Design File & Introducing Frames In Figma

08:29
9

The Basics Of Type & Fonts In Figma

10:51
10

Rectangles, Circles, Buttons And Rounded Corners In Figma

06:50
11

How To Use Color In Figma

05:45
12

Strokes Plus Updating Color Defaults In Figma

09:28
13

Object Editing And How To Escape In Figma

01:47
14

Scale vs Selection Tool in Figma

02:39
15

Frames vs Groups in Figma

09:24
16

Class Project 02 - Wireframe

03:00
17

Where To Get Free Icons For Figma

09:10
18

Matching The Stroke Of Our Icons

05:16
19

How To Use Plugins In Figma For Icons

04:31
20

Class Project 03 - Icons

03:48
21

How to Use Pages in Figma

08:31
22

How to Prototype in Figma

10:46
23

Prototype Animation and Easing In Figma

10:53
24

Testing On Your Phone with Figma Mirror

05:40
25

Class Project 04 - Testing On Your Phone

03:51
26

What is Smart Animation & Delays in Figma?

08:44
27

Class Project 05 - My First Animation

02:01
28

Sharing & Commenting on a Figma File with Stakeholders

07:10
29

Sharing & Editing With Other Ux Designers In Figma

06:58
30

How I Get Inspiration For Ux Projects

06:39
31

How To Create A Mood Board In Figma

05:33
32

Class Project 06 - Moodboard

01:26
33

How to Work with Columns & Grids in Figma

13:54
34

Tips, Tricks, Preferences, and Weirdness in Figma

07:21
35

Color Inspiration & The Eyedropper In Figma

06:34
36

How To Create A Color Palette In Figma

09:02
37

How to Make Gradients in Figma

07:09
38

How to Create & Use Color Styles in Figma

08:01
39

Class Project 07 - Colors & Columns

04:00
40

Fonts on Desktop vs in Browser in Figma

01:30
41

What Fonts Can I Use? Plus Font Pairing In Figma

06:01
42

What Common Font Sizes Should I Choose In Web Design?

11:30
43

How to Make Character Styles in Figma

06:36
44

Lorem Ipsum & Placeholder Text In Figma

04:28
45

Useful Things To Know About Text In Figma

09:35
46

How To Fix Missing Fonts In Figma

02:42
47

Class Project 08 - Text

05:19
48

Drawing Tips And Tricks In Figma

09:38
49

Squircle Buttons with ios Rounded Courses In Figma

02:48
50

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

07:25
51

What Is The Difference? Union vs Flatten In Figma

03:36
52

Class Project 09 - Making Stuff

03:29
53

Smart Selection & Tidy Up in Figma

08:40
54

Do I Need To Know Illustrator With Figma?

04:15
55

Tips & Tricks For Using Images In Figma

06:11
56

Masking & Cropping Images In Figma

09:12
57

Free Images & Plugins For Figma

02:31
58

Do You Need Photoshop For Ux Design In Figma?

10:40
59

Class Project 10 - Images

01:17
60

What Is Autolayout & Expanding Buttons In Figma?

10:27
61

Class Project 11 - Buttons

01:15
62

Auto Layout For Spacing

05:47
63

How To Use Constraints In Figma

08:22
64

Combining Nested Frames Auto Layout & Constraints in Figma

11:54
65

Adding Text Box Autoheight to Autolayout in Figma

08:27
66

Class Project 12 - Responsive Design

02:19
67

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

05:56
68

Blur Layer, Background Blur & Image Blur in Figma

05:57
69

How to Make Neumorphic UI buttons in Figma

07:37
70

Class Project 13 - Effects

01:53
71

How To Save Locally & Save History In Figma

05:42
72

What are Components in Figma?

06:19
73

Updating, Changing & Resetting Your Components

07:47
74

You Can’t Kill Main Components In Figma

07:22
75

Where Should You Keep Your Main Components In Figma

05:02
76

Intro To The Forward Slash / Naming Convention In Figma

08:55
77

Class Project 14 - Components

00:44
78

How To Make Component Variants In Figma

06:41
79

Another Way To Make Variables In Figma

06:14
80

How to Make a Multi Dimensional Variant in Figma

11:13
81

Class Project 15 - Variants

01:41
82

How To Make A Form Using Variants In Figma

12:52
83

Class Project 16 - Form

01:27
84

Putting It All Together In A Desktop Example

19:44
85

How To Add A Popup Overlay Modal In Figma

03:03
86

How To Make & Prototype A Tool Tip In Figma

07:26
87

What are Flows in Figma?

05:39
88

Slide In Mobile Nav Menu Overlay In Figma

03:55
89

Class Project 17 - Prototyping

01:10
90

How To Pin Navigation To The Top In Figma

10:17
91

How To Make A Horizontal Scrolling Swipe In Figma

06:36
92

Automatic Scroll Down The Page To Anchor Point In Figma

04:50
93

What are Teams vs Projects vs Files in Figma?

05:18
94

How Do You Use Team Libraries In Figma

11:03
95

The Difference Between Animation & Micro Interactions

02:55
96

Animation With Custom Easing In Figma

25:36
97

Class Project 18 - My Second Animation

01:54
98

How To Make Animated Transitions In Figma

12:34
99

Class Project 19 - Page Transition

01:31
100

Micro Interactions Using Interactive Components In Figma

05:54
101

Micro Interaction Toggle Switch In Figma

04:23
102

Micro Interaction Burger Menu Turned Into A Cross In Figma

04:23
103

Class Project 20 - Micro Interaction

01:35
104

How To Change The Thumbnail For Figma Files

04:10
105

How To Export Images Out Of Figma

07:40
106

How To Share Your Document With Clients & Stakeholders

07:09
107

Talking To Your Developer Early In The Figma Design Process

03:55
108

Sharing Figma With Developers & Engineers Handoff

06:07
109

What Are The Next Level Handoffs Aka Design Systems

03:18
110

Class Project 21 - Finish your design

04:57
111

What Next?

06:08

Lesson Info

How To Make & Prototype A Tool Tip In Figma

Hi, everyone in this video, we're going to make this little tool tip that appears when you click on the CS V kind of information thing. Um And there's a lot of just building like the card, you know, tool tip and the little um information icon here. So what I'm gonna do for you if you, you know, you can follow along with the whole thing, but if you just wanna cut to the chase, OK. What you need to do is let me show you you have a frame down here. OK? In our case, it's just a circle and we have another frame up here, which is my tool tip with some text in it to connect them up. You click on this, you say go to there when you're tapped, navigate to tool tip. OK? That's wrong. I wanna go on tap open overlay to the tool tip and I want instead of centered. OK? I want to switch it to manual and you'll see this ghost kind of version of it. OK? So it starts over there when you click it, it'll appear wherever this is OK. So I'll stick it there. Let's give it a preview and you click on that and i...

t appears. All right. So we're gonna do that the long version by building all of this. So stick around if you want to see it, otherwise jump straight to the manual positioning. All right, let's get started with, with Zamir. OK? So let's make our tool tip on the checkout page. OK? We're gonna have to draw two parts, the trigger. OK? The little button that makes it pop up and then the little button. So O for the oval tool or the circle tool, draw out something kind of the right size. It's kind of the right color. I'm going to add that little kind of information I that goes in the tool tip. So I'm gonna use the text tool, click once I'm gonna type it. I OK. I'm probably not gonna use my font. I'm gonna use Roboto or I've started using open says sands for kind of information stuff. Can you see the difference between Roboto and open sands? OK. They're different fonts. OK. This in the middle ish, let's make it white. Let's send them both. Now, centering there is a short cut. It's option H to send to them uh like horizontally and option horizontal, V for vertically, OK? On a PC, it's hold down the alt key and H or V for horizontal vertical. OK? Maybe you across there. Got both of them selected option H now because we're dealing with something so small we've only got like one pixel, we can't straddle the pixels. So something like in Photoshop. So you do need to make sure that the circle is kind of big enough to have a space in the middle. Can you see that line there? Option? H There we go. OK. You two can spend way too long on your little trigger. OK. So I've got both of the oh spent two more needs to be bold. I don't know why. No, it doesn't. Alright. So with them selected, I'm gonna turn them into a little frame. It's command shift G or right, click them, turn them into a frame. I'm gonna call this one my uh it's gonna be tool tip and this is gonna be the trigger. OK? Let's build the other part. So let's grab a rectangle and you're like I thought we use frames for everything. I'm using a rectangle here because I want to grab that when you start using this boolean stuff and you can't do that with frames. OK? This is one of those use cases where we're gonna use rectangles and triangles. Oh OK. Cos I want to do this so select them option. H send them together and let's smoosh them. If you just click the first one, it'll do union. There you go. That's the one you use the most and I'm gonna double click it and I'm gonna grab the round the corners. I've got very inconsistent round corners throughout you should have, oh, I guessed four. You should have consistent round corners throughout your whole kind of app. I'm gonna select these this, so that, where is it that tool tip and this unions I'm holding shift. So I can no click this first one, hold command key on a Mac control key on a PC. So you can select both of these and again, option H so they line up. Actually, I might get this to pop down a little bit. I also want to be white. Let's get some text in it. Click and drag for a fixed width box. OK? I got some text to put in there. That box just isn't big enough. Double click, go inside. So I'm just messing with a rectangle, something like this. I'm gonna switch it as well to the fixed height and where to say fix height. I mean order height. I'm gonna center it as well. OK? And yeah, let's give it a drop shadow. Oh There's lots of things going on all. Change the drop shadow. I OK. I'm gonna stick these both in a frame. So they're kind of one unit. OK? Has to be a frame. OK? We're going to say that this is the tool tip pop up. Cool. So I've got two bits. I've got that thing. This is my tool tip trigger and I've got this. Now mine's kind of tucked inside of that. Does it matter? Probably not. Mine's kind of mixed up in this group. Is it? No, it's not. Let's get you out of there, get out of there. OK. So there they are. Let's put them underneath each other. So this thing here starts over this far, just like the other one we did. OK. And what we say is you when you are clicked. So let's go to prototype, let's say when you are clicked, I want you to go here. Oop. OK. And on tap, which is great. Navigate to the tool tip. Actually, I want it to open overlay. OK? And the difference between this one is it's up there and it can appear in the middle. It's not going to quite work. Let's just prototype it quickly. OK? I'm gonna click on that button and it appears in the center of my screen. I want it to be just at the top. So what you need to do is change this to say we had centered. You probably saw there, there's top left, top, right and bottom center. Those are the main ones. There's a bunch of other ones including manual. And what manual does is that it shows you a kind of a preview of where it's going to appear. So I'm going to say there you go, my arrow keys just to nudge it down. So that's where we keep it over here for working purposes. So it's not on screen and then it just appears here and I said it's gonna overlay. It's going to not gonna dissolve, it's just gonna instantly appear, not gonna gray out the background. Let's preview it or present it. OK. Let's go. You look at that when I click off in the background, nothing happens. So let's do that. So let's say that whenever somebody uh clicks in the background area, it goes off. All right. Preview it one more time. Shouldn't I gotta stop closing that preview. This will take longer and longer. The more images you have involved in your preview. Oh Look at that cool little tool tip. All right. So basically the same as the last one. Except that we can use that manual positioning. That's the uh uniqueness about this particular tool, tippy thing. All right. Let's jump in the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf
Exercise_Files_-_Figma_Essentials.zip

RELATED ARTICLES

RELATED ARTICLES