Free Figma Advanced Course: Become a Figma Pro!

Hello. Uh, I'm Dan Scott and this, my friend, is the Figma advance course.

Now, this course is aimed at people who have either done my Figma essentials course or you're selftaught. You're

pretty good, but you know that there are so many more like tools and tips and tricks and workflows and updates that you just haven't had time to explore yet. If that sounds like you, this

yet. If that sounds like you, this course is for you. Who's this guy? I am

Dan Scott. I am a UX designer and Figma instructor. Uh, I've won multiple

instructor. Uh, I've won multiple teaching awards and I've helped more than a million people now just like you to become better designers. So, we're

not just going to move boxes around here. We're going to actually build

here. We're going to actually build something. You'll get your own unique

something. You'll get your own unique project and persona. And by the end, you'll have a complete app ready to drop straight into your portfolio. First,

we'll use AI inside of Figma to move fast. I'm talking real efficiency. The

fast. I'm talking real efficiency. The

kind that saves you hours, not minutes.

We'll go deep on auto layouts and constraints, stuff that separates amateurs from pros. You'll master

components and variables so tight they're impossible to break and effortless to update. We'll add visual punch, effects, typography, and micro interactions that make your design stand out. I'll show you workflow hacks for

out. I'll show you workflow hacks for managing your assets, grids, and styles like an absolute boss. And I'll show you some of the hardware that make you faster and make you look like you know what you're doing when people walk past

your desk. Ooh, look at that. You'll use

your desk. Ooh, look at that. You'll use

variables to build light and dark modes, compact and comfortable layouts. We'll

go into advanced animation, masking, and video work. The kind of stuff most UX

video work. The kind of stuff most UX designers don't even realize Figma can do. You'll learn to run better user

do. You'll learn to run better user tests, prototype faster, and build things that feel real. You'll understand

accessibility collaboration developer handoff, using dev mode, refactoring, and team libraries like a pro. So, are

you ready to become a Figma pro? If you

are, sign up and get ready to go from Figma to a Figma superhero.

Don't worry, I project superhero all through the course. I've noticed that um while I'm recording, I made the shirt, right? I'm like, keeps getting scrumpled

right? I'm like, keeps getting scrumpled up. So, I do this the whole way through

up. So, I do this the whole way through the course, okay? To try and unscrumple it and project superhiness.

So natural.

Get on with the course.

All right, you made it in. Welcome.

Congratulations. You made a good choice.

Uh the first thing you're going to do is download the exercise files for this course. Okay, there'll be a link on this

course. Okay, there'll be a link on this page to download those. Inside of there will be a shortcut sheet. Um, I'll go through them in the course, but there'll be a sheet with them on there as well where you can print off and circle the

ones you really like and add the ones that I've missed. Stick it next to your computer. Look all awesome. I speak

computer. Look all awesome. I speak

fast. I think I speak fast. Um, so you can slow me down. There's a cog down in the corner here where you can click it and set the speed that I talk at. You

can either put me in super slow drunk mode or chbunk mode or leave me like this. Up to you. Figma is newish and

this. Up to you. Figma is newish and just changing all the time. They love to move things around. So, if uh you are in the course and you're like, hm, this is not named the same, but it looks the same. It's probably the same. Or if it's

same. It's probably the same. Or if it's moved, you might have to have a look around to see where it's slightly gone or renamed. Look in the comments. I

or renamed. Look in the comments. I

might have left a comment. If it's easy, if it's a big change, I'll go and re-record the course. But there are changes all the time. Figment like to do that to us. Can you do this course with the free version? You can for a bit. Um,

a lot of the course you can do on the free version. That's no problem. There

free version. That's no problem. There

will be some paid u parts that we'll look at. So, if you don't have that, you

look at. So, if you don't have that, you can just follow along and you might end up deciding I need the paid version. Um,

but yes, it's not a waste of time doing this with the free version of Figma. Um,

I'm going to do mine on a Mac uh with the downloaded software. You can do it on PC in the browser. It all looks and works the same. Um, some of you will be coming on from the uh Figma Essentials course and some of you will be jumping

straight to this course because you're ready for it. the people coming on from the older course, well the older course, the first course, the essentials course, you will find that there's a tiny bit of overlap. It's when we get to kind of

overlap. It's when we get to kind of trickier things where we're going to push it further, things like autoouts, we'll just cover quickly what an allout does and how it functions, which you've

already done, okay? Just like a little recap before we go off and push it even further. So, there's a couple of times

further. So, there's a couple of times we were like, haven't we done this?

You've done a little bit of it, but we're going to take it further in this course. And I want everyone to be kind

course. And I want everyone to be kind of like starting at the right start, if you know what I mean. Uh, in this course, there's a couple of level ones and level twos like autos. There's a

level one, level two. The reason I do it to break them up so that we don't go mad and spending the whole chunk of course looking at this one function, okay, components or a variable or something.

Okay, so I've kind of done a level one where we do all the probably going to use a lot type stuff. We'll take a break, do some other things so that we don't go crazy, but also find bump into

some reasons why, oh, this would be good if we could do more with that earlier thing we learned. Surprise, level two um where we go through it and um just kind of like expand on it. So, you'll see a

few level ones and twos in this course.

That's what they're for there, to split them up so we're not doing getting bored with the same thing, but also so that we get a chance to work with it and find the reason why we'd look to go even further with these features. Lastly, uh

you can follow me at Figma, okay?

There's a community. Go to figma.combol.

Okay? And you don't have to, but follow me there and that's where I'll post the finished files from this course. Okay?

If you're just starting, yeah, there'll be the finished files on the course. You

can have a poke around the things that I made. It's not particularly organized,

made. It's not particularly organized, but it's sometimes handy to see the files that I've been working on, and you can take a look at them, too. All right,

that is it, my friends. No more talking.

Let's get making. We'll see you in the next video, won't we? Hello. Uh before

we get started, I'm going to give you each unique brief to work through for the course. We're all going to build a

the course. We're all going to build a music app. I'm going to give you your

music app. I'm going to give you your own kind of version of it so that you're not copying me and everyone's looks different. So, it's good for your

different. So, it's good for your portfolio cuz it's unique. Um so, if you go to random project generator.com, okay, that's something me and the bring your laptop team made and you find frig

advanced. Okay, click on it. Enter your

advanced. Okay, click on it. Enter your

village or town name. Okay, mine is limmerick. I'm going to say generate

limmerick. I'm going to say generate project and I have got the I don't even know what bluegrass is, but that's going to be my one. Try and keep the one you get. It kind of pushes you out of maybe

get. It kind of pushes you out of maybe your comfort zone or like it shows that makes it more of an intellectual kind of a project where you have to kind of um think of the user. Okay, bluegrass is

something that I don't know about. I'm

going have to have a quick look at the genre. What kind of vibe has it got? It

genre. What kind of vibe has it got? It

feels I don't know actually. I don't

know.

Um, so yeah, Limic brew glass. And what

it has as well down here is is that it's given you the brand to use. Okay, we're

going to create a little micro brand.

It's not a branding class. We're just

going to use a jackal as the logo. Okay,

so we're going to find pictures of jackals. We're going to find a little

jackals. We're going to find a little icon for the logo just so everyone's unique. This is where you get it from.

unique. This is where you get it from.

Don't hit reply. Oh, what's that? Retry.

Okay, definitely don't hit it three times. Just grab it. Take a screenshot

times. Just grab it. Take a screenshot of it here because it gives you exactly what we're doing. Okay, it doesn't really matter too much now. Just grab

it, take a shortcut or download it as a PNG. That's what I'm going to do and we

PNG. That's what I'm going to do and we are going to work through the class.

Yours is going to be different but similar. You get it. All right. Next

similar. You get it. All right. Next

video. Hi everyone. We're going to start the course looking at a feature called first draft. Okay. It's AI driven. It's

first draft. Okay. It's AI driven. It's

a great way to kind of get templates, get kind of started. Um it's more useful once you've got a few more of the skills from this course to kind of take it further, but I want to show it now cuz it's awesome and a great way to get started with projects. So you can see

down here I've got the prompt open.

Okay. And I'm going to say it's a basic app. make a checkout page for a music

app. make a checkout page for a music event app. And boom, there you go. It's

event app. And boom, there you go. It's

made a checkout page. I can play around with the styles and fonts, okay? But it

is something generated from scratch from Figma's AI. Let's jump in and look at

Figma's AI. Let's jump in and look at the pros and cons of it and how to kind of get it working for you. We'll also

look at the AI feature for add interactions. All right, let's go. All

interactions. All right, let's go. All

right, so I'm in a new blank design file. I'm in design, this little tab

file. I'm in design, this little tab down the bottom here, and I'm going to go to actions. Now, this one here is a paid feature. Um, so just watch if

paid feature. Um, so just watch if you're on the free one. It is uh where is it? It's called first draft. So you

is it? It's called first draft. So you

might search for it. I found mine here under design tools. Going to click it.

Okay. The cool thing about it, you can kind of give it some guidelines as in do I want a basic app or a wireframe. Okay.

Does it need images or not? You know, uh basic site or a site wireframe. Okay.

We've looked at that before. High

fidelity, low fidelity. Um, so I'm going to do an app and I'm gonna say I want it to be um, it's an event listing app

for music and just click make it. Stand

back, watch the AI bots do the little thing. Oh, that was quick. Thought we

thing. Oh, that was quick. Thought we

might even have to jump cut and faster.

Oh, Coldplay Taylor Swift. I'm out. Ed

Sharon, Billy Isish, it's not my music.

Um, but what you can see here is it's actually built this unique app for you.

Um, it is generating uh these images.

These images are like it's AI engine making them. That's why sometimes they

making them. That's why sometimes they can take a little while and they're kind of like sparkly, but oh my goodness, it's made an app. Look at it. This is

cool. Let's prototype it. Let's go. Yep.

Okay. And let's have a look. I like it.

What works? What doesn't? Okay. It's

just kind of mocked up. doesn't do a whole lot. There's not a lot of um

whole lot. There's not a lot of um interactivity. You can like in the

interactivity. You can like in the essentials course go you actually let's look at something else and let's look at the colors. Watch this. That's the first

the colors. Watch this. That's the first color way. Okay. You can see you can go

color way. Okay. You can see you can go through and say, "Oh, I like these ones." It's a great way to get started.

ones." It's a great way to get started.

And once you'll finish this course, the advanced one, you'll be able to add all the interactivity and all the right ways to kind of get it out for designs. It's

like working with a template except the template you need to be very customized, okay? Especially with things like the

okay? Especially with things like the colors, things like let's like make changes as well. Look, you can say actually rounded corners. I want super rounded corners. No rounded corners.

rounded corners. No rounded corners.

We're going for the boxy look. Okay, the

spacing. We want to open that up. It's

just very cool.

What kind of fonts do you want to use?

Okay, you can work through it. You can

prompt it as well to say um can you uh add a large hero box? I don't know if this is going

hero box? I don't know if this is going to work, by the way.

Okay. But you can start prompting it to do stuff. It would be probably easier

do stuff. It would be probably easier for me to do a lot of small changes myself.

Okay. Cuz it's done a version of it.

It's not the thing I had in my head. So,

that's going to be the tricky part. So,

you can prompt away. And sometimes it's easy just to make it. Let's have a look uh under assets. Okay. It has got no assets for this particular um document.

There's no library. There's no styles for it. Maybe that'll change by the time

for it. Maybe that'll change by the time you get to it. But now there's still a lot of work to do. But very cool way to get started once you've got some skills.

You can't just be a UX designer and go, "All right, I've learned nothing about Figma. I'm just going to use the

Figma. I'm just going to use the prompt." Maybe that's possible in the

prompt." Maybe that's possible in the future. I don't think so. But I want to

future. I don't think so. But I want to show you that there. The other thing I wanted to show you from the essentials course was let's say we want to make another page. Let's go you

another page. Let's go you and let's select it all and delete it.

And this one here, we're going to go back to our prompt again and we're going to say uh where we got first draft.

Okay. Okay, I'm going to say event and listing in detail.

Let's see. Oh, spell it right. Dan,

there we go.

All right, it's gone. And where is it?

Oh, it just made a new page rather than trying to use the one that I made for it. But you can see here, has it used

it. But you can see here, has it used the same fonts? Let's have a look. Uh,

public sands. And this one is uh, no outfit. So, it's going to get better.

outfit. So, it's going to get better.

You know, I'm looking forward to the time where I just need a really basic page, like a TE's and C's page or a checkout page that looks like a really trustworthy one and it can take the styles that you've already got and then

apply them. That's probably not too far

apply them. That's probably not too far in the future, but for the moment, it's kind of more idea generation um and you fixing it up and changing it around after now cuz like everything is

different. But what it can do is we can

different. But what it can do is we can do uh this part here. We go into the actions and we can say I'd like to look at add interactions. Okay. Uh between

you and you add interactions.

Okay. And it did it. Okay. So let's add the little magical interactions. So

let's give it a prototype now. Let's

start with this guy and go to play and let's have a look. I can't even remember which button it was. Oh yeah, it worked.

Okay. And then go back to the home. All

right. So those two little things can be powerful. Okay. and will be better later

powerful. Okay. and will be better later on. But I just want to show you earlier

on. But I just want to show you earlier on in the course the kind of new things that are happening with Figma. And I can come back and update this video in the future. It's not taking our jobs, but it

future. It's not taking our jobs, but it is shortcutting some of the things we used to do in terms of like, all right, I wonder what a good form looks like.

You can start working with make a first draft or like normal go back to home on the browser version. Remember, go up to the F and go to home which is at the top. Okay? And you can go to the

top. Okay? And you can go to the templates. There's plenty of templates

templates. There's plenty of templates out there. That's kind of the way I'm

out there. That's kind of the way I'm using it at the moment. It will get better, but it's new. It's fancy. And it

will be more handy when your skills are even handier and you can kind of like take what that makes and make it uh you know connect it all up with styles and auto layouts and variables. Oh, it's

going to be fun. All right, that is it for the first video. What did you think?

Have a play around with it. I will see you in the next video.

Hi everyone. This video we're going to look at Apple's liquid glass. Okay, it

is a very cool effect. Okay. And you can see here it's part of the UI, but we can do it inside of Figma as well. We're

going to make this that moves around and you can kind of see through. It's all

glassy and good. All right. Let's get

into it. All right. First up, open up a new design file either using the new tab design file anywhere you want. Um, and

from your exercise files, okay, I want you to bring in just an image. It can be anything. It doesn't really matter. I'm

anything. It doesn't really matter. I'm

using this liquid glass effect. And I

like to drag them in from my browser like that just to straight into Figma.

But you could use the command shift K which is a shortcut for bringing in images. Or you can go down here to the

images. Or you can go down here to the rectangle and say you are image video.

The other thing just to kind of clear up is that there's a couple of different modes down the bottom here. Um unless I tell you it's this middle one we're going to be working on design. So get

the image in. I've lost my image. You

come in. Okay. And let's draw something over the top. Now, the liquid glass effect only works on frames. So, you

can't use the rectangle tool here to draw it. Okay. It needs to be done with

draw it. Okay. It needs to be done with a frame. So, the F key, let's draw our

a frame. So, the F key, let's draw our big old button through the middle here.

Okay. And we're just going to keep it simple for the moment. Let's just go and add the effect. Okay. So, under effects.

So, I've got it selected. It's a frame.

I can hit plus. Okay. And I can go to drop shadow and we can get into this one. Glass already. It's awesome. Okay.

one. Glass already. It's awesome. Okay.

And what we can do is just move it around. Oh, it's so cool.

around. Oh, it's so cool.

Um, let's do a couple of little things.

Um, let's make sure I have rounded corners. To get maximum rounded corners,

corners. To get maximum rounded corners, just put it up something really high like a th00and, then it will round off the edges. And I'll zoom in. Okay. And

the edges. And I'll zoom in. Okay. And

let's have a little look at the different effects for glass. Okay. To

open up, so if I got it deselected, I click on it. And to open up the effects, okay, I click on this little icon here.

Okay. And it will open this back up.

Okay. The light. Where is the light hitting it? It's up to you. How bright

hitting it? It's up to you. How bright

is the light? You can type it in or just click and hold any of these icons here.

Okay, I'll leave mine at 80. And then

you can just play around with these.

You'll get a sense for them. There's no

right or wrong. The default's great.

Okay, but you can play around with things like the depth. How like how thick is the glass. Okay, big bubby glass. Little thin sheet of glass. Okay,

glass. Little thin sheet of glass. Okay,

if you're designing for the Apple OS, you can check the specs to see what exactly it needs to be. you'll probably

be better off going to the uh home and going to templates, okay? And then doing a search in here and typing in liquid glass. So, Apple calls it liquid glass

glass. So, Apple calls it liquid glass and uh Figma just calls it glass effect.

Okay? So, you're probably better off just starting with one of these because somebody else has gone through the Apple design system. Oh, there it is. There

design system. Oh, there it is. There

it's the kit. Just start with the kit.

Okay. But for us, and let's go back to this. Okay. We can play around with

this. Okay. We can play around with refraction and depth because we're not limited by the Apple specs. Okay. And

one of the ones that is a bit weird is dispersion. Okay.

dispersion. Okay.

You can see it a bit more when it's above say some text. Can you see the edges here? It's kind of all gray. If I

edges here? It's kind of all gray. If I

go dispersion right up, kind of add some colors in there. Maybe better with some depth. There you go. You can kind of

depth. There you go. You can kind of start to see the blue come through and a bit of yellow over here. Obviously,

frost is just how blurry it is. Ooh, I

do like it. The last one is the light.

Can you see the little light bulb? You

can drag them around. Okay. Depending on

where you want the light to hit. Did we

already do that? I think we did. All

right. The only thing uh that might uh catch you out is that this needs to be on top of whatever it's trying to disperse. That's why we just started

disperse. That's why we just started with an image just to make things easy for the moment. Let's do something hard in the next video. Glass effect. Oo,

it's nice. Hopefully, my voice has kind of got better. It's morning time and I've got my kind of like halfway through first coffee voice. through the course, you'll be able to actually tell what time of day it is by how much my voice

has actually started to come around. All

right, next video. Dan,

hi everyone. This video we're going to make this this kind of glass slidy thing. It's not really what we're doing

thing. It's not really what we're doing here. What we're doing here is that this

here. What we're doing here is that this is the advanced course, but sometimes all of the advanced goodness is real tricky to work with. Let's have a look at this. Okay, if I want to move this

at this. Okay, if I want to move this button over here, you can see there's auto layouts inside of auto layouts inside of auto layouts. It's very good and structured, but sometimes you just want like move it and then you're like,

why are you why are you in there? Stop

being so complicated. Okay, so that's what we're going to do in this video.

I'm going to show you how to kind of like turn off or work with some of the complicated layouts. We're doing the

complicated layouts. We're doing the advanced course, but sometimes we're not quite advanced yet. We're just we're getting towards advanced. Just need to turn some of the stuff off or at least work within it. So, let's jump in and

show you how to work with complex layouts. All right, let's go. All right,

layouts. All right, let's go. All right,

first up, you need to open up a file.

There's a couple of ways of getting to it. Um, I've put a copy of it in the

it. Um, I've put a copy of it in the exercise files. So, you can double click

exercise files. So, you can double click this fig file, okay, and open it up. Go

through the steps of where you wanted to put it. Probably put it in your drafts,

put it. Probably put it in your drafts, click import, and then wait for a second. And then it'll say, do you want

second. And then it'll say, do you want to move it to a publish folder? You

don't have to. Or into a project. You

can just click done, and it'll be ready to work with. Okay. The other way of doing it, um, there it is there now.

Okay. I can double click it and start working. The other way to do it is if

working. The other way to do it is if you go to figma.com/bol.

Okay. You will find the files in there as well. Whichever way you want to do

as well. Whichever way you want to do it, okay? And you will find Figma

it, okay? And you will find Figma advance one. Okay? There'll be a bunch

advance one. Okay? There'll be a bunch of other files as this course grows.

Okay? You can open them up and say, "Open up in Figma, please." And they'll open up in the browser. It doesn't

really matter how you get to this file.

I'm going to open it up in my desktop cuz I'm old school. It should be in my drafts. There we go. And there it is.

drafts. There we go. And there it is.

There. All right. Now, I give you this one because it is very complicated. It

is and it isn't. Okay. This was created earlier on in the course when I was using the uh first draft feature inside of Figma. Okay. Not everyone has access

of Figma. Okay. Not everyone has access to this cuz it's part of the paid one, but I've got the end result here for us all to work with. The cool thing about it is that it is all auto layouts and it

is very well structured. Okay. So, if I grab this one and say I want uh shopping below food delivery. Okay, I can just drag it underneath and look, they switch around cuz they're in auto layouts.

Undo. Let's go into the shopping uh layer here and say, "All right, this top one, bottom one, next one." Okay, I can just click the top one, hit the down arrow, and can you see it moves it around in there? So, it's all very

nicely structured. Sometimes though, you

nicely structured. Sometimes though, you go in, you're like, "Oh, more autos, autos, more auto layouts, more auto layouts. There are so many auto

layouts. There are so many auto layouts." And where it becomes tricky is

layouts." And where it becomes tricky is even if you are advanced, you're like, "Okay, I just want to move this button."

Okay, like you saw at the beginning here, I'm going to move this up here.

It's going to go into there. All right,

now it's part of that auto. It's not I just want it kind of up. It's

everywhere. Okay, so that can be tricky both working with that feature first draft or just other people's files or say you've just joined a big um enterprise company and they've got a big

design um system and you're just like, "Oh man, this is really hard. I just

need to do something simple. Stop being

so clever. Okay. So, what you can do, um, one of the nice things is you can select the parent frame. Okay. And right

click it and just say you, uh, where is it? Auto layouts. Oh, more

auto layout options. They keep moving that and renaming it. So, have a look.

It'll be hidden here somewhere. We could

say remove auto layout, but that'll only do it for that one frame. We want to say get rid of all auto layouts in there, and you'll find that they're all just plain old frames. Now, things are just a little easier. All right. One of the

little easier. All right. One of the other handy features was working with complex layouts, okay, is that there's a lot of layers going on like still all the layers are there, which is good. Um,

sometimes though, this button here, I just want to go in, double click, then again, double click, double click, double click. I finally find this thing

double click. I finally find this thing called large button. Okay? And it's got some text in it. Great. I want to move it out. We're going to make a glass.

it out. We're going to make a glass.

Okay? Because I'm going to show you kind of more of a for instance of that effect we did earlier. Okay? But I want it to be kind of like over the top of everything. So if I start dragging it,

everything. So if I start dragging it, one of the defaults for Figma and one of the complications of working with complex files is that it will go inside of this container which is part of the

shopping checkout. Okay. Or you kind of

shopping checkout. Okay. Or you kind of put it in here and it's now part of this layer. It kind of wants to automatically

layer. It kind of wants to automatically nest, okay, into all these frames or auto layouts, okay, automatically, which is cool most of the time, okay, but say sometimes you just want it to kind of go where you want. You do things like this.

So I'm going to undo to where it was. So

you're the same as me.

Okay, I found the button. There he is.

All the way down here. I'm going to drag him out. I'm going to say you get out

him out. I'm going to say you get out and put you maybe in between the bottom bar and the main content. Let's get him up and out. So, he is out. Okay, so he's on top of everything. But as soon as I start dragging him, he dives back into

something. So, he's above everything.

something. So, he's above everything.

Now, I can close all these down just to make everything a little bit cleaner.

So, I've closed everything down. My

bottom bar is there. I don't really need that for the moment. And there's my uh button large primary. And again,

remember if I drag him, he goes inside something. What I can do is if I uh

something. What I can do is if I uh click him, okay, before I start dragging, I've clicked my mouse down, hold space bar. Okay, then you can just drag him around anywhere you want. He

won't miss Oh, I can't really point at the layers over there, but he won't move off the layers. Okay, and I can put him wherever I want. I can see you go there.

Now, you see, he didn't jump inside any other layers. I find those two things

other layers. I find those two things are kind of the most important when it comes to working with other people's complex files or using some of the automatically generated um files,

templates, okay, is just to go to auto layouts, remove them, and when you start dragging things around, click, hold, hold space bar, move them around, okay?

And then you won't jump layers. Cool.

That's it. Now, what I want to do is do the thing I showed you at the beginning where um we had the glass button and it was moving along. So, let's do that together. So, a couple of things I need

together. So, a couple of things I need to do is my button's going to stay up here. What I might do is just lock these

here. What I might do is just lock these layers just so I don't have to hold the space bar. I can just drag it around and

space bar. I can just drag it around and there's nowhere it can go. Okay. And a

couple of things I need to do is let's just preview it now. So, I'm going to click on the app. I'm going to say let's open up the preview. Okay. So, that's um shift space and it should stay open there. Okay.

there. Okay.

You'll see if I scroll up and down it is working. If yours is not working like

working. If yours is not working like that, what you can do is click the outside, go to prototype. Actually,

let's click on the background. Okay. And

I'm gonna say make sure. So, I got nothing selected. Prototype. Prototype

nothing selected. Prototype. Prototype

settings. I'm going to use the this one here, the iPhone 16. Okay. And uh that's fine. You can use whatever one you want.

fine. You can use whatever one you want.

Let's open my preview again. And still

working. If that's not working, okay, sometimes you got to go in here and say actually scroll behavior. Okay. I want

to scroll vertically. Okay. So, that it does actually start scrolling. Open it

up again. We're all good. Next thing I want to do is I want to get this to stick to the bottom. How do I do that?

Because if I have it selected and I grab this button here and I say actually I want you to be aligned with the bottom of this. At the moment it's constrained

of this. At the moment it's constrained to the top. Okay. So you I constrain to the top which is going to work probably.

Okay. So I'm going to say you I'm in prototype. What I can say is I want you

prototype. What I can say is I want you positioned to scroll parent. Nope. I

want you to stay in place. I can

prototype it. And now when I scroll, can you see he stays in place?

Let's make him all glassy. Okay, so

let's click on him. Let's go to design.

Okay, let's go down to effects. Now

remember, this has to be a frame for this to work. Can't be a rectangle. I'm

going to go to drop shadow. Going to go to glass. Oo, I do like it. Okay, so I'm

to glass. Oo, I do like it. Okay, so I'm going to crank up the depth. The frost

is about perfect. H, everything looks good by default.

Do like sliding refraction up and down, though. Look at that. That's cool. All

though. Look at that. That's cool. All

right. Now, let's go and preview him again and scroll him up and down. And he

does the cool glassy thing, but stays kind of where he should be. Now, how do I get them to align to the bottom? Okay.

So, let's close that down. Let's go U. I

need to find out where the bottom is.

So, if I click off, okay, and I go to prototype, I can see iPhone 16 is what is it? Uh 393x 852.

is it? Uh 393x 852.

So I can click on you and say actually under design size of this frame should be 393 by 852 92. It was only a second ago. I can't remember. We're going to

ago. I can't remember. We're going to guess 852. Come on brain. Okay. Can you

guess 852. Come on brain. Okay. Can you

see that? It's clip contents. You can

turn that on and off. Okay. So at least I know where the bottom is now. So I can say you are going to be down here. I

could hold shift so he doesn't jump into um all the different frames. But

remember I lock those layers so it's not a big problem. Now he's constrained to the top. See that dotted line? I can say

the top. See that dotted line? I can say you constrain to the bottom because we have a bottom now that he can constrain to. Doesn't really matter. Shift

to. Doesn't really matter. Shift

spacebar and oh, look at us doing cool glassy effect things on really complicated designs. Okay. Select the

complicated designs. Okay. Select the

parent, right click it, go to more layout options and go to remove all auto layouts. Okay. And when you're dragging

layouts. Okay. And when you're dragging around, hold shift while you're dragging. He won't dive into all the

dragging. He won't dive into all the different frames and auto layouts. And

add a sweet glass effect. You can see mine's got a uh red tinge which is coming from this. Okay. My fill which has been turned down. You could turn this back to white to get that kind of more traditional glassy effect. Maybe a

little bit of blue. All right. I hope

that was useful. Kind of touched on some things we learned in the essentials course like constraints. Played around

with prototyping and making sure we can jam a little prototype into an iPhone which always looks cool. All right. I'll

see you in the next video. Hi there.

Hey. Uh I just wanted to bump in here and see how you doing. How you doing?

Uh, if you're enjoying the video, well, you made it this far. Can't be too bad, right? If you are enjoying it, uh, like

right? If you are enjoying it, uh, like the video, uh, subscribe to the channel.

It's free for you and it's like super valuable for me. It's my ask of you at this point. Uh, and if you did want to

this point. Uh, and if you did want to go further, this video that you're watching, this YouTube video, it's quite long, right? Um, this is just the first

long, right? Um, this is just the first quarter of the course. So much more value in the full course. Um, so if you did want to go further, enjoy hanging out. Um, you can pick it up here. Uh,

out. Um, you can pick it up here. Uh,

there'll be a link in the description.

The bonus of doing the full course is all the extra videos obviously but also there is a quiz question kind of test your knowledge as you go through help it real sink in uh your class projects uh the website has a place for you to

submit and get feedback on those projects which is super valuable uh what else also there is the uh really important well I don't know I think it's important certificate at the end okay uh

there is a certificate there's a merit certificate and a distinction certificate so check that out link in the description not ready to go for the full course don't worry It's all right.

Heaps more to come. Get on with the free stuff, Dan. All right, more free stuff.

stuff, Dan. All right, more free stuff.

Hi everyone. Let's look at a couple of cool effects. One is this noise that

cool effects. One is this noise that we've applied to the background image.

Kind of gives it an old school look. The

other one is this this texture. So, we

can get this like really cool glass effect like we're peeking through the toilet window of the camper. Look how

cool it looks. Oh, awesome. Right, let's

jump in and learn texture, noise, and some of the effects the layer order has on these effects. Let's jump in. All

right, to get started, you can just have any image. Um, we're going to use the

any image. Um, we're going to use the glass effect as well for this uh texture and noise effect. But if you do want to follow along exactly, there's an effects O2.fig, okay, in your exercise files.

O2.fig, okay, in your exercise files.

You can open that up in Figma, okay? Or

you can find member at figma.com/bol

and you can open up this file okay and open your own version of it in Figma.

Okay. So uh I have got this button.

Okay. It has got the glass effect applied to it. Okay. It is effect and I've added glass. The other new um effects if I hit plus. Okay. You can

have more than one effect applied to an object. Okay. And I can say I don't want

object. Okay. And I can say I don't want a drop shadow which is cool. Okay. I do

like the drop shadow. Okay. But I'm

going to go to the one that says texture. Okay. And you can kind of see.

texture. Okay. And you can kind of see.

Let's zoom in a little bit. Okay. What's

happening to it? Let's crank it right up. Okay. The texture is kind of like

up. Okay. The texture is kind of like frosted glass. Okay. And that's what it

frosted glass. Okay. And that's what it does. Okay. Gets that kind of like

does. Okay. Gets that kind of like stippled, dimpled, whatever you call it.

Okay. And you can play with both these settings. You need a bit of both. The

settings. You need a bit of both. The

one thing that does look a bit weird is the edges of this. Okay. And there's a mixture of if I open up a texture again.

Okay. A mixture of clipping to the shape. Okay. Okay, so that it doesn't go

shape. Okay. Okay, so that it doesn't go outside of it. And going back to glass, okay, and playing around where the light source comes from. Okay, and turning that up and down. It depends on every

instance. There's not a special number,

instance. There's not a special number, but it is very cool.

The other one you can do is let's have a look. So effects, let's add a third one.

look. So effects, let's add a third one.

Let's look at text. Uh, sorry, noise.

Okay, noise. You can see add some noise.

Okay, so in this case, it's interesting.

I wanted to show you here because noise is interesting. You can play around with

is interesting. You can play around with just a mono color, a duo color. So,

there's two of them. Okay? And multiolor

is going to work with kind of all sorts of, you can see in here the noise is a bunch of different colors. Okay? So,

gives a kind of a grainy old school effect. The reason I want to show you

effect. The reason I want to show you this is I'm going to crank this up noise size just so you can see it. Okay? You

can play around with some effects. You

can play around with the order. So, at

the moment it's doing noise then texture. You can say actually by

texture. You can say actually by dragging this strange little area over here where the little hand is, you can say you and drag it up and above like layers. Okay? So, it's going to do the

layers. Okay? So, it's going to do the texture first and then the noise. You

might just find that you can't get the effect you want. You're trying to copy somebody else's. It's cuz this order is

somebody else's. It's cuz this order is around different ways. Glass in this case doesn't seem to make any difference which way it is. Okay. But some of them do. What noise is probably nicer for is

do. What noise is probably nicer for is for something like this kind of retro image here. I can say you, my friend,

image here. I can say you, my friend, have an effect and it's going to be the noise. Okay. And I'm going to zoom in a

noise. Okay. And I'm going to zoom in a little bit and you can start to see it.

Gives it an old school retro kind of vibe.

Let's turn it off. Turn it on. Turn off.

Turn on. You get it. Um, one of the things about this setting, okay, where we've got the texture on, I'm going to turn the noise off. I'm going to delete it by hitting the minus. I like the texture. I don't so much like the noise

texture. I don't so much like the noise on it. But let's say I do do this. Okay.

on it. But let's say I do do this. Okay.

If I want to, at the moment, it's a frame. Let's say I want to put text

frame. Let's say I want to put text inside of it. So I'm going to grab my T for the type tool. Click inside and I'm going to say book now book.

Okay. See what happens. You're doing it to the parent has got the texture. Okay.

So everything inside of it unfortunately gets the effect applied to it as well.

So if I want to do it like this, I can't do fancy auto layouts. The text needs to be inside of it. So all I need to do is do the text over here outside of it.

Book. Now, back to the move tool and put it on top, not inside. Okay. One thing I didn't notice is that the image was a frame and now the buttons inside of it.

And because I applied the image to have uh an effect on it, it's applying to everything inside of it. Can you see my text has even got the noise uh effect on it. So again, if I didn't want that, I'd

it. So again, if I didn't want that, I'd have to grab these two guys and go y, you're out of there. You're on top. And

I picked a different font. Um there you go. That is the texture and noise

go. That is the texture and noise effects. And you just need to know,

effects. And you just need to know, especially everything inside of Figma, is that you can often change the layer order of these things. You can have two fills. Okay. And then play around with,

fills. Okay. And then play around with, let's go this one. I can crank this right up. Okay. And if it's on top, it's

right up. Okay. And if it's on top, it's very different. If it's underneath, it's

very different. If it's underneath, it's not that different, is it? Let's turn

that up. Okay. So, if the whites on top or the whites below, it is very different. Okay. All of these have it.

different. Okay. All of these have it.

And it's not that clear that you can move them along. There you go.

Undo, undo, undo. We made a cool button that now I might need to group. Right

click group.

Now they move around together.

Excellent. All right, that is it. I'll

see you in the next video. I'm back cuz I wanted to show you something. I was

just getting ready to do the intro for this course. Um, sorry, for this video.

this course. Um, sorry, for this video.

I do that at the end so you can see what we make. I was just making it look

we make. I was just making it look better cuz I was like, something a bit me about this. And I was like, oh, I made it better. Oh, I should show them.

Okay, so I've got this thing selected.

Okay, so I've got the button selected.

There's a couple of things going on here. So, there is this little fill

here. So, there is this little fill that's left on this. It started life at 100%. It automatically when you apply

100%. It automatically when you apply the glass effect turns it down to 10%.

Okay, I could get rid of that and it kind of gives it this more glassy kind of effect. I like it. Okay, the other

of effect. I like it. Okay, the other thing is this like weird little border around it that appears a little bit too strong. Okay, if I go in and click on

strong. Okay, if I go in and click on this, I can see the glass under texture.

Okay, radius. If I turn that right down or up, can you see what it's doing here?

Okay, I've somehow picked this like really weird point where it's the most horrible. So, you can crank it up and it

horrible. So, you can crank it up and it kind of goes away. And when it's really low, it goes away. To find something that works for you, you can play obviously around with size as well.

Okay. But if you get it kind of smaller and play around with the radius, big or small, it just I don't know. I was like, that's what I was looking for. And my

text needs a drop shadow. It's not so blurry and doesn't go down so far. All right, that is it. Now we can finish the video. See

is it. Now we can finish the video. See

you in the next one. Look how cool it is.

Hi everyone. In this video, we're going to look at something called progressive blur. It is this where color kind of

blur. It is this where color kind of becomes progressively blurrier. You can

do it with images as well. Um it's

really easy and really quick. And we'll

do that first off. Um, if you do though want to hang around, we'll make this where we kind of uh go a bit further in this tutorial just to recap some of the nice things we learned earlier in the essentials course just to catch everyone

else up. Um, there are some paid

else up. Um, there are some paid features that we go through some AI.

It's worth hanging around if you're a little bit newish to Figma. If you just came here for the progressive blur, do that at the beginning and then skip on to the next video. All right, that is it. Let's get in. Let's make blur

it. Let's get in. Let's make blur progressively. All right, you'll notice

progressively. All right, you'll notice that my UI is dark. I figured I'd show you just before we get started. But I

switch mine at night time. You have to have a file open. Go to the F key. Go

down to preferences. And under theme, you can go between light and dark. It's

nighttime now. And the light one is actually really light in my office. So I

just kind of turn it down. Remember file

open preferences theme dark. With

nothing selected, you can change the color of your page. Okay. It might be default be white, but you might be wanting to work on a darker color here.

Cool. Let's grab the F key. Click once.

Let's grab our iPhone 16. I like this.

The kind of white contrast against the black. Let's bring in an image. So,

black. Let's bring in an image. So,

command shift K is one that I use a lot.

Or I drag it in. The problem with dragging it in, if it's a really high resolution image, it comes in massive.

So, command shift K is a really good shortcut. We're going to bring in this

shortcut. We're going to bring in this 03. Okay. And we're going to go open.

03. Okay. And we're going to go open.

The reason I do it this way is I can click and drag it to be a size that I want. Roughly about that sort of size.

want. Roughly about that sort of size.

Now, let's just make it progressive blur and then we'll make it look like it did in the intro. So, all you need to do is another effect here. Okay, you can go to from drop shadow down to text to layer

blur. That's the one we want. Okay, and

blur. That's the one we want. Okay, and

hiding in here is progressive. Okay, and

what you can do is even just like that.

It's pretty cool, right? It starts at the top really crisp and you can see down the bottom here it's blurry. You

can drag these little points around.

Okay, so from left to right, you can hold shift and it will snap into um straight lines. Okay, so you can do cool

straight lines. Okay, so you can do cool stuff. It doesn't have to be an image.

stuff. It doesn't have to be an image.

Okay, I can grab the F key uh for the frame tool, holding shift, so it's a square. Okay, give it a fill color. Any

square. Okay, give it a fill color. Any

old fill color over here. Okay, as long as it's green, greenish, come on. Green,

teal, aqua, that one. Okay, we can do the same thing. Oh, let's do a shortcut.

Okay, let's have this selected. I've got

an effect. I can click here and it kind of goes blue. Can you see this like area that we used it earlier on to drag it around? You can click on it, copy it,

around? You can click on it, copy it, click on this, and hit paste. You can

copy and paste styles. Cool. Okay. And

we'll do it. We'll go in and we'll affect this one a bit more. And it does a really cool thing. So, if you grab end, okay, and drag it right up. Can you

see it kind of like really blurs out?

It's a very cool effect. I don't get to use it very often. It does work in code.

Okay. So, your developers, he's going to freak out a little bit about having to apply it, but it is achievable, reasonably easy with CSS. And that's

progressive blur. What we're going to do now is kind of style it how we had before. Also, there's a little bit of a

before. Also, there's a little bit of a recap on some of the things we learned in the essentials course. Just for those people who need a recap or if you skip the essentials course cuz you're already really good. You might want to check out

really good. You might want to check out the rest of this video in case there's something you've missed. So, I want to keep that. Just looks cool. Oh, looks

keep that. Just looks cool. Oh, looks

even cooler against the dark. Love it.

So, what I want to do is I want to make this square. So, I need to make this

this square. So, I need to make this cropped. Okay. So, what I'm going to do

cropped. Okay. So, what I'm going to do is I'm going to go to fill, which is my image. So, I got it selected. There's

image. So, I got it selected. There's

the fill. Okay. I'm going to click on image and I'm going to go up to here where it says fill. I'm going to say you're not filled, you're cropped. And

then I can drag in this edge here. Okay.

And how big do I want it to be? At the

moment, mine is 1616. Oh, so 116 um tall. So I'm going to make mine 116

tall. So I'm going to make mine 116 wide. It is a square now. So that's

wide. It is a square now. So that's

dragging the edge of it. The edge of it is the crop. If you drag anywhere in the middle, you can move it around inside of the crop. So I'm going to drag mine so

the crop. So I'm going to drag mine so that this is right in the middle here.

I'm going to click out in the background. And now it's a square. with

background. And now it's a square. with

this thing. I think I want to play around with the layer blur, progressive layer blur, and kind of make it big like I did in this one. And you can see you can start it anywhere. Could be here.

Because this is meant to be like a generic genre listing, not an actual artist, I might have to kind of start it quite far in to give the vibe of hip-hop, but not actually show the artist. All right, I want to scale it

artist. All right, I want to scale it down. Whenever I scale images, this will

down. Whenever I scale images, this will work, but whenever I do scale things, I use the K tool. So K on your keyboard to switch from the um move tool to the scale tool just to scale all the effects

and everything. It's just a really good

and everything. It's just a really good habit to be in. That's probably how I want my one. I'm going to zoom out a little bit. Okay. I want to add a F key

little bit. Okay. I want to add a F key for this cuz I want a little box for the genre.

Get it to snap to the top.

Pick a color. Any color as long as it's green. You can hit the I on your

green. You can hit the I on your keyboard for the eyropper. Just grab

that. Oh, it's too blue. I want it to be a little bit more on the green side. Oh,

that's it. I'm going to type some type stuff. So, type tool, click once. I'll

stuff. So, type tool, click once. I'll

actually speed through this cuz you don't have to watch me type.

One thing I do want to pause and show you. We did very little speeding. Is I

you. We did very little speeding. Is I

really like fonts, okay, that are like Robboto I like because it has a condensed version. Okay, condensed is

condensed version. Okay, condensed is just really handy when you're trying to fit lots of type in. Can you see it's actually just, you know, in this other font, can you see how much wider it was?

Whereas in a condensed font, there's lots of condensed fonts. You can in here just actually type in not robboto, just type in condensed to see all the different kinds of condensed fonts. And

some of them are super condensed. Like

see that one there? You'll be able to fit a lot more. There's condensed and compressed. Compressed.

compressed. Compressed.

And compressed is smaller than condensed. I'm not sure the can't

condensed. I'm not sure the can't remember the language, but um what are we doing? Condensed. Okay. And it's

we doing? Condensed. Okay. And it's

just, yeah, you can fit more text into what is a limited space, especially on a phone, okay? Cuz it's that weird aspect

phone, okay? Cuz it's that weird aspect ratio. It's narrower than it is tall,

ratio. It's narrower than it is tall, right? So, let's undo. So, we got my

right? So, let's undo. So, we got my thing. Actually, speeding again.

thing. Actually, speeding again.

We did no speeding again. I like using the same font with different weights.

So, still raw, condensed, one is light, one is bold. Using the hierarchy of size, less important, more important.

Playing with the weight. Okay. Light and

bold. Again, you can skip ahead if you're already really good with this sort of stuff. I'm just kind of I don't know, adding some extras. Actually, keep

along because there's a the AI thing is really cool. I'm g play around with the

really cool. I'm g play around with the line height and just drag it to the left. Not the line height. I'm going to

left. Not the line height. I'm going to play with the line height. Select it all and line height. I'm going to type in minus 50. Way too much. I'm going to

minus 50. Way too much. I'm going to type in, you see, you can just type over the top of it. Okay. So, I can type in minus. Actually, let's just put in 16.

minus. Actually, let's just put in 16.

I'm going to hold shift and use my up arrow just to find something. What are

we doing? 24. I'm using not holding the shift arrow now. I'm just using my up and down arrow just to get the line height where I want it to be. Something

like that. All tips we kind of did in the essentials course, but hey, we'll throw them in here at the beginning.

Okay. Escape. Escape a couple of times to get out of the type tool. I'm going

to click this. It's going to be in here about there. Now, what I want to do is I

about there. Now, what I want to do is I want to make a few of these. So, I'm

going to zoom out. I'm going to grab Is that big enough? Shift0 on your keyboard will be the automatic to getting to 100%. Okay, so hold shift one is fit all

100%. Okay, so hold shift one is fit all in screen. Number two is to select

in screen. Number two is to select something and zoom all in on that. So

that's shift two and shift zero on your keyboard goes to 100%. I like that one.

So the font size is probably big enough.

If I want to just grab them both and make them bigger, hold the K tool, remember for scale, just go and they both get a little bit bigger in terms of the fonts. Arrow to move it around. All

the fonts. Arrow to move it around. All

right, let's make a few versions of this. So, I'm going to select it all,

this. So, I'm going to select it all, grab my uh option key on a Mac, alt key on a PC to duplicate it. Drag it

straight down. Okay, I'm going to have one, two, three. That'll do for the four, five. Okay, for the moment, what I

four, five. Okay, for the moment, what I want to do is can you just click on the boxes themselves? Let's just see if we

boxes themselves? Let's just see if we can select on all of these. Okay, now

this is a paid feature. All of this stuff often is. Okay, see under actions.

Okay, let's go down to H first. So,

let's go to rewrite this. Okay. Click on

it. And I'm going to say, what do I want you to do? I want you to speed typing 500 of music. Let's see if it can do it without having to select just a It can.

It's doing it.

It took away all of my other things.

Damn it. Okay. It didn't do that when I practiced it. So, I'm going to have to

practiced it. So, I'm going to have to build mine slightly differently.

Mistakes, people. Okay. So, actually,

it's probably always just going to be easier if I grab you. Put that there.

Paste the text. So, they're in two separate text boxes. Let's zoom out. How

is my line spacing? A little bit higher.

A little bit higher. All right. Now,

let's do it. So, let's grab U and go U down here. So, I'm holding the option

down here. So, I'm holding the option key, alt key on a PC, and then I'm going to go command D. Did I say that before?

Or control D to duplicate the thing we just did. Okay. How many I got now? Six.

just did. Okay. How many I got now? Six.

Okay. Now I need to select all just the text. Okay, I just want just the

text. Okay, I just want just the hip-hop. I don't want it to change the

hip-hop. I don't want it to change the word genre. Okay, so with this selected,

word genre. Okay, so with this selected, I want to select this. So hold shift and I click on it. It grabs the whole thing.

You're like, no, no, no, no, no. I just

want to grab the text inside of there.

So let's click on this first one. Okay,

this guy here by double clicking him.

Okay, then if you hold shift and your command key or shift and control, you can click on you and you and you and you and you. So I've got them all selected.

and you. So I've got them all selected.

Now I can go to rewrite. I can say you rewrite this. I want you to say speed

rewrite this. I want you to say speed typing genres and music. I'm scared it's going to replace my first one that says hip-hop. It is, isn't it? That's okay.

hip-hop. It is, isn't it? That's okay.

Oh jeez.

Make changes. Two words only.

Way too long. It's cool, huh? So good

for placeholder text. I like it.

Probably have to pick. It's really good as well because you get a sense for how long some of the things are going to be.

So you're like, "Oh, that was cool for hip-hop, but all of these really need to be a smaller font size. probably 24 to be able to fit everything in. Oh, we did a lot in this course, huh? We came for progressive blur and now we're using AI.

We're learning all sorts of cool shortcuts. It's the advanced course.

shortcuts. It's the advanced course.

This is awesome. It's full of uh soul beats and bass vibes and tool gurus. All

right, that is it. I will see you in the next video. All right, it's first of the

next video. All right, it's first of the class projects time. Okay, so um the class projects are listed inside of the exercise files. There's a PDF called

exercise files. There's a PDF called class projects. Okay, it'll look

class projects. Okay, it'll look something like this. And this is the first one. Okay. So I want you to create

first one. Okay. So I want you to create a mobile phone frame. Basically I want you to remake what we did in the last tutorial. Okay. So this thing. Okay. But

tutorial. Okay. So this thing. Okay. But

specifically for your brief. So mine is limrich hiphop. Okay. So I want you to

limrich hiphop. Okay. So I want you to focus on that and then find out whatever the sub kind of genres are for it. Like

this for instance. So techno. Uh you

might have dub techno acid industrial.

These are all types of techno. Okay.

Rock. There's a lot of subcategories.

You don't really know the music genre you're working with. Do some googling.

better you will find there are subcategories of it. If not, make them up. That's not really what's important

up. That's not really what's important here. I want you to experiment with the

here. I want you to experiment with the progressive blur. Okay? So, I don't mind

progressive blur. Okay? So, I don't mind how you do it. Okay? You can do it exactly like I've done it. Just play

with it. I don't mind how you do it. Um,

if you do have the pro account, okay, I'm going to assume in this course you do have the pro account. If you don't, you can totally carry on with it. Not

going to apologize every time saying if you don't have it, try and find a workaround, okay? Because you can, okay?

workaround, okay? Because you can, okay?

If you can't do the AI features with rewrite this, that's okay. You've seen

how it works. you might use chat GBT instead which is free. That's the main thing which everyone has. Okay. But the

AI features and some of them in this course are pro only. Um but if you do have them go play with them have a play around with rewrite this. Okay, which is when we did the text and I did it with the images as well. You can select on

these and either go to the actions and go to make an image or you can select on an image already go to the fill and say make an image. Okay. And you can use AI to create the image or go to something

like Unsplash or Pixels. you will find lots of free images that you can use for filling out your uh prototype. Okay,

where's the class project? So, uh you need to do that. Definitely do

progressive blur. Play around with the AI features deliverables. I want you to take a screenshot or export your image and upload it to the class projects. Uh

screenshot on a Mac is command shift 4 and you can kind of drag a box around it. You can do something similar on a

it. You can do something similar on a Mac with print screen. I think that's how you do it. I know there's another shortcut for PCs. You'll probably know what it is. If you don't, okay, you can just export the image. So, I can select

on this. Ooh, it would look really good.

on this. Ooh, it would look really good.

Oh, I didn't think of this. If you went to present and it was in a phone, we learned earlier how to turn that on.

This would look cooler, huh? Do a

screenshot for this otherwise. Okay. Uh,

if you're not sure how to screenshot, you can click on the frame. Go down to uh is it export? Okay, I want to export this whole frame. Scroll down again.

What kind of size? Just at one size. And

I'm going to do a PNG. I'm going to click export iPhone 16. And there you go. You can use that file to upload to

go. You can use that file to upload to the class projects um for the class project. Yeah. Um because everyone's is

project. Yeah. Um because everyone's is unique and it's kind of an interesting project. Um I'd love for you to share it

project. Um I'd love for you to share it on social media. Okay. Tag me with um both the hashtag Figma advance so I kind of makes it easier for me to kind of group and look at specific um courses.

But make sure on Instagram, the Facebook group, Twitter, make sure you tag me at these handles here. Okay? Whichever use

your normal flavor, okay? Maybe you're

an Instagrammer or a LinkedIn or a Tik Tocker, up to you. But I'd love to see it. All right, have fun. It is mainly

it. All right, have fun. It is mainly just about playing around with progressive blur. You could go a little

progressive blur. You could go a little bit further and make this a lot cooler in terms of a genre page. We're keeping

it light for those of you who don't have much time, but if you're ready to play, you can make this page a little bit nicer. If you're unsure about how to do

nicer. If you're unsure about how to do these, you know what do I just copy?

Damn, what should I do? Um, you can have a little look online for some inspiration. A good term is something

inspiration. A good term is something like UI card. We'll just go through the um back at home. Okay, you can go through the templates. Just have a little look. So, I might go listing.

little look. So, I might go listing.

That didn't really work.

You can kind of see there some different ways of cards is probably um better.

Cards is the generic term for like anything inside of a box. Okay. And you

can start to see some interesting kind of maybe even feature cards. Let's do

that. Feature cards. Even better. A

little bit more specific. Okay. Okay.

And you can see some things like, oh, I might do that with this and there on the bottom. Okay. Up to you. It can be

bottom. Okay. Up to you. It can be simple, can be complex. Looking forward

to seeing what you make. All right.

Class project over. I'll see you in the next video.

Hi everyone. We are going to turn the effects that we made in the last video into a style so that we get to reuse them and we get to change them all at once. Watch this. I'm going to go to

once. Watch this. I'm going to go to uniform to perspective. Actually, the

word is progressive. Okay. But we have control over them all. And then I'll show you how to remove any style libraries that have been added to your file that get a little bit confusing.

Styles that you didn't ask for. And then

I'll show you how to remove all the styles that you didn't ask for that all just appear in your libraries. You're

like, where do these come from? I'll

show you how to clear them out so we've only got the things we've created as styles. All right, let's jump in. All

styles. All right, let's jump in. All

right, so in the last video, we made some styles. I made a couple. I made

some styles. I made a couple. I made

some drop shadow ones as well, but let's take this progressive blur. Okay, you

can see it here. It's been applied to my effects panels. Okay, these four little

effects panels. Okay, these four little dots, okay, is the way we can create and use uh styles. Now, we're doing it for effects. We can do it for stroke and

effects. We can do it for stroke and fill and anything that has little dots on it. Okay, so I'm going to click on

on it. Okay, so I'm going to click on effects. Okay. And I'm going to say I

effects. Okay. And I'm going to say I would like to add a new style effect.

Okay. It's different from hitting the plus over here. Okay. Okay, we go into the dots, hit plus, and we say, "Yeah, we're going to call this one. I'm going

to call this one my call this one 01 cuz I'm bound to create another one and another one and I need to differentiate them. Sometimes I'll

put the client name in front of it just so I know I'm kind of that's the version of drop shadow that I'm using for bring your laptop or whatever company it is."

Okay, you can describe it down here as well. Let's click create style. The cool

well. Let's click create style. The cool

thing about it is that we can go through and say, "All right, new thing that we draw. Going to grab the F key."

draw. Going to grab the F key."

Remember, progressive blur only works on our frame. No, that's something else.

our frame. No, that's something else.

Oh, that's the glass effect. Okay. So,

I'm going to go to effects here. Instead

of hitting plus and kind of going through and setting it all now, I can just go to uh the little dots. Okay.

Under effects, and I can say progressive blur. There you go. Done. Reusable. The

blur. There you go. Done. Reusable. The

other cool thing about setting styles is that let's say that let's apply these styles. Oh, they're already applied.

styles. Oh, they're already applied.

That one's progressive blur. That one's

got layer blur. Progressive blur. Layer

blur. Progressive blur. No, that one's got it. Oh, cuz I created the style from

got it. Oh, cuz I created the style from this one. These ones don't have it

this one. These ones don't have it applied. So, I'm going to apply all of

applied. So, I'm going to apply all of these ones. Okay. I'm going to say I

these ones. Okay. I'm going to say I would like to remove the effect and I want to apply not the random layer effect. I want to create I want to add

effect. I want to create I want to add the thing that I've made called progressive blur. All right. So, now

progressive blur. All right. So, now

they're all connected. What I would like to do is change them all at once. Okay,

so I got nothing selected. Absolutely

nothing. You can see over here, as long as I'm in design, you might be stuck on draw or div. Okay, make sure you're on this design one. Okay, under design, you will see all your styles listed, okay, that you've used. The cool thing about

it is I can say, oh, look at this. Got a

little settings here. I can say edit this style. Okay, I can go into it and

this style. Okay, I can go into it and say you I would like it to end.

Actually, what's going to be more obvious? Let's go to uniform. Okay, so I

obvious? Let's go to uniform. Okay, so I switched it to uniform and they've all updated. That's a great way of

updated. That's a great way of controlling a really large document.

Okay, create a style and then you get to edit it by having nothing selected and go through your styles. Okay, I just wanted to recap that we didn't do it in the essentials course for effects, but we did it for lots of other things. If

you're skipping straight to the advanced course, what you'll find is let's say I've got this. It's a color that I like.

Okay, instead of typing it out every time, you can go to styles, do the exact same thing, and hit plus. And this is going to be my primary primary color. Okay? And I can create a

primary color. Okay? And I can create a style. And then I can start reusing that

style. And then I can start reusing that when I draw a new frame. I can just go into here, hit the styles button, and bam, we got primary color. Okay? So

that's all we do for that. Right? The

next thing I want to show you is I want to show you how to remove some of the default libraries that are giving you style suggestions if you want to clean those out. Okay? It might be just there

those out. Okay? It might be just there by default. It might be there cuz you've

by default. It might be there cuz you've opened up somebody else's document.

Maybe a larger project you want to kind of clean up. So, what we'll do is we'll click on this one. Okay. And if I hit the uh under effects, okay, I'm going to actually it doesn't matter which style we go for. I'm going to go for the fill.

Okay. What you'll see is like, can you see there's lots of other ones down here like where did these come from? Okay.

You might not have anything. Okay. But

you might have this giant list already.

And you're like, actually, I just want to tidy that up. You can go to all libraries. Okay. And you can go to the

libraries. Okay. And you can go to the ones that are created in this file. It

will just tidy them up. So you're only showing the ones in this file, not all libraries that you might have as part of your kind of job. We'll do libraries specifically later on, but it's just

nice to tidy things up early on. So have

a look at this one. Let's break the link to the style. Let's go into here. Okay,

the same thing under here. Okay, my fix styles. There's all sorts of stuff in

styles. There's all sorts of stuff in here. So I can go into my library. Okay.

here. So I can go into my library. Okay.

And say actually I don't want I'm going to remove the libraries um from this this this go back. I'm going to remove this one

go back. I'm going to remove this one and this one. These are team libraries that have been shared with me in this document. We'll cover team libraries

document. We'll cover team libraries later on. But sometimes you just want to

later on. But sometimes you just want to tidy them up. Go away. And I've only got progressive blur now. Nice. All right.

So that's adding uh effect styles and just styles in general. The benefits of them. It means that once they're

them. It means that once they're applied, well, first of all, you get to apply them really easily. And once they are applied, you get to edit them all at once. Uh, and we looked at clearing off

once. Uh, and we looked at clearing off any uh styles that are connected to your document that you didn't ask for. All

right, that is it. I will see you in the next video. Hi everyone. In this video,

next video. Hi everyone. In this video, we're going to look at all the tips and tricks that I can think of. I'm going to cram them all into a video. If you're

already good with tips and tricks, you can skip along. It's a very long video.

I feel bad, but there are a lot of tips and tricks. Uh, and a bonus for anybody

and tricks. Uh, and a bonus for anybody that waits to the end, I'll show you this. It's like a little keyboard that

this. It's like a little keyboard that I've got um for Figma, and I'll show you what it's useful for. It's very cool, but it's a bonus for sitting through all the tips and tricks. This is either going to be your most valuable video for

the course or you might not off cuz it's so long. Uh, let's jump in. Good sales

so long. Uh, let's jump in. Good sales

pitch, Dan. Hairy hands alert.

Video time. Right, to get started, open up any old file. We're going to open something quite complicated to kind of prove all the great uh shortcuts. Um in

your exercise files, there is a link here called workflow demo. You can open up anything. I just really like this

up anything. I just really like this file. It is in your exercise files. It

file. It is in your exercise files. It

is called workflow 01. Okay. Either way,

you'll be here inside of uh Figma. Okay.

And over here on the pages, let's go down to the design. Okay. We'll cut to this one. This is the one I like. Very

this one. This is the one I like. Very

cool. The problem with starting with somebody else's uh file, okay, or working for a large company is that uh sometimes it could be quite complicated to change any old thing, especially when there's no styles. What you can do

though is one of the easy ones is to select a whole chunk of stuff. Okay? And

over here, instead of playing with a fill cuz you've got mixed things selected, obviously you got loads of things selected. What you can see here

things selected. What you can see here under selection colors, okay, if you've got a lot selected, there might be a little drop down like this, but you can see here, here are all the colors inside of there. There is my primary color or

of there. There is my primary color or my accent color. I'm not sure exactly what they've called it. Actually has no name. Just got the hexodimal number. So,

name. Just got the hexodimal number. So,

we can click on this and say, actually, I would like you to be green or blue.

Okay. It's just a real quick way of working with lots of files rather than doing the dreaded uh shift click, click on that one, hold shift, grab that one.

Who's done that? That takes too long.

Another really handy one is uh let's click on this box here. Okay, I'm zoomed out quite far. I love the shortcut shift 2. Okay, that will zoom in to whatever

2. Okay, that will zoom in to whatever you have selected if you have a tiny thing selected. So, if I hold command

thing selected. So, if I hold command and click on this little dot that jumps inside the group. Okay, that's control on a PC, command on a Mac. And if I hit shift two, it's not really that useful.

Okay, so shift one is because it zooms it out to show everything. Shift two

right into the thing you have selected.

Shift zero is 100%. That is a really good one. So, shift one, two, and zero.

good one. So, shift one, two, and zero.

One is everything on the document. two

is the thing you have selected and zero is 100%. Perfect. Okay, let's click on

is 100%. Perfect. Okay, let's click on let's say we've got this here. Let's

click I'm holding command on my Mac, control on my PC. That just jumps in cuz there's a group inside of a group inside of a group inside of a group and you might die for all the double clicking.

Okay, so you have nothing selected. Just

hold down command or control, click on that. Then you can go up to edit. Okay,

that. Then you can go up to edit. Okay,

and there's a select all with. This is

super handy. You can say actually I want to fill I want everything that has the same text properties. Okay. And it's

gone through the entire page that we're at. Let's zoom out a little bit. What

at. Let's zoom out a little bit. What

else is there? It's just those guys. But

it just means I don't have to go and shift click them all. I can say actually we're going to use uh I don't know, Acme for this one. Oh, I don't like Acme. I'm

wrecking this man's work. I think he's under introduction. There he is there.

under introduction. There he is there.

Jish Patel, you made a cool template.

Thanks for sharing. All right. Uh other

cool tips. So, let's come down and let's grab one of these buttons. I'm going to double click away. Okay. This is a bunch of stuff. It is more than just text. has

of stuff. It is more than just text. has

got a padding around it. So you can go to edit and select and there's a bunch of other different options in here. We

won't cover them all, but imagine if it has a drop shadow. You could go through and pick everything that has the same effect. Just going to go to same

effect. Just going to go to same properties. Okay. And it's picked every

properties. Okay. And it's picked every component that kind of looks the same.

Properties a bit more generic. Okay.

It's got the same fill color plus the padding plus the corner radius. I think

that's it for the whole document. Let's

try one more. Let's grab this circle here. Let's go to edit, select with, and

here. Let's go to edit, select with, and let's go to fill. And you'll find that lots of this document has the same fill.

Kind of similar to what we did before by using the selected color. Very cool. One

of the things I get asked is, you see how Jish has split everything with these pages here? Let's go back to one of our

pages here? Let's go back to one of our old files. I'm going to go back to this

old files. I'm going to go back to this one we made. Okay, I've only got one page. What we can do is page dividers.

page. What we can do is page dividers.

So, I've got this one. This is my hi-fi.

Let's speed through this.

Okay, so I'm going to have a components page. page. It's going to be the top. I

page. page. It's going to be the top. I

want to separate it from my kind of working docs. So, I'm going to add a

working docs. So, I'm going to add a page. And all you do is page three.

page. And all you do is page three.

Okay. To divide these up, you can put the hyphens in like J did or I like to hold shift and hit the underscore button. And it kind of looks more like a

button. And it kind of looks more like a page divider. If you want to get even

page divider. If you want to get even fancier, okay, you can add emojis to any of these. Say components. You want to

of these. Say components. You want to find something. Actually, do it to

find something. Actually, do it to mobile here. On a Mac, it's control

mobile here. On a Mac, it's control command spacebar. Okay. And this will

command spacebar. Okay. And this will pop up. Okay. It's little emoji guy. And

pop up. Okay. It's little emoji guy. And

you can double click on any of these. So

I'm going to type in mobile and find something mobile phony. Oh, is that a mobile phone? Yeah. Okay. Double click

mobile phone? Yeah. Okay. Double click

on it and it will go into wherever you have your cursor going. So you double click. Oh, got two of them. Okay. On a

click. Oh, got two of them. Okay. On a

PC, it is have your cursor flashing inside of here and then hold down the Windows key and hit either I think it's period or semicolon. One of those two.

That looks nothing like a phone. You get

the idea. And for components, you got to put puzzle pieces. There you go. All

right. Hiding the UI is useful. It's

command and backslash. Okay. Or control

backslash on a PC. Okay. It just hides it while you're working. Doesn't change

anything. You can still work if you know your shortcuts. Any of these shortcuts

your shortcuts. Any of these shortcuts have changed, okay, while uh in between recording this video and where you're watching it. Have a look at this

watching it. Have a look at this question mark down the bottom. Go to

keyboard shortcuts and just have a look through there. They'll explain all of

through there. They'll explain all of the different uh shortcuts. They're blue

if you've used them. Okay, they're dark if you haven't used the shortcut. Okay,

there you go. So, I'm going to turn my UI off cuz once you've got the UI off, it becomes a little bit tricky to use, but you've got more space, especially on a laptop. But that's where the uh super

a laptop. But that's where the uh super most awesome shortcut that ever lived is. Okay, it's called the quick actions.

is. Okay, it's called the quick actions.

Okay, it is basically um a shortcut to getting to this button here. Okay. So,

uh, let's close it down. Um, so the quick actions, let's go. The one I use it for the most, it's pretty boring. I'm

going to command or control-click the word, uh, I'm Jenny. Okay, just the top here. And I'm going to use my quick

here. And I'm going to use my quick actions, which is command K or control K on a PC. I'm going to type uppercase.

Okay.

Otherwise, that menu takes forever to find uppercase. But you can use it for

find uppercase. But you can use it for anything. Anything in any of the menus.

anything. Anything in any of the menus.

I'm click this top menu bar here. Okay.

And I'm going to say command K. And I'm

going to say rotate K 90° to the left.

Not sure why. Okay. But the everything is in there. Last one. Command K. And

let's translate it to I don't know.

Let's go to uh Portuguese. There you go.

Undo. And done. Not everyone might have translate. It might be a pro feature now

translate. It might be a pro feature now that I think of it. But as a case, that's free for everyone. Okay. Who

remembers how to turn the UI back on?

Let's write command or control backslash. That's where it's leaning

backslash. That's where it's leaning back, not forward slash. All right. The

next is a relatively new update. Okay,

I'm going to commandclick this button at the top here. Okay, it is a component of a master. I didn't make it, so I have no

a master. I didn't make it, so I have no idea where it is. Or imagine if there was a great shortcut. Ready? Shortcut

toggle back and forth. What is the shortcut? Okay, it is on a Mac, you hold

shortcut? Okay, it is on a Mac, you hold down all the buttons, command, option, control. All three of them in the bottom

control. All three of them in the bottom left. Okay, and hit K. On a PC, it's uh

left. Okay, and hit K. On a PC, it's uh slightly different. It's control

slightly different. It's control altshift K. Have a look at your

altshift K. Have a look at your keyboard. It's a hard one to remember,

keyboard. It's a hard one to remember, but if you are doing a lot of kind of adjusting uh components like I do, you will like the shortcut and you will get used to it. Remember, there'll be a

shortcut sheet in your exercise files that I'll put all of these in. I just

love being able to toggle back and forth really quick. Anything else? Got any

really quick. Anything else? Got any

other components? This one here. You're

not This one is all the buttons plus K.

Toggle back and forth. Another new one is you can copy and paste styles. Now,

we've only made a couple of styles here.

Okay. But if you've made a bunch for your document, you can click on them, copy them. Okay. And you can select

copy them. Okay. And you can select multiple ones. I don't have multiple

multiple ones. I don't have multiple ones. Make multiple ones. Dan, wait

ones. Make multiple ones. Dan, wait

there. Draw shadow. Okay. So, I can select two of these guys. Okay. Just

click on the top one, hold shift, grab this bottom one, right click it, and I can say copy styles. Move to another document. Have nothing selected. And

document. Have nothing selected. And

then just hit your normal paste. Okay.

Uh, command V on a Mac, controlV on a PC. Okay, copy and pasting any sort of

PC. Okay, copy and pasting any sort of style. Nice. All right, let's do some

style. Nice. All right, let's do some super fancy field work. I'm going to go back to the document I was working at. I

have no idea where everything is. Oh, I

created a new page. There we go. Um,

let's look at all the fields. So, let's

start with a title. You wait them. All

right. So, I've added a bit of text. Uh,

all of these fields are adjustable by just clicking in them. Okay. And just

using your up arrow. I like this when I'm picking fonts cuz I'm not actually sure what size I'm doing here. I'm just

holding the um up arrow or the down arrow. So just click in any of them.

arrow. So just click in any of them.

Okay, you could do it with uh what letter spacing as well. Just use your up arrow. Okay, or your down arrow.

arrow. Okay, or your down arrow.

You can do it for any single field.

Okay, so this here, this position here, let's say X and Y. Okay, up and down moves it left and right. If you want to go in bigger chunks, you can hold the shift key. Okay, it's the large nudge or

shift key. Okay, it's the large nudge or big nudge. Okay, and it will go up in

big nudge. Okay, and it will go up in multiples. Can you see here? Of eight.

multiples. Can you see here? Of eight.

That works for anything. Rotation, I

wanted to go up. Okay, it doesn't do an eight, but the the holding shift does one. Okay, just holding nothing down

one. Okay, just holding nothing down using your arrow key moves it in ones.

Okay, but if you hold shift, it'll move it in a bigger chunk. Okay, a lot of us are using the eight point grid. Okay, so

when we are moving things along like position, okay, it'll go in let's start at 100. Okay, and click in here, hold

at 100. Okay, and click in here, hold shift. Okay, you can see it's gone up an

shift. Okay, you can see it's gone up an eight, down an eight. Let's move this over so it's a little easier for the uh editor. Sorry, editor. And saying that,

editor. Sorry, editor. And saying that, I'm going to zoom right back out and we're going to go to preferences. So go

to little F, go to preferences, and down the bottom here, something called the nudge amount. Okay, by default, it's at

nudge amount. Okay, by default, it's at one. That's just using arrow key. Okay,

one. That's just using arrow key. Okay,

or eight if that's if you hold shift.

You can change it back to 10. That was

kind of the default for a while there.

And a lot of other programs. I like eight because it's really common kind of spacing uh for mobile and web. And it's

the same when you have nothing selected, not using any of the fields. You can

click in here and just use your arrow key just to move it around. Hold shift

to go in bigger chunks. Eight pixel

chunks. You can drag on all of these fields as well, okay? Especially the

ones that have the icon. Can you see here? You can just drag the icon left

here? You can just drag the icon left and right instead of having to use your keyboard. Okay, you can just drag it

keyboard. Okay, you can just drag it back and forth if you're more of a dragger person. Some of them don't have

dragger person. Some of them don't have icons. Okay, that one does. I don't have

icons. Okay, that one does. I don't have any layer height, so it doesn't really work. Opacity, just drag that back and

work. Opacity, just drag that back and forth. Okay, the ones that don't, you

forth. Okay, the ones that don't, you can hold down the option key on a Mac, alt on a PC, and they still will drag even if they don't have an icon. If you

love doing that type of thing and there's no icon like this one does.

Okay, you can just hold down the option key on a Mac. Alt key on a PC. One of my favorite things is flipping it upside down. Nope. And let's go and F key for

down. Nope. And let's go and F key for the frame tool. Let's say you draw something from side to side. Okay, let's

give it a fill.

Oh, you can use them in here as well.

Watch this. I can use my cuz I'm on HSB.

It's up to you what you want to be on. I

prefer HSB. Okay. So, if I want to change around with the hue, saturation, brightness. So the hue I want, let's go

brightness. So the hue I want, let's go to the brightness. Okay, it's really bright. Okay, it's in the top right. You

bright. Okay, it's in the top right. You

can just use your down arrow. Can you

see it comes down down less bright, less bright, less bright.

Okay, and in bigger chunks, if you hold shift instead of trying to go, all right, let's say that it is about there and you want to bring it down, you can just kind of grab this one and come straight down rather than doing the old

uh drag diff go straight, go kind of straight.

The reason I want to do this as well is I want to show you the other field trick is let's say I need to divide that into three parts which is tricky. My brain

doesn't work like that. So I'm going to find the dimensions. So it's a width.

Perfect. You can do divide by which is for slash3. There you go. Now I've got

for slash3. There you go. Now I've got three separate boxes divided by three.

There you go. You can do all the math.

You can say actually I want this to be just let's say you want to put uh you want to shrink it down a little bit each side. So you want a minus eight from

side. So you want a minus eight from each side. So I'm going to say minus 16.

each side. So I'm going to say minus 16.

Okay. And it's a little bit smaller now.

8 pixels either side. Give yourself a little margin. Can't do rotation things.

little margin. Can't do rotation things.

Get confused by 90° and 45 all the time like I do. You can say, "All right, I want 360 / 4." All right, it's 90, not 45.

All right, let's talk about some of the hard uh symbols to find. Okay, I'll

paste them on the screen here. They're

called smart symbols. Okay. And those

are the ones that are there at the moment. I'll add this to the shortcut

moment. I'll add this to the shortcut sheet. Okay. But let's say pick a path

sheet. Okay. But let's say pick a path here. I'm going to rotate this back

here. I'm going to rotate this back around where we're at. 12° zero. Um, so

if I'm typing in here, you have to type them in order. And they have to look exactly like the top bit there. So if I go bracket C, lowerase C, and now the bracket, it'll instantly give me a copyright symbol. You can see how this

copyright symbol. You can see how this is going to go. Capital R, it'll go through and give me the uh registered trademark one. Those are handy. Probably

trademark one. Those are handy. Probably

the ones I use the most are the kind of arrows. It's hard to find in the font

arrows. It's hard to find in the font sometimes. And you can see it's just

sometimes. And you can see it's just dash and r greater than, less than, whatever that one is. The down arrow is weird. Is vb.

weird. Is vb.

There you go. It's a down arrow. Up

arrow is the key I can never find on my keyboard. Please hold. There it is. On

keyboard. Please hold. There it is. On

my keyboard under the six. Uh editor

would have uh fast forwarded that, but that took a long time. So, I'm going to have to hold shift and I'm going to go 66 and then space. Okay. Okay, you have to put a little bit afterwards otherwise it doesn't do it. And the last one is

the square. Okay, just we go. Square

the square. Okay, just we go. Square

brackets left and right. Had space. Oh,

looks like there have to be a space in between them. I don't use this one

between them. I don't use this one obviously. There you go. So square

obviously. There you go. So square

bracket space closing square bracket.

There you go. Just some of the uh smart symbols. Okay, for all the fonts. Right,

symbols. Okay, for all the fonts. Right,

the next one. Shortcut for component.

Select all of this. I'm going to go command option K on a Mac. That's

control K on a PC. Okay. And I we looked at this earlier is if I start dragging this around, it really wants to jump inside of things. Okay, you're like, "All right, that's cool, but don't go inside that frame. Don't go inside that

component." Okay, remember you click it

component." Okay, remember you click it to start dragging it. Then hold space bar and move it around. And you'll see it will not in the layers panel there.

It will not go through and try and jump and be part of other layers. Another

nice easy one is command one. Okay, it

gets you back to your little home option unless you're on the browser. That'll

just get you back to the first tab in your browser that you have open. If

you're inside, it kind of works in a browser except it just jumps to the different tabs. Okay, command one, two,

different tabs. Okay, command one, two, three, whatever tabs are open in your Chrome browser or whatever you're using inside of Figma the app. It does a similar sort of thing. See these tabs up here? I can go command one for the home,

here? I can go command one for the home, command two for that document, command three. So I can go two and three, two

three. So I can go two and three, two and three. Okay, it's holding command or

and three. Okay, it's holding command or control on a PC and just kind of toggle between the different tabs that are open. If you do have a tab that's kind

open. If you do have a tab that's kind of like more, say you're pulling components from like a library or some sort of file that you need to pull from all the time, you don't want it up here or you want to turn it into a tab, you

can right click and say pin that tab.

You can see up there just becomes like this little icon. Okay, makes it smaller and it's harder to close. You can close it though. That works on the browser as

it though. That works on the browser as well. Okay, you can pin tabs. That's

well. Okay, you can pin tabs. That's

just kind of a normal Chrome type or Safari thing.

You can unpin them. You can reorder these as well by clicking, holding, and dragging them. Okay, often like I'll

dragging them. Okay, often like I'll open them up in funny orders. Okay, you

just want the one that you're pulling from to be at the front here. Even if

it's not pinned, you can just drag it around. Okay, so it's at the beginning.

around. Okay, so it's at the beginning.

If you are working with the same files over and over and it's kind of a pain to figure out where they live every single time you're like in my recents, let's say it's this uh Limick Techno one, you can add it to the sidebar. Okay, it's

favorites. Click it there and you'll see there it is there. Limick Techno. So,

whenever you open up a new document, you'll have some that are in there that you use all the time. Okay, it doesn't matter where you are in your project as well. Okay, if the home screen or if

well. Okay, if the home screen or if you're on the browser, go to I keep forgetting I'm in the browser now. You

can go to the one that says back to files. Okay, and you get back to the uh

files. Okay, and you get back to the uh home screen instead of clicking on home screen. Let's close it down. Okay, it

screen. Let's close it down. Okay, it

doesn't matter where you are. See these

three little dots? These are handy.

Okay, these just have all your recently closed files instead of having to go back to recents. So, I'm not sure if that's a saver, but there it is. Another

one is if you're working with really big files or a really old computer, okay, you can figure out what's actually causing it to run slowly. Okay, you can go you have to be inside the dock in question. Okay, that may be running a

question. Okay, that may be running a bit slow and you can go to the F, go down to view, and there's one called memory usage. It kind of appears over

memory usage. It kind of appears over here. You can see it's using 2% of my

here. You can see it's using 2% of my memory, which is not much, so it's fine.

Okay, yours might be maxing out. And if

that is the case, you can click on manage memory and you can figure out what is actually causing you the problems. So the page content is doing most of the work and imported components from other places are doing a little bit

of that. Gives you some tips. You can

of that. Gives you some tips. You can

turn this on as well. If it is, say it is uh page contents is doing really badly. Okay, it's up to 80% and

badly. Okay, it's up to 80% and everything's a bit sluggish. You can see in here it'll turn it on for every layer. Can you see uh which one has

layer. Can you see uh which one has little dots here? None of my layers are doing anything. You can see this frame

doing anything. You can see this frame has got 2%. You can kind of work out what might be causing your problems. Often it can be SVGs, really complex ones that you've imported. You just got them from a free site and they just

turns out they're like really poorly made. There you go. You can see the

made. There you go. You can see the suggestion here. You can uh flatten the

suggestion here. You can uh flatten the SVGs or it might mean you have to pull some of the pages out and make two and make more than one document. My

machine's running fine. So, let's close that. Last thing before I show you the

that. Last thing before I show you the keyboard is you can actually drag this panel out often, especially when you got kind of complex layers here. You can

drag this right out so you can see them a bit easier. Okay, but also under your assets panel once that starts getting a bit kind of mad. I'm going to look at the assets for this file. Okay, don't

have a lot, but you can start searching for it. Okay, you can start searching

for it. Okay, you can start searching for there's an icon in here that I know what it's called cuz I named it really well. It's called export. Okay, and you

well. It's called export. Okay, and you can search in here and it's this one here. It's this guy here. This works

here. It's this guy here. This works

only if you've been naming all of your assets. You'll notice in this one here,

assets. You'll notice in this one here, components, there's a lot of frame 64.

Not good. And when they do get big, you can go into here, okay, and you can adjust the filtering by say, let me just show the lists, okay, just to make it a little bit easier to figure out where everything is. That search works under

everything is. That search works under file as well. You click search, and let's say I want the stars that I know are in here. There they all are. Okay,

they're all through my document. Okay,

but I can select them all now. Or I can click on them and say go to here. Okay.

But I can start clicking on all of these stars. Wow, there's a lot of stars used.

stars. Wow, there's a lot of stars used.

Okay. I can select them all, delete them, remove them. Oh, there they are all down there. So, when your layers are getting real long, this is easy. Or if

you need to find, let's say, this one here. Okay, I can go to search and I can

here. Okay, I can go to search and I can find the text with the words L. I don't

even know what that means. Very.

Okay, so you can search in your layers panel as well. Just got to remember to turn it off by hitting the cross.

Otherwise, you'll be stuck with just those. The pages panel, okay, can be

those. The pages panel, okay, can be made bigger or smaller. Okay, by

default, you get this really tiny little slot, which can be a bit tricky.

Sometimes you don't want to see them all as well. So, you can make it smaller.

as well. So, you can make it smaller.

All right, let's look at the cool Figma keyboard. All right, so it's this here.

keyboard. All right, so it's this here.

Okay, this is the work louder. Okay,

Figma Creator Micro. I think that's what they call it. And all it is is just super awesome shortcuts. Um, so you can see here you can program it to do

anything. Okay. So we've got scrolling,

anything. Okay. So we've got scrolling, zooming. Okay. And you've got automatic

zooming. Okay. And you've got automatic shortcuts for create a component, scale tool. I love. All right. That's

tool. I love. All right. That's

component. You can program them to do everything. I don't use them all, but

everything. I don't use them all, but it's just handy. Okay. Especially when

you're using Figma all the time to plug that in. Also a beautiful bit of desk

that in. Also a beautiful bit of desk art. It comes with a bunch of different

art. It comes with a bunch of different buttons. Okay. So you can kind of get it

buttons. Okay. So you can kind of get it to do what you want. Now, actually, not all of you have seen my office, right?

This is what it looks like. That's you

normally facing me using this camera, okay? But this is my office. Um, yeah,

okay? But this is my office. Um, yeah,

some 3D printers and stuff. Yeah, this

is the converted office above uh it was just a little room above my uh garage that we converted to. This came out really well. All right, into the

really well. All right, into the computer. All right, this is what I want

computer. All right, this is what I want to show you. That um Figma one is not being made anymore. more. It was kind of like a limited time run uh with Figma, kind of a promo. Uh I went I missed out

on the initial launch. Um they sold out quite quickly. I got one on eBay cuz I'm

quite quickly. I got one on eBay cuz I'm a nerd and I wanted the official Figma one, but it's actually a keyboard that this work louder.cc company make. Have a

check. The Figma Creator Micro might be available. It's sold out now. Okay. But

available. It's sold out now. Okay. But

they do have just the regular creator micro which is currently sold out, but we'll be back. It wasn't the other day.

Okay. So, it's the exact same thing.

It's just not in the Figma colors.

Anyway, do you need it for working in Figma? No. It is desk jewelry that I

Figma? No. It is desk jewelry that I really wanted. So, I paid above what it

really wanted. So, I paid above what it costs just to have the official Figma one because I have the fear of missing out. All right, that was a long one and

out. All right, that was a long one and we've covered loads and loads of good shortcuts. I hope they were useful.

shortcuts. I hope they were useful.

Let's get into some more workflow in the next video. Thanks for sticking around.

next video. Thanks for sticking around.

All right, let's jump back to that document that we were working on earlier with our kind of uh different genres.

And what I want you to do is just create a frame with some text in it. Put the

name of your kind of app. Okay, mine's

Limick Techno. I've made a light version and a dark version. There's nothing

fancy there about these, just frames with text inside of it. Okay, so let's uh make another iPhone 16. Okay, so I'm going to let's just duplicate this one.

So I'm going to click on the frame, hit command D on a Mac, control D on a PC.

Okay, we get a duplicate. And what we might say is let's do the first bit of selection. So, let's h click on this.

selection. So, let's h click on this.

And I'm going to say there is a weird one in here. I surprisingly use it a lot. Go to edit. This is not very

lot. Go to edit. This is not very complicated. So, we get around not using

complicated. So, we get around not using it. But if we go to edit and go to

it. But if we go to edit and go to select inverse, okay, which is command shift A on a Mac, control shift A on a PC, and it just selects everything but that. And you can delete it. Don't ask

that. And you can delete it. Don't ask

me why, uh, but I end up using that a lot. Um, the other and probably most

lot. Um, the other and probably most important feature is let's say that we do want to make this the dark version.

We want to switch it out. We could grab this and copy it and put it on here and paste it and kind of line it up and remove it all. What's really good is if you copy this, select this and there's

an option in here going edit and there's one that says paste to replace. There is

a paste over selection. You could stick it over the top. The other one's still underneath. I don't know why you'd need

underneath. I don't know why you'd need that one. Um, but I use this one. Edit

that one. Um, but I use this one. Edit

paste to replace. Okay, which is command shift R on a Mac, control shift R on a PC. Okay, that's really handy and it

PC. Okay, that's really handy and it gets handier. Okay, so let's say I use

gets handier. Okay, so let's say I use the star everywhere on my document. U,

you U and U. I'm holding down the option key while I'm dragging or the alt key on a PC to duplicate it. Hey, let's say though I want this to replace it. So I

can copy it and I'm going to just using my normal copy shortcut. I'm going to grab you. I'm going to hold shift and

grab you. I'm going to hold shift and grab you and I'm going to grab you. And

you can do that exact same thing. Paste

to replace. Anybody know the shortcut?

Too many shortcuts, Dan? That's command

shift R or control shift R on a PC or go up to edit. It's up there as well. Okay.

And it just replaces all of those ones.

That can be handy. Paste to replace.

Now, this is a little bit scraping the bottom of the barrel. Let's say that I've got this star here. Okay. And I

copy it. Um, and let's say that I go over here. It could be text. Could be

over here. It could be text. Could be

anything. You're zoomed right out and you're kind of working over here in no man's land. Let me know in the comments

man's land. Let me know in the comments who ends up working way over here for some reason. Okay. If I hit paste, by

some reason. Okay. If I hit paste, by default, it puts it back where it was.

and you're like, and there's two of them, right? Right over the top of each

them, right? Right over the top of each other. And you're like, that's not what

other. And you're like, that's not what I wanted. I wanted it over here. And

I wanted. I wanted it over here. And

there's no real way of getting it over here other than pasting it and moving it over. But what you can do is say all the

over. But what you can do is say all the way up here, one of those people. Okay?

And you can right click and say, just paste it here, please. Okay? And there's

my little star. About 10% of you be like, that seems good. For the rest of you, let's move on. Uh, actually, one last one I wanted to show you was we've done this before kind Now I just want to

highlight it is let's say that I do have a lot of new frames. So I'm going to hit the frame tool. I'm going to say let's give myself one of those. Let's go

command DD. So I got loads of them.

Okay. If I want this on all of them. So

I can say U. Copy. Click on U. Hold

shift and just grab all the frame names and then just hit the regular old paste.

It'll put it back in the position on the frame all at once. Kind of like a multiple paste. There's nothing special

multiple paste. There's nothing special you have to do. just copy and paste, but have lots of things selected when you're pasting. Awesome. How did that go? Let

pasting. Awesome. How did that go? Let

me know in the comments. Did I make copy and pasting sexy or uh you probably skipped right at the beginning. Anyway, uh for those that

beginning. Anyway, uh for those that hung around, thank you humoring me.

Let's go into the next video. Hi there.

In this video, we are going to learn all of the frame tips and tricks. Yes, a

whole video working with frames. They're

pretty useful. Let's jump in. All right,

the first one is actually nothing to do with frames. Uh see this little icon

with frames. Uh see this little icon here? If your frames are all opened out,

here? If your frames are all opened out, okay, and they're all twirled down and they're just really messy, okay, just click that. They will tidy up. And if we

click that. They will tidy up. And if we want to go to say my frame number eight, okay, you just double click on the icon here and it'll just jump straight to it.

Okay, you can work your way around this document as long as you've named your uh frames right. Okay, it's a nice easy

frames right. Okay, it's a nice easy one. Even better, though, is watch this.

one. Even better, though, is watch this.

Let's say I am here on this first page.

I should name my pages better. Click n

in n on your keyboard. N will just go to the next frame. it'll zoom into it.

Okay, so that's just a handy way of working through your document. Shift N

will go backwards. Okay, N to go forwards. That's N for November, my

forwards. That's N for November, my accent. And then shift N for November to

accent. And then shift N for November to go backwards. Okay, there's another one

go backwards. Okay, there's another one that's I use probably more. The N key zooms in. Okay, so if I zoom out and I

zooms in. Okay, so if I zoom out and I hit the N key, it goes all right, I'm at the next frame, but I'm really zoomed in. Okay, the one that I like better is

in. Okay, the one that I like better is the home and end key. Not all keyboards have it or sometimes you need to hold down a special key to get it. If you're

on a laptop, but I'm on my big keyboard, you can probably hear it tapping away.

Home is backwards and end E and D is going forwards, forwards, and backwards.

Exact same thing except that the N zooms in. Okay. And home keeps the same zoom

in. Okay. And home keeps the same zoom level and just moves along with different frames. That's a good one. You

different frames. That's a good one. You

can resize a frame. Let's say that I create a frame up here and it's going to have all my nav inside of it. So, I'm

going to grab all of you guys. Okay. And

I'm going to put it up into here. Okay.

I don't need that one. There was a star in there. There you are over there. Not

in there. There you are over there. Not

sure how you ended up over there. Select

you. Okay. Is that this frame's too big?

Okay. What you can do is there's a little option over here. There's a

shortcut. It's like all of the keys plus R. Don't use it enough, but it's a great

R. Don't use it enough, but it's a great way of just wrapping the outside frame.

Okay. And kind of like smooshing it really close to the things that are inside the frame. All right. The next

one we've done before but in a different context. So let's bring in an image in

context. So let's bring in an image in your exercise file. This is one called image04. Okay, it's a vector file and we

image04. Okay, it's a vector file and we are going to bring it into here. Okay,

you want it kind of close to the edge.

But we want to kind of at the back and we want to kind of just have it off and then it jumps off the frame. Okay. And

you're like no, I just want it. Why are

you jumping off the frame? Okay. So what

you can do is while you're dragging it, okay, we did this earlier. Remember

start click and hold it. Hold spacebar

and it means you can drag it all the way out here. It is still on this iPhone 16

out here. It is still on this iPhone 16 frame. Okay, so you can drag it in and

frame. Okay, so you can drag it in and kind of use it just on the edge here and it stops it jumping into other frames into components. We did it before when

into components. We did it before when we're just kind of like remember dragging things like the star around, but it's handy when you're trying to get things on the edge that you want to be on this frame and not jump off like that. Okay, so there you go. I'm going

that. Okay, so there you go. I'm going

to push mine in here and I'm going to send it to the back.

The shortcut for sending it to the back is the square uh brackets. Okay, so it's next to the P key. To send mine to the back using the first of the square brackets. All right. Other cool frame

brackets. All right. Other cool frame things is seeing everything in outline mode. So it's command shift O or control

mode. So it's command shift O or control shift O on a PC. It will show you everything kind of broken down into vectors. Okay, that can be really handy

vectors. Okay, that can be really handy especially with that star. Remember he

was just like hanging out. Watch this.

If I zoom out. Okay, you can see was there a guy? There he is. There. just a

little bit easier to see than that. Star

gone, star there. You use teenytiny.

Okay, if you've come from say Illustrator or any other vector drawing programs, you use it quite a lot, especially when you're drawing and creating things with a pen tool. Okay, I

find it just handy for the frames, especially when frames are maybe similar colors. You can kind of see the outlines

colors. You can kind of see the outlines and you can just work in this mode here.

Okay, you can get things to maybe snap a little bit easier because you can see them better. Um, if you come from

them better. Um, if you come from Illustrator, okay, Adobe Illustrator, command Y still works. I don't know why.

If you're used to that one, use that one. The official one for Figma is

one. The official one for Figma is command shift O or control shift O. If

some of the shortcuts have changed, they do. Okay. Um they go in they're always

do. Okay. Um they go in they're always trying to make them better. They never

stick to them. So you can click the question mark and go to keyboard shortcuts and you can work your way through to see whether if Dan said it was where is it under view, show

outlines. Okay. Yeah, it's still command

outlines. Okay. Yeah, it's still command shift O on a Mac. Okay. And if maybe they're just different than what I'm saying on PC, you'll see them listed here. Blue means you've used them. Uh I

here. Blue means you've used them. Uh I

haven't used the rulers shortcut since I reset this document. So it is grayed out. Cool. That my friends is all of my

out. Cool. That my friends is all of my frames tips and tricks. If you've got some, I'd love to kind of like get them all in. So let me know in the comments

all in. So let me know in the comments if you're like, "Oh, you didn't mention that one. That's a cool new one." Um and

that one. That's a cool new one." Um and for you, go check out the comments.

There might be some cool new ones in there. All right, that's it. I will see

there. All right, that's it. I will see you in the next video. Hi everyone. Uh

we're going to revise auto layouts, why they're good, how they work, and components, why they're good, and how they work. Okay, we you might know this

they work. Okay, we you might know this already, so you can skip ahead of this video. What we'll do is we'll do a nice

video. What we'll do is we'll do a nice little revision, nice and quick, and then I'll spend ages, that's why this video is so long, running into all the issues people run into, especially when you're a little bit newer in Figma. If

you are, hang around. We'll do the quick demo and then I'll show you the myriad ways my students get lost and how to get around them. If you know what an oil is

around them. If you know what an oil is and a component is and you've never had really any problems or at least you know how to fix them, skip along to the new stuff. But for now, let's jump in. get

stuff. But for now, let's jump in. get

everybody up to the same page and start making border layouts and components and breaking them. Let's jump in. All right.

breaking them. Let's jump in. All right.

Uh to get started, let's work on this project from earlier, okay, where we had our genres. And let's do a couple of

our genres. And let's do a couple of things to tidy up. Let's make sure double click the name up the top here and give it a name. Okay, mine's called Limmerick Techno V1. Okay, and up here we've got iPhone 16. Uh the only problem

with that you might have noticed is if you duplicate it. So I've got the top selected. Go shift D. Okay, not shift D.

selected. Go shift D. Okay, not shift D.

Undo. gone into inspector mode. Okay,

let's come out of inspect mode by going to this. You might do it. So, I'll leave

to this. You might do it. So, I'll leave that in the course. Okay, is I want to have this name selected. And let's go command D for duplicate. And you'll

notice up here it says, oh, look, iPhone 17. We've gone to the future. No, it's

17. We've gone to the future. No, it's

just trying to be clever. It's going

iPhone 16 17. If I do it again, command D goes 18. So, let's get rid of that.

It's handy, but not for iPhone. Can be

handy, but not right now. Let's call

this one genres. Okay. And now, let's duplicate it. Remember command or

duplicate it. Remember command or control D on a PC. Okay. And let's

double click this one. And let's call this one homepage.

I know they're backwards. Okay. Let's

get rid of all of that. And let's build our uh auto layout. I'm going to change the background color as well. Was

messing around with this earlier on to kind of some sort of off-white. All

right. Let's do the quick version of an auto layout. Let's bring in some icons.

auto layout. Let's bring in some icons.

Okay. So, we're going to go command shift K to bring in lots of stuff. I'm

going to say all of you fellas. You're

going to come in, click open, and I'm going to click paste all. Okay. I'm

going to move them all over here just to give myself a bit of room. I'm going to grab my uh scale tool, which is the K tool. And I want them all to be a height

tool. And I want them all to be a height of about 32. When I said about all exactly 32. Okay, I'm going to zoom in a

exactly 32. Okay, I'm going to zoom in a little bit. I am going to drag them out

little bit. I am going to drag them out so I can see them all. Doesn't really

matter what order they're in at the moment. Select all of them and say shift

moment. Select all of them and say shift A. You're in auto layout. and zoom out

A. You're in auto layout. and zoom out and get it going. So, let's put it on here. Let's go U down the bottom. I'm

here. Let's go U down the bottom. I'm

going to say actually I'm going to drag it all the way over here. I don't want it to scale. I'm in the scale tool, that's why. So, I'm going to go to the V

that's why. So, I'm going to go to the V tool to go back to the selection tool, not scaling it. I'm going to drag you all over there, you all over there, and I'm going to do some stuff where I say I want in the middle. And I can play

around with the gap between them all.

Okay. And that, my friends, is how to do an auto layout. The cool thing about it is let's turn it into a component so it's reusable. Okay. You can either

it's reusable. Okay. You can either click the button up here. Okay. Or you

can use the shortcut which is command option K on a Mac and that's control alt K on a PC. Okay. So it's a component.

I'm going to duplicate this whole page.

Command or control D. And this page is going to be my uh instead of this frame being iPhone 16 I'm going to do the iPhone Pro Max the big one. Okay. Okay.

And the cool thing about it is because it's an auto layer, I can say. Okay.

Move it down. I might play around with the spacing or the gap. Okay. It's

really easy to be responsive. Okay. And

the other cool thing is I can say you my friend is let's say this homepage here, uh, people haven't logged in yet. So,

they shouldn't be able to see their ticketing option. So, I can click on it

ticketing option. So, I can click on it and I can say in my file under my layers, okay, let's have a look at this guy. And I can say you my friend, which

guy. And I can say you my friend, which one do I want? The ticket one. I can

turn the eyeball off. And over here though I can see you. I want the eyeball on. Oh, look at us responsive. I can

on. Oh, look at us responsive. I can

click in here. Actually, this is my instance. This is the kind of main

instance. This is the kind of main component. So on this main component, I

component. So on this main component, I can say actually I want the want the search to be over here. You can see you play around with the order. And because

the components these things are linked, the magnifying glass ended up over here.

Let's turn the ticket back on. This is

the power of auto layouts. Hopefully

that's a good little refresher on autos.

We did it lots in the essentials course and you might be, you know, intermediate Figma user already and jumping straight to the advanced course. Let's get into all of the problems and how to fix them.

I'll do it because that thing that I just did, I kind of subconsciously avoided lots of errors, but I know when I'm teaching people, they all do the errors. That could be you. So, stick

errors. That could be you. So, stick

around. Let's get into all of the problems and solutions. All right. So,

I've just kind of undone until I come back to before I put the icons on. So,

let's get started and bump into all of the problems. Uh, so when I bring in my icons, there's two different ways. Okay,

I could use the command shift K and bring them all in and that kind of stacks them all on top. Okay, especially

if I hit place all, they're all in there. Okay, and that's what I did in

there. Okay, and that's what I did in the first part of this tutorial and everything worked. But if you're like me

everything worked. But if you're like me and you do a lot of like from your exercise files from icons, you just grab all of these and go y and add your own sound effects. Just drag them on. They

sound effects. Just drag them on. They

kind of come in a different way. You're

like, that's not a problem. Except with

them all selected and you go to the K tool, okay, for scale and you can say actually I want the height to be 32.

You're like this is perfect. Done.

Actually, it's not done it. What you've

ended up doing is this whole group has become 32. Can you see this whole height

become 32. Can you see this whole height is 32. So this one particular heart icon

is 32. So this one particular heart icon is only 15. To get around that it's easy. Okay, you just have this one

easy. Okay, you just have this one selected. Okay, and you say you are

selected. Okay, and you say you are height of 32. This brings me to the other problem. Okay, is that let's look

other problem. Okay, is that let's look at this heart. Okay, under here it's in a frame, which is cool. Okay, inside of here is a vector. What people can do is they can accidentally click the vector,

not the parent frame. Can you see they're different? Okay, so that the

they're different? Okay, so that the frame that it's around and the thing that is inside of it. If I have the thing inside of it selected and I go, you're a height of 32.

Does weird stuff? You can kind you make out what's going on. There's a frame, but the heart inside of it got scaled, but not the frame. So, it's like clipping it off. It's undo. Undo. So,

that can be problems that people run into is they accidentally You can do it on the board here. Okay. You can see I've clicked the vector, not the parent frame. All right. Solve some problems.

frame. All right. Solve some problems. You might have bumped into those already. The next one is sometimes

already. The next one is sometimes people grab uh SVGs like this and I'll just do a little selection around this.

Okay, we'll notice that I have selected the internal parts of all of this. Watch

just the vectors, not the parent frame.

Okay, so if I drag this off now, look, I'm dragging the internal vectors, not these. You end up with these frames left

these. You end up with these frames left by theirself. It is, you know, the

by theirself. It is, you know, the world's not going to explode if you have vectors on their own and try and scale those. So that's fine. Okay. But it is

those. So that's fine. Okay. But it is very common and you have a lot more flexibility if vectors are inside of frames. So just be careful when you are

frames. So just be careful when you are selecting either do a really big selection so it goes right around the outside and you can see I've got everything selected. Or you can

everything selected. Or you can shiftclick the names if you can see the names. Okay, I can grab them all

names. Okay, I can grab them all selected. Or in your layers panel here I

selected. Or in your layers panel here I can click the top one. Hold shift grab the bottom one. It doesn't really matter. It just if you were finding

matter. It just if you were finding problems and you're like this is weird.

It's probably that you have the vector selected and not the frame. If you end up with a vector on his own and you have no idea where his frame went or he just didn't come with one, the file that you inherited didn't have it, you can just

frame it. You can say, let's right click

frame it. You can say, let's right click it and let's say uh frame selection.

He's got a frame now. Excellent. All

right, let's go back in. All right, and what I want to do is I think that's the problems for now. There's more to come.

Okay, so what I'm going to do is do a sneaky trick. Instead of doing them all

sneaky trick. Instead of doing them all separately, I'm going to say you aligned on top of each other. Remember, don't

drag them on top of each other. If I

drag him, where is he going to go? He's

going to go inside the heart.

Okay. You can hold spacebar. We learned

that before. And it'll just sit on top.

But it's easy. Just grab them all. Big

selection on top. U. And now I'm going to say I would like the height of all of these guys to be 32. Nice. Make sure

that uh I'm using the dimensions of the frames, not the scale. I want the scale over here. Oops. 32. I'll pretend I

over here. Oops. 32. I'll pretend I added that on purpose, but no, I just messed that up. Now, the next problem is that when we convert this to auto layout, you're like, okay, cool. Just

select them all, did the big selection like Dan said, and then you went shift A in the earlier version, they all stacked up nicely. Okay, it's because I was

up nicely. Okay, it's because I was doing things knowing how to avoid problems like this. Okay, the default inside of Figma now is it tries to think for you and it does a terrible job at

the moment. This might work. If it

the moment. This might work. If it

works, you're done. Okay, if it doesn't and you have this problem like this, what's happened is it's turned this thing into auto. Okay, let's have a look. It's called frame 10. Let's call

look. It's called frame 10. Let's call

this one uh nav slash uh what's this one? Nav bottom.

Okay. And inside of it, let's close all these down. Okay, just to make them

these down. Okay, just to make them tidy, you've got one frame. That's

little hash. Another frame, little hash.

Then you've got this guy hash inside a little target. These guys here are

little target. These guys here are ignoring the auto layout. This guy

listening the heart magnifying glass listening and they're kind of flowing on next to each other. This one here, moody teenager, is ignoring you. Okay, that's

this little icon here. You will see them across lots of documents. Other people

will make them. All it means is like it's still inside the auto layout, but it's not flowing like an auto layout.

Why? Reasons. We'll do it later on.

We'll look at something called absolute positioning. But for the moment, you'll

positioning. But for the moment, you'll need to say you stop doing that. Okay, I

want you to grow up. There you go. And

stop being moody, okay? By ignoring auto layout. Turn that off. Look, so the

layout. Turn that off. Look, so the ticket now flows along. There's just one more person, the icon user. You are no longer ignoring us. All right, they're all flowing along nicely. The other

thing that might happen is if you click on the frame, you will find that the auto layout has different it tries to guess. Do you mean horizontal? Most of

guess. Do you mean horizontal? Most of

the time it guesses there. Sometimes it

goes, tada. Let's go back to horizontal and zoom out. And I think that is the issues we're going to run into.

Okay. One thing we need to do actually before we move on is let's grab this uh frame and drag it out. Uh let's turn the icons that are inside of it into

components. Uh why do we do that?

components. Uh why do we do that?

Because the heart, we don't want lots of copies of the heart. We want one heart used lots of times that we get to control. Okay. So let's select all of

control. Okay. So let's select all of these. I would like you to all be

these. I would like you to all be components. I don't want to make them

components. I don't want to make them one component. Can you see one giant

one component. Can you see one giant component? I would like them all. See

component? I would like them all. See

the drop down here? Create multiple

components. So, I've got a heart, magnifying glass, a ticket, and a user.

Let's go put them into play and explain just why components are so good. You

probably know already. Okay, so let's get this going down the bottom here.

Let's uh drag this out here and this out here. Let's get the alignment to be in

here. Let's get the alignment to be in the center. And let's drag up the gap.

the center. And let's drag up the gap.

You can put the gap as auto. Okay. But

it goes right to the edge. Okay. I want

this. Bring this down. I want to bring this down to like 50. Um actually make the alignment center. And if I zoom in, you can play around with this on the artboard. Can you see? Uh if you've got

artboard. Can you see? Uh if you've got gap that's not set to auto, okay, any other number, you can drag these out while you're down here. We can set this to auto and add some padding left and

right. Okay. just so that it is let's

right. Okay. just so that it is let's what should we do? Let's do 32. Cool.

Let's add it to the bigger document.

Let's go for a um so let's make Yep.

duplicate them. Command or control D.

You are going to be the frame of the Promax. So it's nice and big. The cool

Promax. So it's nice and big. The cool

thing about it now is because it's an auto layout. Okay. And we set up that

auto layout. Okay. And we set up that lovely spacing. Okay. You can see we've

lovely spacing. Okay. You can see we've made it bigger for a different device.

Okay. And it all flows nicely. Okay. And

the reason we made those icons a component is so that we can go into this and say, "All right, you." Okay. This is

my main component. Okay. I can tell it's got the weird little icon here, not this version of it down here. Where is he? I

double click on him. You see the diamond? That's the regular U instance.

diamond? That's the regular U instance.

Let's go over here. You

Okay. If we go and double click, double click, double click, and we start messing around with him. Let's give him some mad sideburns.

Those aren't mad sideburns anyway. Um,

but because you've messed with the master zoom out. Okay. Or no, the main component. You can see this adjusts as

component. You can see this adjusts as well. If we didn't convert these to

well. If we didn't convert these to multiple components, that wouldn't have updated and we'd have to update it again. All right, my friends. That was a

again. All right, my friends. That was a long video, okay? and hopefully gets us all up to the same sort of level of understanding for autoouts, why we use them, how to make a component, why we

use those, and the myriad of issues that you might run into being kind of, I don't know, good enough to use Figma, but bumping into lots of issues.

Hopefully, that solved a few of them.

All right, let's get on to some new stuff in the next video. Hi everyone. In

this video, we're going to uh sprinkle on all of the super awesome uh AI features inside of Figma. suggested auto

layout, replace content, duplicate, rename, and AI image generation. Oh, so

good. We're going to take this, which is just an image and some text. There's

nothing fancy about it. We're going to go copy and then rightclick, more layers, suggest auto layout, and bam, it's auto layout. It does all that great auto layout stuff without having to

build it yourself. And then we'll make a couple of them, add them both into an auto layout, and then look, magic. We

get to duplicate them. Magic more. We

get to click on this and say, "Ah, let's replace the content in there. Let's just

use the default. Fill it with some realistic content." Sit back, relax. It

realistic content." Sit back, relax. It

redid it all. And it kind of knows what it's doing. Plus, we'll do all the

it's doing. Plus, we'll do all the images as well. All right. I've actually

done the whole tutorial in the intro.

There's a little bit more detail to it than that. There's a bit. So, let's jump

than that. There's a bit. So, let's jump in and start arm wrestling the AI robots. All right. So, I've created a

robots. All right. So, I've created a card here. It is a frame. Inside of that

card here. It is a frame. Inside of that frame is just an image. uh some text.

They're all just kind of like floating around. Nobody's doing anything. Okay.

around. Nobody's doing anything. Okay.

So, I need to turn to auto layout because what I want to do is put it on another document and kind of resize it and do all sorts of stuff where I go, "All right, rock and roll needs to be really, really long." It just kind of

types over everything. There's nothing

responsive about it. So, all I need to do, click the parent frame. If I use my normal shift A, okay, to turn to auto that doesn't work. Let's undo. A trick

here is with the parent selected. Okay,

frame 38. I'm going to right click it.

And there's an option in here. It says

more layout options. And this one here, suggest auto layout. It should be super amazing. Auto layout. It's very

amazing. Auto layout. It's very

unassuming. Let's click the button. And

nothing changes. How cool is that?

You're like, nothing changed. Have a

look. So my frame now, okay, is an auto layout. Inside of it is an image, but

layout. Inside of it is an image, but then there's another auto layout frame.

So it framed this for me. So it's in this kind of like large frame. Okay. And

I can decide now that actually, let's twirl it up. The image goes beneath it.

It refflows. It's all nested auto layouts. It's very exciting. Okay. We

layouts. It's very exciting. Okay. We

might decide in here though that uh what do we got? So, there's a frame 40. I

want that to be below the text or I drag the text above there. Okay. They all

refflow. Undo. Undo. Undo. Undo. Okay.

Let's say rock and roll as well. Let's

say I type in that uh really long heading. And look what it does now. It

heading. And look what it does now. It

snaps. It's created this box. Oh, it's

so good. Let's undo. Let's go even further. At the moment, it's really

further. At the moment, it's really hard. Like, remember it was called frame

hard. Like, remember it was called frame 35? It just kind of like wipes the frame

35? It just kind of like wipes the frame names, but you can get it back. You can

say all of you guys, I can right click it and use the sweet rename layers AI.

This might be off if you're on the free version, but watch this. You could type them. Watch this. Rename layers. It's

them. Watch this. Rename layers. It's

going to go through. It's going to think about it. Look at it typing. It's the

about it. Look at it typing. It's the

future. Cover image. Oh, it even changed that. Look. Cover image. Song info. It's

that. Look. Cover image. Song info. It's

not quite right. Uh, it's got the header, the title, the date. Oh,

description. Song info. It's not really a song info. It's more of a genre. Oh,

so good. Oh, it gets better. Let's grab

it. Let's make a copy of it. Okay. I

haven't turn it into an instance. I

should. Um, but I've got two frames here now. I'm going to select them both. Put

now. I'm going to select them both. Put

them auto layout. Just the regular one.

Shift A. That works. It's not very complicated. But see this appear? Oo.

complicated. But see this appear? Oo.

Okay. It's got this fancy duplicate option. You see the little sparkles next

option. You see the little sparkles next to it. I'm gonna first actually just

to it. I'm gonna first actually just drag it off because it's getting a little bit tight in there. Okay. And I'm

gonna make it bigger. Let's zoom out.

Actually, you have to drag it far enough. Um, if you drag it does nothing

enough. Um, if you drag it does nothing until you get far enough to get, you know, enough room for them all to appear in there. Okay. Look what we're doing.

in there. Okay. Look what we're doing.

Oh, and it gets even better. We're going

to use the AI feature called right click. That's not the right AI feature,

click. That's not the right AI feature, but there's one in here called I can't remember. Come on, brain. Replace

remember. Come on, brain. Replace

content. It's not in there at all. Okay.

with it selected the whole big frame that you've got. Get down here and let's go to uh replace content. And can you see this like little prefilled in thing?

It says fill with realistic content. If

you hit tab, that is a prompt. You could

type that in. It doesn't matter. Okay.

But yeah, give it a crack. Realistic

content. It's going to try. Oh, it's

doing it.

How cool is that? It's not doing the images. Um, you got to do those

images. Um, you got to do those individually. We'll do those in a sec.

individually. We'll do those in a sec.

But look at that. It's got the dates.

It's got the um different genres. Oh, I

do like it. Okay, so now we could go in and say actually you here. Um okay, I've done that one. We could go to more AI

and say make an image. And this one is indie pop band. Let's make it cut to when it's made because this takes a little while. Ha, I like it. Okay. Oh,

little while. Ha, I like it. Okay. Oh,

look how responsive it is. I like the indie pop. One little change. Make

indie pop. One little change. Make

changes.

Aha.

It's closer to me. We'll take it. All

with glasses. Better.

Little roundy face for me, but that'll do. It's got no sideburns. What happened

do. It's got no sideburns. What happened

there? It's got the hairdo, though. All

right. So, we could work our way through to do these things. The one caveat, the one problem that I'm bumping into in terms of the like duplicate option, okay is um let's grab Oh, I didn't keep a

version of it.

Copy that one out of the frame. Paste it

over here. Okay. So, he's out. So, I got to this. And we should turn this into

to this. And we should turn this into Actually, I want to turn that I want to get this frame taller. Actually, no. I

want to get the image. I used a really weird size there, didn't I? There's the

padding. Come on, Dan. Let's grab the edge. There we go. Okay. What we should

edge. There we go. Okay. What we should do is turn this into a component.

Remember, command shift K. Nope.

Remember, uh, command option K to turn it into a component. Or just click the button over there. Boop. Okay, so we've got our main component so that we can change it later on and kind of control

it all. So I make a copy of it, which is

it all. So I make a copy of it, which is my instance. Okay, instance of my main

my instance. Okay, instance of my main frame. I'm going to move them around.

frame. I'm going to move them around.

Okay, that's at the top. That's there. I

select them both and I make them shift A into R. Actually, the duplicate thing,

into R. Actually, the duplicate thing, remember that was down here? It's gone.

It's where to go. Okay, so it'll work with a main components like you can't, but I'm going to undo this. we should

put on our components page. Boop. And

put it in here. Okay. And then back at my other page, my Hi-Fi mobile. Okay.

Actually, I did it the wrong way around, didn't I? I'm going to cut that. Go to

didn't I? I'm going to cut that. Go to

my components. So, my main components in here. Then I'm going to copy this. Go

here. Then I'm going to copy this. Go

back to my Hi-Fi mobile. Paste it in here. So, this is a copy of that main

here. So, this is a copy of that main component. You can see it's a little

component. You can see it's a little diamond. That'll work. Okay. So, we'll

diamond. That'll work. Okay. So, we'll

do it to those. U shift a auto layout.

And then that appears there. That might

go away. I don't know why it does that.

Um, but yeah, very cool. Um, a couple of other things that you might have to do before we turn it into that duplicating thing is actually let's go back to the main component. What you want to do when

main component. What you want to do when you've used suggest auto layout just make sure it works. That image worked great. You can see it's kind of what I

great. You can see it's kind of what I want it to do. The padding on both sides. What was my padding originally?

sides. What was my padding originally?

Let's click on this. See, I had what 17 on one side and 16 on the other. Okay.

Just cuz I drew it out randomly. It's

probably best to tidy this up now before I go and turn it into, you know, a component to make duplicates of it everywhere. So, I probably want 16.

everywhere. So, I probably want 16.

Actually, 16 or around. Come on, Dan. I

like to tab around these just to get them. The other thing is is that this

them. The other thing is is that this Let's have a look. Uh, I'm going to put some returns in. You can see it's not flowing. Okay, that's something I

flowing. Okay, that's something I probably want. Okay, it depends. If you

probably want. Okay, it depends. If you

want to fix height card, leave it. But

what I want to do is double click down the bottom of the text box and it will turn it from Can you see where is it? Uh

this is a fixed size. And if I double click the bottom, okay, it automatically jumps to this one. Or you can click the icon to auto height. That's another good thing to check. Now, uh I can add more

stuff. Get in there. Get in there. Um

stuff. Get in there. Get in there. Um

enter. Enter. Enter. So you go. Uh other

thing I'd probably check here now is is there enough room for all of the dates?

probably um what happens when I get down to one digit that still works. These are

the kind of things I like to check and like what if the client says this needs to be all uppercase still fits or we want the full version.

That's okay, too. Uh and over here, what happens when this gets really long? We

already checked that. All right. Oh, the

other thing is that is kind of scaling down. It's kind of being centered inside

down. It's kind of being centered inside of the header, which is cool, which is this chunk here. What you could say is the date is it's probably set to centered somewhere. Where is it?

centered somewhere. Where is it?

Actually, it's not this. It's the parent header. Okay, we can say the header I

header. Okay, we can say the header I want them to be spaced out, which is cool, but I want it to be spaced and aligned along the top. Now, we've

covered some strange things here. It's

all very easy until it's not. I've kind

of given us something that works really good. But you'll find there's lots of

good. But you'll find there's lots of times it just doesn't work. And that's

what we'll do in the rest of the section around. I'll give you a bit more crash

around. I'll give you a bit more crash course on how to do these like nested awesomely aligned and constraint and spaced out auto layouts. But yeah, it's pretty cool, huh? All right, that is it.

Uh I will see you in the next video.

Actually, one last thing. Let's actually

just get it on the page. I'm going to move you off. So, which one we working on last? I think this one. Yeah, we

on last? I think this one. Yeah, we

were. Because all of these instances are in this auto layout, I can go like you.

And watch this. I can grab the parent as long as the parent a nicest part. you. I can do the spacing.

nicest part. you. I can do the spacing.

Okay. Um, mess around with the spacing.

What do I want to be? 32.

Hard to do. Let's do it over here. 32.

Another little trick as well. You can

actually just double click that gap and type it in. Double click the gap for the spacing. Come on, Dan. My mouse is doing

spacing. Come on, Dan. My mouse is doing some weird stuff. So, let's go to you.

Double click the gap. And you can type it in up here. So, I can type in 32 or do it over here. It's up to you. hard.

Doesn't matter what size this goes on, it will respond to it. So good.

All right, we've made a mess. Now I will see you in the next video.

All right, it is class project time. I

want you to build a page. Uh let's go to the class projects. Remember those are in your exercise files. I want you to create a what's on page. Okay, what's

going on? I don't mind the language.

Okay, there needs to be a heading and a repeating band list card. Okay, let's

have a look at my one. Okay, so I've got a heading here. I've got this card that repeats with all different bands that are coming up on different dates. I want

you to experiment with the AI features.

If you are trying to do this course in the free version, it's okay. Just design

it. It doesn't have to be built with AI.

You just have to do a little bit more typing and copy and pasting and finding images from free stock library image sites. I don't mind if you are actually

sites. I don't mind if you are actually if you are in the free version there's a free trial okay it might be great to do this course through the free trial and then you can turn it off at the end okay but if you do have the features um I

want you to go through and play around with these so suggest auto layout is the main one we did that in the last video okay where you just kind of design it and say hey give me the auto layout please and it does nice things you will

bump into problems like I designed one quite simple so that it worked it worked first time I know I've done other things where I'm like oh this will work and it didn't so keep keep it simple or do something complicated and see how

suggest auto layout deals with it. Later

in the course, we'll get our skills up so we can fix it. Um, but play around with something simple at least. Okay, I

want you to play around with that rename layers features. Uh, if you can't

layers features. Uh, if you can't remember where that is because it was kind of a small part of the course is you can go into here and say actually I want to grab this whole thing and right click it. Okay, and there is a rename.

click it. Okay, and there is a rename.

Where are you? Rename layers. There it

is. There. Okay. Uh, I also want you to duplicate with new content. That is the technical term for that little thing that appears at the bottom. Okay. When

you are dragging it out, it's this thing down the bottom here. I can't see there.

That thing. Okay. Uh replace content. We

did that. Okay. Um in this case, um what I like to do when I I know what I'm going to make is I'll build something.

What is that? Get out of my way. Okay.

Is Oh, where are we? Remember, if you get lost, uh command one. Oh, I typed in exclamation mark. Uh shift one, sorry.

exclamation mark. Uh shift one, sorry.

and it will zoom out to everything that you've got. And what I like to do when

you've got. And what I like to do when I'm putting the placeholder text that I'm going to use that replace content with. Okay, I just type in band name.

with. Okay, I just type in band name.

Okay, that gives it a hint. Okay, I

typed in an actual date and I use the rewrite this. Okay. Or yeah, rewrite

rewrite this. Okay. Or yeah, rewrite this um to add in a description about a band called and I gave it a fake name.

And then I duplicated it so that I was able to then use the um what is it called? Rewrite this. Comes up with band

called? Rewrite this. Comes up with band names. You can in your suggest this give

names. You can in your suggest this give it a really clear um description. You

could say actually I'm rewriting this and I'm saying uh I'm writing this for techno bands from the '9s. Okay. And it

will give you that specifically. You

don't have to just leave it blank. All

right. Uh, play around with the make an image. Okay. So, I made an image and

image. Okay. So, I made an image and you'll notice that all of them have middle-aged bald dudes. I tried to do the sideburns. He doesn't like adding

the sideburns. He doesn't like adding sideburns. None of these look like me,

sideburns. None of these look like me, but anyway, they're all hidden in there.

Little Easter eggs. I think I like this guy the most. He's got a similar hairy hand going on. And what else? Uh,

rewrite this we talked about, which is Figma's version of Chat GBT. Play around

with that. I want to make your page scrollable. Okay. So, make sure that

scrollable. Okay. So, make sure that when you're doing the template, it can do this, okay? If you've never done that before, just make sure that when you've got your frame, okay, and you've got this in it, it's longer, okay? So, it

fits in there, okay? And also, this is the height of the phone, okay? My height

is uh 852. And we've clipped the contents, okay? So, we don't see it.

contents, okay? So, we don't see it.

That doesn't really matter. What really

matters is that it is set to a frame of something it knows, like an iPhone 16.

If it doesn't work, you can go to prototype.

It still probably won't work. So, you're

gonna go to prototype. You got to say, I would like the overflow, which is the stuff that's kind of hanging out here.

Uh, default is no scrolling. I want to vertically scroll. And that should get

vertically scroll. And that should get you this guy. All right. Awesome. I've

taken some liberties and kind of moved that around to remove the camera. You do

the same. I played around with some fonts and some colors. We'll get into that more later on, but I couldn't help myself. All right, jump in. Play around

myself. All right, jump in. Play around

with the AI. be excited by some of the time it can save you and realize some of its kind of foibless where it doesn't do what we did in the last course. Simple

things, great. Really complicated things we're going to need to fix ourselves.

But don't worry, we'll learn how to do it. All right, happy class project

it. All right, happy class project making. I'll see you after you've done.

making. I'll see you after you've done.

Oh, actually, any last things in here?

Uh, deliverables, take a screenshot, okay, like this, and upload it to the class projects. Okay. Uh, also share on

class projects. Okay. Uh, also share on social media. Let people know you're

social media. Let people know you're doing the advanced course with Dan and it's awesome. You guys should check it

it's awesome. You guys should check it out. And this is what I made. Uh yeah,

out. And this is what I made. Uh yeah,

there you go. I will see you in the next video. Hi everyone. In this video, we're

video. Hi everyone. In this video, we're going to build our very own responsive nested auto layout. Okay, like we did in the earlier video uh where we use the robots, we use AI to do it all, we're

going to do it all ourselves because we need to understand how these things are created so that we can fix problems, create more complex layouts, and we need to learn how to hug. Yes, there's going to be hugging in this one. It's going to

be real awkward. All right, let's jump in. Let's get hugging. All right, let's

in. Let's get hugging. All right, let's get started by hitting the F key and we're going to pick an iPhone 16 frame.

For some reason, it plops it in wherever it likes. Got to line it up. Perfect.

it likes. Got to line it up. Perfect.

Um, and this is going to be my manual auto. All right. So, it's got a name.

auto. All right. So, it's got a name.

Very sexy. And what we're going to do is just start building it. So, I am going to start with a frame. Okay. And I'm

going to draw one in here. All right.

I'm going to change the color of it just so that we can see it against the background. Pick any old color as long

background. Pick any old color as long as it's green. Um, hello. Let's bring in an image. You can bring in anything.

an image. You can bring in anything.

I've got one. Um, remember command shift K is the shortcut to bringing in an image. Okay. And there's one called

image. Okay. And there's one called image five. It's a very cool bring a

image five. It's a very cool bring a laptop.

There we go. And I'm going to just drag it around manually to kind of how I want it to be. And let's have a little look.

Okay, the constraints are locked. Can

you see that? Like when I'm dragging it, can you see that dotted line that runs through the middle of it? It's just

saying the height and the width are locked. You can break it by hitting that

locked. You can break it by hitting that button there. Uh lock unlock aspect

button there. Uh lock unlock aspect ratio. Okay. And I want to have it just

ratio. Okay. And I want to have it just a weird aspect ratio. Okay. I'm going to drag it out. I should be more thoughtful. It's good enough. Now, what

thoughtful. It's good enough. Now, what

I'm going to do is just build it as we go rather than kind of building it all up and then converting it. Okay. So,

what I'm going to say is actually this frame. Okay. Let's give it a name. Let's

frame. Okay. Let's give it a name. Let's

call this one card. Okay. This image is going to be called image. What I want to do is the parent, which is the card.

Okay, I want to say you're an auto layout. So I can click on the button.

layout. So I can click on the button.

Where's the button? There it is. There.

Okay. Or I can use my shortcut shift A.

And now the cool thing about that is, can you see it's kind of wrapping around it. All right. Just want to make sure my

it. All right. Just want to make sure my padding is 16 and the height is 16.

Great. Uh, let's do some type. I'm going

to type it over here. I'm going to type in bring your own laptop. Okay. And it's

going to go in here. But the problem is if I put an auto layout, well, it's going to work. It's going to go exactly where I need it to do. Excellent. Okay.

The problem is I go and add my date. Let

me jump to making a date. Okay. I got my date. If I try and pop it in there, this

date. If I try and pop it in there, this auto layout, this auto layout is set to that. Okay. Which is vertical. Or I

that. Okay. Which is vertical. Or I

could do horizontal. Both of them aren't going to work. We need to do that nesting goodness in the middle here. Let

me just move these around. So, bring a laptop. I want top of the date. Okay.

laptop. I want top of the date. Okay.

They're still not working. But if I grab both of these guys, okay, and put them inside their own auto layout, that is what's called a nested auto layout. I've

got one that I'm going to put in here inside this parent. It's nested inside.

Okay, so I got these two selected. You

can right click it and say I want to frame this selection. You could draw the frame first and throw these guys in.

It's up to you. Okay, they're in this frame. I'm going to turn it into an auto

frame. I'm going to turn it into an auto layout. Shift A. Okay, this one's going

layout. Shift A. Okay, this one's going to be called heading. And it's still not working, Dan. Look, it's nested though.

working, Dan. Look, it's nested though.

Look, heading is inside card. Okay, but

this thing here I can do some cool stuff. Remember this card was set to

stuff. Remember this card was set to flowing down. This or all out can be set

flowing down. This or all out can be set to going horizontal, vertical. Yeah,

horizontal.

Cool. E, it's not quite working, but that is a nested order out. And you'll

find lots of nests inside nest inside nests. That's how AI did it

nests. That's how AI did it automatically, which was cool. Let's

look at making it a little bit better cuz the moment it kind of does that.

It's not quite right. And when I type uh type, it kind of works, but just goes off forever. So, there's a few things we

off forever. So, there's a few things we need to look at. Okay, let's look at this parent, the heading. Okay, this

heading at the moment goes to about there. We want it to go all the way over

there. We want it to go all the way over here. How do we do that? Okay. The

here. How do we do that? Okay. The

moment the width, you see it says hug there. Hug contents. It is hugging. Big

there. Hug contents. It is hugging. Big

bear hug around the contents as tightly as it can, which is very tight. Okay.

Right around the edges. What I want to say is don't hug. I would like you to fill your container. And the container in this case is the card. That's the

parent or the container. I want you to fill as much as you can. You see the little arrow that appears here? Watch.

I'm going to go that way. You're like,

"Awesome. That kind of works." So this heading now stretches all the way across. What I need to do now is at the

across. What I need to do now is at the moment they're all squished in the left.

I'm going to say I want you to squish to the left. Okay. And it's got a gap of

the left. Okay. And it's got a gap of eight. That's a little gap in between

eight. That's a little gap in between it. I'm going to say the gap actually.

it. I'm going to say the gap actually.

Can you just make it auto? The parent

says I want to be as big as I can. Okay.

I'm going to fill out to this container.

But we were forcing the gap also to be a certain number. But if we say be auto,

certain number. But if we say be auto, it goes all right be whatever you want.

And it will expand out to the container.

Kind of get it. So we've got let's close that down. Our parent which is an auto

that down. Our parent which is an auto layout. We've got this image hanging out

layout. We've got this image hanging out inside of it. Okay. And then we've got this little block. Okay. That has its own little world of auto layout going on with these two fillers inside. Okay. Now

I'm going to add my description text.

I'm going to jump to that being done.

Okay. That was the weirdest. I checked

to see if the AI would give me Lauren.

That's the Lauren we got. Somehow we got Disney. Wow. Oh, it's not Disney. Just

Disney. Wow. Oh, it's not Disney. Just

felt Disney when I read it. Okay. If we

dump them in here, as long as we get them in the right place, it should fill out. bottom got this lovely auto layout

out. bottom got this lovely auto layout much the same way as this was made.

Okay, let's double check a few things just to make sure everything works.

Couple of things is that's not going to the edge. How do we do it? We select on

the edge. How do we do it? We select on him and say, "Oh, do we want your width?" Okay, we want you to go let's

width?" Okay, we want you to go let's fill your container. Let's go all the way out. It did. It didn't really work

way out. It did. It didn't really work cuz none of the words are small enough to break. Let's do that again. So, I'm

to break. Let's do that again. So, I'm

going to change the text size. Let's go

to Robboto regular. Oh, that'll do it.

Okay. And do the exact same thing. Want

to grab the text. We can say your width my buddy is fill container. Oh, at least one word popped up. You get what I mean though, right? So, it fills it up.

though, right? So, it fills it up.

Great. Let's keep typing. The other

thing I like to check with auto layouts, we kind of did it early on, is uh check this all works. Keep going. It's not

working. Okay. So, this text box is what's called a fixed height. So, with

it selected, just the text, I can see the height is set to this height of 115.

You're like, I don't want it to be 115.

I'd like it to be hug contents. That

would work. Okay, there's a couple other ones we could do. We could do hug contents. This button here does the

contents. This button here does the exact same thing. Auto height. It's just

another word for hugging contents. It

even changes. Look, if you go to hug contents, can you see it just switches to that? And the other way, the third

to that? And the other way, the third way, because you need three ways of doing stuff. You can just double click

doing stuff. You can just double click the bottom of a text box. It will switch it to hug and auto height all the same.

Give it a test. Uh testy

testy.

Yeah, come on. It does work. Awesome.

All right. Anything else we want to check? The other thing we would like to

check? The other thing we would like to check is is this whole thing responsive or kind of is. Yeah, it is totally responsive. The thing that I was

responsive. The thing that I was thinking wasn't going to work and I was going to show you was it all works.

Cool. And sometimes it's just this box here. Okay. It is set to fill. We

here. Okay. It is set to fill. We

already did that. Sometimes when you drag it out ahead mine very clearly like this. Okay. With a specific width. When

this. Okay. With a specific width. When

I'm designing it, often I'll line it up anyway there even though I haven't said fill and it will just be a fixed width still and it'll look like it is. Okay,

it'll look like it's going to the edge but when I do this it goes nope. Okay,

so this one here I set to fill that container please. Nice. It is totally

container please. Nice. It is totally tricky. Okay, so if you are finding

tricky. Okay, so if you are finding yourself like oh that was a bit tough.

We'll do a few more through the class but in terms of auto layouts okay autos on their own one of them is really simple. when you start sticking ones

simple. when you start sticking ones inside of other ones, you're like, "That's weird." And then you throw in

"That's weird." And then you throw in this like, is it gonna be hugging or is it going to be filling the container? I

remember when I got started, I just had to click on them all and go, is it hug?

Is it fill the container? Something's

not right. And you kind of just kind of played around with the buttons until you get a sense for like, all right, so I understand like I understand it fully, but it wasn't instant when I was learning it as well. So, if you're finding a little tricky, it is tricky.

But when you do get it and you're doing all of this good stuff and you can start to do the things we did in the last one where we go all

right you are going to be a duplicate grab them both shift a auto layout and then drag out bunches of them and then go command K because we're awesome and

we go replace content and we just say fill with replaceic tab so we can fill with realistic content then hit command enter even though I always just hit enter anybody else do that It's just so

good. Look. Networking event. It's just

good. Look. Networking event. It's just

gone through and changed them. Look.

Different dates, different descriptions, different kind of knows what we are. How

does it know what bring your laptop is?

That is kind of scary. It is. This is

the stuff we do at Bring My Laptop.

Renowned designer. Oh, the robots.

You're freaking me out, man. All right,

that is it. I'm going to contemplate my life with the robots and I will see you in the next video. Wow.

Hi everyone. In this video, we're going to learn about auto layout grids. Look

how cool this thing is. It's got grids.

Okay. And we can move stuff around. You

go there. They're called autoout grids.

They're easy to use. I love them. Let's

jump in. Okay. To get started, I've created a new frame. Nothing in it. I've

made a background color of kind of like a midnight blue. That does not matter.

Okay. Let's grab a frame. We're going to stick it inside. Okay. and we are going to find the auto. So, it's this new one here. Okay, we've looked at basically

here. Okay, we've looked at basically free form just means it's a frame with things wiggling around everywhere. The

same way I'm drawing stuff inside of this frame that is free form. There's a

rectangle in here. Okay, that's just got no fill, but it's just hanging out.

Okay, let's delete him and let's change it. So, we looked at vertical and

it. So, we looked at vertical and horizontal for auto layouts. What we're

going to do is click on this one here.

What it's going to do is convert it to auto. kind of saves us having to click

auto. kind of saves us having to click that but also turns it into this grid.

It's in beta at the moment. I'm sure by the time you're doing it, it'll be nice and not beatery. Might not have as many bugs. It might do some new features. So,

bugs. It might do some new features. So,

all we've got here is let's bring in some images. It's the best way to

some images. It's the best way to explain it. So, let's go to command

explain it. So, let's go to command shift K or control shift K. I'm going to bring in 06 to 10. Okay. Of the images.

And I'm just going to click place all.

And let's drag one in. And it's not going to work. So, let's you go over there. These are all piled up on top of

there. These are all piled up on top of each other. So, if I grab this and throw

each other. So, if I grab this and throw it into my grid, which I can't really see. Where are you? There he is. If I

see. Where are you? There he is. If I

grab that and drag it in, it'll kind of It didn't work. Let's make it appropriately sized just to get started.

Okay, it'll expand and contract. Let's

get it somewhere sized like that. And

I'm going to say you get in there. Okay.

Or you can go copy and go in here, select the frame where you want it, and go paste. And it will go in as well. The

go paste. And it will go in as well. The

only trouble with this is that it's kind of working. Okay. It's got this little

of working. Okay. It's got this little grid. You can see here the image is

grid. You can see here the image is getting smaller. Uh, it's trying to

getting smaller. Uh, it's trying to fill, but it just can't do it. Okay, so

what we need to do is either before or after. Okay, we need to select on the

after. Okay, we need to select on the image and say do not have your aspect ratio locked. So, let's unlock aspect

ratio locked. So, let's unlock aspect ratio. Give it a click. I'm going to do

ratio. Give it a click. I'm going to do it to all of these all in one big go.

Okay, so now it's going to do cooler responsive stuff. Awesome. E, you could

responsive stuff. Awesome. E, you could build this yourself with frames and padding and auto layout, but grids just make it work easily. The cool thing about it as well is let's grab this one.

I'm going to copy it and I'm going to actually let's drag it in when it's a little bit bigger. Let's see what it does. So, if I drag this guy just over

does. So, if I drag this guy just over here, it's not in. It's using the top left of this thing and it's not getting anywhere near close. So, it's too big.

It doesn't know where to go. So, that's

why it's in beta. If I do this, it's squeezed in sometimes. Okay. It will go and cross two the noises. Okay. This will cross two of

the noises. Okay. This will cross two of my what are they? Rows. The cool thing about it is look, it's all resizy and responsible. Responsive is the word.

responsible. Responsive is the word.

Okay, so let's pull in. That was my kear. I asked AI to make me a kar. I

kear. I asked AI to make me a kar. I

didn't know what it was. So I said it's a piano with a guitar and it smashed it on the side there. Not what I wanted.

Okay, so I'm going to copy that. Paste

it. I've just double clicked it. Pasted

it in. It is so good. Super easy to do these little grids. Otherwise, it used to take ages to mock these up. You can

get them to span more than one like this one here. They can overlap. Okay. Okay.

one here. They can overlap. Okay. Okay.

And this thing will still be expanded and contract. Okay. And if you do need

and contract. Okay. And if you do need to play around with the layers, it's just like normal over here in your layers panel. If I want him below all

layers panel. If I want him below all these guys. Bam. There we go. I don't

these guys. Bam. There we go. I don't

want that. I want I like the kind of grid that they've got going or the gaps.

Undo. Undo. Undo. Okay. You can adjust all of these. Can you see over here? You

can say the gap is 10 and 10. If you

want it to be, what do we want? 16 and

16. You can add padding. Let's add eight and eight. They're quite versatile. Drag

and eight. They're quite versatile. Drag

that one all the way that way. And

they're very responsible. Why is this guy sticking out the bottom there? Oh,

let's have a look. He's not constrained now, but under the fill image, he's under fill. Fit fill. Ah, it's cuz I

under fill. Fit fill. Ah, it's cuz I dragged him out earlier on. Remember I

was trying to drag him. There you go. Be

your little home there, buddy. You can

easily move them around. I can double click this guy and just drag him up and he will try and get up there. Nice. You

can duplicate them. What's going to happen because of this weird row structure? Let's go command D. Okay,

structure? Let's go command D. Okay,

we'll put a new one in. It's so smart.

You can add them in yourself by clicking on the just the entire frame and over here. Okay, you can click on this and

here. Okay, you can click on this and say see it just defaults to two and two.

Let's say I want this to be three and two. I just hover my mouse over get a

two. I just hover my mouse over get a sense for what I want and then click it.

Okay. And in this case, I'm going to have to say you I want it, but I want this over here. And I'm going to maybe make this one go that way. Oh, look at

us being all creative. Kar time. Here we

go. You go in there. Okay, that dark background was a dumb idea. Let's go

back to an off-white.

Actually, full white. It can be a little weird when you move them around. Watch

this. I want to move this guy over here.

Where do I want him? That side. Okay.

Kind of squished it out and moved everything around. So, sometimes you do

everything around. So, sometimes you do need to copy and paste them. Sometimes

it works nicely. Sometimes not.

Depending on how much you've got spanned and what's kind of inside of the grid.

Now, you can make these rows. So, rows

and columns up and down. Okay. You can

make them individual sizes. At the

moment, they're all on set to auto. See

these little dots? When I'm hovering around, those little dots are on the outside there and there is the measurements. So, what I can do is I can

measurements. So, what I can do is I can say, actually, I want this one here to be just a little bit bigger. And you can either click on it and just drag it, okay? Or type it in. If you know you

okay? Or type it in. If you know you want it to be 150, type it in. These all

change to fit the space provided. It's

very cool. You can actually drag them out of their little homes. Okay? All you

need to do is the parent frame needs to be not set to clip contents. Okay? You

can do some quirky things with it, but you end up breaking it. Don't break it.

I'm undoing. Don't break it. But I know you will. You can add text. Let me know

you will. You can add text. Let me know in the comments if you can work it out.

I can't make the text expand and contract when it's editable text. It's

not as responsive, but let's do it anyway. Let's go into here. Let's drag

anyway. Let's go into here. Let's drag

this in you and go to you. I got some text I was messing around with. Here it

is. Okay. So, I'm going to put this in.

Actually, that's why I had the dark background. Back to dark background

background. Back to dark background time. Okay. Is this here? I want an

time. Okay. Is this here? I want an extra row at the top. Okay. So, what I can do is I can say you I want what do I want? Another row. So, it's going to be

want? Another row. So, it's going to be 3x3. Now, okay. I'm going to grab you. U

3x3. Now, okay. I'm going to grab you. U

you in. I'm going to have to drag these ones down to kind of give myself some space for the text. Oh, it's so easy, isn't it? Now, this here, I'm going to

isn't it? Now, this here, I'm going to go to cut. Actually, copy it. Click back

in here. I'm going to click on this field and go paste. It will be in there.

It's the wrong size. But the problem is, yeah, that's the big problem is I can't work out how to resize it. So, you got to pick an appropriate width so that it can kind of hang out with the dudes.

Okay. Do the stuff.

Okay. But the text eventually will get to the edge and go bye-bye. Okay. So,

that's the only thing. Same with this height here. I want to don't want it to

height here. I want to don't want it to be auto. I'm going to drag it down so

be auto. I'm going to drag it down so it's kind of relatively like this. I

could get it to break. Watch this. I

can't get the size to change. That's

really what I want. Okay. So, I'm going to select the text. I'm going to say I don't want it to be hugging the width. I

want it to fill the container. Okay. And

I want it to drag it all the way over here. So it will break. Now watch this.

here. So it will break. Now watch this.

Okay. So you can kind of make it work.

All right. Let's grab that as well. You

get smaller.

Oh, very cool. All right. What else got easier using this grid function? Um, one

thing I want to show you though is just before I go, it's like a special treat.

If anybody's waited this long, um, I forgot to use it. This one here was my I was like, man, that was cool. I got to add AI and I was like, how the heck did I get that? Because I got it for that as well. So, what I did was right is I drew

well. So, what I did was right is I drew a rectangle and then I did this. It's

not going to be the same cuz AI has a I don't know the inability to repeat things. Okay. But I'm going to make an

things. Okay. But I'm going to make an image and I'm going to this is what I put in guitar close-up. Uh you can use color and I use the hexadimal number, okay, of the color. You could use RGB, whatever it is as the main color. And

then I did it and I got this and I was like genius. So I did the headphones.

like genius. So I did the headphones.

Genius. Then I did the kear fail. Oh, I used a different color. It

fail. Oh, I used a different color. It

wasn't orange. It was pink. Okay. So, in

this case, I might go, "All right, make changes and say acoustic guitar." Up to you. But that's how I got this kind of

you. But that's how I got this kind of really nice flat graphics I'm using in here. Thought I'd cheer. And if you are

here. Thought I'd cheer. And if you are of an age and you're like, "What the heck is a kear?" Maybe it's the accent.

You ready? There you go. You are

welcome. I wonder one so bad. Hands out

who forgot they existed. There you go.

Uh, we learned loads in this video.

Figma auto layout grids and kitas. All

right, that's it. I'll see you in the next video. Oh, fun. It's class project

next video. Oh, fun. It's class project time. It is fun. What are you talking

time. It is fun. What are you talking about? Great learning and practicing.

about? Great learning and practicing.

Uh, what I want you to do is I want you to use the uh auto layout feature or sorry, the grid auto feature we learned in the last video. Okay, it's pretty easy one. Um, I want you to make what we

easy one. Um, I want you to make what we made in the last video. There's some

requirements. Uh, I would like you to use four or more images. Don't mind

where you get them. AI generated stock library your own images. Um, I'd like them to be related to your um particular genre of music. So it might be rock and roll, soul, hip-hop, whatever you got.

Okay, do that. I want you to experiment using at least one colored box. Okay,

you can see in here on my one, I changed mine after the video to add these colored boxes. The thing is they need to

colored boxes. The thing is they need to be able to move around with them. And

that's going to be a bit of a a harder one. I don't know. It's advanced course.

one. I don't know. It's advanced course.

I'm setting some uh tasks where somehow when you put it in probably this is just a frame, just a frame that was sitting over here that it's now in there. But by

default, this guy does not want to expand and contract. I want you to see if you can figure out how to do it. If

you can't do it, don't worry. Check in

the next video. Well, check below. Don't

look yet, but somebody in the comments will let you know how they got it to work. Okay? So, just a colored box

work. Okay? So, just a colored box instead of an image. I'll give you a hint. It's something to do with the

hint. It's something to do with the width and height. See if you can figure that one out. We've done it before is the key. Add text, but that's optional.

the key. Add text, but that's optional.

Um, I want you to do at least one object spanning a column. So, that spans one, two, three. that spans two. Okay, this

two, three. that spans two. Okay, this

is just one of them at least.

Deliverables, take a screenshot and upload them to class projects and these are looking cool and I like this little grid. Upload at social media and just

grid. Upload at social media and just say you're experimenting with the Figma grid auto layout what you think of it.

Make sure you tag me. Have fun playing around with it. All right, I will see you after you finished your homework.

Not homework, class project, fun stuff, remember. All right, next video.

remember. All right, next video.

Components. You know them already. Why

are we doing a video? I've got some important stuff that catch people out, catch me out. Um, I want to share that with you. Uh, this video is it fun. I

with you. Uh, this video is it fun. I

get lost a little bit. Wasn't planning

to get lost, but we did. But we fixed it. Hopefully that will be a nice little

it. Hopefully that will be a nice little nugget for you. We swear. I know. We

don't mean to, but we do. All right,

that's it. Let's get in talk about components. All right, so we're going to

components. All right, so we're going to use um I created this nav and I forgot yours might be at the front cuz you're like, he left his nav behind there. We

did that earlier in the course. So, I'm

going to click on this. Just use my uh move to back button, which is just the first square bracket. Okay. And then

I've got this. I'm just going to do it over here because it's a little bit clearer. All right. So, I've got this

clearer. All right. So, I've got this nav that I made. Let's have a look at how it's made. So, it's called nav bottom. Inside of it are some What are

bottom. Inside of it are some What are these? Do you remember? Yep. These are

these? Do you remember? Yep. These are

main components. These are the bosses.

Okay. These are the parents. So, when I make copies of these, okay, they become instances of that boss. And the cool thing about it is when I adjust the main one, okay, I'm not sure what I'm going

to do to it, but I'm going to wreck it.

Can I do it from this distance? Can you

see it there? It's doing it to both of them. Cool. So, we know what components

them. Cool. So, we know what components do. Um, one of the things though is

do. Um, one of the things though is let's say I want to turn this nav also into a main component because I'm going to use it on lots of pages. I might as well control it all. Okay, let's see what happens. So, I'm going to use my

what happens. So, I'm going to use my shortcut uh command shift K. U component

that is import image.

That's command option K or control alt K. Okay. And what happened? It did

K. Okay. And what happened? It did

become a main component. That's awesome.

But it fired these out. Where did these come from? And this is what happens when

come from? And this is what happens when I see other people's files, especially when they're kind of at the intermediate level, not quite advanced. You're like,

they just leave these here. And what the heck did these happen? So, the rule is you can't have main components nested inside of other main components because we turn the outside frame to main component. It went and cough these out.

component. It went and cough these out.

Okay? Uh, and left inside of here. Can

you see these aren't the main components anymore? Look, they're just instances,

anymore? Look, they're just instances, the little diamond versions. So, what we need to do is just be thoughtful of that. And what you'll find is that,

that. And what you'll find is that, let's zoom out a little bit. You'll see

that this guy here, look, they're underneath there. I'm going to What am I

underneath there. I'm going to What am I going to do? Yeah, let's fire them out.

Okay. And what I'm going to do is find them. They're all there. Okay. Let's

them. They're all there. Okay. Let's

drag them out. And we're going to put them on a components page. Okay. So, I'm

going to cut them and say you guys now live on my sweet components page, which I don't have much of. Okay. You can keep them on the same document as there's no like law against it. Um, but if when you're working on a bigger file, you

really need a components page.

Otherwise, you can just have them next to your design, just kind of like hanging out over here. All right, that's important thing number one. Uh, the

other thing I want to show you is that this now is a main component. So,

clearly, what have I done?

Like, what's wrong? Frozen. No, I accidentally

what's wrong? Frozen. No, I accidentally hit the shortcut for lock layer. I can't

even remember what it is. What is the locking layer shortcut? Please hold. Oh,

there it is. There. Uh, shift command L.

I didn't click that. I clicked something on my keyboard and it locked it. Anyway,

um, so I've unlocked it. And what I need to do is I shouldn't really use this here either. I could leave it here. So

here either. I could leave it here. So

that's a lot of people just leave this on their first page. Okay. And then just make instances of it. Let's be clever.

Okay. And let's cut this. Let's go to our components panel. Let's put it in here. Okay. So this Oh, is even a bigger

here. Okay. So this Oh, is even a bigger mess. What have I done here? You're

mess. What have I done here? You're

there. What? Oh, I've got lots of these guys over top of each other. All right.

I really want to just cut these out of the course, but these things will happen to you, too. What the heck happened there? I'm going to undo. Go back. There

there? I'm going to undo. Go back. There

must have been so many guys all hanging out there. So, let's go back to my

out there. So, let's go back to my hi-fi. I want you back. There you are.

hi-fi. I want you back. There you are.

So, what is this? There's just one of them. H copy

them. H copy and go to my components.

Click paste.

What did I do? Maybe I pasted them inside of these guys. I had them selected and went paste. That's what

did.

I don't know what happened there. If you

know what I'm doing. Anyway, that

happens. There you go. I had those selected. I just had my regular paste

selected. I just had my regular paste and somehow I'm saying it's a bug, but I got three of them. It pasted one for every icon that I had.

Oh, it put an instance of it inside of every image. That is weird. All right,

every image. That is weird. All right,

there you go. I learned something in this class. All right, let's start

this class. All right, let's start again. Shake it out then. Shake it out.

again. Shake it out then. Shake it out.

You ready? Forget all the getting lost.

I was at Mobile Hi-Fi. I'm going to say you, my friend. I'm going to cut him, not copy him. That's probably where I went wrong. I'm going to go to

went wrong. I'm going to go to components. I'm going to say you.

components. I'm going to say you.

Nothing selected. Paste him. Okay, this

is where I'm going to keep this main component. Inside of this main component

component. Inside of this main component has a bunch of these instances of these guys at the top here. All right, we're doing good. Let's go back to mobile.

doing good. Let's go back to mobile.

Let's go to our assets panel. And we

should have created in this file under components. We should have Where is he?

components. We should have Where is he?

There. My bottom nav. Okay, so I'm going to stick this in. It should now be an instance. Okay, cool. Anything else

instance. Okay, cool. Anything else

weird we need to learn? There is, but I've been flustered. Okay, that's really it. What I want to do is I am going to

it. What I want to do is I am going to put one over here as well. Okay, and

because it's responsive, we get to adjust it. Okay, the cool thing about

adjust it. Okay, the cool thing about instances of the main component, remember our main components up here hanging out. These are just like

hanging out. These are just like children of them. They do whatever he says. But there are some small things we

says. But there are some small things we can do. I can say actually the selected

can do. I can say actually the selected colors in here, I want it to be white.

Okay, they're still connected. If I go back to my main component and I say, where is he? This guy here, I say everybody has some padding. Okay, so I want padding at the bottom. What I want

to do is split the padding. So when it comes to nav, I like more at the bottom.

Nice little chin. Let's go 24. And this

one up here, let's go 16. Also going to want a background color. Okay. So I'm

going to go give it a fill slightly off white just cuz I think it looks cool.

And I'd like to have it and I'd like to say you have an effect of drop shadow.

I'd like it going not down. Okay. So

zero, nothing going to the right. This

is up and down. So I want this to be like minus four. So it goes up. Can you

see it there? And maybe the spread or the blur is a little bit more. Maybe

just a little bit less opacity. I've

done this many times. I kind of know what I like without seeing it on the document. Let's go back to our mobile.

document. Let's go back to our mobile.

And because we did it on our component, all of these adjusted. That's very cool.

But you can see here these remained white, which is also very cool. I could

probably use that nav now. But I'm going to select on that and say you I want you to be this kind of darker color that I'm using.

Haven't really ideally got that sorted out yet. All right. So main component is

out yet. All right. So main component is great. Don't put main components inside

great. Don't put main components inside of other main components because they get sped out. You should probably keep them on a separate page, but you don't have to. And you can override instances

have to. And you can override instances with small things like color. I can't

adjust the icon here. I have to go back to the main component, but I can change the color and some of the layout. And I

can go, all right, ticketing. I want to go over here. I want to turn the eyeball off on this. And it reflows cuz we're awesome. It's still there. It's not

awesome. It's still there. It's not

turned off. It's impossible to turn anything or delete anything. If I click on this and hit delete on my keyboard, it just goes to sleep. Sleepy. All

right. The last thing about components is something called constraints. You

know about them, but let's look at some quirkiness. So this here, I'm going to

quirkiness. So this here, I'm going to move these guys up. At the moment, by default, okay, I drag this up, they disappear. I want it to stick to the

disappear. I want it to stick to the bottom of the nav. So, I'm going to say U constraints. Okay, I want it to be

U constraints. Okay, I want it to be left and right because at the moment it's not. Let's have a look. I think

it's not. Let's have a look. I think

it's just doing left. So, it's kind of stuck there. So, I need to say you need

stuck there. So, I need to say you need to go left and right so that it is squishy. Okay. Also, I want it to stick

squishy. Okay. Also, I want it to stick to the bottom. Okay. So, you are going to be constrained to the bottom. You're

like, I already know that, Dan. You're

like, okay, but where is it now? Where

are your lovely constraints? They've

gone. I know the constraints need to have a parent frame otherwise they don't appear. So no constraints. Watch this

appear. So no constraints. Watch this

exact same thing inside of a parent frame. Constraints are back. Okay. It

frame. Constraints are back. Okay. It

doesn't even have to be component. If I

draw anything a frame. Okay. No

constraints because it has no parent frame. He goes inside of here. Boop.

frame. He goes inside of here. Boop.

He's got constraints. Happy days. Okay.

So that's one thing to remember. Um the

other last little thing I say the last thing it's probably going to be 20 more is let's go back to my components page.

Like oh I might as well do that for him.

So this guy so I don't have to do it every single time. Okay. So you're like, "All right, no constraints." Dan told us it needs a parent frame. So often you'll find all components inside this frame even though they don't need to. Okay? So

that you can see things like this. Look,

he's stuck to the top and left. Okay?

This does nothing. Let's say I make it top again and I change it to so want to stick to the right. Okay. So

it should do that. So I'm going to go to another page. Okay. Let's go. F U.

another page. Okay. Let's go. F U.

That's not what I meant. Frame. Click

this. U. Why am I going to U? I think

I'm just swearing at everybody. What's

the U shortcut? Was in my brain. I got

distracted by the FU. Oh, I was just saying you. Grabbing you. There you go.

saying you. Grabbing you. There you go.

Uh, so I've got this new frame with bad language. So, I'm going to grab my

language. So, I'm going to grab my assets. I'm going to find the one called

assets. I'm going to find the one called bottom and I'm going to stick him in.

Stick him anywhere. And look, he's in.

He's top, which is the default. But

watch, he didn't go right. So, it

doesn't really matter what you do. I

don't know why. Check it now on your version. They might change that. It'd be

version. They might change that. It'd be

great to set it as a kind of a default for the main component because I don't know. Feels like that's the reason for

know. Feels like that's the reason for main components, but it doesn't work.

Let me know if it does in the comments.

You kind of have to do it afterwards.

That's okay. Okay. Top bottom. Cuz once

you've done it once, it's not too bad.

Okay. Cuz what often you grab him, okay, and you paste him and he will bring that stuff along. Just not from the main

stuff along. Just not from the main component. All right. That was a fun

component. All right. That was a fun one. We swore a little bit. We got lost

one. We swore a little bit. We got lost and got really lost. Hope you found it useful. Components are easy, but also

useful. Components are easy, but also can have a few quirky bits. And that's

the kind of quirky stuff I love sharing.

All right, that is it. I'll see you in the next video. Oh, I'm going to put rounded corners on stuff. That's all I'm going to do. Okay, you can go now.

You yep.

Eight's a nice size for a phone.

Actually, they need to look bigger for a phone. 24 is like more representative of

phone. 24 is like more representative of um kind of a modern phone. Even a bit bigger. I like to see it in the design.

bigger. I like to see it in the design.

You don't have to. If I undo that and I go back to square, obviously when I prototype it, it will go inside and be clipped off inside of a phone anyway.

So, you don't really need it, but using my arrows. Okay, you can see there

my arrows. Okay, you can see there they've got rounded corners. Really big

ones on the new iPhone. All right. Uh,

that is all I wanted. I'm going to go back to where I I'm going to go back to my rounded corners. I'm going to do that in the break. You go on to the next video. See you there. Hi, everyone. In

video. See you there. Hi, everyone. In

this video, we're going to talk about what spacing to use. You can use anything you like, but whatever you decide on. Okay, you can make this like

decide on. Okay, you can make this like little grid here and it kind of gives you a nice little visual reference to go. All right, got the spacing here.

go. All right, got the spacing here.

What should it be? Let's use 32. Okay,

and I can make sure that this is 32 away. Currently, it's 43.

away. Currently, it's 43.

It's not good. Okay, so you can use it as just a visual guide of like what should I use and being consistent with your spacing. Okay, what I'll do is I

your spacing. Okay, what I'll do is I will show you as well how to use an app to add all these like little measurements in or draw the boxes. It's

fun. and we'll do it once. And you can copy and paste this little guy onto every new job so it won't take any time in the future. All right, let's jump in.

Right, let's start dragging them out.

Once you've done it once, you can just copy and paste every future document forever. Okay, so I want this to be a

forever. Okay, so I want this to be a nice bright color so I can see it um as a visual reference. And I want my first one, the most fundamental size is 8 by

8. Okay, and because I've got

8. Okay, and because I've got constraints turned on, okay, it means that I only have to type it in once.

Okay, and it will update both the height and width. just saves a little bit of

and width. just saves a little bit of time. Okay, so eight's the first one.

time. Okay, so eight's the first one.

I'm going to zoom in a little.

Okay, and I want to see a visual representation of the next size, which is just another eight. Okay, which is 16. Okay, then I want just to keep going

16. Okay, then I want just to keep going up in eights. Okay, I get a bit confused with math in my head, so I just had plus eight in the field. Okay, we're at 24. I

know that. Okay, 32. These are the really common sizes. You can keep going up. It's up to you. You can also do

up. It's up to you. You can also do multiples of six. Okay. Or five. They're

just harder to divide by. And your

developer will hate you because often the developer, okay, she'll be working with like a framework that already exists. And instead of her writing in

exists. And instead of her writing in all the notes and zeros and, you know, 16 pixels, she'll go use the pre-made spacing and it will probably be eight or a division of it. Depends how much you

like your developer. Now, I like to keep the spacing in there as well cuz I like these as like what size should my button be, icon be, image be. You get a sense for it by looking at these. The spacing

I like to leave if you zoom in far enough. Oh, I can't see my pixels

enough. Oh, I can't see my pixels anymore. You used to be able to. I'm not

anymore. You used to be able to. I'm not

sure if I turned mine off or it's off by default. You'll know because yours will

default. You'll know because yours will either be on. You'll be able to see the little pixels in here. Okay, you can go up to view and you can go to pixel grid.

Boop. Okay, and you can see them cuz I want to count four of them. Look, I got four there. That's the kind of minimum

four there. That's the kind of minimum gaps for things. Obviously, the minimus gap is zero. Minimus is not a word, Dan.

And the next size is again going up. So,

we're going to go one, two, three, four, six is a good one. Sorry, eight is another one. People do use six. I'm just

another one. People do use six. I'm just

giving you the general rules. People do

um put whatever they like. So, six is you'll see commonly. I'm going to stick to this eight grid. Um how do I know instead of counting pixels? You can do a couple of things. If you've got say this selected, hold on the option key on a

Mac, alt key on a PC, and just wander around. Okay, you can see it tell you

around. Okay, you can see it tell you the distance between all of these guys.

Eight. You did it. Or you can do this.

You can say you start there. And then I want this X position to go plus 16.

Okay. So I wanted to go 16 pixels across to see these gaps. Okay. Uh this one here. Do we want a 24 gap? We probably

here. Do we want a 24 gap? We probably

need one in between. So what I'm going to do is instead of going plus 16, I'm going Why did I go plus 16? I did. I

wanted a different size in here. Okay.

So what I'm going to do is undo that. Go

back, please. I'm going to do + 8 + 4.

Dan's making maths hard. This works on my brain. Okay. So, I don't want to go

my brain. Okay. So, I don't want to go the full 16. I want to go just 12. I'm

going to go plus 12. Okay. It's a more reasonable size. It's still divisible,

reasonable size. It's still divisible, okay, by our eights kind of. You get me?

Okay. And then this one can be the size of 16. So, we're going to you plus 16.

of 16. So, we're going to you plus 16.

You can keep going up with the sizes, but I like those. It's a good kind of just reference to have on every doc.

Copy and paste it across so that you can start doing like see this gap here. What

should it be? Probably that one. No,

maybe this one. Okay. Maybe the gaps between this would be nice as that. Can

you see it's just a visual reference?

This might only be working in my head.

One thing I want to do though is I don't know what that is. I have to click on it. It says 32. It's not hard. But I'm

it. It says 32. It's not hard. But I'm

going to show you a cool plugin. Okay.

So, I'm going to go down to my actions panel. Let's go to plugins. And there's

panel. Let's go to plugins. And there's

this one called design doc. They're

renaming it spectral currently. I think

they renamed it spectral. And then

everybody didn't find it, so they went back to design doc. It might be called something different by the time you get here. There are lots that do this. This

here. There are lots that do this. This

is not just one of them. It's the one I like. Is it the best one? I have no

like. Is it the best one? I have no idea. I only use this one. Actually,

idea. I only use this one. Actually,

there's one called dimension. There's

annotations. There's a few other ones.

So, you might just type in measurements and see what you get. If this one's no longer available, it's like the kiss of death if I add them to a class. As soon

as I do a plugin, whoever made it dies or stops updating it at least. So, let's

run this one. I like this measure. It's

got lots of other cool things that will do. Okay. But let's have a look at let's

do. Okay. But let's have a look at let's have a look at this one. Okay. So, I'm

going to go to this. I'm going to say I would like you to put the height just above it. There you go. It's not

above it. There you go. It's not

temporary. It's there for good. Okay,

you can see it in my layers panel.

There's this container that has my measurements in it. I can turn it on and off. Okay, it's just really handy. Same

off. Okay, it's just really handy. Same

with this one. Let's go. You need one of top as well. You two, please. Top. And

it's just a nice cleaner way of being able to see what sizes you got. I'm

probably going to need a couple of bigger sizes. You can do the gaps

bigger sizes. You can do the gaps between stuff as well. I can say you and you. Let's do the space between. Oh, and

you. Let's do the space between. Oh, and

it did it down the bottom. It's so

clever. Okay. I like little apps like this. That is super helpful. And now,

this. That is super helpful. And now,

oh, forgot that one. You can have this copy and paste it into the new document every time you start one and then you've got a nice little visual cue of like where everything's going to be. What I

like for this app is I like to put it inside of a It creates all of this. It's

quite messy. Is it messy? I don't know.

I'm going to put it inside of a frame.

Okay. And I'm going to put in this one's going to be called Oh, it didn't all go in. Okay. The container really didn't

in. Okay. The container really didn't want to go in. I think it's cuz it's locked. I can drag it in. You go in

locked. I can drag it in. You go in there, buddy. I'm the boss. Okay. And

there, buddy. I'm the boss. Okay. And

I'm going to call this one spacing just so I can close it up and it's a little bit nicer. So I can close it up.

Oh, this is weird. All of it's there. I

can't select on it cuz it's locked and I can't Oh, there it is. Hello.

Sorry about that. Um, all right. Let's

make the background dark of the spacing one cuz it looks weird in white cuz I kind of designed it. Let's go black.

Real high contrast. Now that's that app.

We'll look at later on. I want to show you cuz like I don't know. I can't help myself. I love that measurement app. Oh,

myself. I love that measurement app. Oh,

no. We'll do that later in the course.

Dan, don't do it now. All right, so those are the basic spacings. You can

use anything you like. Whatever you do, though, create a little grid. Put the

effort in once and you will be able to use it over and over again. All right,

next video. Hi everyone. Let's talk just a tiny bit more about what spacing should be. I've given you some generic

should be. I've given you some generic stuff in the last one. Where did I get that magic from? How do you get better at it? If you are already, you know,

at it? If you are already, you know, quite proficient at your spacing, you can move on. But if you want a little bit of I don't know help to make sure things are consistent and easy to work

with with your developer when you hand off your app not causing problems or at least being mindful of the developer and what they're going to be working with.

Watch this video. So there are lots of places that your app or website are going to end up and what will end up happening is your engineer, your developer, whoever you're using to make

it, it might be you. It's highly likely to be built on top of what's called a framework. your developer, she's not

framework. your developer, she's not going to be going through and putting all the knots and zeros, okay? They're

going to be building on top of things that are built on top of things that are built on top of things. So, if you are a iOS developer, okay, the developer is going to be using the pre-made or at

least guidelines from Apple. If it's

Android, it's going to be this material.

That's what they call their design system, and they give you lots of helpful things about how things should be spaced apart. If you're going to web, it might be Bootstrap. It might be Tailwind. So talk to your developer,

Tailwind. So talk to your developer, figure out where it's going, what they're building it on, and then have a little read around. It can be confusing, but we need to get started in these sorts of things so that you can actually, I don't know, begin your

understanding of maybe a little bit of CSS, a little bit of code so that you don't throw your developer a spacing of seven because seven is tricky because you can't divide it in half. Okay? You

can't have a half a pixel. You can

divide eight in half, you can have four pixels. Let's have a little look at why

pixels. Let's have a little look at why eight is good as well. So let's look at material for Android. Okay, I'm in their material.io. They're on their version

material.io. They're on their version three. In the future, you might be at

three. In the future, you might be at version four or five. Check it out.

Okay, I'm under foundations. I'm looking

at layout. Uh, understanding layout. And

it's just really nice to go through and say space between columns is a default of 24 dp, okay, which is essentially pixels, short for device independent pixels. They use this because lots of

pixels. They use this because lots of different phones have different like pixel densities. Just consider it pixels

pixel densities. Just consider it pixels if you understand that. And when you're designing in Figma, DP equals PX. So

they're using spacing of 24. So make

sure when you're building out your little spacer block and you're going to Android first, make your gap 24. That's

the default. It's happily divisible by 8, not by chance. Or at least it's a really common spacing for the moment.

Let's have a look at uh iOS. Have a read through what they do. I think they're using 20 for their margins on their sides. They have some different defaults

sides. They have some different defaults to a lot of other ones. And the thing with iOS is there is both uh phone, there is TV, there is gadgets, okay,

there is watches. So have a little look whatever you're designing for, there will be documentation online. If you're

going out to web, say you're building a website or web app, find out. Is it

WordPress? Is WordPress using Bootstrap?

Bootstrap is a framework that helps developers work fast. Okay? And what

they'll end up doing is, let's have a little look. I found this. Okay? Okay,

little look. I found this. Okay? Okay,

the gutters is what they call it. Okay,

the space between stuff. And the default gutters are 1.5 rim. And you can see there they said 24 pixels, the same as material. So if I use 24 as my spacing,

material. So if I use 24 as my spacing, the developer is going to like it because it's kind of consistent with Bootstrap and it's consistent with Android depending on where you're going.

Now there are 100 different frameworks.

Tailwinds, people are using this a lot, okay, to help with their styling. You

can see in here I found under gap. Okay,

Bootstrap calls a gutter. Tailwind

causes gap. It's all useful to know as a UI designer. You can see here what a

UI designer. You can see here what a developer will type in is they won't actually type in the number. They'll

just hopefully be close to one of these.

So they'll put in spacing when they're coding to say gap is zero, which is zero. Gap is one, which is.25

zero. Gap is one, which is.25

over. A ream by default is 16. So 0.25

of 16 is 4 pixels. So remember that little spacing we had before? That's the

minimum one here. And it's a good rule to not go three. You know, the divisions become tricky and your developer is going to have to go and override a lot of the framework defaults. You can do it, but your developer will probably

just ignore it and use some of the defaults unless you force them. Okay,

let's have a look. So, 16 6 8 10. Oh,

there's a 10. You might decide that in your uh design that you need a 10. Where

was it? We don't have a 10. We've got 4 6 8 12. There's no real hard and fast rules on what these can be, but if you design for frameworks or understand them

a little bit, especially if you know where it's going, if you know the developer uses Tailwind, great. Type out

all of these. So, the big takeaways is multiples of eight are good, but really you should check out how it's getting made and copy that. It'll make the transition from Figma to the actual design and development a lot smoother.

And you don't have to, but I've got a web essentials as well, which covers a lot of the kind of things that we look at here, like what is a rim, what is a DP, what is Bootstrap, what is flexbox.

There's all sorts of good stuff that you can learn that will inform your design when you're in Figma, but kind of outside of the scope of this course, but a little bit of HTML and CSS and framework knowledge makes you a better

UX designer in my opinion. All right,

was that confusing? A little meandering.

Anyway, let's get on to some more hard skills in Figma. It's class project time. We're going to make the lower

time. We're going to make the lower navigation. We've already done it if

navigation. We've already done it if you've been following along. I just want to kind of get everyone up to here.

Okay. So, what I want you to do, create the low nav. Okay? It's this guy here.

Okay? And I want it to do some stuff.

Okay? And we're just going to practice the things we've already learned. So, I

want to make sure you're using components, both the icons, okay, and the nav. What does that mean? Okay. This

the nav. What does that mean? Okay. This

thing here is an instance of my main component, which is over here. I want

you to do that. These are main components of my icons. So, make sure you're doing that just to kind of practice. You have to use an auto layout

practice. You have to use an auto layout for your navigation so that you can do auto spacing between the items. That just means that when I grab this, this squishes up and the icons have automatic

spacing that go in and out. So, auto

layout on the outside and make sure you can set up the auto between them. The

last one on there is constraints.

Constraints allows us to do this with the navigation. I want you to stick it

the navigation. I want you to stick it to the bottom and left and right so that when we do pick a new page, actually, let's go to this one. and not on new page. But let's say we need to do a

page. But let's say we need to do a different frame size cuz we're doing, I don't know, the old iPhone 13. Look, it

shrunk. It's not that much difference.

That was exciting. But you can see it attaches to the bottom and to the sides.

Okay? That's the constraints part. Do

all of those. Okay? And then I want you to record a video of you doing this thing going like this on one of your pages. Okay? So that we can see you made

pages. Okay? So that we can see you made it work. If you can't record videos cuz

it work. If you can't record videos cuz it's just too hard and you can't make it happen, I will accept screenshots. I'll

trust you that it works, maybe take a screenshot of this. Plus, we can see all of the things going on over here. We're

like, ah, I can see the constraints and they seem to be working. I'd love to see videos, though. If you're not sure how

videos, though. If you're not sure how to take a video on your computer, okay, most Macs and PCs have built-in software. Mac call it image capture. You

software. Mac call it image capture. You

can do with that. I use Camtasia. You

can use QuickTime, which is free on both Mac and PC. There are plugins inside of Figma, which are interesting. You can go to the plugins, okay? And there is one, the one that I've used before is Vimeo.

Okay, Vimeo. Um, Vimeo Record will allow you to log in and you have to get a free account with them, but you will be able to record your screen within the app.

There will be other plugins as well.

Cool. When you're uploading it, we want the link to the video, not the actual video itself. We can't take the big

video itself. We can't take the big giant MP4s, okay? So, upload it to either Vimeo, Behance, or YouTube, okay, with free accounts and just send the link in. All right, the real goal here

link in. All right, the real goal here is not so much making videos as getting this responsive lower nav going. I want

you to practice with that and I'll see you in the next video. It's another

class project. Didn't we just do a class project? We did. This one's kind of like

project? We did. This one's kind of like a pick a path. Do it yourself. Okay. I'm

going to get you to build a responsive event card that does this on your own. I

want you to create this thing. All

responsive and good. Okay. So, the date stuck up in the corner, bit of text, an image. And I'm just going to leave you

image. And I'm just going to leave you to it. find these little projects are

to it. find these little projects are some of the best um for people learning where you've got all the tools. I've

taught you everything you need to know.

But actually making something of your own, okay, that's not like following along can be both tricky and kind of like bed all the skills and you're like, "Oh, okay." Cuz there's a couple of ways

"Oh, okay." Cuz there's a couple of ways of tackling this because there is and it can be tricky depending on your level of Figma skills. Um there's a video just

Figma skills. Um there's a video just after this of me building it. So if you do get lost, you can cut to the chase and see me building it. Do it yourself, though, and then see where you got to.

Like, it's a challenge. I challenge you.

See if you can do it. Your way might be different from mine. You might get lost.

That's totally cool. I bet you though, you'll learn a ton. When you're

finished, uh, share a video of your responsiveness. Okay, this right hand

responsiveness. Okay, this right hand side here, cuz I want the text to expand and contract. Okay, making the box

and contract. Okay, making the box bigger. Doesn't have to be exactly like

bigger. Doesn't have to be exactly like this. Pick your own image. Again, I'm

this. Pick your own image. Again, I'm

trying to find pictures of me. Middle

age is probably too old for me, but I'm not this guy either. I don't mind about the text and everything. It's more the structure. So, an image in there, a date

structure. So, an image in there, a date uh box that sticks to the top right.

Okay, remember that's constraints. Uh

event details, make sure it's component.

Okay, and then the deliverables is a video if you can't do the videos. A

screenshot. This is a cool one where you can share on socials. Make sure you use the hashtag Figma advanced and tag me in it so I can check it out. All right,

that is it. Have fun making your own event card. See you in the next video.

event card. See you in the next video.

Hello. This video is my version of how I made this thing work. Okay, you can follow along to see how close yours was to mine. Doesn't really matter how you

to mine. Doesn't really matter how you got to the end result, but if you did get stuck, you're still currently stuck.

You can watch me. We do get a little lost in this video. There's a few little shortcuts. So, even if you did get it,

shortcuts. So, even if you did get it, it was pretty easy. Skim through this one. Maybe turn the speed up. Uh, and

one. Maybe turn the speed up. Uh, and

there's nuggets in here. That's what I'm saying. All right. So, there's no real

saying. All right. So, there's no real rule of where to start. Um, and there is a couple of different ways of doing this. I'm going to show you the way I

this. I'm going to show you the way I did. When I do it with students in

did. When I do it with students in class, people find other ways of doing this. So you don't worry if yours is a

this. So you don't worry if yours is a little different. I'm going to start

little different. I'm going to start with my top frame here, the image with the date in it. And I'll work on the text later on. Okay. So I'm going to give it a fill just so that we can see

what we're doing. Pick any color as it's a green or aqua. Um so what I want to do is put another frame inside of this.

Pick another color.

Something clear. Okay. And I'm going to say you go in there. And within this frame, I want to see you just need to be constrained to the top and the right.

And now hopefully we've got that chunk going. Okay, that's kind of the first

going. Okay, that's kind of the first part. This bottom part, how do we do

part. This bottom part, how do we do that? Now, you don't really want to put

that? Now, you don't really want to put it in here. Want it to be in a separate box cuz it needs to do something different. So, I'm going to make a new

different. So, I'm going to make a new box. Okay. I'm going to say this is a

box. Okay. I'm going to say this is a dark color for no reason. Okay. And I'm

going to put some text inside of it.

Just throw the elements in. All right.

I'm just throwing in text. Okay. There's

a couple of things I need to do is I need this to maybe be the right size.

Okay, that's the first good step. I want

this text to break inside of here. So, I

want to say you are not um this kind of auto width or fixed size. I want this middle one auto height. And then I'm going to break it and say you go there.

Perfect. But when I resize this, nothing's happening because this guy needs to be an auto layout.

Okay. So, I'm going to say U shift A.

It's wrapped all the way around the outside. Perfect. So now we've got a

outside. Perfect. So now we've got a little bit of responsive text going on.

It's not working. The text in here now, okay, is the auto height, but we need the width to change based on its parent or the container. So let's have a look at the width. It's got a fixed width. I

don't want a fixed width. I want to say I would like you to fill the container, please. Okay. Now, if the container

please. Okay. Now, if the container change, he tries to fill it. There you

go. So we got these two bits. And you

could leave them separate, but that would be weird. So what we want to do now is put both of these together inside their own frame. both selected. I'm

going to say you frame those guys. Okay,

let's give it a name so we're not getting too lost. Actually, let's see how uh how good the auto naming goes.

So, let's go use. Let's go to rename.

There it is. There. Rename layers. Just

see what it does. It gets better and better. I bet you container footer. Oh,

better. I bet you container footer. Oh,

it's done. Good. Container. Let's call

this one uh image.

Okay. And it's thought that was the image, but it's not. This is the date.

It got close. It's a good starter anyway. Oh, I do like it. Okay, so I got

anyway. Oh, I do like it. Okay, so I got a container. Inside of it, I got this

a container. Inside of it, I got this two boxes that I made. Let's have a look and just keep testing every time. Grab

the parent. Does it all work? It does

not. Why? It's because it's not an auto layout. So, this container auto, please.

layout. So, this container auto, please.

Let's give it a go. Let's see what it did. Okay, we're building it ourselves.

did. Okay, we're building it ourselves.

We're not using the make do it all for us AI feature. Okay, it's kind of working except the bottom doesn't go up and down. Okay. So, what I want to do is

and down. Okay. So, what I want to do is probably want to leave this image box here alone. And I just want the text box

here alone. And I just want the text box down the bottom to come down. So, what

I'm going to do is you need to do what?

You need to fill a container. Okay. So,

you uh it's the height this time. Okay.

So, the width we did, but we didn't bother about the height. Now, we don't want you to hug. No hugs here, buddy.

We're going for fill container. And I

want you to fill it, but I want you to stick to the top, please. So, look. Grab

the parent. What are we doing here? It

worked. All right. Let's put in some more details and just see if we break it. Okay, but that's kind of the

it. Okay, but that's kind of the fundamentals. What people tend to do and

fundamentals. What people tend to do and I do, there's no real like hardcore way of doing it, is you start with the parent, then you start working with those blocks in between and then put

another block in here for the date. You

can do it that way. It's a little bit more complicated when you're new. Okay,

if you tackle it that way and you found it really frustrating, try and do the individual pieces first, then combine them. But it doesn't really matter if

them. But it doesn't really matter if you try and build the container frame first and then start building stuff inside. It's a little trickier. All

inside. It's a little trickier. All

right, I want this to be an image. So, I

can't just plop an image in here because that's over the top. So, I'm going to go command shift K to bring in my image.

Control shift K on a PC. You know, I know you know. Uh, I'm going to bring this in. And what I want to do is I want

this in. And what I want to do is I want to grab the Actually, I could have selected the frame and brought it in as a fill. I've done it a different way.

a fill. I've done it a different way.

Okay. Okay. So, what I'm going to do is grab this. Steal the fill off this.

grab this. Steal the fill off this.

Copy. Grab the green one. Hit paste. I

don't need this green one anymore. And

hopefully, remember, test test. Always

testing. Is it working? It is working.

Cool. Nice. The next is this text down the bottom here. I'm just going to replace this with command K. I'm going

to say rewrite this. And I'm going to type in something. Oh, with a more sing song rhythm. Don't know what that is.

song rhythm. Don't know what that is.

Uh, let's go for All right. Not sure

what this is going to do. Command enter

to kind of make the AI stuff do it.

Sometimes now you need to go make shorter. So if you need to make changes,

shorter. So if you need to make changes, I think that's long enough. Let's go uh make shorter because I'm going to use a um smaller font. If you don't have the AI and you wish you had the AI, you can

just go out to the free chatbt. Okay. Or

just type in anything you like. All

right. Font size. I'm going to go to 16.

You can leave now. Just I don't know if I'm going to run into problems. Maybe I will. Okay. One thing that happened

will. Okay. One thing that happened there is you notice that there is no padding. Okay. So, I did make this

padding. Okay. So, I did make this bigger and this didn't expand. It kind

of still works. Look, I you know, it's all scalable, but yeah, it didn't push it out to the bottom. Who knows why?

Couple of things. First of all, I want to make this guy auto height. Okay. And

also, his parent, the parent frame is kind of working. Okay, but the padding is really small. Okay, so I'm going to say over here in the padding, 24 is great on the sides. Um, I want the top and the bottom to be different. I'll

give you a little shortcut for anybody who's hung out this long. So, on the top, let's say I want it to be 24. Okay.

But then you could put a little comma in. Just comma on your keyboard. So

in. Just comma on your keyboard. So

that's the top. And if you put a comma in, you'll be able to do the bottom to 32. That 100% kind of worked. I've got

32. That 100% kind of worked. I've got

24 at the top. 32. Okay. But my text in here is not doing what it should. Ah,

the height of this guy. The height of this fella. You is fill filling the

this fella. You is fill filling the parent container. My parent container is

parent container. My parent container is not big enough for the text. Come on,

Dan. So that trick did work. Can you see I've got 20 uh 32 at the bottom, 24 at the top. You can do the same for left

the top. You can do the same for left and right. You can just add commas. It

and right. You can just add commas. It

just saves you from not really doing much is opening that out. You can just use commas. You're a computer hacker.

use commas. You're a computer hacker.

You're welcome. All right. Other things

are going to cause me problems is I want this height to kind of just as I type to go like this. Is it doing it? It's not.

And that's only because I keep dragging it around to kind of prove it works. I

want this here to snap to the bottom.

So, in terms of the height, there's a couple of things to do. You see it says fill container. So, it should be doing

fill container. So, it should be doing it. Okay. But this parent go click off.

it. Okay. But this parent go click off.

Click back on. This parent is a fixed height. He's a height of 330. He's

height. He's a height of 330. He's

forcing this to be bigger. Okay. So I

can say actually I just want to hug the contents. Actually you have a height now

contents. Actually you have a height now of I want you to hug the contents too.

It can be a little weird setting these things up. So now what I'm looking for

things up. So now what I'm looking for is this. When I type stuff, type stuff

is this. When I type stuff, type stuff and it gets longer. It gets bigger.

Awesome. And if I go out and grab the parent now and it goes onto a bigger document. Okay. I can just drag it out.

document. Okay. I can just drag it out.

Look at me.

How far away from the edges?

What I might do is turn on my guides.

So, let's go to the parent. Let's go

down here. Layout guides. We did it in essentials course. Let's throw it in

essentials course. Let's throw it in here again. Add layout guide. I don't

here again. Add layout guide. I don't

want grids. I want columns. I'm going to click on this. And how many columns do I want? I just want one, but I want the

want? I just want one, but I want the margins on the edges to be 16 24. Okay.

You can see the edges here. You might

just use it for this just so that everything starts lining up. Yep. Snap.

Nice. The shortcut for guides is shift G. Turns them on and off. Okay. And we

G. Turns them on and off. Okay. And we

did it. Needs rounded corners. Parent.

You're going to say, "Oh, where are your rounded corners?" Rounded corners.

rounded corners?" Rounded corners.

Eight. No. 16. Something like that. Oh,

it didn't work. Why don't you have 16 corner radius? Please hold. I got to

corner radius? Please hold. I got to figure this out. Where are your radiuses? Oh, I think I know what it is.

radiuses? Oh, I think I know what it is.

Let's I'm jump back in so I can prove to you I've done it. Let's go. Clip

contents. Oh, that was a good one. I

don't know how it didn't end up with clip contents. Here you go. Okay, so

clip contents. Here you go. Okay, so

let's go to 16. That's way too big. I'm

going to go to 12. Even though I said use multiples of eight, you can do what you want. This is our design 10. All

you want. This is our design 10. All

right. So, that was a nice little interesting one. Clip contents uh was

interesting one. Clip contents uh was off. So, everything is kind of hanging

off. So, everything is kind of hanging outside. Whereas now, I want to say

outside. Whereas now, I want to say everything inside that main component.

Oh, it's not a main component. You I'm

going to come over here. I'm going to turn you into main component which I can't remember what the shortcut is right now. Oh, what are you? That's

right now. Oh, what are you? That's

right. Command option K. That's

controllaltt K on a PC. Sometimes we all forget. So that is my main component and

forget. So that is my main component and I'm going to use that. And this guy needs to go cut. You need to go over to my components page. You can hang out over here. You go there. You can go

over here. You go there. You can go there.

Boop. We did it.

Ah, it's very exciting. You can go away now. All right. I'm very happy with

now. All right. I'm very happy with myself. Uh, you might have done it

myself. Uh, you might have done it completely different way. You might have spent half a day working on yours, but you kind of get it now. I guess I like these little exercises. They're like uh like something. Oh, you didn't do the

like something. Oh, you didn't do the date. Should we do the date? Actually,

date. Should we do the date? Actually,

there's nothing to the date. You just

throw the text in. One, two, three. All

right. So, I just typed some text. I am

going to throw it in here. And you

didn't go in the right place. Get in

there. Okay. And I'm going to select March and go commandB or controlB to make it bold. Look at us. Check it still works. It does not work. It's not in the

works. It does not work. It's not in the right one. So, you are hanging outside

right one. So, you are hanging outside of all of this. Ah, why couldn't I do that? It's cuz I'm trying to add text to

that? It's cuz I'm trying to add text to what is it? Pause. You think it's an instance of the main component, not the actual one itself. So, that's a good

tip. Okay. Is that actually you can't

tip. Okay. Is that actually you can't add stuff to instances. Okay. You have

to go over here and say paste it in there. Okay. Now, it should appear on

there. Okay. Now, it should appear on all of them. Correct. The mobile phone and the text is there. The only trouble now is that I did that kind of that's pink and this one here is green. Okay.

What I can do for that I was able to do this on the instance right change the rounded corners and make it green. What

you can do is select the whole instance right click it and say actually everything that I've changed can you go to the main component and push these changes onto it and let's go see onto

our component. We did it. Look at us.

our component. We did it. Look at us.

Why can't we just grab it all and go to uh this option that we looked at before?

Okay. Remember the AI version, okay, where we said you you you go. All right,

let's go to more autolay options. Let's

go to suggest it. And it didn't work.

That's why it can work sometimes. And

when it doesn't, you need to know the skills of kind of trudging through and making it. But I do like the problem

making it. But I do like the problem solvingness of doing something like this. I feel like I've made something in

this. I feel like I've made something in the world, even if it is just little adjustable pixels. All right, that is

adjustable pixels. All right, that is it. That's how I did it. I'd be

it. That's how I did it. I'd be

interested to know in the uh comments how you did it. Was anything completely different? Did everybody do it different

different? Did everybody do it different from me? That's what I'd like to see.

from me? That's what I'd like to see.

Also, give me a time. How long did it take you? Did it take you 10 minutes, 5

take you? Did it take you 10 minutes, 5 minutes, 5 hours? Let's have a look.

It's okay. I'm just interested. I'll see

it when I am. I'll be sleeping. Hi

everyone. We're going to make a really simple variant. Okay, you might have

simple variant. Okay, you might have made one before. We're just going to run through it just so that everyone's got a good baseline. Okay, it means first of

good baseline. Okay, it means first of all if you haven't bumped into a variant or it's been a long time since you did the essentials course this button here.

Okay, over here you can say actually I want to be watermelon. What's really

cool about it is in say my assets panel.

Okay, you see I've just got one button but in that button okay he's got two variants. Okay, keep it nice and tidy

variants. Okay, keep it nice and tidy and it's going to give us the skills to build multi-dimensional variants in the next one. Very serious. Um all right,

next one. Very serious. Um all right, let's jump in. Let's make a variant. All

right, so I'm going to start with a button that I've made. I'll make this button at the end of the video if you're interested, but any old button. Okay,

there's nothing to it but a frame but some text in it and it's an auto. None

of that is actually important for a variant. Okay, all we need to do now is

variant. Okay, all we need to do now is make sure that it is a component. So,

let's do that. Command option K on a Mac, command alt K on a PC. You're

getting it. Okay, or you can click the button up here. Wh Okay. Um, and what we're going to do is we're going to say actually I would like another variant of it. See this little option here says I

it. See this little option here says I want two of them. I got a variant.

They're too similar. So, it's

technically a variant, but let's change the color of this bottom one. So, I'm

going to click the parent frame. I'm

going to say scroll down. Fill color.

I'm going to pick that kind of watermelon color we're using. Um, and

now we have a variant. We need to go and name it. But that is it. Let's go and

name it. But that is it. Let's go and have a look. We should be doing this.

I'm going to cut it. I'm going to go to my components page. You should be on here, buddy. Let's do everything right.

here, buddy. Let's do everything right.

Okay. This is called component set. See

the dotted line around the outside?

Figma calls a component set. Don't worry

about it, but it will pop up. There's a

one component. Put more than one of them in there, which is his variant. Okay. Is

in something called a component set.

Lots of terms. That's okay. All right.

Let's go to our hi-fi mobile. Let's go

to our assets panel. Um shortcut that we'll start using from now on is if you hold down the option key on a Mac, alt key on PC, and one and two. One and two.

One and two is easy to get from file to assets. What is it? Option one and two.

assets. What is it? Option one and two.

One and two. Or alt one and two. Let's

go to the assets panel. Let's have a look at the uh files in this library.

Let's go to the ones in our component panel. Excellent. There's our button.

panel. Excellent. There's our button.

Drag them out. And the cool thing about him is he's got a variant over here.

Default. Nope. I want the other one.

Cool, huh? Variants are awesome. What we

should do now, though, is go back to our option or alt one. Back to our layers.

Okay. Files. Okay. I'm going to go to my components and I'm going to say you.

Let's do some naming. So, let's select the whole um what is it called? You

remember what the dotted lines mean?

Component set. You got it. So with this selected up here, I've got a bunch of properties that I can rename. So it's

just given them default stuff. Click on

this little settings. Is it edit property? That's what it is. Click on

property? That's what it is. Click on

that and let's name it. So this one's going to be called my button. Okay. And

I got a couple of values. Okay. Go back

in there. I got a couple of values.

Actually, the name of this is not button. It is color. Okay. So we're

button. It is color. Okay. So we're

naming our variant, not the name of the actual button. We already did that. So I

actual button. We already did that. So I

want to call this variant different color variants. Oh, keep jumping off

color variants. Oh, keep jumping off that one. Uh, where it says default, I

that one. Uh, where it says default, I want one to be, let's say, green and the other one to be watermelon. Okay, then

nothing really changes except when I'm back on my mobile hi-fi, I click on this. It makes a little sense. Look, I

this. It makes a little sense. Look, I

got color. Okay, and I've got green or watermelon. This makes it easier for

watermelon. This makes it easier for somebody else using it and for you. Come

on, let's name stuff. Mr. Untitled 57 or in this case, frame 57. Dan likes to throw shade on people even though he's got really poorly named stuff when he's working on his own. Shh, don't tell

anyone. All right, so that's how to

anyone. All right, so that's how to build a really simple variant inside of Figma. Let's go and create the button.

Figma. Let's go and create the button.

Now, if you're interested, if you know how to make a button, which you probably do, move on to the next video, but I'm going to build it together. Let's hang

out. All right, we're going to do that all again. So, we are going to make the

all again. So, we are going to make the button, but I just recorded it with the microphone off. Let's do it again. I

microphone off. Let's do it again. I

love doing it twice.

All right, let's grab the frame tool.

draw out any old size. Let's give it a color of the button we want to use. I'm

going to use that. We should start doing some color styles soon because there's a couple of greens going on. Dan, I'm

going to grab the F tool. Nope. I'm

going to grab the um type tool, which is a tik key. Click on the inside anywhere and just type in uh button. I'm using

uppercase and I'm using a robboto condensed uh bold. A really common button size is 16. Okay, it's easily seen. It's just super common. Okay, now

seen. It's just super common. Okay, now

I should line it up in the middle. I hit

escape to get out of the type tool. I

should line it up in the middle. But

what I can do is just click the parent frame. So I've got this frame here which

frame. So I've got this frame here which I will call button lowerase button.

Okay. Um with it selected the parent with a text inside of it. If I just go shift A. Okay. It will turn into auto

shift A. Okay. It will turn into auto layout. And by default, can you see it's

layout. And by default, can you see it's going to hug around the text which is perfect. Hugging is perfect. Okay.

perfect. Hugging is perfect. Okay.

Because it means that we get to uh type more. And you see the button expands.

more. And you see the button expands.

Okay. So awesome. And the one thing though is it defaulted to some random padding based on the original size. So

in terms of the padding I want to do starts with the width. So 24. I'm going

to tab across and hit eight for the top and bottom. There's my little button

and bottom. There's my little button down here for the corner radius. I can

use my up arrow. Look. Go up up up.

If you want to be perfectly round, you just got to be above whenever the radiuses start going away.

Let me zoom it down here. Can you see what I mean? You get what I mean, right?

Like if I make it if I made that 16, you'd be like it's kind of round. Okay.

But if I made that 100, it is massively round and has to be the perfect circle.

So just put in some giant number and it will be rounded at the ends. That's how

I made it just in case you were interested. Um all right, I'll see you

interested. Um all right, I'll see you in the next video. Hello. Hey, we are going to learn in this video multi-dimensional variance. Okay. Uh

multi-dimensional variance. Okay. Uh

they are fancy mostly because I do it in that voice. Okay. But they allow us to

that voice. Okay. But they allow us to take variance to the next level. Okay.

Okay. All the voices. Uh, it means that this button not just has one variant.

Okay. Like color. We've got

multi-dimensional variants. That is a fancy word. That's what they call it.

fancy word. That's what they call it.

Okay. But it just means I've got two different things. I can go I want to be

different things. I can go I want to be green, but I also want it to be outlined. This thing here. Okay. It is

outlined. This thing here. Okay. It is

one lovely little asset. You see him there? The button zoom. You drag him

there? The button zoom. You drag him out. But he's got all sorts of stuff.

out. But he's got all sorts of stuff.

He's got both different colors and he's got different values. Having more than one property just means it's multi-dimensional. Not as fancy as it

multi-dimensional. Not as fancy as it sounds. But let's just go and build one.

sounds. But let's just go and build one.

All right, go time. All right, so what we're going to do is we're going to start with the simple variant we made in the last video and build on it to make it multi-dimensional. All we need to do

it multi-dimensional. All we need to do is guess what? It is kind of multi-dimensional now. Okay, we've got a

multi-dimensional now. Okay, we've got a third option. Okay, so those are

third option. Okay, so those are actually just three variants. What we

want to do is let's change this one a little bit. Okay, so what I'm going to

little bit. Okay, so what I'm going to do is I'm going to fast mode. I'm just

going to make it a outline.

Okay, I'm going to make another one. To

make another one, again, you can either hit this little plus button. There is an option up here. No, there's one of them.

No, I'm sure there's a button up there as well. So, either hit that button or

as well. So, either hit that button or control D. I don't think you can copy

control D. I don't think you can copy and paste them. No, for some reason you can't copy and paste them. There we go.

Command D. I'm going to change this color as well. You wait there.

All right. So, I've got these. I could

just leave them as that. And when I'm using them, I can grab them out and go, all right, I've got all of these different options. But what I'm going to

different options. But what I'm going to do is make it multi-dimensional. What

that means is that I'm going to grab my component set and I'm going to say I've got one property. I want to add another one. Okay, I'm going to add another

one. Okay, I'm going to add another variant. Okay, this one is going to be

variant. Okay, this one is going to be called fill. I was just trying to think

called fill. I was just trying to think there what it could be called. And the

default value is going to be solid. What

we're trying to get to here is when I select on this, I'm going to say you, my friend, are both green and solid. You

are watermelon and solid. You are going to be green, but also add a new one.

You're going to be what? Outline. Okay.

So, that one is both that first property we did and this is the extra dimensional. Okay. Multi-dimensional.

dimensional. Okay. Multi-dimensional.

But you got to say that's multi-dimensional.

Okay. So, we got color with fill. We're

hardcore. This one here. What are you?

You are color four. Nope. You're

watermelon and you are going to be outline. What that means now is that

outline. What that means now is that when I grab this nice simple button, remember on our assets panel, optional alt two. Okay. One, two, switch the

alt two. Okay. One, two, switch the assets panel. this like lovely little

assets panel. this like lovely little button here. If I drag him out, he's

button here. If I drag him out, he's multi-dimensional. Okay, he's got color

multi-dimensional. Okay, he's got color and he's got fill. So, I'm going to say you watermelon. Um, but I want the

you watermelon. Um, but I want the outline one. Go away. I was scared of

outline one. Go away. I was scared of doing multi-dimensional variants for a long time. It sounded scary.

long time. It sounded scary.

Multi-dimensional anything sounds hard.

Okay, but and it is tricky. Like I I'm trying to like be calm, give it to you.

It's really easy. But when you do it for the first time, you like this doesn't make sense. Okay. What I tend to do is

make sense. Okay. What I tend to do is kind of like smash through it until you've got at least four of these. Then

forget trying to do fancy stuff and just come up here and just make sure there's two properties first. Okay. And then

work through every button and go, "All right, I want you to go through this list." And if there's not something you

list." And if there's not something you want in here, just click add new. Okay?

Same down here. You're like, "Okay, I don't need to be green. There's a third color. So, I'm going to add a third

color. So, I'm going to add a third color." Okay? Or it's the right color,

color." Okay? Or it's the right color, but there's nothing down here. So, I

need to add a property. Okay? If there's

no prop, you know, if you do have the right property and you're like, "All right, I need it to be Oh, I add a new one of these." That is generally the easiest way. And I want you to finish

easiest way. And I want you to finish there. Leave there. Feel confident. And

there. Leave there. Feel confident. And

now I'm going to give you a more advanced way cuz we're in the advanced course. There is another way to do it.

course. There is another way to do it.

It might be easier for you if you're like, "Man, that blew my brain." Or you might be like, "I love doing it two ways. Why learn to do it once?" So, what

ways. Why learn to do it once?" So, what I've done here is I've just made a circle with a plus in it. If you do need the plus and minus buttons, often it's better instead of trying to find a symbol is find a font that you like the plus in. I often use this one here

plus in. I often use this one here called days one. Okay. But you can see I can go through and find a plus that I like. You might like that plus better

like. You might like that plus better than that plus. Okay. And what you can do then is you can right click it and go to outline. Where is it? Outline stroke.

to outline. Where is it? Outline stroke.

Okay. And then it's just like a square.

You can't change the font. So you need to probably do this first and go you I need Yep. Okay. And then outline it. Or

need Yep. Okay. And then outline it. Or

who remembers the uh sweet shortcut from earlier? Okay. If we do a dash and then

earlier? Okay. If we do a dash and then a greater than, we get an arrow. Days

one arrow is not very good. Anybody else

got a better arrow? We all got different styles. Let's get that out of the way.

styles. Let's get that out of the way.

Can you see? Kind of work through and see who does a better arrow. Just using

fonts. Of course, you can go to some sort of icon library somewhere. That'll

work, too. Then I stuck them in the middle. All right, that was a little

middle. All right, that was a little tangent. So, the reason I want to show

tangent. So, the reason I want to show you this is I'm going to put you guys down there cuz I'll use you later. Is

I've got these two. Okay, so we create a variant. But what we can do is instead

variant. But what we can do is instead of doing what we did where we built a first variant, then we made duplicates and then kind of split them all up. What

we can do is we can say all right I want these two um and you just build them all first. So I want these two to be uh

first. So I want these two to be uh eyeropper. So I've got all these first.

eyeropper. So I've got all these first.

These all need to be their own components. Um one of the big problems

components. Um one of the big problems is that I haven't grouped these. Okay.

So if I do make multiple components here. Okay. I'll show you this cuz

here. Okay. I'll show you this cuz you'll do it. You'll go. All right. I'm

going to make uh what are we going to do? We're going to make multiple

do? We're going to make multiple components. Boop. Okay. And now we've

components. Boop. Okay. And now we've got 1 2 3 4 5 6 7 eight components.

Let's undo that. So, what I'm going to do is either group these first. Group

group.

Actually, I'm just show you one way getting you too distracted. Okay, now I can create multiple components. The

other way is you just make them one at a time. But we've got one, two, three,

time. But we've got one, two, three, four. Okay, so I've got all these. I'm

four. Okay, so I've got all these. I'm

going to select them all and I'm going to say combine as variance. Why don't we just do it that way then? That is

actually probably just easier, isn't it?

Eh, it still gets messy. So, we're at this point. Okay, it wasn't hard to kind

this point. Okay, it wasn't hard to kind of design this. It's not hard to get to this point. The next part was what we

this point. The next part was what we want is we need a couple of properties.

So, we've got one. Let's double click property one. And we're going to call

property one. And we're going to call this one color. Color. Okay. And I'm

going to have another property. It's

going to be a variant. And I'm going to call this one, what do you call plus or negative. Sometimes my brain doesn't

negative. Sometimes my brain doesn't work. You just type in value.

work. You just type in value.

Okay. And I'm going create that property. If you're unsure what it is,

property. If you're unsure what it is, the value is something. It's a good generic catch all. So, now let's click on this. You are a color of group one.

on this. You are a color of group one.

No, let's call it rename it. Let's call

this one green. It's greenish. Okay. And

it is a value of we're going to call this one default. Just going to call this one plus or positive. I don't know whether we should use the plus symbol or write the word positive. I'm not sure what is easier. Okay. This one here

though is what a color of. It's going to be green. Green. And it's going to have

be green. Green. And it's going to have a value of. We don't have a minus. We're

going to add a new one. And we're going to say you are minus my friend and just work our way through. Okay, this one here color of group two. That's not a really good name. Let's call it

watermelon and a value of All right, we got a positive. Now, this one here should be

positive. Now, this one here should be easy because we've got watermelon and we got a value of negative. All right, same thing. Have a little think, practice

thing. Have a little think, practice with both of them and just see which you like the option. You know, which one do you think is better? Go to my assets panel. The cool thing about it again.

panel. The cool thing about it again.

Oh, probably needs a better name. Okay.

Can I do it over here?

Nope. Can't do it over here. You must be able to. Anyway, let's go to option or

able to. Anyway, let's go to option or alt one. Back to our files. Let's go to

alt one. Back to our files. Let's go to components. You have a terrible name

components. You have a terrible name called component one. You can either name it over here. Okay. Or you can name it over here. Uh, what is this? This

one's going to be button. Can't think of what to name it. Can't call it value.

Please hold. I can't think of a word.

I'm calling it zoom in outy. Anyway, so

there's a better name for it. Let's go

back to our highfidelity mobile. Let's

go to option or alt 2 to go to our assets panel. Drag out my button zoom.

assets panel. Drag out my button zoom.

Okay. And we're going to say multi-dimensional.

Look at this. All right. So, the big version is it doesn't matter how you get there, but you just need a component set. Then you just kind of work your way

set. Then you just kind of work your way through over here adding different values, adding different variants, okay, different properties and then within there kind of giving them better names as you go through. And it doesn't matter

whether you like here start with them already made, okay, and work them up that way or start with one and just keep duplicating them and adding the values.

Either way, I end up doing it this way for some reason. I don't know why, but you might like it this way. All right,

that is multi-dimensional components.

Feeling good? Feeling advanced? This is

advanced stuff. Now, the cool thing about this is that you will find other people's libraries that will have these and you'll know what the dotted lines mean. You won't remember what they're

mean. You won't remember what they're called, but you know what they do.

You'll be like, "Oh, I can grab one of these and go, "All right, it's got multi-dimensions." Nice. It's got lots

multi-dimensions." Nice. It's got lots of different variables. Fancy. All

right, that is it. Uh, let's get on to the next video. No, no, no, no. It's the

end. But don't worry. Uh if you want to keep hanging out, you're enjoying this, uh this is only like the first chunk of the Figma advanced course, like the first 25%. There is like another 75

first 25%. There is like another 75 videos, okay? Where we really get

videos, okay? Where we really get cooking in Figma. Uh so if you want to check that out, there's a link in the description. Um the cool thing about the

description. Um the cool thing about the full course is that there are additional stuff. So there's stuff you get like

stuff. So there's stuff you get like quiz questions, okay, to kind of help cement the knowledge, kind of test you as you go through, but it's not a test.

It's more cementing your knowledge.

There's also the class projects, okay, that we're making here. There's more of them. And there's a place to submit them

them. And there's a place to submit them to get feedback both from students and from me and the experts. Um, also what else is there? The all important certificate. So complete the course uh

certificate. So complete the course uh do the quiz and there's a final class project and you will get the Figma uh advance certificate. If you're not ready

advance certificate. If you're not ready for the full course, it's okay. Uh the

thing I want though is a like give me a like uh and subscribe to the channel for more stuff like this. I give away loads of free stuff here on YouTube. Um, if

you do sign up for the Figma advanced course, the other cool thing about it is it gives you access to all of my other courses. So, I've got courses on

courses. So, I've got courses on Illustrator. Okay, Essentials and

Illustrator. Okay, Essentials and Advance for all of these. Uh, there is Inesign, Photoshop. Um, what else have

Inesign, Photoshop. Um, what else have we got? Premier Pro, After Effects,

we got? Premier Pro, After Effects, we've got Canva, Da Vinci, Procreate, Blender. Did I say that? I'm not sure.

Blender. Did I say that? I'm not sure.

I've got a list over here. Definitely

not reading from it. Affinity. There's

an animation course. uh color theory, web flow, we're trying to add a new course every month or two. So, um the cool thing about it is that one price for Figure Advance gets you access to all of those courses. Seems really

reasonable. Just check it out and see what you think. Um yeah. Uh that is going to be it. Um I hope to see you in the full course. Uh but if I don't, life is long. I'll probably bump into you

is long. I'll probably bump into you again. And the cool thing about design

again. And the cool thing about design is that there is a lot to learn, lots of fun, interesting things. So, we'll

probably uh cross paths again. That's

going to be it, though.

Goodbye.