Hi, everyone in this video. I'm going to run through some slightly more advanced features for text. Ok. Just the ones that I use a lot I imagine you'll use. We're not going to cover every single use case for fonts, but I'm going to show you where to find them. We're gonna add links. I'm gonna show you how to do things like strikers, destroy the text. We're going to do proper paragraph spacing, letter spacing plus some other ones. Let's go and jump in. Ok. The first one is making sure that you're aware. I've got a style applied to this. I'm gonna break. It is. 00, not all of it. But lots of good stuff here in the advanced three little dots. Ok. We'll cover bits and pieces of it. Just the useful stuff. The main ones that I like to use is s uh, you know, leading or the line height here. Obviously we've looked at and the other one is space between paragraphs. So if I put a return between these two, I, I get a, is it a widow? Can't remember a widow or an orphan? Don't like them there. So I'...

m gonna open that up. Ok. So I've still got a return there but I wanted to do is open up the spacing. Don't be one of those people that do that. Ok? It works or do the thing worse when you select the text, can you do that and make the font size smaller? Yeah, you're laughing if you've done it. Ok. So I'm gonna select it all and I'm gonna go to this one here is the one I use quite a bit. So space between paragraphs, it'd be very common to divide your font size in half. You don't have to. Ok, whatever it is, divide it in half or at least quarters, some sort of easily divisible by your font size, makes it life easier later on when you're trying to line things up when you get a bit more advanced. But anyway, line height and this one space dream, what do they call it? They call it space after paragraph, spacing's give it the right name. Dan. Let's look at letter spacing because I want, I'm gonna set you guys a goal later on to create a logo based on the fonts that you're using. So, so we're gonna do Scott Headphones, right? Um I'm gonna pick a bold one and with my Scott very often I will grab these two. Is it this one or that two? Anyway, the space between letters often? Ok. So it's those two and I'm going to drag him down if it comes up mixed, it doesn't know what to do when you're dragging it. So I'm gonna delete that and then drag it this way. Oh Man, what a debacle. Zero. These things happen to the best of us. OK. So this is what I wanna do. I've selected them all. I've got it back to zero and I'm just kind of tidying this up and you might decide here like that is a big space on this font. I don't like it. So I'm gonna say you two are gonna go a bit smaller, not just this one smaller. It is that one? Cool. All right. If I'm honest, I end up doing a lot more design work and illustrate it. I'm just copying and pasting it into here. I will show you illustrator kind of connections later on, but later spacing or tracking or King variations of a theme. OK? So I'm gonna have Dan's Scott Headphones. You'll be doing your own one and we're gonna make like a little logo lockup up the top here. I might do this afterwards. Ooh, this cuts to one of the other things I'm gonna share in this video is sizing up. You're like, oh why is it size up? Remember the key tool or scale? OK. We'll actually just do things where we don't actually want to hit any of those like 7240 eights. We just wanna like make it bigger. So we're gonna do that this is gonna be my logo for the moment that will do working title shift zero. So about 100%. Yeah, it's big enough or it's not lining up the way I like. But let's get on with the more advanced ish uh font stuff. The next one is selecting all of the same. So let's say I've got this thing. It's got no, these three here don't have the uh style applied to them And I probably want, what did I decide? I think hitting three. So, uh I'm gonna go through like this first one, it might be across lots of different frames. We've got them all pretty tightly here. What I can do is do the, like we did select all the fills, we can stumble around in here and go to edit, select all text effects. Who remembers the? I don't know. Is it a shortcut? I think it is. So with it selected command forward slash or control forward slash on a PC and type in text tax properties. Where is it select? Same with text properties. There you go. So it's gone through and selected them all. And now I can say actually you're all hitting three. Actually, it's my alt heating three. So I'm gonna break it. Go back. You are my alt heating three, right? Yeah, here we go. Ok. So you can work your way through and update things, change them. You don't have to change it to a style, but that little select the same text properties is a handy thing. The newest thing for FIG A is now we've got in here, we've got bullets and numbering. Not very exciting. We're there. They are actually, they're really handy. Ok. But they're in there just so, you know, another kind of useful thing here might be. Well, kind of thing I want to show you is you might have a link in here. Ok. So I'm gonna select it all and can you see up here? Weird place for it. OK? You can click on this and say when that is clicked, we're gonna go to www dot That's in this case, go to figment.com. OK? Uh Nice. We're gonna style it to be the traditional Click me cos I'm a link color should check out what that actually is. But, and we're gonna make it bold another shortcut. OK? That I'm throwing in as a bonus is here we go. If you have anything selected, you can use some basic kind of formatting like command B or control B on a PC. OK? And it just makes it bold. Same with Italic uh command. I, if your font has an I, it doesn't have an italic, OK? But if it did command B this one here go to regular I, I select it command, I will go to Italic command. I'm saying command, there's all my Mac ones. So if you're hearing command, think control on a PC. So command U is underline does striker work. Command s it doesn't striker is in there under your advanced there it is there. Tell me what the shortcut for that is, is it X command X? Nope, I think closes. All right. So those are some basic formatting. The link will work in your prototype. So I'm gonna go play it and there you go. It's gonna jump out to a website. He's jumped out here. He's asking you, would you like to leave? Don't show again. Let's go do it. Let's go to Figner. Alright. So you get the idea for that one. What else? Last one is when you're outlining the font? Ok. So let's say that you are, it's your heading, ok? And you want to do something fancy with it. Ok. So I'm going to duplicate it because I'm going to wreck this thing. I know I'm going to zoom in shift two on my selection kind of zoom in on it and I'm going to hit command minus one to come back a little bit. Always zooms in too much. Come on fig just zoom in enough but not too close. So that's command minus to zoom out a little bit or control minus. So this is editable text. What I can do say you want to do something special to it, ok? Wreck it. Take ownership of it. We're gonna do, we gonna customize this font. What we can do is we can outline the stroke. OK. Basically, now this is not a font. OK, you can't edit the type but they're editable shapes so I can double click it, OK? To go into editing mode or remember with it selected, go to the fancy way or the long way. OK. And I can go in here and say, actually, what am I going to do? So, what I'm gonna do is I'm gonna select all of these and I'm going to make it. What am I gonna do? I'm gonna try and grab all those. I'm gonna have to zoom in to grab all of those. Here's one of them. Will that come for me? Here you go. You might have to zoom in to get a bit of detailed. Ok, Scott Headphones. What am I doing? Wrecking the joint? That's what I'm doing. I can't think of. I can't even do it. Ok. That's what happens when you don't really plan the video very well. Ah, it's kind of like a sound wave. Oh, I could see myself fixing this. Let's do one more. It's kind of like a sonic sound wave. Look at that. Beautiful. So you can outline text no longer editable. So always make sure there's a backup of it. Oh I wrapped up but I'm back now because I've got one other little tip. I was actually just using it. I was like I should show people that. Ok, so I'm gonna use this text over here. Ok. And with it selected if you're not in this, like, you know, very regimented size wise. Can you still at the playing around phase? You can select text and hold down command shift on MAC and that's control shift on a PC. And you're looking for the keyboard shortcut is it's either the period or the greater than less than I'm not sure you're going to have to experiment. I don't know which ones which OK, but you can go up and down with text kind of just, you know, by eyeball rather than kind of using the numbers over here or trying to kind of stick to some sort of predefined number. OK? That's handy. And I'm using the one next to it. So the look for the period in the comma or the greater than, and less than on your keyboard down by the M key. OK? And hold down the shift and command key on a mac or the shift and control key on a PC. All right. That is going to be it. It's not every single feature in fig A for text, but it's the headlines and the stuff I think you're going to use the most, but be sure to play around with the rest of it. You might find stuff in there that you enjoy using. All right on to the next video.

Class Materials

Bonus Materials

BYOL_Figma_Cheatsheet.pdf

Exercise_Files_-_Figma_Essentials.zip

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

UX Design

Ratings and Reviews

Mahyar Hassid

Great class, Daniel drops so much knowledge in every video and in all the in between unexpected moments that helps speed up your process!

2,000+ classes ranging from fundamentals to advanced techniques.

Useful Things To Know About Text In Figma

Useful Things To Know About Text In Figma

Lesson Info

45. Useful Things To Know About Text In Figma

Lessons

Introduction to Figma Essentials

Getting Started with Figma Training

What Is Figma For & Does It Do The Coding?

What's The Difference Between UI And UX In Figma

What We Are Making In This Figma Course

Class Project 01 - Create Your Own Brief

What is Lo Fi Wireframe vs High Fidelity in Figma?

Creating Our Design File & Introducing Frames In Figma

The Basics Of Type & Fonts In Figma

Rectangles, Circles, Buttons And Rounded Corners In Figma

How To Use Color In Figma

Strokes Plus Updating Color Defaults In Figma

Object Editing And How To Escape In Figma

Scale vs Selection Tool in Figma

Frames vs Groups in Figma

Class Project 02 - Wireframe

Where To Get Free Icons For Figma

Matching The Stroke Of Our Icons

How To Use Plugins In Figma For Icons

Class Project 03 - Icons

How to Use Pages in Figma

How to Prototype in Figma

Prototype Animation and Easing In Figma

Testing On Your Phone with Figma Mirror

Class Project 04 - Testing On Your Phone

What is Smart Animation & Delays in Figma?

Class Project 05 - My First Animation

Sharing & Commenting on a Figma File with Stakeholders

Sharing & Editing With Other Ux Designers In Figma

How I Get Inspiration For Ux Projects

How To Create A Mood Board In Figma

Class Project 06 - Moodboard

How to Work with Columns & Grids in Figma

Tips, Tricks, Preferences, and Weirdness in Figma

Color Inspiration & The Eyedropper In Figma

How To Create A Color Palette In Figma

How to Make Gradients in Figma

How to Create & Use Color Styles in Figma

Class Project 07 - Colors & Columns

Fonts on Desktop vs in Browser in Figma

What Fonts Can I Use? Plus Font Pairing In Figma

What Common Font Sizes Should I Choose In Web Design?

How to Make Character Styles in Figma

Lorem Ipsum & Placeholder Text In Figma

Useful Things To Know About Text In Figma

How To Fix Missing Fonts In Figma

Class Project 08 - Text

Drawing Tips And Tricks In Figma

Squircle Buttons with ios Rounded Courses In Figma

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

What Is The Difference? Union vs Flatten In Figma

Class Project 09 - Making Stuff

Smart Selection & Tidy Up in Figma

Do I Need To Know Illustrator With Figma?

Tips & Tricks For Using Images In Figma

Masking & Cropping Images In Figma

Free Images & Plugins For Figma

Do You Need Photoshop For Ux Design In Figma?

Class Project 10 - Images

What Is Autolayout & Expanding Buttons In Figma?

Class Project 11 - Buttons

Auto Layout For Spacing

How To Use Constraints In Figma

Combining Nested Frames Auto Layout & Constraints in Figma

Adding Text Box Autoheight to Autolayout in Figma

Class Project 12 - Responsive Design

Nice Drop Shadow & Inner Drop Shadow Effects In Figma

Blur Layer, Background Blur & Image Blur in Figma

How to Make Neumorphic UI buttons in Figma

Class Project 13 - Effects

How To Save Locally & Save History In Figma

What are Components in Figma?

Updating, Changing & Resetting Your Components

You Can’t Kill Main Components In Figma