YT YouTube2Text

YouTube2Text → Transcripts → Free Figma Advanced Course: Become a Figma Pro!

Free Figma Advanced Course: Become a Figma Pro! — Transcript

by Bring Your Own Laptop · 42,045 words · 5,549 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:06Hello. Uh, I'm Dan Scott and this, my
0:09friend, is the Figma advance course.
0:11Now, this course is aimed at people who
0:13have either done my Figma essentials
0:15course or you're selftaught. You're
0:17pretty good, but you know that there are
0:19so many more like tools and tips and
0:21tricks and workflows and updates that
0:23you just haven't had time to explore
0:24yet. If that sounds like you, this
0:27course is for you. Who's this guy? I am
0:30Dan Scott. I am a UX designer and Figma
0:33instructor. Uh, I've won multiple
0:35teaching awards and I've helped more
0:37than a million people now just like you
0:39to become better designers. So, we're
0:41not just going to move boxes around
0:42here. We're going to actually build
0:44something. You'll get your own unique
0:45project and persona. And by the end,
0:47you'll have a complete app ready to drop
0:49straight into your portfolio. First,
0:51we'll use AI inside of Figma to move
0:53fast. I'm talking real efficiency. The
0:56kind that saves you hours, not minutes.
0:58We'll go deep on auto layouts and
1:00constraints, stuff that separates
1:01amateurs from pros. You'll master
1:03components and variables so tight
1:05they're impossible to break and
1:07effortless to update. We'll add visual
1:09punch, effects, typography, and micro
1:11interactions that make your design stand
1:13out. I'll show you workflow hacks for
1:15managing your assets, grids, and styles
1:17like an absolute boss. And I'll show you
1:19some of the hardware that make you
1:20faster and make you look like you know
1:22what you're doing when people walk past
1:24your desk. Ooh, look at that. You'll use
1:26variables to build light and dark modes,
1:28compact and comfortable layouts. We'll
1:30go into advanced animation, masking, and
1:33video work. The kind of stuff most UX
1:35designers don't even realize Figma can
1:37do. You'll learn to run better user
1:39tests, prototype faster, and build
1:41things that feel real. You'll understand
1:43accessibility, collaboration, developer
1:45handoff, using dev mode, refactoring,
1:48and team libraries like a pro. So, are
1:51you ready to become a Figma pro? If you
1:53are, sign up and get ready to go from
1:56Figma to a Figma superhero.
2:06Don't worry, I project superhero all
2:07through the course. I've noticed that um
2:09while I'm recording, I made the shirt,
2:11right? I'm like, keeps getting scrumpled
2:13up. So, I do this the whole way through
2:15the course, okay? To try and unscrumple
2:18it and project superhiness.
2:22So natural.
2:25Get on with the course.
2:34All right, you made it in. Welcome.
2:37Congratulations. You made a good choice.
2:39Uh the first thing you're going to do is
2:40download the exercise files for this
2:42course. Okay, there'll be a link on this
2:44page to download those. Inside of there
2:46will be a shortcut sheet. Um, I'll go
2:48through them in the course, but there'll
2:49be a sheet with them on there as well
2:51where you can print off and circle the
2:52ones you really like and add the ones
2:54that I've missed. Stick it next to your
2:56computer. Look all awesome. I speak
2:58fast. I think I speak fast. Um, so you
3:00can slow me down. There's a cog down in
3:02the corner here where you can click it
3:03and set the speed that I talk at. You
3:06can either put me in super slow drunk
3:07mode or chbunk mode or leave me like
3:10this. Up to you. Figma is newish and
3:13just changing all the time. They love to
3:15move things around. So, if uh you are in
3:18the course and you're like, hm, this is
3:19not named the same, but it looks the
3:20same. It's probably the same. Or if it's
3:22moved, you might have to have a look
3:24around to see where it's slightly gone
3:26or renamed. Look in the comments. I
3:28might have left a comment. If it's easy,
3:30if it's a big change, I'll go and
3:31re-record the course. But there are
3:33changes all the time. Figment like to do
3:35that to us. Can you do this course with
3:37the free version? You can for a bit. Um,
3:39a lot of the course you can do on the
3:41free version. That's no problem. There
3:42will be some paid u parts that we'll
3:44look at. So, if you don't have that, you
3:46can just follow along and you might end
3:48up deciding I need the paid version. Um,
3:50but yes, it's not a waste of time doing
3:52this with the free version of Figma. Um,
3:55I'm going to do mine on a Mac uh with
3:57the downloaded software. You can do it
3:59on PC in the browser. It all looks and
4:01works the same. Um, some of you will be
4:03coming on from the uh Figma Essentials
4:05course and some of you will be jumping
4:07straight to this course because you're
4:08ready for it. the people coming on from
4:10the older course, well the older course,
4:11the first course, the essentials course,
4:13you will find that there's a tiny bit of
4:15overlap. It's when we get to kind of
4:17trickier things where we're going to
4:19push it further, things like autoouts,
4:21we'll just cover quickly what an allout
4:23does and how it functions, which you've
4:26already done, okay? Just like a little
4:27recap before we go off and push it even
4:29further. So, there's a couple of times
4:30we were like, haven't we done this?
4:32You've done a little bit of it, but
4:33we're going to take it further in this
4:34course. And I want everyone to be kind
4:36of like starting at the right start, if
4:39you know what I mean. Uh, in this
4:40course, there's a couple of level ones
4:42and level twos like autos. There's a
4:44level one, level two. The reason I do it
4:46to break them up so that we don't go mad
4:48and spending the whole chunk of course
4:50looking at this one function, okay,
4:52components or a variable or something.
4:54Okay, so I've kind of done a level one
4:56where we do all the probably going to
4:58use a lot type stuff. We'll take a
5:00break, do some other things so that we
5:02don't go crazy, but also find bump into
5:05some reasons why, oh, this would be good
5:07if we could do more with that earlier
5:09thing we learned. Surprise, level two um
5:12where we go through it and um just kind
5:14of like expand on it. So, you'll see a
5:16few level ones and twos in this course.
5:17That's what they're for there, to split
5:19them up so we're not doing getting bored
5:21with the same thing, but also so that we
5:23get a chance to work with it and find
5:24the reason why we'd look to go even
5:26further with these features. Lastly, uh
5:29you can follow me at Figma, okay?
5:30There's a community. Go to figma.combol.
5:34Okay? And you don't have to, but follow
5:37me there and that's where I'll post the
5:39finished files from this course. Okay?
5:41If you're just starting, yeah, there'll
5:43be the finished files on the course. You
5:44can have a poke around the things that I
5:46made. It's not particularly organized,
5:48but it's sometimes handy to see the
5:50files that I've been working on, and you
5:52can take a look at them, too. All right,
5:54that is it, my friends. No more talking.
5:56Let's get making. We'll see you in the
5:58next video, won't we? Hello. Uh before
6:00we get started, I'm going to give you
6:02each unique brief to work through for
6:04the course. We're all going to build a
6:05music app. I'm going to give you your
6:07own kind of version of it so that you're
6:09not copying me and everyone's looks
6:11different. So, it's good for your
6:12portfolio cuz it's unique. Um so, if you
6:14go to random project generator.com,
6:16okay, that's something me and the bring
6:18your laptop team made and you find frig
6:20advanced. Okay, click on it. Enter your
6:22village or town name. Okay, mine is
6:25limmerick. I'm going to say generate
6:26project and I have got the I don't even
6:29know what bluegrass is, but that's going
6:31to be my one. Try and keep the one you
6:33get. It kind of pushes you out of maybe
6:34your comfort zone or like it shows that
6:37makes it more of an intellectual kind of
6:39a project where you have to kind of um
6:41think of the user. Okay, bluegrass is
6:44something that I don't know about. I'm
6:45going have to have a quick look at the
6:46genre. What kind of vibe has it got? It
6:48feels I don't know actually. I don't
6:50know.
6:52Um, so yeah, Limic brew glass. And what
6:54it has as well down here is is that it's
6:55given you the brand to use. Okay, we're
6:58going to create a little micro brand.
6:59It's not a branding class. We're just
7:01going to use a jackal as the logo. Okay,
7:02so we're going to find pictures of
7:04jackals. We're going to find a little
7:05icon for the logo just so everyone's
7:07unique. This is where you get it from.
7:09Don't hit reply. Oh, what's that? Retry.
7:11Okay, definitely don't hit it three
7:13times. Just grab it. Take a screenshot
7:14of it here because it gives you exactly
7:16what we're doing. Okay, it doesn't
7:17really matter too much now. Just grab
7:19it, take a shortcut or download it as a
7:20PNG. That's what I'm going to do and we
7:22are going to work through the class.
7:24Yours is going to be different but
7:25similar. You get it. All right. Next
7:27video. Hi everyone. We're going to start
7:28the course looking at a feature called
7:31first draft. Okay. It's AI driven. It's
7:33a great way to kind of get templates,
7:35get kind of started. Um it's more useful
7:37once you've got a few more of the skills
7:39from this course to kind of take it
7:41further, but I want to show it now cuz
7:42it's awesome and a great way to get
7:44started with projects. So you can see
7:45down here I've got the prompt open.
7:47Okay. And I'm going to say it's a basic
7:49app. make a checkout page for a music
7:51event app. And boom, there you go. It's
7:53made a checkout page. I can play around
7:55with the styles and fonts, okay? But it
7:57is something generated from scratch from
7:59Figma's AI. Let's jump in and look at
8:02the pros and cons of it and how to kind
8:03of get it working for you. We'll also
8:05look at the AI feature for add
8:07interactions. All right, let's go. All
8:09right, so I'm in a new blank design
8:11file. I'm in design, this little tab
8:13down the bottom here, and I'm going to
8:15go to actions. Now, this one here is a
8:17paid feature. Um, so just watch if
8:20you're on the free one. It is uh where
8:23is it? It's called first draft. So you
8:24might search for it. I found mine here
8:26under design tools. Going to click it.
8:28Okay. The cool thing about it, you can
8:29kind of give it some guidelines as in do
8:31I want a basic app or a wireframe. Okay.
8:33Does it need images or not? You know, uh
8:35basic site or a site wireframe. Okay.
8:37We've looked at that before. High
8:38fidelity, low fidelity. Um, so I'm going
8:41to do an app and I'm gonna say I want it
8:44to be um, it's an event listing app
8:50for music and just click make it. Stand
8:53back, watch the AI bots do the little
8:55thing. Oh, that was quick. Thought we
8:58might even have to jump cut and faster.
8:59Oh, Coldplay Taylor Swift. I'm out. Ed
9:02Sharon, Billy Isish, it's not my music.
9:05Um, but what you can see here is it's
9:07actually built this unique app for you.
9:10Um, it is generating uh these images.
9:13These images are like it's AI engine
9:16making them. That's why sometimes they
9:17can take a little while and they're kind
9:18of like sparkly, but oh my goodness,
9:21it's made an app. Look at it. This is
9:24cool. Let's prototype it. Let's go. Yep.
9:26Okay. And let's have a look. I like it.
9:30What works? What doesn't? Okay. It's
9:32just kind of mocked up. doesn't do a
9:34whole lot. There's not a lot of um
9:36interactivity. You can like in the
9:38essentials course go you actually let's
9:40look at something else and let's look at
9:41the colors. Watch this. That's the first
9:43color way. Okay. You can see you can go
9:44through and say, "Oh, I like these
9:46ones." It's a great way to get started.
9:48And once you'll finish this course, the
9:51advanced one, you'll be able to add all
9:52the interactivity and all the right ways
9:55to kind of get it out for designs. It's
9:57like working with a template except the
9:58template you need to be very customized,
10:00okay? Especially with things like the
10:02colors, things like let's like make
10:03changes as well. Look, you can say
10:04actually rounded corners. I want super
10:06rounded corners. No rounded corners.
10:08We're going for the boxy look. Okay, the
10:10spacing. We want to open that up. It's
10:13just very cool.
10:15What kind of fonts do you want to use?
10:17Okay, you can work through it. You can
10:19prompt it as well to say um can you uh
10:22add
10:24a large
10:26hero box? I don't know if this is going
10:28to work, by the way.
10:30Okay. But you can start prompting it to
10:32do stuff. It would be probably easier
10:34for me to do a lot of small changes
10:36myself.
10:39Okay. Cuz it's done a version of it.
10:40It's not the thing I had in my head. So,
10:42that's going to be the tricky part. So,
10:43you can prompt away. And sometimes it's
10:45easy just to make it. Let's have a look
10:47uh under assets. Okay. It has got no
10:49assets for this particular um document.
10:51There's no library. There's no styles
10:53for it. Maybe that'll change by the time
10:55you get to it. But now there's still a
10:57lot of work to do. But very cool way to
10:59get started once you've got some skills.
11:01You can't just be a UX designer and go,
11:02"All right, I've learned nothing about
11:04Figma. I'm just going to use the
11:05prompt." Maybe that's possible in the
11:06future. I don't think so. But I want to
11:08show you that there. The other thing I
11:10wanted to show you from the essentials
11:12course was let's say we want to make
11:14another page. Let's go you
11:17and let's select it all and delete it.
11:19And this one here, we're going to go
11:20back to our prompt again and we're going
11:21to say uh where we got first draft.
11:24Okay. Okay, I'm going to say event
11:28and listing in detail.
11:31Let's see. Oh, spell it right. Dan,
11:34there we go.
11:38All right, it's gone. And where is it?
11:40Oh, it just made a new page rather than
11:42trying to use the one that I made for
11:43it. But you can see here, has it used
11:46the same fonts? Let's have a look. Uh,
11:48public sands. And this one is uh, no
11:51outfit. So, it's going to get better.
11:53You know, I'm looking forward to the
11:54time where I just need a really basic
11:56page, like a TE's and C's page or a
11:58checkout page that looks like a really
12:00trustworthy one and it can take the
12:02styles that you've already got and then
12:04apply them. That's probably not too far
12:06in the future, but for the moment, it's
12:07kind of more idea generation um and you
12:10fixing it up and changing it around
12:12after now cuz like everything is
12:13different. But what it can do is we can
12:16do uh this part here. We go into the
12:19actions and we can say I'd like to look
12:22at add interactions. Okay. Uh between
12:25you and you add interactions.
12:28Okay. And it did it. Okay. So let's add
12:31the little magical interactions. So
12:33let's give it a prototype now. Let's
12:35start with this guy and go to play and
12:38let's have a look. I can't even remember
12:39which button it was. Oh yeah, it worked.
12:41Okay. And then go back to the home. All
12:43right. So those two little things can be
12:45powerful. Okay. and will be better later
12:47on. But I just want to show you earlier
12:49on in the course the kind of new things
12:50that are happening with Figma. And I can
12:51come back and update this video in the
12:53future. It's not taking our jobs, but it
12:56is shortcutting some of the things we
12:58used to do in terms of like, all right,
13:00I wonder what a good form looks like.
13:02You can start working with make a first
13:04draft or like normal go back to home on
13:07the browser version. Remember, go up to
13:08the F and go to home which is at the
13:11top. Okay? And you can go to the
13:13templates. There's plenty of templates
13:14out there. That's kind of the way I'm
13:16using it at the moment. It will get
13:17better, but it's new. It's fancy. And it
13:19will be more handy when your skills are
13:21even handier and you can kind of like
13:22take what that makes and make it uh you
13:25know connect it all up with styles and
13:27auto layouts and variables. Oh, it's
13:28going to be fun. All right, that is it
13:30for the first video. What did you think?
13:32Have a play around with it. I will see
13:33you in the next video.
13:37Hi everyone. This video we're going to
13:39look at Apple's liquid glass. Okay, it
13:41is a very cool effect. Okay. And you can
13:45see here it's part of the UI, but we can
13:47do it inside of Figma as well. We're
13:49going to make this that moves around and
13:50you can kind of see through. It's all
13:52glassy and good. All right. Let's get
13:54into it. All right. First up, open up a
13:56new design file either using the new tab
13:59design file anywhere you want. Um, and
14:01from your exercise files, okay, I want
14:04you to bring in just an image. It can be
14:06anything. It doesn't really matter. I'm
14:07using this liquid glass effect. And I
14:09like to drag them in from my browser
14:12like that just to straight into Figma.
14:13But you could use the command shift K
14:16which is a shortcut for bringing in
14:17images. Or you can go down here to the
14:19rectangle and say you are image video.
14:22The other thing just to kind of clear up
14:24is that there's a couple of different
14:25modes down the bottom here. Um unless I
14:27tell you it's this middle one we're
14:28going to be working on design. So get
14:30the image in. I've lost my image. You
14:32come in. Okay. And let's draw something
14:35over the top. Now, the liquid glass
14:37effect only works on frames. So, you
14:39can't use the rectangle tool here to
14:41draw it. Okay. It needs to be done with
14:43a frame. So, the F key, let's draw our
14:45big old button through the middle here.
14:48Okay. And we're just going to keep it
14:49simple for the moment. Let's just go and
14:50add the effect. Okay. So, under effects.
14:52So, I've got it selected. It's a frame.
14:54I can hit plus. Okay. And I can go to
14:55drop shadow and we can get into this
14:57one. Glass already. It's awesome. Okay.
15:00And what we can do is just move it
15:02around. Oh, it's so cool.
15:05Um, let's do a couple of little things.
15:09Um, let's make sure I have rounded
15:11corners. To get maximum rounded corners,
15:13just put it up something really high
15:14like a th00and, then it will round off
15:16the edges. And I'll zoom in. Okay. And
15:18let's have a little look at the
15:19different effects for glass. Okay. To
15:21open up, so if I got it deselected, I
15:24click on it. And to open up the effects,
15:26okay, I click on this little icon here.
15:28Okay. And it will open this back up.
15:29Okay. The light. Where is the light
15:31hitting it? It's up to you. How bright
15:32is the light? You can type it in or just
15:34click and hold any of these icons here.
15:38Okay, I'll leave mine at 80. And then
15:39you can just play around with these.
15:41You'll get a sense for them. There's no
15:42right or wrong. The default's great.
15:44Okay, but you can play around with
15:46things like the depth. How like how
15:48thick is the glass. Okay, big bubby
15:51glass. Little thin sheet of glass. Okay,
15:54if you're designing for the Apple OS,
15:56you can check the specs to see what
15:57exactly it needs to be. you'll probably
15:59be better off going to the uh home and
16:02going to templates, okay? And then doing
16:04a search in here and typing in liquid
16:07glass. So, Apple calls it liquid glass
16:10and uh Figma just calls it glass effect.
16:13Okay? So, you're probably better off
16:14just starting with one of these because
16:16somebody else has gone through the Apple
16:18design system. Oh, there it is. There
16:20it's the kit. Just start with the kit.
16:21Okay. But for us, and let's go back to
16:24this. Okay. We can play around with
16:25refraction and depth because we're not
16:27limited by the Apple specs. Okay. And
16:30one of the ones that is a bit weird is
16:32dispersion. Okay.
16:34You can see it a bit more when it's
16:36above say some text. Can you see the
16:38edges here? It's kind of all gray. If I
16:39go dispersion right up, kind of add some
16:41colors in there. Maybe better with some
16:44depth. There you go. You can kind of
16:45start to see the blue come through and a
16:47bit of yellow over here. Obviously,
16:48frost is just how blurry it is. Ooh, I
16:51do like it. The last one is the light.
16:52Can you see the little light bulb? You
16:54can drag them around. Okay. Depending on
16:55where you want the light to hit. Did we
16:56already do that? I think we did. All
16:58right. The only thing uh that might uh
17:01catch you out is that this needs to be
17:03on top of whatever it's trying to
17:04disperse. That's why we just started
17:06with an image just to make things easy
17:08for the moment. Let's do something hard
17:10in the next video. Glass effect. Oo,
17:12it's nice. Hopefully, my voice has kind
17:14of got better. It's morning time and
17:16I've got my kind of like halfway through
17:17first coffee voice. through the course,
17:19you'll be able to actually tell what
17:20time of day it is by how much my voice
17:23has actually started to come around. All
17:25right, next video. Dan,
17:30hi everyone. This video we're going to
17:32make this this kind of glass slidy
17:34thing. It's not really what we're doing
17:35here. What we're doing here is that this
17:38is the advanced course, but sometimes
17:40all of the advanced goodness is real
17:41tricky to work with. Let's have a look
17:43at this. Okay, if I want to move this
17:45button over here, you can see there's
17:47auto layouts inside of auto layouts
17:49inside of auto layouts. It's very good
17:51and structured, but sometimes you just
17:52want like move it and then you're like,
17:55why are you why are you in there? Stop
17:57being so complicated. Okay, so that's
17:58what we're going to do in this video.
17:59I'm going to show you how to kind of
18:00like turn off or work with some of the
18:02complicated layouts. We're doing the
18:04advanced course, but sometimes we're not
18:06quite advanced yet. We're just we're
18:07getting towards advanced. Just need to
18:09turn some of the stuff off or at least
18:11work within it. So, let's jump in and
18:14show you how to work with complex
18:16layouts. All right, let's go. All right,
18:17first up, you need to open up a file.
18:19There's a couple of ways of getting to
18:20it. Um, I've put a copy of it in the
18:23exercise files. So, you can double click
18:25this fig file, okay, and open it up. Go
18:27through the steps of where you wanted to
18:29put it. Probably put it in your drafts,
18:31click import, and then wait for a
18:33second. And then it'll say, do you want
18:35to move it to a publish folder? You
18:37don't have to. Or into a project. You
18:39can just click done, and it'll be ready
18:40to work with. Okay. The other way of
18:42doing it, um, there it is there now.
18:44Okay. I can double click it and start
18:45working. The other way to do it is if
18:47you go to figma.com/bol.
18:50Okay. You will find the files in there
18:51as well. Whichever way you want to do
18:53it, okay? And you will find Figma
18:56advance one. Okay? There'll be a bunch
18:58of other files as this course grows.
18:59Okay? You can open them up and say,
19:01"Open up in Figma, please." And they'll
19:03open up in the browser. It doesn't
19:05really matter how you get to this file.
19:06I'm going to open it up in my desktop
19:08cuz I'm old school. It should be in my
19:10drafts. There we go. And there it is.
19:13There. All right. Now, I give you this
19:15one because it is very complicated. It
19:18is and it isn't. Okay. This was created
19:20earlier on in the course when I was
19:21using the uh first draft feature inside
19:25of Figma. Okay. Not everyone has access
19:27to this cuz it's part of the paid one,
19:29but I've got the end result here for us
19:30all to work with. The cool thing about
19:32it is that it is all auto layouts and it
19:35is very well structured. Okay. So, if I
19:38grab this one and say I want uh shopping
19:40below food delivery. Okay, I can just
19:42drag it underneath and look, they switch
19:44around cuz they're in auto layouts.
19:46Undo. Let's go into the shopping uh
19:49layer here and say, "All right, this top
19:50one, bottom one, next one." Okay, I can
19:53just click the top one, hit the down
19:54arrow, and can you see it moves it
19:56around in there? So, it's all very
19:58nicely structured. Sometimes though, you
20:00go in, you're like, "Oh, more autos,
20:02autos, more auto layouts, more auto
20:05layouts. There are so many auto
20:06layouts." And where it becomes tricky is
20:08even if you are advanced, you're like,
20:10"Okay, I just want to move this button."
20:11Okay, like you saw at the beginning
20:12here, I'm going to move this up here.
20:14It's going to go into there. All right,
20:16now it's part of that auto. It's not I
20:17just want it kind of up. It's
20:19everywhere. Okay, so that can be tricky
20:22both working with that feature first
20:25draft or just other people's files or
20:27say you've just joined a big um
20:29enterprise company and they've got a big
20:31design um system and you're just like,
20:33"Oh man, this is really hard. I just
20:34need to do something simple. Stop being
20:36so clever. Okay. So, what you can do,
20:38um, one of the nice things is you can
20:40select the parent frame. Okay. And right
20:42click it and just say you,
20:45uh, where is it? Auto layouts. Oh, more
20:48auto layout options. They keep moving
20:49that and renaming it. So, have a look.
20:51It'll be hidden here somewhere. We could
20:53say remove auto layout, but that'll only
20:54do it for that one frame. We want to say
20:56get rid of all auto layouts in there,
20:58and you'll find that they're all just
20:59plain old frames. Now, things are just a
21:02little easier. All right. One of the
21:03other handy features was working with
21:05complex layouts, okay, is that there's a
21:07lot of layers going on like still all
21:09the layers are there, which is good. Um,
21:11sometimes though, this button here, I
21:12just want to go in, double click, then
21:14again, double click, double click,
21:15double click. I finally find this thing
21:16called large button. Okay? And it's got
21:18some text in it. Great. I want to move
21:20it out. We're going to make a glass.
21:22Okay? Because I'm going to show you kind
21:23of more of a for instance of that effect
21:25we did earlier. Okay? But I want it to
21:27be kind of like over the top of
21:28everything. So if I start dragging it,
21:30one of the defaults for Figma and one of
21:32the complications of working with
21:34complex files is that it will go inside
21:37of this container which is part of the
21:39shopping checkout. Okay. Or you kind of
21:41put it in here and it's now part of this
21:44layer. It kind of wants to automatically
21:46nest, okay, into all these frames or
21:48auto layouts, okay, automatically, which
21:50is cool most of the time, okay, but say
21:52sometimes you just want it to kind of go
21:54where you want. You do things like this.
21:55So I'm going to undo to where it was. So
21:57you're the same as me.
21:59Okay, I found the button. There he is.
22:01All the way down here. I'm going to drag
22:03him out. I'm going to say you get out
22:05and put you maybe in between the bottom
22:07bar and the main content. Let's get him
22:09up and out. So, he is out. Okay, so he's
22:12on top of everything. But as soon as I
22:13start dragging him, he dives back into
22:14something. So, he's above everything.
22:16Now, I can close all these down just to
22:18make everything a little bit cleaner.
22:20So, I've closed everything down. My
22:21bottom bar is there. I don't really need
22:22that for the moment. And there's my uh
22:24button large primary. And again,
22:26remember if I drag him, he goes inside
22:27something. What I can do is if I uh
22:31click him, okay, before I start
22:32dragging, I've clicked my mouse down,
22:33hold space bar. Okay, then you can just
22:35drag him around anywhere you want. He
22:37won't miss Oh, I can't really point at
22:38the layers over there, but he won't move
22:40off the layers. Okay, and I can put him
22:42wherever I want. I can see you go there.
22:44Now, you see, he didn't jump inside any
22:46other layers. I find those two things
22:49are kind of the most important when it
22:51comes to working with other people's
22:52complex files or using some of the
22:54automatically generated um files,
22:57templates, okay, is just to go to auto
22:59layouts, remove them, and when you start
23:01dragging things around, click, hold,
23:03hold space bar, move them around, okay?
23:04And then you won't jump layers. Cool.
23:07That's it. Now, what I want to do is do
23:08the thing I showed you at the beginning
23:10where um we had the glass button and it
23:13was moving along. So, let's do that
23:14together. So, a couple of things I need
23:16to do is my button's going to stay up
23:18here. What I might do is just lock these
23:20layers just so I don't have to hold the
23:22space bar. I can just drag it around and
23:23there's nowhere it can go. Okay. And a
23:25couple of things I need to do is let's
23:27just preview it now. So, I'm going to
23:28click on the app. I'm going to say let's
23:30open up the preview. Okay. So, that's um
23:32shift space and it should stay open
23:35there. Okay.
23:37You'll see if I scroll up and down it is
23:39working. If yours is not working like
23:40that, what you can do is click the
23:42outside, go to prototype. Actually,
23:44let's click on the background. Okay. And
23:46I'm gonna say make sure. So, I got
23:47nothing selected. Prototype. Prototype
23:49settings. I'm going to use the this one
23:51here, the iPhone 16. Okay. And uh that's
23:56fine. You can use whatever one you want.
23:57Let's open my preview again. And still
24:00working. If that's not working, okay,
24:02sometimes you got to go in here and say
24:03actually scroll behavior. Okay. I want
24:06to scroll vertically. Okay. So, that it
24:08does actually start scrolling. Open it
24:10up again. We're all good. Next thing I
24:12want to do is I want to get this to
24:16stick to the bottom. How do I do that?
24:18Because if I have it selected and I grab
24:19this button here and I say actually I
24:21want you to be aligned with the bottom
24:23of this. At the moment it's constrained
24:26to the top. Okay. So you I constrain to
24:28the top which is going to work probably.
24:31Okay. So I'm going to say you I'm in
24:32prototype. What I can say is I want you
24:35positioned to scroll parent. Nope. I
24:36want you to stay in place. I can
24:38prototype it. And now when I scroll, can
24:40you see he stays in place?
24:43Let's make him all glassy. Okay, so
24:45let's click on him. Let's go to design.
24:48Okay, let's go down to effects. Now
24:50remember, this has to be a frame for
24:52this to work. Can't be a rectangle. I'm
24:54going to go to drop shadow. Going to go
24:56to glass. Oo, I do like it. Okay, so I'm
24:59going to crank up the depth. The frost
25:01is about perfect. H, everything looks
25:03good by default.
25:05Do like sliding refraction up and down,
25:07though. Look at that. That's cool. All
25:09right. Now, let's go and preview him
25:10again and scroll him up and down. And he
25:13does the cool glassy thing, but stays
25:15kind of where he should be. Now, how do
25:18I get them to align to the bottom? Okay.
25:20So, let's close that down. Let's go U. I
25:22need to find out where the bottom is.
25:24So, if I click off, okay, and I go to
25:26prototype, I can see iPhone 16 is what
25:29is it? Uh 393x 852.
25:33So I can click on you and say actually
25:35under design size of this frame should
25:37be 393 by 852 92. It was only a second
25:43ago. I can't remember. We're going to
25:44guess 852. Come on brain. Okay. Can you
25:47see that? It's clip contents. You can
25:48turn that on and off. Okay. So at least
25:51I know where the bottom is now. So I can
25:52say you are going to be down here. I
25:55could hold shift so he doesn't jump into
25:57um all the different frames. But
25:59remember I lock those layers so it's not
26:00a big problem. Now he's constrained to
26:02the top. See that dotted line? I can say
26:04you constrain to the bottom because we
26:06have a bottom now that he can constrain
26:07to. Doesn't really matter. Shift
26:09spacebar and oh, look at us doing cool
26:12glassy effect things on really
26:14complicated designs. Okay. Select the
26:17parent, right click it, go to more
26:19layout options and go to remove all auto
26:22layouts. Okay. And when you're dragging
26:24around, hold shift while you're
26:25dragging. He won't dive into all the
26:26different frames and auto layouts. And
26:29add a sweet glass effect. You can see
26:30mine's got a uh red tinge which is
26:32coming from this. Okay. My fill which
26:34has been turned down. You could turn
26:35this back to white to get that kind of
26:37more traditional glassy effect. Maybe a
26:39little bit of blue. All right. I hope
26:40that was useful. Kind of touched on some
26:42things we learned in the essentials
26:43course like constraints. Played around
26:45with prototyping and making sure we can
26:48jam a little prototype into an iPhone
26:50which always looks cool. All right. I'll
26:51see you in the next video. Hi there.
26:54Hey. Uh I just wanted to bump in here
26:55and see how you doing. How you doing?
26:58Uh, if you're enjoying the video, well,
26:59you made it this far. Can't be too bad,
27:00right? If you are enjoying it, uh, like
27:02the video, uh, subscribe to the channel.
27:05It's free for you and it's like super
27:07valuable for me. It's my ask of you at
27:08this point. Uh, and if you did want to
27:10go further, this video that you're
27:12watching, this YouTube video, it's quite
27:13long, right? Um, this is just the first
27:15quarter of the course. So much more
27:17value in the full course. Um, so if you
27:20did want to go further, enjoy hanging
27:22out. Um, you can pick it up here. Uh,
27:24there'll be a link in the description.
27:25The bonus of doing the full course is
27:27all the extra videos obviously but also
27:29there is a quiz question kind of test
27:30your knowledge as you go through help it
27:32real sink in uh your class projects uh
27:35the website has a place for you to
27:36submit and get feedback on those
27:38projects which is super valuable uh what
27:40else also there is the uh really
27:42important well I don't know I think it's
27:44important certificate at the end okay uh
27:47there is a certificate there's a merit
27:49certificate and a distinction
27:50certificate so check that out link in
27:52the description not ready to go for the
27:54full course don't worry It's all right.
27:56Heaps more to come. Get on with the free
27:57stuff, Dan. All right, more free stuff.
28:07Hi everyone. Let's look at a couple of
28:08cool effects. One is this noise that
28:10we've applied to the background image.
28:12Kind of gives it an old school look. The
28:14other one is this this texture. So, we
28:16can get this like really cool glass
28:18effect like we're peeking through the
28:20toilet window of the camper. Look how
28:23cool it looks. Oh, awesome. Right, let's
28:25jump in and learn texture, noise, and
28:27some of the effects the layer order has
28:29on these effects. Let's jump in. All
28:31right, to get started, you can just have
28:33any image. Um, we're going to use the
28:35glass effect as well for this uh texture
28:38and noise effect. But if you do want to
28:40follow along exactly, there's an effects
28:41O2.fig, okay, in your exercise files.
28:44You can open that up in Figma, okay? Or
28:46you can find member at figma.com/bol
28:49and you can open up this file okay and
28:52open your own version of it in Figma.
28:55Okay. So uh I have got this button.
28:57Okay. It has got the glass effect
28:59applied to it. Okay. It is effect and
29:02I've added glass. The other new um
29:04effects if I hit plus. Okay. You can
29:07have more than one effect applied to an
29:08object. Okay. And I can say I don't want
29:10a drop shadow which is cool. Okay. I do
29:13like the drop shadow. Okay. But I'm
29:14going to go to the one that says
29:15texture. Okay. And you can kind of see.
29:17Let's zoom in a little bit. Okay. What's
29:19happening to it? Let's crank it right
29:20up. Okay. The texture is kind of like
29:23frosted glass. Okay. And that's what it
29:25does. Okay. Gets that kind of like
29:27stippled, dimpled, whatever you call it.
29:29Okay. And you can play with both these
29:30settings. You need a bit of both. The
29:32one thing that does look a bit weird is
29:34the edges of this. Okay. And there's a
29:37mixture of if I open up a texture again.
29:39Okay. A mixture of clipping to the
29:41shape. Okay. Okay, so that it doesn't go
29:43outside of it. And going back to glass,
29:46okay, and playing around where the light
29:47source comes from. Okay, and turning
29:49that up and down. It depends on every
29:51instance. There's not a special number,
29:55but it is very cool.
29:58The other one you can do is let's have a
30:00look. So effects, let's add a third one.
30:02Let's look at text. Uh, sorry, noise.
30:05Okay, noise. You can see add some noise.
30:07Okay, so in this case, it's interesting.
30:09I wanted to show you here because noise
30:11is interesting. You can play around with
30:13just a mono color, a duo color. So,
30:15there's two of them. Okay? And multiolor
30:17is going to work with kind of all sorts
30:19of, you can see in here the noise is a
30:22bunch of different colors. Okay? So,
30:24gives a kind of a grainy old school
30:25effect. The reason I want to show you
30:27this is I'm going to crank this up noise
30:29size just so you can see it. Okay? You
30:31can play around with some effects. You
30:33can play around with the order. So, at
30:34the moment it's doing noise then
30:36texture. You can say actually by
30:38dragging this strange little area over
30:40here where the little hand is, you can
30:41say you and drag it up and above like
30:44layers. Okay? So, it's going to do the
30:45texture first and then the noise. You
30:47might just find that you can't get the
30:49effect you want. You're trying to copy
30:50somebody else's. It's cuz this order is
30:53around different ways. Glass in this
30:55case doesn't seem to make any difference
30:57which way it is. Okay. But some of them
30:58do. What noise is probably nicer for is
31:01for something like this kind of retro
31:03image here. I can say you, my friend,
31:05have an effect and it's going to be the
31:07noise. Okay. And I'm going to zoom in a
31:09little bit and you can start to see it.
31:11Gives it an old school retro kind of
31:12vibe.
31:14Let's turn it off. Turn it on. Turn off.
31:16Turn on. You get it. Um, one of the
31:18things about this setting, okay, where
31:20we've got the texture on, I'm going to
31:21turn the noise off. I'm going to delete
31:23it by hitting the minus. I like the
31:24texture. I don't so much like the noise
31:27on it. But let's say I do do this. Okay.
31:29If I want to, at the moment, it's a
31:31frame. Let's say I want to put text
31:33inside of it. So I'm going to grab my T
31:34for the type tool. Click inside and I'm
31:36going to say book now book.
31:39Okay. See what happens. You're doing it
31:41to the parent has got the texture. Okay.
31:43So everything inside of it unfortunately
31:45gets the effect applied to it as well.
31:47So if I want to do it like this, I can't
31:49do fancy auto layouts. The text needs to
31:51be inside of it. So all I need to do is
31:53do the text over here outside of it.
31:56Book. Now, back to the move tool and put
31:59it on top, not inside. Okay. One thing I
32:03didn't notice is that the image was a
32:05frame and now the buttons inside of it.
32:07And because I applied the image to have
32:11uh an effect on it, it's applying to
32:12everything inside of it. Can you see my
32:14text has even got the noise uh effect on
32:16it. So again, if I didn't want that, I'd
32:18have to grab these two guys and go y,
32:20you're out of there. You're on top. And
32:23I picked a different font. Um there you
32:25go. That is the texture and noise
32:27effects. And you just need to know,
32:28especially everything inside of Figma,
32:30is that you can often change the layer
32:32order of these things. You can have two
32:34fills. Okay. And then play around with,
32:37let's go this one. I can crank this
32:38right up. Okay. And if it's on top, it's
32:41very different. If it's underneath, it's
32:43not that different, is it? Let's turn
32:45that up. Okay. So, if the whites on top
32:46or the whites below, it is very
32:48different. Okay. All of these have it.
32:50And it's not that clear that you can
32:52move them along. There you go.
32:56Undo, undo, undo. We made a cool button
32:59that now I might need to group. Right
33:02click, group.
33:04Now they move around together.
33:06Excellent. All right, that is it. I'll
33:07see you in the next video. I'm back cuz
33:09I wanted to show you something. I was
33:10just getting ready to do the intro for
33:11this course. Um, sorry, for this video.
33:14I do that at the end so you can see what
33:16we make. I was just making it look
33:17better cuz I was like, something a bit
33:18me about this. And I was like, oh, I
33:20made it better. Oh, I should show them.
33:22Okay, so I've got this thing selected.
33:24Okay, so I've got the button selected.
33:25There's a couple of things going on
33:26here. So, there is this little fill
33:29that's left on this. It started life at
33:31100%. It automatically when you apply
33:33the glass effect turns it down to 10%.
33:35Okay, I could get rid of that and it
33:37kind of gives it this more glassy kind
33:39of effect. I like it. Okay, the other
33:40thing is this like weird little border
33:42around it that appears a little bit too
33:44strong. Okay, if I go in and click on
33:46this, I can see the glass under texture.
33:49Okay, radius. If I turn that right down
33:51or up, can you see what it's doing here?
33:53Okay, I've somehow picked this like
33:55really weird point where it's the most
33:58horrible. So, you can crank it up and it
34:00kind of goes away. And when it's really
34:01low, it goes away. To find something
34:03that works for you, you can play
34:04obviously around with size as well.
34:06Okay. But if you get it kind of smaller
34:08and play around with the radius, big or
34:10small, it just I don't know. I was like,
34:12that's what I was looking for. And my
34:14text needs
34:17a drop shadow. It's not so blurry and
34:20doesn't go down so far. All right, that
34:22is it. Now we can finish the video. See
34:24you in the next one. Look how cool it
34:26is.
34:31Hi everyone. In this video, we're going
34:32to look at something called progressive
34:33blur. It is this where color kind of
34:35becomes progressively blurrier. You can
34:37do it with images as well. Um it's
34:39really easy and really quick. And we'll
34:41do that first off. Um, if you do though
34:43want to hang around, we'll make this
34:45where we kind of uh go a bit further in
34:47this tutorial just to recap some of the
34:48nice things we learned earlier in the
34:50essentials course just to catch everyone
34:52else up. Um, there are some paid
34:54features that we go through some AI.
34:56It's worth hanging around if you're a
34:58little bit newish to Figma. If you just
35:00came here for the progressive blur, do
35:01that at the beginning and then skip on
35:03to the next video. All right, that is
35:04it. Let's get in. Let's make blur
35:06progressively. All right, you'll notice
35:07that my UI is dark. I figured I'd show
35:10you just before we get started. But I
35:11switch mine at night time. You have to
35:12have a file open. Go to the F key. Go
35:14down to preferences. And under theme,
35:16you can go between light and dark. It's
35:18nighttime now. And the light one is
35:20actually really light in my office. So I
35:22just kind of turn it down. Remember file
35:24open preferences theme dark. With
35:26nothing selected, you can change the
35:28color of your page. Okay. It might be
35:30default be white, but you might be
35:32wanting to work on a darker color here.
35:34Cool. Let's grab the F key. Click once.
35:37Let's grab our iPhone 16. I like this.
35:42The kind of white contrast against the
35:44black. Let's bring in an image. So,
35:46command shift K is one that I use a lot.
35:48Or I drag it in. The problem with
35:50dragging it in, if it's a really high
35:51resolution image, it comes in massive.
35:54So, command shift K is a really good
35:55shortcut. We're going to bring in this
35:5603. Okay. And we're going to go open.
36:00The reason I do it this way is I can
36:01click and drag it to be a size that I
36:03want. Roughly about that sort of size.
36:05Now, let's just make it progressive blur
36:07and then we'll make it look like it did
36:08in the intro. So, all you need to do is
36:10another effect here. Okay, you can go to
36:12from drop shadow down to text to layer
36:16blur. That's the one we want. Okay, and
36:18hiding in here is progressive. Okay, and
36:20what you can do is even just like that.
36:22It's pretty cool, right? It starts at
36:23the top really crisp and you can see
36:25down the bottom here it's blurry. You
36:27can drag these little points around.
36:29Okay, so from left to right, you can
36:31hold shift and it will snap into um
36:33straight lines. Okay, so you can do cool
36:35stuff. It doesn't have to be an image.
36:37Okay, I can grab the F key uh for the
36:40frame tool, holding shift, so it's a
36:42square. Okay, give it a fill color. Any
36:44old fill color over here. Okay, as long
36:46as it's green, greenish, come on. Green,
36:50teal, aqua, that one. Okay, we can do
36:53the same thing. Oh, let's do a shortcut.
36:54Okay, let's have this selected. I've got
36:57an effect. I can click here and it kind
36:59of goes blue. Can you see this like area
37:01that we used it earlier on to drag it
37:02around? You can click on it, copy it,
37:04click on this, and hit paste. You can
37:06copy and paste styles. Cool. Okay. And
37:09we'll do it. We'll go in and we'll
37:10affect this one a bit more. And it does
37:12a really cool thing. So, if you grab
37:13end, okay, and drag it right up. Can you
37:15see it kind of like really blurs out?
37:17It's a very cool effect. I don't get to
37:19use it very often. It does work in code.
37:21Okay. So, your developers, he's going to
37:23freak out a little bit about having to
37:24apply it, but it is achievable,
37:26reasonably easy with CSS. And that's
37:28progressive blur. What we're going to do
37:29now is kind of style it how we had
37:31before. Also, there's a little bit of a
37:32recap on some of the things we learned
37:34in the essentials course. Just for those
37:36people who need a recap or if you skip
37:38the essentials course cuz you're already
37:40really good. You might want to check out
37:41the rest of this video in case there's
37:42something you've missed. So, I want to
37:44keep that. Just looks cool. Oh, looks
37:45even cooler against the dark. Love it.
37:47So, what I want to do is I want to make
37:49this square. So, I need to make this
37:51cropped. Okay. So, what I'm going to do
37:52is I'm going to go to fill, which is my
37:55image. So, I got it selected. There's
37:56the fill. Okay. I'm going to click on
37:57image and I'm going to go up to here
37:59where it says fill. I'm going to say
38:00you're not filled, you're cropped. And
38:02then I can drag in this edge here. Okay.
38:04And how big do I want it to be? At the
38:06moment, mine is 1616. Oh, so 116 um
38:10tall. So I'm going to make mine 116
38:13wide. It is a square now. So that's
38:15dragging the edge of it. The edge of it
38:16is the crop. If you drag anywhere in the
38:18middle, you can move it around inside of
38:21the crop. So I'm going to drag mine so
38:22that this is right in the middle here.
38:24I'm going to click out in the
38:25background. And now it's a square. with
38:28this thing. I think I want to play
38:29around with the layer blur, progressive
38:31layer blur, and kind of make it big like
38:33I did in this one. And you can see you
38:35can start it anywhere. Could be here.
38:37Because this is meant to be like a
38:38generic genre listing, not an actual
38:41artist, I might have to kind of start it
38:42quite far in to give the vibe of
38:45hip-hop, but not actually show the
38:46artist. All right, I want to scale it
38:48down. Whenever I scale images, this will
38:50work, but whenever I do scale things, I
38:52use the K tool. So K on your keyboard to
38:56switch from the um move tool to the
38:58scale tool just to scale all the effects
39:00and everything. It's just a really good
39:01habit to be in. That's probably how I
39:03want my one. I'm going to zoom out a
39:05little bit. Okay. I want to add a F key
39:08for this cuz I want a little box for the
39:11genre.
39:13Get it to snap to the top.
39:16Pick a color. Any color as long as it's
39:18green. You can hit the I on your
39:19keyboard for the eyropper. Just grab
39:21that. Oh, it's too blue. I want it to be
39:24a little bit more on the green side. Oh,
39:25that's it. I'm going to type some type
39:27stuff. So, type tool, click once. I'll
39:31actually speed through this cuz you
39:32don't have to watch me type.
39:34One thing I do want to pause and show
39:36you. We did very little speeding. Is I
39:39really like fonts, okay, that are like
39:42Robboto I like because it has a
39:43condensed version. Okay, condensed is
39:45just really handy when you're trying to
39:46fit lots of type in. Can you see it's
39:49actually just, you know, in this other
39:51font, can you see how much wider it was?
39:53Whereas in a condensed font, there's
39:55lots of condensed fonts. You can in here
39:57just actually type in not robboto, just
39:59type in condensed to see all the
40:01different kinds of condensed fonts. And
40:02some of them are super condensed. Like
40:04see that one there? You'll be able to
40:05fit a lot more. There's condensed and
40:07compressed. Compressed.
40:10And compressed is smaller than
40:11condensed. I'm not sure the can't
40:12remember the language, but um what are
40:16we doing? Condensed. Okay. And it's
40:18just, yeah, you can fit more text into
40:20what is a limited space, especially on a
40:22phone, okay? Cuz it's that weird aspect
40:24ratio. It's narrower than it is tall,
40:26right? So, let's undo. So, we got my
40:28thing. Actually, speeding again.
40:31We did no speeding again. I like using
40:33the same font with different weights.
40:35So, still raw, condensed, one is light,
40:37one is bold. Using the hierarchy of
40:40size, less important, more important.
40:42Playing with the weight. Okay. Light and
40:44bold. Again, you can skip ahead if
40:46you're already really good with this
40:48sort of stuff. I'm just kind of I don't
40:49know, adding some extras. Actually, keep
40:51along because there's a the AI thing is
40:53really cool. I'm g play around with the
40:54line height and just drag it to the
40:55left. Not the line height. I'm going to
40:59play with the line height. Select it all
41:00and line height. I'm going to type in
41:04minus 50. Way too much. I'm going to
41:06type in, you see, you can just type over
41:08the top of it. Okay. So, I can type in
41:10minus. Actually, let's just put in 16.
41:12I'm going to hold shift and use my up
41:14arrow just to find something. What are
41:16we doing? 24. I'm using not holding the
41:18shift arrow now. I'm just using my up
41:19and down arrow just to get the line
41:21height where I want it to be. Something
41:22like that. All tips we kind of did in
41:25the essentials course, but hey, we'll
41:27throw them in here at the beginning.
41:28Okay. Escape. Escape a couple of times
41:30to get out of the type tool. I'm going
41:32to click this. It's going to be in here
41:34about there. Now, what I want to do is I
41:36want to make a few of these. So, I'm
41:37going to zoom out. I'm going to grab Is
41:39that big enough? Shift0 on your keyboard
41:42will be the automatic to getting to
41:43100%. Okay, so hold shift one is fit all
41:46in screen. Number two is to select
41:49something and zoom all in on that. So
41:52that's shift two and shift zero on your
41:54keyboard goes to 100%. I like that one.
41:56So the font size is probably big enough.
41:59If I want to just grab them both and
42:00make them bigger, hold the K tool,
42:02remember for scale, just go and they
42:04both get a little bit bigger in terms of
42:06the fonts. Arrow to move it around. All
42:09right, let's make a few versions of
42:10this. So, I'm going to select it all,
42:13grab my uh option key on a Mac, alt key
42:15on a PC to duplicate it. Drag it
42:17straight down. Okay, I'm going to have
42:18one, two, three. That'll do for the
42:21four, five. Okay, for the moment, what I
42:24want to do is can you just click on the
42:27boxes themselves? Let's just see if we
42:29can select on all of these. Okay, now
42:31this is a paid feature. All of this
42:32stuff often is. Okay, see under actions.
42:34Okay, let's go down to H first. So,
42:38let's go to rewrite this. Okay. Click on
42:41it. And I'm going to say, what do I want
42:43you to do? I want you to speed typing
42:46500 of music. Let's see if it can do it
42:49without having to select just a It can.
42:51It's doing it.
42:53It took away all of my other things.
42:57Damn it. Okay. It didn't do that when I
42:59practiced it. So, I'm going to have to
43:00build mine slightly differently.
43:04Mistakes, people. Okay. So, actually,
43:07it's probably always just going to be
43:08easier if I grab you. Put that there.
43:11Paste the text. So, they're in two
43:12separate text boxes. Let's zoom out. How
43:15is my line spacing? A little bit higher.
43:18A little bit higher. All right. Now,
43:20let's do it. So, let's grab U and go U
43:23down here. So, I'm holding the option
43:25key, alt key on a PC, and then I'm going
43:27to go command D. Did I say that before?
43:29Or control D to duplicate the thing we
43:32just did. Okay. How many I got now? Six.
43:33Okay. Now I need to select all just the
43:35text. Okay, I just want just the
43:37hip-hop. I don't want it to change the
43:38word genre. Okay, so with this selected,
43:40I want to select this. So hold shift and
43:42I click on it. It grabs the whole thing.
43:43You're like, no, no, no, no, no. I just
43:44want to grab the text inside of there.
43:46So let's click on this first one. Okay,
43:48this guy here by double clicking him.
43:49Okay, then if you hold shift and your
43:51command key or shift and control, you
43:53can click on you and you and you and you
43:56and you. So I've got them all selected.
43:58Now I can go to rewrite. I can say you
44:01rewrite this. I want you to say speed
44:03typing genres and music. I'm scared it's
44:05going to replace my first one that says
44:07hip-hop. It is, isn't it? That's okay.
44:11Oh jeez.
44:13Make changes. Two words only.
44:18Way too long. It's cool, huh? So good
44:21for placeholder text. I like it.
44:23Probably have to pick. It's really good
44:24as well because you get a sense for how
44:25long some of the things are going to be.
44:27So you're like, "Oh, that was cool for
44:28hip-hop, but all of these really need to
44:30be a smaller font size. probably 24 to
44:32be able to fit everything in. Oh, we did
44:34a lot in this course, huh? We came for
44:36progressive blur and now we're using AI.
44:38We're learning all sorts of cool
44:39shortcuts. It's the advanced course.
44:41This is awesome. It's full of uh soul
44:43beats and bass vibes and tool gurus. All
44:45right, that is it. I will see you in the
44:47next video. All right, it's first of the
44:50class projects time. Okay, so um the
44:53class projects are listed inside of the
44:56exercise files. There's a PDF called
44:57class projects. Okay, it'll look
44:59something like this. And this is the
45:00first one. Okay. So I want you to create
45:02a mobile phone frame. Basically I want
45:03you to remake what we did in the last
45:05tutorial. Okay. So this thing. Okay. But
45:08specifically for your brief. So mine is
45:10limrich hiphop. Okay. So I want you to
45:12focus on that and then find out whatever
45:14the sub kind of genres are for it. Like
45:17this for instance. So techno. Uh you
45:19might have dub techno acid industrial.
45:21These are all types of techno. Okay.
45:23Rock. There's a lot of subcategories.
45:24You don't really know the music genre
45:26you're working with. Do some googling.
45:27better you will find there are
45:28subcategories of it. If not, make them
45:30up. That's not really what's important
45:31here. I want you to experiment with the
45:33progressive blur. Okay? So, I don't mind
45:36how you do it. Okay? You can do it
45:37exactly like I've done it. Just play
45:39with it. I don't mind how you do it. Um,
45:41if you do have the pro account, okay,
45:43I'm going to assume in this course you
45:44do have the pro account. If you don't,
45:46you can totally carry on with it. Not
45:47going to apologize every time saying if
45:48you don't have it, try and find a
45:50workaround, okay? Because you can, okay?
45:52If you can't do the AI features with
45:54rewrite this, that's okay. You've seen
45:56how it works. you might use chat GBT
45:58instead which is free. That's the main
45:59thing which everyone has. Okay. But the
46:01AI features and some of them in this
46:03course are pro only. Um but if you do
46:05have them go play with them have a play
46:07around with rewrite this. Okay, which is
46:09when we did the text and I did it with
46:10the images as well. You can select on
46:12these and either go to the actions and
46:14go to make an image or you can select on
46:17an image already go to the fill and say
46:19make an image. Okay. And you can use AI
46:21to create the image or go to something
46:23like Unsplash or Pixels. you will find
46:25lots of free images that you can use for
46:27filling out your uh prototype. Okay,
46:30where's the class project? So, uh you
46:32need to do that. Definitely do
46:34progressive blur. Play around with the
46:35AI features deliverables. I want you to
46:37take a screenshot or export your image
46:39and upload it to the class projects. Uh
46:42screenshot on a Mac is command shift 4
46:44and you can kind of drag a box around
46:45it. You can do something similar on a
46:47Mac with print screen. I think that's
46:48how you do it. I know there's another
46:50shortcut for PCs. You'll probably know
46:52what it is. If you don't, okay, you can
46:54just export the image. So, I can select
46:55on this. Ooh, it would look really good.
46:58Oh, I didn't think of this. If you went
46:59to present and it was in a phone, we
47:02learned earlier how to turn that on.
47:04This would look cooler, huh? Do a
47:05screenshot for this otherwise. Okay. Uh,
47:08if you're not sure how to screenshot,
47:09you can click on the frame. Go down to
47:12uh is it export? Okay, I want to export
47:14this whole frame. Scroll down again.
47:16What kind of size? Just at one size. And
47:18I'm going to do a PNG. I'm going to
47:20click export iPhone 16. And there you
47:22go. You can use that file to upload to
47:24the class projects um for the class
47:27project. Yeah. Um because everyone's is
47:29unique and it's kind of an interesting
47:30project. Um I'd love for you to share it
47:32on social media. Okay. Tag me with um
47:35both the hashtag Figma advance so I kind
47:38of makes it easier for me to kind of
47:40group and look at specific um courses.
47:42But make sure on Instagram, the Facebook
47:44group, Twitter, make sure you tag me at
47:45these handles here. Okay? Whichever use
47:47your normal flavor, okay? Maybe you're
47:49an Instagrammer or a LinkedIn or a Tik
47:50Tocker, up to you. But I'd love to see
47:52it. All right, have fun. It is mainly
47:55just about playing around with
47:56progressive blur. You could go a little
47:58bit further and make this a lot cooler
48:00in terms of a genre page. We're keeping
48:01it light for those of you who don't have
48:03much time, but if you're ready to play,
48:05you can make this page a little bit
48:06nicer. If you're unsure about how to do
48:08these, you know what do I just copy?
48:10Damn, what should I do? Um, you can have
48:11a little look online for some
48:13inspiration. A good term is something
48:15like UI card. We'll just go through the
48:17um back at home. Okay, you can go
48:19through the templates. Just have a
48:21little look. So, I might go listing.
48:24That didn't really work.
48:26You can kind of see there some different
48:28ways of cards is probably um better.
48:32Cards is the generic term for like
48:34anything inside of a box. Okay. And you
48:36can start to see some interesting kind
48:38of maybe even feature cards. Let's do
48:40that. Feature cards. Even better. A
48:43little bit more specific. Okay. Okay.
48:44And you can see some things like, oh, I
48:46might do that with this and there on the
48:48bottom. Okay. Up to you. It can be
48:50simple, can be complex. Looking forward
48:52to seeing what you make. All right.
48:53Class project over. I'll see you in the
48:54next video.
48:57Hi everyone. We are going to turn the
48:59effects that we made in the last video
49:01into a style so that we get to reuse
49:03them and we get to change them all at
49:05once. Watch this. I'm going to go to
49:06uniform to perspective. Actually, the
49:08word is progressive. Okay. But we have
49:11control over them all. And then I'll
49:13show you how to remove any style
49:14libraries that have been added to your
49:16file that get a little bit confusing.
49:18Styles that you didn't ask for. And then
49:20I'll show you how to remove all the
49:22styles that you didn't ask for that all
49:23just appear in your libraries. You're
49:25like, where do these come from? I'll
49:26show you how to clear them out so we've
49:28only got the things we've created as
49:30styles. All right, let's jump in. All
49:32right, so in the last video, we made
49:34some styles. I made a couple. I made
49:35some drop shadow ones as well, but let's
49:37take this progressive blur. Okay, you
49:39can see it here. It's been applied to my
49:40effects panels. Okay, these four little
49:42dots, okay, is the way we can create and
49:46use uh styles. Now, we're doing it for
49:48effects. We can do it for stroke and
49:50fill and anything that has little dots
49:52on it. Okay, so I'm going to click on
49:55effects. Okay. And I'm going to say I
49:57would like to add a new style effect.
50:00Okay. It's different from hitting the
50:01plus over here. Okay. Okay, we go into
50:03the dots, hit plus, and we say, "Yeah,
50:05we're going to call this one. I'm going
50:06to call this one my
50:11call this one 01 cuz I'm bound to create
50:13another one and another one and I need
50:15to differentiate them. Sometimes I'll
50:17put the client name in front of it just
50:19so I know I'm kind of that's the version
50:21of drop shadow that I'm using for bring
50:23your laptop or whatever company it is."
50:25Okay, you can describe it down here as
50:26well. Let's click create style. The cool
50:28thing about it is that we can go through
50:30and say, "All right, new thing that we
50:33draw. Going to grab the F key."
50:34Remember, progressive blur only works on
50:36our frame. No, that's something else.
50:38Oh, that's the glass effect. Okay. So,
50:41I'm going to go to effects here. Instead
50:42of hitting plus and kind of going
50:44through and setting it all now, I can
50:45just go to uh the little dots. Okay.
50:48Under effects, and I can say progressive
50:50blur. There you go. Done. Reusable. The
50:52other cool thing about setting styles is
50:55that let's say that let's apply these
50:57styles. Oh, they're already applied.
51:00That one's progressive blur. That one's
51:02got layer blur. Progressive blur. Layer
51:03blur. Progressive blur. No, that one's
51:05got it. Oh, cuz I created the style from
51:07this one. These ones don't have it
51:09applied. So, I'm going to apply all of
51:10these ones. Okay. I'm going to say I
51:12would like to remove the effect and I
51:14want to apply not the random layer
51:16effect. I want to create I want to add
51:17the thing that I've made called
51:19progressive blur. All right. So, now
51:21they're all connected. What I would like
51:22to do is change them all at once. Okay,
51:24so I got nothing selected. Absolutely
51:26nothing. You can see over here, as long
51:28as I'm in design, you might be stuck on
51:30draw or div. Okay, make sure you're on
51:33this design one. Okay, under design, you
51:35will see all your styles listed, okay,
51:37that you've used. The cool thing about
51:38it is I can say, oh, look at this. Got a
51:40little settings here. I can say edit
51:41this style. Okay, I can go into it and
51:43say you I would like it to end.
51:46Actually, what's going to be more
51:47obvious? Let's go to uniform. Okay, so I
51:49switched it to uniform and they've all
51:51updated. That's a great way of
51:52controlling a really large document.
51:54Okay, create a style and then you get to
51:56edit it by having nothing selected and
51:57go through your styles. Okay, I just
51:59wanted to recap that we didn't do it in
52:01the essentials course for effects, but
52:03we did it for lots of other things. If
52:04you're skipping straight to the advanced
52:06course, what you'll find is let's say
52:07I've got this. It's a color that I like.
52:09Okay, instead of typing it out every
52:11time, you can go to styles, do the exact
52:13same thing, and hit plus. And this is
52:15going to be my primary
52:18primary color. Okay? And I can create a
52:19style. And then I can start reusing that
52:21when I draw a new frame. I can just go
52:23into here, hit the styles button, and
52:25bam, we got primary color. Okay? So
52:27that's all we do for that. Right? The
52:29next thing I want to show you is I want
52:30to show you how to remove some of the
52:32default libraries that are giving you
52:34style suggestions if you want to clean
52:35those out. Okay? It might be just there
52:37by default. It might be there cuz you've
52:39opened up somebody else's document.
52:41Maybe a larger project you want to kind
52:42of clean up. So, what we'll do is we'll
52:44click on this one. Okay. And if I hit
52:46the uh under effects, okay, I'm going to
52:50actually it doesn't matter which style
52:51we go for. I'm going to go for the fill.
52:52Okay. What you'll see is like, can you
52:54see there's lots of other ones down here
52:55like where did these come from? Okay.
52:57You might not have anything. Okay. But
52:59you might have this giant list already.
53:01And you're like, actually, I just want
53:02to tidy that up. You can go to all
53:04libraries. Okay. And you can go to the
53:06ones that are created in this file. It
53:07will just tidy them up. So you're only
53:09showing the ones in this file, not all
53:11libraries that you might have as part of
53:14your kind of job. We'll do libraries
53:16specifically later on, but it's just
53:18nice to tidy things up early on. So have
53:20a look at this one. Let's break the link
53:22to the style. Let's go into here. Okay,
53:24the same thing under here. Okay, my fix
53:26styles. There's all sorts of stuff in
53:27here. So I can go into my library. Okay.
53:30And say actually I don't want I'm going
53:32to remove the libraries um from this
53:35this this
53:37go back. I'm going to remove this one
53:40and this one. These are team libraries
53:42that have been shared with me in this
53:44document. We'll cover team libraries
53:45later on. But sometimes you just want to
53:47tidy them up. Go away. And I've only got
53:49progressive blur now. Nice. All right.
53:51So that's adding uh effect styles and
53:53just styles in general. The benefits of
53:55them. It means that once they're
53:57applied, well, first of all, you get to
53:58apply them really easily. And once they
54:00are applied, you get to edit them all at
54:02once. Uh, and we looked at clearing off
54:04any uh styles that are connected to your
54:06document that you didn't ask for. All
54:08right, that is it. I will see you in the
54:09next video. Hi everyone. In this video,
54:11we're going to look at all the tips and
54:13tricks that I can think of. I'm going to
54:15cram them all into a video. If you're
54:17already good with tips and tricks, you
54:18can skip along. It's a very long video.
54:21I feel bad, but there are a lot of tips
54:22and tricks. Uh, and a bonus for anybody
54:24that waits to the end, I'll show you
54:26this. It's like a little keyboard that
54:28I've got um for Figma, and I'll show you
54:30what it's useful for. It's very cool,
54:32but it's a bonus for sitting through all
54:34the tips and tricks. This is either
54:35going to be your most valuable video for
54:37the course or you might not off cuz it's
54:39so long. Uh, let's jump in. Good sales
54:41pitch, Dan. Hairy hands alert.
54:44Video time. Right, to get started, open
54:46up any old file. We're going to open
54:48something quite complicated to kind of
54:49prove all the great uh shortcuts. Um in
54:52your exercise files, there is a link
54:54here called workflow demo. You can open
54:56up anything. I just really like this
54:58file. It is in your exercise files. It
55:00is called workflow 01. Okay. Either way,
55:02you'll be here inside of uh Figma. Okay.
55:06And over here on the pages, let's go
55:07down to the design. Okay. We'll cut to
55:09this one. This is the one I like. Very
55:11cool. The problem with starting with
55:12somebody else's uh file, okay, or
55:14working for a large company is that uh
55:17sometimes it could be quite complicated
55:18to change any old thing, especially when
55:20there's no styles. What you can do
55:21though is one of the easy ones is to
55:23select a whole chunk of stuff. Okay? And
55:26over here, instead of playing with a
55:28fill cuz you've got mixed things
55:29selected, obviously you got loads of
55:31things selected. What you can see here
55:32under selection colors, okay, if you've
55:34got a lot selected, there might be a
55:36little drop down like this, but you can
55:37see here, here are all the colors inside
55:39of there. There is my primary color or
55:41my accent color. I'm not sure exactly
55:43what they've called it. Actually has no
55:44name. Just got the hexodimal number. So,
55:46we can click on this and say, actually,
55:47I would like you to be green or blue.
55:50Okay. It's just a real quick way of
55:52working with lots of files rather than
55:53doing the dreaded uh shift click, click
55:57on that one, hold shift, grab that one.
55:59Who's done that? That takes too long.
56:01Another really handy one is uh let's
56:04click on this box here. Okay, I'm zoomed
56:06out quite far. I love the shortcut shift
56:082. Okay, that will zoom in to whatever
56:10you have selected if you have a tiny
56:12thing selected. So, if I hold command
56:14and click on this little dot that jumps
56:16inside the group. Okay, that's control
56:17on a PC, command on a Mac. And if I hit
56:20shift two, it's not really that useful.
56:23Okay, so shift one is because it zooms
56:25it out to show everything. Shift two
56:27right into the thing you have selected.
56:29Shift zero is 100%. That is a really
56:32good one. So, shift one, two, and zero.
56:34One is everything on the document. two
56:36is the thing you have selected and zero
56:38is 100%. Perfect. Okay, let's click on
56:42let's say we've got this here. Let's
56:44click I'm holding command on my Mac,
56:45control on my PC. That just jumps in cuz
56:48there's a group inside of a group inside
56:50of a group inside of a group and you
56:51might die for all the double clicking.
56:52Okay, so you have nothing selected. Just
56:54hold down command or control, click on
56:55that. Then you can go up to edit. Okay,
56:57and there's a select all with. This is
57:00super handy. You can say actually I want
57:01to fill I want everything that has the
57:03same text properties. Okay. And it's
57:04gone through the entire page that we're
57:06at. Let's zoom out a little bit. What
57:08else is there? It's just those guys. But
57:09it just means I don't have to go and
57:11shift click them all. I can say actually
57:12we're going to use uh I don't know, Acme
57:15for this one. Oh, I don't like Acme. I'm
57:17wrecking this man's work. I think he's
57:19under introduction. There he is there.
57:20Jish Patel, you made a cool template.
57:22Thanks for sharing. All right. Uh other
57:24cool tips. So, let's come down and let's
57:27grab one of these buttons. I'm going to
57:28double click away. Okay. This is a bunch
57:30of stuff. It is more than just text. has
57:33got a padding around it. So you can go
57:34to edit and select and there's a bunch
57:37of other different options in here. We
57:39won't cover them all, but imagine if it
57:40has a drop shadow. You could go through
57:42and pick everything that has the same
57:43effect. Just going to go to same
57:45properties. Okay. And it's picked every
57:46component that kind of looks the same.
57:48Properties a bit more generic. Okay.
57:50It's got the same fill color plus the
57:52padding plus the corner radius. I think
57:54that's it for the whole document. Let's
57:56try one more. Let's grab this circle
57:58here. Let's go to edit, select with, and
58:01let's go to fill. And you'll find that
58:03lots of this document has the same fill.
58:05Kind of similar to what we did before by
58:07using the selected color. Very cool. One
58:09of the things I get asked is, you see
58:11how Jish has split everything with these
58:14pages here? Let's go back to one of our
58:16old files. I'm going to go back to this
58:17one we made. Okay, I've only got one
58:19page. What we can do is page dividers.
58:21So, I've got this one. This is my hi-fi.
58:24Let's speed through this.
58:26Okay, so I'm going to have a components
58:28page. page. It's going to be the top. I
58:29want to separate it from my kind of
58:31working docs. So, I'm going to add a
58:33page. And all you do is page three.
58:35Okay. To divide these up, you can put
58:37the hyphens in like J did or I like to
58:39hold shift and hit the underscore
58:41button. And it kind of looks more like a
58:44page divider. If you want to get even
58:45fancier, okay, you can add emojis to any
58:48of these. Say components. You want to
58:49find something. Actually, do it to
58:51mobile here. On a Mac, it's control
58:53command spacebar. Okay. And this will
58:56pop up. Okay. It's little emoji guy. And
58:59you can double click on any of these. So
59:00I'm going to type in mobile and find
59:03something mobile phony. Oh, is that a
59:05mobile phone? Yeah. Okay. Double click
59:07on it and it will go into wherever you
59:09have your cursor going. So you double
59:11click. Oh, got two of them. Okay. On a
59:15PC, it is have your cursor flashing
59:17inside of here and then hold down the
59:19Windows key and hit either I think it's
59:22period or semicolon. One of those two.
59:24That looks nothing like a phone. You get
59:26the idea. And for components, you got to
59:29put puzzle pieces. There you go. All
59:31right. Hiding the UI is useful. It's
59:33command and backslash. Okay. Or control
59:36backslash on a PC. Okay. It just hides
59:39it while you're working. Doesn't change
59:41anything. You can still work if you know
59:42your shortcuts. Any of these shortcuts
59:44have changed, okay, while uh in between
59:47recording this video and where you're
59:48watching it. Have a look at this
59:49question mark down the bottom. Go to
59:51keyboard shortcuts and just have a look
59:53through there. They'll explain all of
59:55the different uh shortcuts. They're blue
59:58if you've used them. Okay, they're dark
1:00:00if you haven't used the shortcut. Okay,
1:00:03there you go. So, I'm going to turn my
1:00:05UI off cuz once you've got the UI off,
1:00:07it becomes a little bit tricky to use,
1:00:08but you've got more space, especially on
1:00:10a laptop. But that's where the uh super
1:00:12most awesome shortcut that ever lived
1:00:14is. Okay, it's called the quick actions.
1:00:17Okay, it is basically um a shortcut to
1:00:20getting to this button here. Okay. So,
1:00:23uh, let's close it down. Um, so the
1:00:25quick actions, let's go. The one I use
1:00:28it for the most, it's pretty boring. I'm
1:00:30going to command or control-click the
1:00:32word, uh, I'm Jenny. Okay, just the top
1:00:34here. And I'm going to use my quick
1:00:35actions, which is command K or control K
1:00:38on a PC. I'm going to type uppercase.
1:00:39Okay.
1:00:41Otherwise, that menu takes forever to
1:00:44find uppercase. But you can use it for
1:00:45anything. Anything in any of the menus.
1:00:48I'm click this top menu bar here. Okay.
1:00:50And I'm going to say command K. And I'm
1:00:52going to say rotate K 90° to the left.
1:00:55Not sure why. Okay. But the everything
1:00:56is in there. Last one. Command K. And
1:00:59let's translate it to I don't know.
1:01:01Let's go to uh Portuguese. There you go.
1:01:05Undo. And done. Not everyone might have
1:01:08translate. It might be a pro feature now
1:01:09that I think of it. But as a case,
1:01:11that's free for everyone. Okay. Who
1:01:12remembers how to turn the UI back on?
1:01:14Let's write command or control
1:01:15backslash. That's where it's leaning
1:01:17back, not forward slash. All right. The
1:01:19next is a relatively new update. Okay,
1:01:21I'm going to commandclick this button at
1:01:23the top here. Okay, it is a component of
1:01:25a master. I didn't make it, so I have no
1:01:27idea where it is. Or imagine if there
1:01:29was a great shortcut. Ready? Shortcut
1:01:32toggle back and forth. What is the
1:01:33shortcut? Okay, it is on a Mac, you hold
1:01:36down all the buttons, command, option,
1:01:38control. All three of them in the bottom
1:01:39left. Okay, and hit K. On a PC, it's uh
1:01:43slightly different. It's control
1:01:44altshift K. Have a look at your
1:01:45keyboard. It's a hard one to remember,
1:01:47but if you are doing a lot of kind of
1:01:49adjusting uh components like I do, you
1:01:51will like the shortcut and you will get
1:01:54used to it. Remember, there'll be a
1:01:55shortcut sheet in your exercise files
1:01:58that I'll put all of these in. I just
1:02:00love being able to toggle back and forth
1:02:02really quick. Anything else? Got any
1:02:03other components? This one here. You're
1:02:05not
1:02:10This one is all the buttons plus K.
1:02:13Toggle back and forth. Another new one
1:02:16is you can copy and paste styles. Now,
1:02:18we've only made a couple of styles here.
1:02:20Okay. But if you've made a bunch for
1:02:21your document, you can click on them,
1:02:22copy them. Okay. And you can select
1:02:24multiple ones. I don't have multiple
1:02:26ones. Make multiple ones. Dan, wait
1:02:28there. Draw shadow. Okay. So, I can
1:02:30select two of these guys. Okay. Just
1:02:32click on the top one, hold shift, grab
1:02:33this bottom one, right click it, and I
1:02:35can say copy styles. Move to another
1:02:38document. Have nothing selected. And
1:02:40then just hit your normal paste. Okay.
1:02:42Uh, command V on a Mac, controlV on a
1:02:46PC. Okay, copy and pasting any sort of
1:02:48style. Nice. All right, let's do some
1:02:50super fancy field work. I'm going to go
1:02:52back to the document I was working at. I
1:02:53have no idea where everything is. Oh, I
1:02:55created a new page. There we go. Um,
1:02:56let's look at all the fields. So, let's
1:02:59start with a title. You wait them. All
1:03:01right. So, I've added a bit of text. Uh,
1:03:02all of these fields are adjustable by
1:03:04just clicking in them. Okay. And just
1:03:05using your up arrow. I like this when
1:03:07I'm picking fonts cuz I'm not actually
1:03:08sure what size I'm doing here. I'm just
1:03:10holding the um up arrow or the down
1:03:12arrow. So just click in any of them.
1:03:14Okay, you could do it with uh what
1:03:16letter spacing as well. Just use your up
1:03:17arrow. Okay, or your down arrow.
1:03:20You can do it for any single field.
1:03:22Okay, so this here, this position here,
1:03:24let's say X and Y. Okay, up and down
1:03:27moves it left and right. If you want to
1:03:28go in bigger chunks, you can hold the
1:03:29shift key. Okay, it's the large nudge or
1:03:32big nudge. Okay, and it will go up in
1:03:34multiples. Can you see here? Of eight.
1:03:36That works for anything. Rotation, I
1:03:38wanted to go up. Okay, it doesn't do an
1:03:39eight, but the the holding shift does
1:03:41one. Okay, just holding nothing down
1:03:43using your arrow key moves it in ones.
1:03:46Okay, but if you hold shift, it'll move
1:03:47it in a bigger chunk. Okay, a lot of us
1:03:50are using the eight point grid. Okay, so
1:03:52when we are moving things along like
1:03:54position, okay, it'll go in let's start
1:03:56at 100. Okay, and click in here, hold
1:03:59shift. Okay, you can see it's gone up an
1:04:00eight, down an eight. Let's move this
1:04:02over so it's a little easier for the uh
1:04:05editor. Sorry, editor. And saying that,
1:04:06I'm going to zoom right back out and
1:04:08we're going to go to preferences. So go
1:04:09to little F, go to preferences, and down
1:04:12the bottom here, something called the
1:04:12nudge amount. Okay, by default, it's at
1:04:15one. That's just using arrow key. Okay,
1:04:17or eight if that's if you hold shift.
1:04:19You can change it back to 10. That was
1:04:21kind of the default for a while there.
1:04:23And a lot of other programs. I like
1:04:25eight because it's really common kind of
1:04:26spacing uh for mobile and web. And it's
1:04:29the same when you have nothing selected,
1:04:31not using any of the fields. You can
1:04:32click in here and just use your arrow
1:04:34key just to move it around. Hold shift
1:04:36to go in bigger chunks. Eight pixel
1:04:39chunks. You can drag on all of these
1:04:41fields as well, okay? Especially the
1:04:42ones that have the icon. Can you see
1:04:44here? You can just drag the icon left
1:04:45and right instead of having to use your
1:04:47keyboard. Okay, you can just drag it
1:04:48back and forth if you're more of a
1:04:49dragger person. Some of them don't have
1:04:51icons. Okay, that one does. I don't have
1:04:53any layer height, so it doesn't really
1:04:55work. Opacity, just drag that back and
1:04:57forth. Okay, the ones that don't, you
1:04:59can hold down the option key on a Mac,
1:05:01alt on a PC, and they still will drag
1:05:03even if they don't have an icon. If you
1:05:05love doing that type of thing and
1:05:06there's no icon like this one does.
1:05:08Okay, you can just hold down the option
1:05:09key on a Mac. Alt key on a PC. One of my
1:05:11favorite things is flipping it upside
1:05:14down. Nope. And let's go and F key for
1:05:17the frame tool. Let's say you draw
1:05:18something from side to side. Okay, let's
1:05:20give it a fill.
1:05:22Oh, you can use them in here as well.
1:05:24Watch this. I can use my cuz I'm on HSB.
1:05:27It's up to you what you want to be on. I
1:05:29prefer HSB. Okay. So, if I want to
1:05:30change around with the hue, saturation,
1:05:32brightness. So the hue I want, let's go
1:05:35to the brightness. Okay, it's really
1:05:37bright. Okay, it's in the top right. You
1:05:39can just use your down arrow. Can you
1:05:41see it comes down down less bright, less
1:05:43bright, less bright.
1:05:46Okay, and in bigger chunks, if you hold
1:05:47shift instead of trying to go, all
1:05:48right, let's say that it is about there
1:05:50and you want to bring it down, you can
1:05:51just kind of grab this one and come
1:05:53straight down rather than doing the old
1:05:55uh drag diff go straight, go kind of
1:05:58straight.
1:06:00The reason I want to do this as well is
1:06:02I want to show you the other field trick
1:06:03is let's say I need to divide that into
1:06:05three parts which is tricky. My brain
1:06:07doesn't work like that. So I'm going to
1:06:08find the dimensions. So it's a width.
1:06:10Perfect. You can do divide by which is
1:06:12for slash3. There you go. Now I've got
1:06:15three separate boxes divided by three.
1:06:20There you go. You can do all the math.
1:06:22You can say actually I want this to be
1:06:24just let's say you want to put uh you
1:06:26want to shrink it down a little bit each
1:06:28side. So you want a minus eight from
1:06:30each side. So I'm going to say minus 16.
1:06:32Okay. And it's a little bit smaller now.
1:06:348 pixels either side. Give yourself a
1:06:36little margin. Can't do rotation things.
1:06:39Get confused by 90° and 45 all the time
1:06:42like I do. You can say, "All right, I
1:06:44want 360 / 4." All right, it's 90, not
1:06:4845.
1:06:49All right, let's talk about some of the
1:06:51hard uh symbols to find. Okay, I'll
1:06:54paste them on the screen here. They're
1:06:55called smart symbols. Okay. And those
1:06:58are the ones that are there at the
1:07:00moment. I'll add this to the shortcut
1:07:01sheet. Okay. But let's say pick a path
1:07:03here. I'm going to rotate this back
1:07:05around where we're at. 12° zero. Um, so
1:07:08if I'm typing in here, you have to type
1:07:10them in order. And they have to look
1:07:12exactly like the top bit there. So if I
1:07:13go bracket C, lowerase C, and now the
1:07:16bracket, it'll instantly give me a
1:07:18copyright symbol. You can see how this
1:07:20is going to go. Capital R, it'll go
1:07:22through and give me the uh registered
1:07:24trademark one. Those are handy. Probably
1:07:26the ones I use the most are the kind of
1:07:28arrows. It's hard to find in the font
1:07:29sometimes. And you can see it's just
1:07:31dash and r greater than, less than,
1:07:33whatever that one is. The down arrow is
1:07:35weird. Is vb.
1:07:39There you go. It's a down arrow. Up
1:07:41arrow is the key I can never find on my
1:07:43keyboard. Please hold. There it is. On
1:07:45my keyboard under the six. Uh editor
1:07:47would have uh fast forwarded that, but
1:07:49that took a long time. So, I'm going to
1:07:50have to hold shift and I'm going to go
1:07:5266 and then space. Okay. Okay, you have
1:07:54to put a little bit afterwards otherwise
1:07:56it doesn't do it. And the last one is
1:07:57the square. Okay, just we go. Square
1:08:00brackets left and right. Had space. Oh,
1:08:03looks like there have to be a space in
1:08:04between them. I don't use this one
1:08:05obviously. There you go. So square
1:08:07bracket space closing square bracket.
1:08:09There you go. Just some of the uh smart
1:08:11symbols. Okay, for all the fonts. Right,
1:08:13the next one. Shortcut for component.
1:08:15Select all of this. I'm going to go
1:08:17command option K on a Mac. That's
1:08:19control K on a PC. Okay. And I we looked
1:08:22at this earlier is if I start dragging
1:08:24this around, it really wants to jump
1:08:26inside of things. Okay, you're like,
1:08:27"All right, that's cool, but don't go
1:08:29inside that frame. Don't go inside that
1:08:30component." Okay, remember you click it
1:08:32to start dragging it. Then hold space
1:08:34bar and move it around. And you'll see
1:08:36it will not in the layers panel there.
1:08:37It will not go through and try and jump
1:08:39and be part of other layers. Another
1:08:41nice easy one is command one. Okay, it
1:08:43gets you back to your little home option
1:08:45unless you're on the browser. That'll
1:08:47just get you back to the first tab in
1:08:49your browser that you have open. If
1:08:50you're inside, it kind of works in a
1:08:52browser except it just jumps to the
1:08:53different tabs. Okay, command one, two,
1:08:55three, whatever tabs are open in your
1:08:57Chrome browser or whatever you're using
1:08:59inside of Figma the app. It does a
1:09:01similar sort of thing. See these tabs up
1:09:02here? I can go command one for the home,
1:09:04command two for that document, command
1:09:06three. So I can go two and three, two
1:09:08and three. Okay, it's holding command or
1:09:10control on a PC and just kind of toggle
1:09:12between the different tabs that are
1:09:14open. If you do have a tab that's kind
1:09:16of like more, say you're pulling
1:09:17components from like a library or some
1:09:20sort of file that you need to pull from
1:09:21all the time, you don't want it up here
1:09:23or you want to turn it into a tab, you
1:09:25can right click and say pin that tab.
1:09:26You can see up there just becomes like
1:09:27this little icon. Okay, makes it smaller
1:09:30and it's harder to close. You can close
1:09:33it though. That works on the browser as
1:09:35well. Okay, you can pin tabs. That's
1:09:38just kind of a normal Chrome type or
1:09:40Safari thing.
1:09:42You can unpin them. You can reorder
1:09:44these as well by clicking, holding, and
1:09:46dragging them. Okay, often like I'll
1:09:47open them up in funny orders. Okay, you
1:09:49just want the one that you're pulling
1:09:50from to be at the front here. Even if
1:09:52it's not pinned, you can just drag it
1:09:53around. Okay, so it's at the beginning.
1:09:56If you are working with the same files
1:09:58over and over and it's kind of a pain to
1:10:00figure out where they live every single
1:10:02time you're like in my recents, let's
1:10:03say it's this uh Limick Techno one, you
1:10:06can add it to the sidebar. Okay, it's
1:10:08favorites. Click it there and you'll see
1:10:09there it is there. Limick Techno. So,
1:10:11whenever you open up a new document,
1:10:12you'll have some that are in there that
1:10:14you use all the time. Okay, it doesn't
1:10:16matter where you are in your project as
1:10:18well. Okay, if the home screen or if
1:10:20you're on the browser, go to I keep
1:10:23forgetting I'm in the browser now. You
1:10:24can go to the one that says back to
1:10:25files. Okay, and you get back to the uh
1:10:28home screen instead of clicking on home
1:10:29screen. Let's close it down. Okay, it
1:10:31doesn't matter where you are. See these
1:10:33three little dots? These are handy.
1:10:34Okay, these just have all your recently
1:10:36closed files instead of having to go
1:10:38back to recents. So, I'm not sure if
1:10:39that's a saver, but there it is. Another
1:10:43one is if you're working with really big
1:10:44files or a really old computer, okay,
1:10:47you can figure out what's actually
1:10:48causing it to run slowly. Okay, you can
1:10:50go you have to be inside the dock in
1:10:52question. Okay, that may be running a
1:10:54bit slow and you can go to the F, go
1:10:56down to view, and there's one called
1:10:59memory usage. It kind of appears over
1:11:01here. You can see it's using 2% of my
1:11:03memory, which is not much, so it's fine.
1:11:05Okay, yours might be maxing out. And if
1:11:07that is the case, you can click on
1:11:08manage memory and you can figure out
1:11:09what is actually causing you the
1:11:11problems. So the page content is doing
1:11:13most of the work and imported components
1:11:15from other places are doing a little bit
1:11:17of that. Gives you some tips. You can
1:11:19turn this on as well. If it is, say it
1:11:22is uh page contents is doing really
1:11:24badly. Okay, it's up to 80% and
1:11:25everything's a bit sluggish. You can see
1:11:28in here it'll turn it on for every
1:11:30layer. Can you see uh which one has
1:11:33little dots here? None of my layers are
1:11:35doing anything. You can see this frame
1:11:37has got 2%. You can kind of work out
1:11:40what might be causing your problems.
1:11:41Often it can be SVGs, really complex
1:11:44ones that you've imported. You just got
1:11:45them from a free site and they just
1:11:46turns out they're like really poorly
1:11:49made. There you go. You can see the
1:11:50suggestion here. You can uh flatten the
1:11:52SVGs or it might mean you have to pull
1:11:54some of the pages out and make two and
1:11:56make more than one document. My
1:11:58machine's running fine. So, let's close
1:11:59that. Last thing before I show you the
1:12:00keyboard is you can actually drag this
1:12:02panel out often, especially when you got
1:12:04kind of complex layers here. You can
1:12:05drag this right out so you can see them
1:12:06a bit easier. Okay, but also under your
1:12:09assets panel once that starts getting a
1:12:11bit kind of mad. I'm going to look at
1:12:13the assets for this file. Okay, don't
1:12:16have a lot, but you can start searching
1:12:17for it. Okay, you can start searching
1:12:19for there's an icon in here that I know
1:12:21what it's called cuz I named it really
1:12:22well. It's called export. Okay, and you
1:12:25can search in here and it's this one
1:12:26here. It's this guy here. This works
1:12:29only if you've been naming all of your
1:12:30assets. You'll notice in this one here,
1:12:32components, there's a lot of frame 64.
1:12:36Not good. And when they do get big, you
1:12:37can go into here, okay, and you can
1:12:39adjust the filtering by say, let me just
1:12:41show the lists, okay, just to make it a
1:12:43little bit easier to figure out where
1:12:44everything is. That search works under
1:12:46file as well. You click search, and
1:12:48let's say I want the stars that I know
1:12:50are in here. There they all are. Okay,
1:12:52they're all through my document. Okay,
1:12:54but I can select them all now. Or I can
1:12:56click on them and say go to here. Okay.
1:12:57But I can start clicking on all of these
1:12:59stars. Wow, there's a lot of stars used.
1:13:02Okay. I can select them all, delete
1:13:04them, remove them. Oh, there they are
1:13:06all down there. So, when your layers are
1:13:07getting real long, this is easy. Or if
1:13:09you need to find, let's say, this one
1:13:11here. Okay, I can go to search and I can
1:13:14find the text with the words L. I don't
1:13:17even know what that means. Very.
1:13:20Okay, so you can search in your layers
1:13:22panel as well. Just got to remember to
1:13:24turn it off by hitting the cross.
1:13:25Otherwise, you'll be stuck with just
1:13:26those. The pages panel, okay, can be
1:13:29made bigger or smaller. Okay, by
1:13:31default, you get this really tiny little
1:13:33slot, which can be a bit tricky.
1:13:35Sometimes you don't want to see them all
1:13:36as well. So, you can make it smaller.
1:13:38All right, let's look at the cool Figma
1:13:39keyboard. All right, so it's this here.
1:13:42Okay, this is the work louder. Okay,
1:13:45Figma Creator Micro. I think that's what
1:13:48they call it. And all it is is just
1:13:50super awesome shortcuts. Um, so you can
1:13:53see here you can program it to do
1:13:55anything. Okay. So we've got scrolling,
1:13:59zooming. Okay. And you've got automatic
1:14:01shortcuts for create a component, scale
1:14:04tool. I love. All right. That's
1:14:05component. You can program them to do
1:14:07everything. I don't use them all, but
1:14:09it's just handy. Okay. Especially when
1:14:10you're using Figma all the time to plug
1:14:12that in. Also a beautiful bit of desk
1:14:14art. It comes with a bunch of different
1:14:16buttons. Okay. So you can kind of get it
1:14:18to do what you want. Now, actually, not
1:14:22all of you have seen my office, right?
1:14:23This is what it looks like. That's you
1:14:25normally facing me using this camera,
1:14:27okay? But this is my office. Um, yeah,
1:14:31some 3D printers and stuff. Yeah, this
1:14:33is the converted office above uh it was
1:14:37just a little room above my uh garage
1:14:39that we converted to. This came out
1:14:41really well. All right, into the
1:14:43computer. All right, this is what I want
1:14:45to show you. That um Figma one is not
1:14:47being made anymore. more. It was kind of
1:14:48like a limited time run uh with Figma,
1:14:51kind of a promo. Uh I went I missed out
1:14:55on the initial launch. Um they sold out
1:14:57quite quickly. I got one on eBay cuz I'm
1:14:58a nerd and I wanted the official Figma
1:15:00one, but it's actually a keyboard that
1:15:02this work louder.cc company make. Have a
1:15:05check. The Figma Creator Micro might be
1:15:07available. It's sold out now. Okay. But
1:15:09they do have just the regular creator
1:15:11micro which is currently sold out, but
1:15:14we'll be back. It wasn't the other day.
1:15:15Okay. So, it's the exact same thing.
1:15:16It's just not in the Figma colors.
1:15:18Anyway, do you need it for working in
1:15:20Figma? No. It is desk jewelry that I
1:15:23really wanted. So, I paid above what it
1:15:25costs just to have the official Figma
1:15:27one because I have the fear of missing
1:15:28out. All right, that was a long one and
1:15:30we've covered loads and loads of good
1:15:32shortcuts. I hope they were useful.
1:15:34Let's get into some more workflow in the
1:15:36next video. Thanks for sticking around.
1:15:39All right, let's jump back to that
1:15:40document that we were working on earlier
1:15:42with our kind of uh different genres.
1:15:44And what I want you to do is just create
1:15:46a frame with some text in it. Put the
1:15:48name of your kind of app. Okay, mine's
1:15:50Limick Techno. I've made a light version
1:15:52and a dark version. There's nothing
1:15:54fancy there about these, just frames
1:15:56with text inside of it. Okay, so let's
1:15:59uh make another iPhone 16. Okay, so I'm
1:16:02going to let's just duplicate this one.
1:16:04So I'm going to click on the frame, hit
1:16:05command D on a Mac, control D on a PC.
1:16:08Okay, we get a duplicate. And what we
1:16:09might say is let's do the first bit of
1:16:12selection. So, let's h click on this.
1:16:13And I'm going to say there is a weird
1:16:15one in here. I surprisingly use it a
1:16:17lot. Go to edit. This is not very
1:16:18complicated. So, we get around not using
1:16:20it. But if we go to edit and go to
1:16:22select inverse, okay, which is command
1:16:24shift A on a Mac, control shift A on a
1:16:26PC, and it just selects everything but
1:16:28that. And you can delete it. Don't ask
1:16:30me why, uh, but I end up using that a
1:16:32lot. Um, the other and probably most
1:16:34important feature is let's say that we
1:16:36do want to make this the dark version.
1:16:37We want to switch it out. We could grab
1:16:39this and copy it and put it on here and
1:16:41paste it and kind of line it up and
1:16:43remove it all. What's really good is if
1:16:45you copy this, select this and there's
1:16:48an option in here going edit and there's
1:16:51one that says paste to replace. There is
1:16:53a paste over selection. You could stick
1:16:55it over the top. The other one's still
1:16:56underneath. I don't know why you'd need
1:16:58that one. Um, but I use this one. Edit
1:17:00paste to replace. Okay, which is command
1:17:03shift R on a Mac, control shift R on a
1:17:05PC. Okay, that's really handy and it
1:17:07gets handier. Okay, so let's say I use
1:17:09the star everywhere on my document. U,
1:17:12you U and U. I'm holding down the option
1:17:14key while I'm dragging or the alt key on
1:17:16a PC to duplicate it. Hey, let's say
1:17:18though I want this to replace it. So I
1:17:19can copy it and I'm going to just using
1:17:21my normal copy shortcut. I'm going to
1:17:23grab you. I'm going to hold shift and
1:17:25grab you and I'm going to grab you. And
1:17:27you can do that exact same thing. Paste
1:17:29to replace. Anybody know the shortcut?
1:17:31Too many shortcuts, Dan? That's command
1:17:33shift R or control shift R on a PC or go
1:17:36up to edit. It's up there as well. Okay.
1:17:37And it just replaces all of those ones.
1:17:39That can be handy. Paste to replace.
1:17:42Now, this is a little bit scraping the
1:17:43bottom of the barrel. Let's say that
1:17:45I've got this star here. Okay. And I
1:17:46copy it. Um, and let's say that I go
1:17:49over here. It could be text. Could be
1:17:51anything. You're zoomed right out and
1:17:52you're kind of working over here in no
1:17:53man's land. Let me know in the comments
1:17:54who ends up working way over here for
1:17:56some reason. Okay. If I hit paste, by
1:17:59default, it puts it back where it was.
1:18:00and you're like, and there's two of
1:18:02them, right? Right over the top of each
1:18:04other. And you're like, that's not what
1:18:05I wanted. I wanted it over here. And
1:18:06there's no real way of getting it over
1:18:08here other than pasting it and moving it
1:18:10over. But what you can do is say all the
1:18:11way up here, one of those people. Okay?
1:18:13And you can right click and say, just
1:18:15paste it here, please. Okay? And there's
1:18:16my little star. About 10% of you be
1:18:18like, that seems good. For the rest of
1:18:20you, let's move on. Uh, actually, one
1:18:23last one I wanted to show you was we've
1:18:24done this before kind Now I just want to
1:18:27highlight it is let's say that I do have
1:18:30a lot of new frames. So I'm going to hit
1:18:31the frame tool. I'm going to say let's
1:18:34give myself one of those. Let's go
1:18:36command DD. So I got loads of them.
1:18:37Okay. If I want this on all of them. So
1:18:40I can say U. Copy. Click on U. Hold
1:18:43shift and just grab all the frame names
1:18:45and then just hit the regular old paste.
1:18:47It'll put it back in the position on the
1:18:49frame all at once. Kind of like a
1:18:50multiple paste. There's nothing special
1:18:52you have to do. just copy and paste, but
1:18:54have lots of things selected when you're
1:18:56pasting. Awesome. How did that go? Let
1:18:57me know in the comments. Did I make copy
1:18:59and pasting sexy or
1:19:02uh you probably skipped right at the
1:19:04beginning. Anyway, uh for those that
1:19:05hung around, thank you humoring me.
1:19:07Let's go into the next video. Hi there.
1:19:09In this video, we are going to learn all
1:19:11of the frame tips and tricks. Yes, a
1:19:14whole video working with frames. They're
1:19:16pretty useful. Let's jump in. All right,
1:19:17the first one is actually nothing to do
1:19:19with frames. Uh see this little icon
1:19:21here? If your frames are all opened out,
1:19:23okay, and they're all twirled down and
1:19:24they're just really messy, okay, just
1:19:26click that. They will tidy up. And if we
1:19:28want to go to say my frame number eight,
1:19:32okay, you just double click on the icon
1:19:33here and it'll just jump straight to it.
1:19:34Okay, you can work your way around this
1:19:36document as long as you've named your uh
1:19:38frames right. Okay, it's a nice easy
1:19:39one. Even better, though, is watch this.
1:19:41Let's say I am here on this first page.
1:19:44I should name my pages better. Click n
1:19:46in n on your keyboard. N will just go to
1:19:48the next frame. it'll zoom into it.
1:19:51Okay, so that's just a handy way of
1:19:52working through your document. Shift N
1:19:54will go backwards. Okay, N to go
1:19:56forwards. That's N for November, my
1:19:58accent. And then shift N for November to
1:20:01go backwards. Okay, there's another one
1:20:02that's I use probably more. The N key
1:20:05zooms in. Okay, so if I zoom out and I
1:20:06hit the N key, it goes all right, I'm at
1:20:08the next frame, but I'm really zoomed
1:20:09in. Okay, the one that I like better is
1:20:12the home and end key. Not all keyboards
1:20:15have it or sometimes you need to hold
1:20:16down a special key to get it. If you're
1:20:17on a laptop, but I'm on my big keyboard,
1:20:19you can probably hear it tapping away.
1:20:21Home is backwards and end E and D is
1:20:24going forwards, forwards, and backwards.
1:20:26Exact same thing except that the N zooms
1:20:29in. Okay. And home keeps the same zoom
1:20:33level and just moves along with
1:20:34different frames. That's a good one. You
1:20:36can resize a frame. Let's say that I
1:20:38create a frame up here and it's going to
1:20:39have all my nav inside of it. So, I'm
1:20:41going to grab all of you guys. Okay. And
1:20:42I'm going to put it up into here. Okay.
1:20:44I don't need that one. There was a star
1:20:47in there. There you are over there. Not
1:20:49sure how you ended up over there. Select
1:20:51you. Okay. Is that this frame's too big?
1:20:53Okay. What you can do is there's a
1:20:54little option over here. There's a
1:20:55shortcut. It's like all of the keys plus
1:20:58R. Don't use it enough, but it's a great
1:21:00way of just wrapping the outside frame.
1:21:02Okay. And kind of like smooshing it
1:21:04really close to the things that are
1:21:06inside the frame. All right. The next
1:21:08one we've done before but in a different
1:21:10context. So let's bring in an image in
1:21:12your exercise file. This is one called
1:21:14image04. Okay, it's a vector file and we
1:21:18are going to bring it into here. Okay,
1:21:20you want it kind of close to the edge.
1:21:22But we want to kind of at the back and
1:21:24we want to kind of just have it off and
1:21:25then it jumps off the frame. Okay. And
1:21:28you're like no, I just want it. Why are
1:21:30you jumping off the frame? Okay. So what
1:21:31you can do is while you're dragging it,
1:21:33okay, we did this earlier. Remember
1:21:34start click and hold it. Hold spacebar
1:21:37and it means you can drag it all the way
1:21:38out here. It is still on this iPhone 16
1:21:41frame. Okay, so you can drag it in and
1:21:43kind of use it just on the edge here and
1:21:45it stops it jumping into other frames
1:21:47into components. We did it before when
1:21:48we're just kind of like remember
1:21:50dragging things like the star around,
1:21:51but it's handy when you're trying to get
1:21:52things on the edge that you want to be
1:21:54on this frame and not jump off like
1:21:56that. Okay, so there you go. I'm going
1:21:58to push mine in here
1:22:01and I'm going to send it to the back.
1:22:02The shortcut for sending it to the back
1:22:04is the square uh brackets. Okay, so it's
1:22:08next to the P key. To send mine to the
1:22:09back using the first of the square
1:22:11brackets. All right. Other cool frame
1:22:13things is seeing everything in outline
1:22:15mode. So it's command shift O or control
1:22:17shift O on a PC. It will show you
1:22:19everything kind of broken down into
1:22:21vectors. Okay, that can be really handy
1:22:23especially with that star. Remember he
1:22:25was just like hanging out. Watch this.
1:22:26If I zoom out. Okay, you can see was
1:22:29there a guy? There he is. There. just a
1:22:30little bit easier to see than that. Star
1:22:32gone, star there. You use teenytiny.
1:22:35Okay, if you've come from say
1:22:36Illustrator or any other vector drawing
1:22:38programs, you use it quite a lot,
1:22:40especially when you're drawing and
1:22:41creating things with a pen tool. Okay, I
1:22:43find it just handy for the frames,
1:22:45especially when frames are maybe similar
1:22:47colors. You can kind of see the outlines
1:22:49and you can just work in this mode here.
1:22:51Okay, you can get things to maybe snap a
1:22:53little bit easier because you can see
1:22:55them better. Um, if you come from
1:22:56Illustrator, okay, Adobe Illustrator,
1:22:58command Y still works. I don't know why.
1:23:00If you're used to that one, use that
1:23:01one. The official one for Figma is
1:23:03command shift O or control shift O. If
1:23:05some of the shortcuts have changed, they
1:23:07do. Okay. Um they go in they're always
1:23:09trying to make them better. They never
1:23:11stick to them. So you can click the
1:23:12question mark and go to keyboard
1:23:13shortcuts and you can work your way
1:23:15through to see whether if Dan said it
1:23:18was where is it under view, show
1:23:20outlines. Okay. Yeah, it's still command
1:23:22shift O on a Mac. Okay. And if maybe
1:23:25they're just different than what I'm
1:23:27saying on PC, you'll see them listed
1:23:28here. Blue means you've used them. Uh I
1:23:31haven't used the rulers shortcut since I
1:23:32reset this document. So it is grayed
1:23:34out. Cool. That my friends is all of my
1:23:37frames tips and tricks. If you've got
1:23:39some, I'd love to kind of like get them
1:23:40all in. So let me know in the comments
1:23:42if you're like, "Oh, you didn't mention
1:23:44that one. That's a cool new one." Um and
1:23:45for you, go check out the comments.
1:23:47There might be some cool new ones in
1:23:48there. All right, that's it. I will see
1:23:50you in the next video. Hi everyone. Uh
1:23:52we're going to revise auto layouts, why
1:23:54they're good, how they work, and
1:23:55components, why they're good, and how
1:23:57they work. Okay, we you might know this
1:23:59already, so you can skip ahead of this
1:24:01video. What we'll do is we'll do a nice
1:24:02little revision, nice and quick, and
1:24:04then I'll spend ages, that's why this
1:24:06video is so long, running into all the
1:24:08issues people run into, especially when
1:24:10you're a little bit newer in Figma. If
1:24:12you are, hang around. We'll do the quick
1:24:14demo and then I'll show you the myriad
1:24:16ways my students get lost and how to get
1:24:18around them. If you know what an oil is
1:24:20and a component is and you've never had
1:24:22really any problems or at least you know
1:24:24how to fix them, skip along to the new
1:24:25stuff. But for now, let's jump in. get
1:24:27everybody up to the same page and start
1:24:29making border layouts and components and
1:24:32breaking them. Let's jump in. All right.
1:24:33Uh to get started, let's work on this
1:24:36project from earlier, okay, where we had
1:24:37our genres. And let's do a couple of
1:24:39things to tidy up. Let's make sure
1:24:40double click the name up the top here
1:24:42and give it a name. Okay, mine's called
1:24:44Limmerick Techno V1. Okay, and up here
1:24:47we've got iPhone 16. Uh the only problem
1:24:49with that you might have noticed is if
1:24:51you duplicate it. So I've got the top
1:24:52selected. Go shift D. Okay, not shift D.
1:24:55Undo. gone into inspector mode. Okay,
1:24:58let's come out of inspect mode by going
1:25:00to this. You might do it. So, I'll leave
1:25:02that in the course. Okay, is I want to
1:25:05have this name selected. And let's go
1:25:07command D for duplicate. And you'll
1:25:09notice up here it says, oh, look, iPhone
1:25:1017. We've gone to the future. No, it's
1:25:12just trying to be clever. It's going
1:25:14iPhone 16 17. If I do it again, command
1:25:16D goes 18. So, let's get rid of that.
1:25:18It's handy, but not for iPhone. Can be
1:25:21handy, but not right now. Let's call
1:25:23this one genres. Okay. And now, let's
1:25:25duplicate it. Remember command or
1:25:27control D on a PC. Okay. And let's
1:25:29double click this one. And let's call
1:25:30this one homepage.
1:25:34I know they're backwards. Okay. Let's
1:25:36get rid of all of that. And let's build
1:25:38our uh auto layout. I'm going to change
1:25:40the background color as well. Was
1:25:42messing around with this earlier on to
1:25:43kind of some sort of off-white. All
1:25:45right. Let's do the quick version of an
1:25:47auto layout. Let's bring in some icons.
1:25:49Okay. So, we're going to go command
1:25:50shift K to bring in lots of stuff. I'm
1:25:52going to say all of you fellas. You're
1:25:54going to come in, click open, and I'm
1:25:57going to click paste all. Okay. I'm
1:25:59going to move them all over here just to
1:26:01give myself a bit of room. I'm going to
1:26:02grab my uh scale tool, which is the K
1:26:05tool. And I want them all to be a height
1:26:07of about 32. When I said about all
1:26:09exactly 32. Okay, I'm going to zoom in a
1:26:11little bit. I am going to drag them out
1:26:14so I can see them all. Doesn't really
1:26:16matter what order they're in at the
1:26:18moment. Select all of them and say shift
1:26:20A. You're in auto layout. and zoom out
1:26:23and get it going. So, let's put it on
1:26:25here. Let's go U down the bottom. I'm
1:26:27going to say actually I'm going to drag
1:26:29it all the way over here. I don't want
1:26:30it to scale. I'm in the scale tool,
1:26:32that's why. So, I'm going to go to the V
1:26:34tool to go back to the selection tool,
1:26:36not scaling it. I'm going to drag you
1:26:38all over there, you all over there, and
1:26:41I'm going to do some stuff where I say I
1:26:42want in the middle. And I can play
1:26:44around with the gap between them all.
1:26:46Okay. And that, my friends, is how to do
1:26:48an auto layout. The cool thing about it
1:26:50is let's turn it into a component so
1:26:54it's reusable. Okay. You can either
1:26:56click the button up here. Okay. Or you
1:26:58can use the shortcut which is command
1:27:00option K on a Mac and that's control alt
1:27:03K on a PC. Okay. So it's a component.
1:27:06I'm going to duplicate this whole page.
1:27:07Command or control D. And this page is
1:27:09going to be my uh instead of this frame
1:27:12being iPhone 16 I'm going to do the
1:27:14iPhone Pro Max the big one. Okay. Okay.
1:27:17And the cool thing about it is because
1:27:18it's an auto layer, I can say. Okay.
1:27:21Move it down. I might play around with
1:27:23the spacing or the gap. Okay. It's
1:27:26really easy to be responsive. Okay. And
1:27:28the other cool thing is I can say you my
1:27:30friend is let's say this homepage here,
1:27:32uh, people haven't logged in yet. So,
1:27:34they shouldn't be able to see their
1:27:35ticketing option. So, I can click on it
1:27:36and I can say in my file under my
1:27:39layers, okay, let's have a look at this
1:27:40guy. And I can say you my friend, which
1:27:42one do I want? The ticket one. I can
1:27:44turn the eyeball off. And over here
1:27:46though I can see you. I want the eyeball
1:27:49on. Oh, look at us responsive. I can
1:27:52click in here. Actually, this is my
1:27:54instance. This is the kind of main
1:27:56component. So on this main component, I
1:27:58can say actually I want the want the
1:27:59search to be over here. You can see you
1:28:02play around with the order. And because
1:28:03the components these things are linked,
1:28:05the magnifying glass ended up over here.
1:28:07Let's turn the ticket back on. This is
1:28:10the power of auto layouts. Hopefully
1:28:12that's a good little refresher on autos.
1:28:14We did it lots in the essentials course
1:28:15and you might be, you know, intermediate
1:28:18Figma user already and jumping straight
1:28:19to the advanced course. Let's get into
1:28:21all of the problems and how to fix them.
1:28:24I'll do it because that thing that I
1:28:25just did, I kind of subconsciously
1:28:28avoided lots of errors, but I know when
1:28:30I'm teaching people, they all do the
1:28:32errors. That could be you. So, stick
1:28:34around. Let's get into all of the
1:28:35problems and solutions. All right. So,
1:28:37I've just kind of undone until I come
1:28:39back to before I put the icons on. So,
1:28:41let's get started and bump into all of
1:28:43the problems. Uh, so when I bring in my
1:28:45icons, there's two different ways. Okay,
1:28:47I could use the command shift K and
1:28:50bring them all in and that kind of
1:28:51stacks them all on top. Okay, especially
1:28:54if I hit place all, they're all in
1:28:56there. Okay, and that's what I did in
1:28:58the first part of this tutorial and
1:29:00everything worked. But if you're like me
1:29:02and you do a lot of like from your
1:29:05exercise files from icons, you just grab
1:29:07all of these and go y and add your own
1:29:10sound effects. Just drag them on. They
1:29:12kind of come in a different way. You're
1:29:14like, that's not a problem. Except with
1:29:16them all selected and you go to the K
1:29:18tool, okay, for scale and you can say
1:29:20actually I want the height to be 32.
1:29:22You're like this is perfect. Done.
1:29:25Actually, it's not done it. What you've
1:29:26ended up doing is this whole group has
1:29:29become 32. Can you see this whole height
1:29:31is 32. So this one particular heart icon
1:29:33is only 15. To get around that it's
1:29:35easy. Okay, you just have this one
1:29:37selected. Okay, and you say you are
1:29:39height of 32. This brings me to the
1:29:41other problem. Okay, is that let's look
1:29:44at this heart. Okay, under here it's in
1:29:46a frame, which is cool. Okay, inside of
1:29:48here is a vector. What people can do is
1:29:50they can accidentally click the vector,
1:29:52not the parent frame. Can you see
1:29:54they're different? Okay, so that the
1:29:56frame that it's around and the thing
1:29:58that is inside of it. If I have the
1:29:59thing inside of it selected and I go,
1:30:01you're a height of 32.
1:30:03Does weird stuff? You can kind you make
1:30:06out what's going on. There's a frame,
1:30:08but the heart inside of it got scaled,
1:30:10but not the frame. So, it's like
1:30:11clipping it off. It's undo. Undo. So,
1:30:13that can be problems that people run
1:30:15into is they accidentally You can do it
1:30:17on the board here. Okay. You can see
1:30:18I've clicked the vector, not the parent
1:30:20frame. All right. Solve some problems.
1:30:22You might have bumped into those
1:30:23already. The next one is sometimes
1:30:26people grab uh SVGs like this and I'll
1:30:29just do a little selection around this.
1:30:32Okay, we'll notice that I have selected
1:30:34the internal parts of all of this. Watch
1:30:37just the vectors, not the parent frame.
1:30:39Okay, so if I drag this off now, look,
1:30:41I'm dragging the internal vectors, not
1:30:44these. You end up with these frames left
1:30:46by theirself. It is, you know, the
1:30:49world's not going to explode if you have
1:30:51vectors on their own and try and scale
1:30:52those. So that's fine. Okay. But it is
1:30:55very common and you have a lot more
1:30:57flexibility if vectors are inside of
1:30:59frames. So just be careful when you are
1:31:01selecting either do a really big
1:31:03selection so it goes right around the
1:31:04outside and you can see I've got
1:31:06everything selected. Or you can
1:31:07shiftclick the names if you can see the
1:31:10names. Okay, I can grab them all
1:31:11selected. Or in your layers panel here I
1:31:13can click the top one. Hold shift grab
1:31:15the bottom one. It doesn't really
1:31:16matter. It just if you were finding
1:31:18problems and you're like this is weird.
1:31:19It's probably that you have the vector
1:31:21selected and not the frame. If you end
1:31:23up with a vector on his own and you have
1:31:25no idea where his frame went or he just
1:31:27didn't come with one, the file that you
1:31:29inherited didn't have it, you can just
1:31:31frame it. You can say, let's right click
1:31:33it and let's say uh frame selection.
1:31:36He's got a frame now. Excellent. All
1:31:38right, let's go back in. All right, and
1:31:41what I want to do is I think that's the
1:31:43problems for now. There's more to come.
1:31:45Okay, so what I'm going to do is do a
1:31:47sneaky trick. Instead of doing them all
1:31:48separately, I'm going to say you aligned
1:31:50on top of each other. Remember, don't
1:31:52drag them on top of each other. If I
1:31:54drag him, where is he going to go? He's
1:31:56going to go inside the heart.
1:31:58Okay. You can hold spacebar. We learned
1:32:00that before. And it'll just sit on top.
1:32:02But it's easy. Just grab them all. Big
1:32:04selection on top. U. And now I'm going
1:32:07to say I would like the height of all of
1:32:09these guys to be 32. Nice. Make sure
1:32:12that uh I'm using the dimensions of the
1:32:15frames, not the scale. I want the scale
1:32:17over here. Oops. 32. I'll pretend I
1:32:21added that on purpose, but no, I just
1:32:23messed that up. Now, the next problem is
1:32:26that when we convert this to auto
1:32:28layout, you're like, okay, cool. Just
1:32:29select them all, did the big selection
1:32:31like Dan said, and then you went shift A
1:32:34in the earlier version, they all stacked
1:32:36up nicely. Okay, it's because I was
1:32:38doing things knowing how to avoid
1:32:41problems like this. Okay, the default
1:32:43inside of Figma now is it tries to think
1:32:46for you and it does a terrible job at
1:32:48the moment. This might work. If it
1:32:49works, you're done. Okay, if it doesn't
1:32:50and you have this problem like this,
1:32:52what's happened is it's turned this
1:32:53thing into auto. Okay, let's have a
1:32:56look. It's called frame 10. Let's call
1:32:58this one uh nav slash
1:33:01uh what's this one? Nav bottom.
1:33:04Okay. And inside of it, let's close all
1:33:06these down. Okay, just to make them
1:33:08tidy, you've got one frame. That's
1:33:10little hash. Another frame, little hash.
1:33:12Then you've got this guy hash inside a
1:33:14little target. These guys here are
1:33:16ignoring the auto layout. This guy
1:33:18listening the heart magnifying glass
1:33:20listening and they're kind of flowing on
1:33:22next to each other. This one here, moody
1:33:24teenager, is ignoring you. Okay, that's
1:33:26this little icon here. You will see them
1:33:28across lots of documents. Other people
1:33:30will make them. All it means is like
1:33:32it's still inside the auto layout, but
1:33:33it's not flowing like an auto layout.
1:33:35Why? Reasons. We'll do it later on.
1:33:37We'll look at something called absolute
1:33:38positioning. But for the moment, you'll
1:33:40need to say you stop doing that. Okay, I
1:33:42want you to grow up. There you go. And
1:33:44stop being moody, okay? By ignoring auto
1:33:47layout. Turn that off. Look, so the
1:33:49ticket now flows along. There's just one
1:33:51more person, the icon user. You are no
1:33:54longer ignoring us. All right, they're
1:33:57all flowing along nicely. The other
1:33:58thing that might happen is if you click
1:34:00on the frame, you will find that the
1:34:02auto layout has different it tries to
1:34:03guess. Do you mean horizontal? Most of
1:34:06the time it guesses there. Sometimes it
1:34:07goes, tada. Let's go back to horizontal
1:34:10and zoom out. And I think that is the
1:34:13issues we're going to run into.
1:34:16Okay. One thing we need to do actually
1:34:18before we move on is let's grab this uh
1:34:21frame and drag it out. Uh let's turn the
1:34:24icons that are inside of it into
1:34:27components. Uh why do we do that?
1:34:29Because the heart, we don't want lots of
1:34:31copies of the heart. We want one heart
1:34:33used lots of times that we get to
1:34:34control. Okay. So let's select all of
1:34:37these. I would like you to all be
1:34:39components. I don't want to make them
1:34:40one component. Can you see one giant
1:34:42component? I would like them all. See
1:34:43the drop down here? Create multiple
1:34:45components. So, I've got a heart,
1:34:46magnifying glass, a ticket, and a user.
1:34:49Let's go put them into play and explain
1:34:53just why components are so good. You
1:34:55probably know already. Okay, so let's
1:34:56get this going down the bottom here.
1:34:58Let's uh drag this out here and this out
1:35:02here. Let's get the alignment to be in
1:35:06the center. And let's drag up the gap.
1:35:08You can put the gap as auto. Okay. But
1:35:11it goes right to the edge. Okay. I want
1:35:13this. Bring this down. I want to bring
1:35:16this down to like 50. Um actually make
1:35:19the alignment center. And if I zoom in,
1:35:21you can play around with this on the
1:35:23artboard. Can you see? Uh if you've got
1:35:25gap that's not set to auto, okay, any
1:35:27other number, you can drag these out
1:35:29while you're down here. We can set this
1:35:32to auto and add some padding left and
1:35:34right. Okay. just so that it is let's
1:35:37what should we do? Let's do 32. Cool.
1:35:41Let's add it to the bigger document.
1:35:43Let's go for a um so let's make Yep.
1:35:47duplicate them. Command or control D.
1:35:49You are going to be the frame of the
1:35:52Promax. So it's nice and big. The cool
1:35:54thing about it now is because it's an
1:35:56auto layout. Okay. And we set up that
1:35:58lovely spacing. Okay. You can see we've
1:36:01made it bigger for a different device.
1:36:03Okay. And it all flows nicely. Okay. And
1:36:07the reason we made those icons a
1:36:09component is so that we can go into this
1:36:11and say, "All right, you." Okay. This is
1:36:13my main component. Okay. I can tell it's
1:36:15got the weird little icon here, not this
1:36:18version of it down here. Where is he? I
1:36:20double click on him. You see the
1:36:22diamond? That's the regular U instance.
1:36:24Let's go over here. You
1:36:28Okay. If we go and double click, double
1:36:29click, double click, and we start
1:36:31messing around with him. Let's give him
1:36:33some mad sideburns.
1:36:36Those aren't mad sideburns anyway. Um,
1:36:39but because you've messed with the
1:36:40master zoom out. Okay. Or no, the main
1:36:43component. You can see this adjusts as
1:36:45well. If we didn't convert these to
1:36:46multiple components, that wouldn't have
1:36:48updated and we'd have to update it
1:36:50again. All right, my friends. That was a
1:36:52long video, okay? and hopefully gets us
1:36:54all up to the same sort of level of
1:36:57understanding for autoouts, why we use
1:36:59them, how to make a component, why we
1:37:01use those, and the myriad of issues that
1:37:03you might run into being kind of, I
1:37:05don't know, good enough to use Figma,
1:37:07but bumping into lots of issues.
1:37:08Hopefully, that solved a few of them.
1:37:10All right, let's get on to some new
1:37:12stuff in the next video. Hi everyone. In
1:37:14this video, we're going to uh sprinkle
1:37:16on all of the super awesome uh AI
1:37:19features inside of Figma. suggested auto
1:37:21layout, replace content, duplicate,
1:37:24rename, and AI image generation. Oh, so
1:37:27good. We're going to take this, which is
1:37:29just an image and some text. There's
1:37:30nothing fancy about it. We're going to
1:37:32go copy and then rightclick, more
1:37:35layers, suggest auto layout, and bam,
1:37:38it's auto layout. It does all that great
1:37:40auto layout stuff without having to
1:37:42build it yourself. And then we'll make a
1:37:44couple of them, add them both into an
1:37:46auto layout, and then look, magic. We
1:37:48get to duplicate them. Magic more. We
1:37:50get to click on this and say, "Ah, let's
1:37:52replace the content in there. Let's just
1:37:54use the default. Fill it with some
1:37:56realistic content." Sit back, relax. It
1:37:58redid it all. And it kind of knows what
1:38:00it's doing. Plus, we'll do all the
1:38:02images as well. All right. I've actually
1:38:04done the whole tutorial in the intro.
1:38:06There's a little bit more detail to it
1:38:08than that. There's a bit. So, let's jump
1:38:11in and start arm wrestling the AI
1:38:13robots. All right. So, I've created a
1:38:14card here. It is a frame. Inside of that
1:38:17frame is just an image. uh some text.
1:38:19They're all just kind of like floating
1:38:20around. Nobody's doing anything. Okay.
1:38:22So, I need to turn to auto layout
1:38:24because what I want to do is put it on
1:38:25another document and kind of resize it
1:38:27and do all sorts of stuff where I go,
1:38:29"All right, rock and roll needs to be
1:38:32really, really long." It just kind of
1:38:34types over everything. There's nothing
1:38:36responsive about it. So, all I need to
1:38:38do, click the parent frame. If I use my
1:38:40normal shift A, okay, to turn to auto
1:38:43that doesn't work. Let's undo. A trick
1:38:45here is with the parent selected. Okay,
1:38:47frame 38. I'm going to right click it.
1:38:49And there's an option in here. It says
1:38:50more layout options. And this one here,
1:38:52suggest auto layout. It should be super
1:38:54amazing. Auto layout. It's very
1:38:56unassuming. Let's click the button. And
1:38:58nothing changes. How cool is that?
1:39:00You're like, nothing changed. Have a
1:39:02look. So my frame now, okay, is an auto
1:39:04layout. Inside of it is an image, but
1:39:06then there's another auto layout frame.
1:39:08So it framed this for me. So it's in
1:39:10this kind of like large frame. Okay. And
1:39:12I can decide now that actually, let's
1:39:14twirl it up. The image goes beneath it.
1:39:16It refflows. It's all nested auto
1:39:19layouts. It's very exciting. Okay. We
1:39:21might decide in here though that uh what
1:39:23do we got? So, there's a frame 40. I
1:39:26want that to be below the text or I drag
1:39:28the text above there. Okay. They all
1:39:30refflow. Undo. Undo. Undo. Undo. Okay.
1:39:34Let's say rock and roll as well. Let's
1:39:35say I type in that uh really long
1:39:38heading. And look what it does now. It
1:39:41snaps. It's created this box. Oh, it's
1:39:44so good. Let's undo. Let's go even
1:39:46further. At the moment, it's really
1:39:47hard. Like, remember it was called frame
1:39:4835? It just kind of like wipes the frame
1:39:50names, but you can get it back. You can
1:39:52say all of you guys, I can right click
1:39:54it and use the sweet rename layers AI.
1:39:57This might be off if you're on the free
1:39:59version, but watch this. You could type
1:40:00them. Watch this. Rename layers. It's
1:40:02going to go through. It's going to think
1:40:04about it. Look at it typing. It's the
1:40:06future. Cover image. Oh, it even changed
1:40:09that. Look. Cover image. Song info. It's
1:40:12not quite right. Uh, it's got the
1:40:13header, the title, the date. Oh,
1:40:15description. Song info. It's not really
1:40:18a song info. It's more of a genre. Oh,
1:40:21so good. Oh, it gets better. Let's grab
1:40:24it. Let's make a copy of it. Okay. I
1:40:26haven't turn it into an instance. I
1:40:28should. Um, but I've got two frames here
1:40:30now. I'm going to select them both. Put
1:40:31them auto layout. Just the regular one.
1:40:33Shift A. That works. It's not very
1:40:34complicated. But see this appear? Oo.
1:40:38Okay. It's got this fancy duplicate
1:40:39option. You see the little sparkles next
1:40:41to it. I'm gonna first actually just
1:40:42drag it off because it's getting a
1:40:44little bit tight in there. Okay. And I'm
1:40:46gonna make it bigger. Let's zoom out.
1:40:47Actually, you have to drag it far
1:40:49enough. Um, if you drag it does nothing
1:40:51until you get far enough to get, you
1:40:53know, enough room for them all to appear
1:40:54in there. Okay. Look what we're doing.
1:40:57Oh, and it gets even better. We're going
1:40:58to use the AI feature called right
1:41:00click. That's not the right AI feature,
1:41:03but there's one in here called I can't
1:41:04remember. Come on, brain. Replace
1:41:06content. It's not in there at all. Okay.
1:41:08with it selected the whole big frame
1:41:09that you've got. Get down here and let's
1:41:11go to uh replace content. And can you
1:41:15see this like little prefilled in thing?
1:41:16It says fill with realistic content. If
1:41:18you hit tab, that is a prompt. You could
1:41:20type that in. It doesn't matter. Okay.
1:41:22But yeah, give it a crack. Realistic
1:41:24content. It's going to try. Oh, it's
1:41:27doing it.
1:41:29How cool is that? It's not doing the
1:41:31images. Um, you got to do those
1:41:32individually. We'll do those in a sec.
1:41:34But look at that. It's got the dates.
1:41:36It's got the um different genres. Oh, I
1:41:40do like it. Okay, so now we could go in
1:41:42and say actually you here. Um okay, I've
1:41:46done that one. We could go to more AI
1:41:48and say make an image. And this one is
1:41:51indie pop band. Let's make it cut to
1:41:55when it's made because this takes a
1:41:56little while. Ha, I like it. Okay. Oh,
1:41:59look how responsive it is. I like the
1:42:01indie pop. One little change. Make
1:42:03changes.
1:42:06Aha.
1:42:08It's closer to me. We'll take it. All
1:42:11with glasses. Better.
1:42:15Little roundy face for me, but that'll
1:42:17do. It's got no sideburns. What happened
1:42:18there? It's got the hairdo, though. All
1:42:20right. So, we could work our way through
1:42:21to do these things. The one caveat, the
1:42:24one problem that I'm bumping into in
1:42:25terms of the like duplicate option,
1:42:27okay, is
1:42:29um let's grab Oh, I didn't keep a
1:42:31version of it.
1:42:33Copy that one out of the frame. Paste it
1:42:35over here. Okay. So, he's out. So, I got
1:42:38to this. And we should turn this into
1:42:40Actually, I want to turn that I want to
1:42:43get this frame taller. Actually, no. I
1:42:45want to get the image. I used a really
1:42:47weird size there, didn't I? There's the
1:42:49padding. Come on, Dan. Let's grab the
1:42:50edge. There we go. Okay. What we should
1:42:52do is turn this into a component.
1:42:53Remember, command shift K. Nope.
1:42:55Remember, uh, command option K to turn
1:42:58it into a component. Or just click the
1:42:59button over there. Boop. Okay, so we've
1:43:02got our main component so that we can
1:43:05change it later on and kind of control
1:43:06it all. So I make a copy of it, which is
1:43:08my instance. Okay, instance of my main
1:43:11frame. I'm going to move them around.
1:43:13Okay, that's at the top. That's there. I
1:43:15select them both and I make them shift A
1:43:18into R. Actually, the duplicate thing,
1:43:20remember that was down here? It's gone.
1:43:22It's where to go. Okay, so it'll work
1:43:24with a main components like you can't,
1:43:27but I'm going to undo this. we should
1:43:29put on our components page. Boop. And
1:43:32put it in here. Okay. And then back at
1:43:35my other page, my Hi-Fi mobile. Okay.
1:43:38Actually, I did it the wrong way around,
1:43:39didn't I? I'm going to cut that. Go to
1:43:41my components. So, my main components in
1:43:43here. Then I'm going to copy this. Go
1:43:44back to my Hi-Fi mobile. Paste it in
1:43:46here. So, this is a copy of that main
1:43:48component. You can see it's a little
1:43:49diamond. That'll work. Okay. So, we'll
1:43:52do it to those. U shift a auto layout.
1:43:55And then that appears there. That might
1:43:56go away. I don't know why it does that.
1:43:58Um, but yeah, very cool. Um, a couple of
1:44:01other things that you might have to do
1:44:02before we turn it into that duplicating
1:44:04thing is actually let's go back to the
1:44:06main component. What you want to do when
1:44:08you've used suggest auto layout just
1:44:10make sure it works. That image worked
1:44:11great. You can see it's kind of what I
1:44:13want it to do. The padding on both
1:44:14sides. What was my padding originally?
1:44:16Let's click on this. See, I had what 17
1:44:19on one side and 16 on the other. Okay.
1:44:21Just cuz I drew it out randomly. It's
1:44:22probably best to tidy this up now before
1:44:25I go and turn it into, you know, a
1:44:27component to make duplicates of it
1:44:28everywhere. So, I probably want 16.
1:44:31Actually, 16 or around. Come on, Dan. I
1:44:34like to tab around these just to get
1:44:36them. The other thing is is that this
1:44:38Let's have a look. Uh, I'm going to put
1:44:40some returns in. You can see it's not
1:44:42flowing. Okay, that's something I
1:44:43probably want. Okay, it depends. If you
1:44:45want to fix height card, leave it. But
1:44:48what I want to do is double click down
1:44:49the bottom of the text box and it will
1:44:51turn it from Can you see where is it? Uh
1:44:54this is a fixed size. And if I double
1:44:57click the bottom, okay, it automatically
1:44:59jumps to this one. Or you can click the
1:45:01icon to auto height. That's another good
1:45:03thing to check. Now, uh I can add more
1:45:06stuff. Get in there. Get in there. Um
1:45:08enter. Enter. Enter. So you go. Uh other
1:45:11thing I'd probably check here now is is
1:45:14there enough room for all of the dates?
1:45:16probably um what happens when I get down
1:45:18to one digit that still works. These are
1:45:21the kind of things I like to check and
1:45:22like what if the client says this needs
1:45:24to be all uppercase still fits or we
1:45:27want the full version.
1:45:29That's okay, too. Uh and over here, what
1:45:32happens when this gets really long? We
1:45:33already checked that. All right. Oh, the
1:45:35other thing is that is kind of scaling
1:45:37down. It's kind of being centered inside
1:45:39of the header, which is cool, which is
1:45:41this chunk here. What you could say is
1:45:43the date is it's probably set to
1:45:46centered somewhere. Where is it?
1:45:47Actually, it's not this. It's the parent
1:45:49header. Okay, we can say the header I
1:45:51want them to be spaced out, which is
1:45:53cool, but I want it to be spaced and
1:45:54aligned along the top. Now, we've
1:45:56covered some strange things here. It's
1:45:59all very easy until it's not. I've kind
1:46:01of given us something that works really
1:46:03good. But you'll find there's lots of
1:46:04times it just doesn't work. And that's
1:46:06what we'll do in the rest of the section
1:46:07around. I'll give you a bit more crash
1:46:09course on how to do these like nested
1:46:11awesomely aligned and constraint and
1:46:13spaced out auto layouts. But yeah, it's
1:46:16pretty cool, huh? All right, that is it.
1:46:18Uh I will see you in the next video.
1:46:19Actually, one last thing. Let's actually
1:46:21just get it on the page. I'm going to
1:46:22move you off. So, which one we working
1:46:24on last? I think this one. Yeah, we
1:46:26were. Because all of these instances are
1:46:28in this auto layout, I can go like you.
1:46:31And watch this. I can grab the parent as
1:46:33long as the parent a
1:46:36nicest part. you. I can do the spacing.
1:46:39Okay. Um, mess around with the spacing.
1:46:41What do I want to be? 32.
1:46:44Hard to do. Let's do it over here. 32.
1:46:47Another little trick as well. You can
1:46:48actually just double click that gap and
1:46:50type it in. Double click the gap for the
1:46:52spacing. Come on, Dan. My mouse is doing
1:46:56some weird stuff. So, let's go to you.
1:46:57Double click the gap. And you can type
1:46:59it in up here. So, I can type in 32 or
1:47:01do it over here. It's up to you. hard.
1:47:03Doesn't matter what size this goes on,
1:47:05it will respond to it. So good.
1:47:10All right, we've made a mess. Now I will
1:47:12see you in the next video.
1:47:18All right, it is class project time. I
1:47:20want you to build a page. Uh let's go to
1:47:22the class projects. Remember those are
1:47:24in your exercise files. I want you to
1:47:26create a what's on page. Okay, what's
1:47:28going on? I don't mind the language.
1:47:29Okay, there needs to be a heading and a
1:47:31repeating band list card. Okay, let's
1:47:34have a look at my one. Okay, so I've got
1:47:35a heading here. I've got this card that
1:47:37repeats with all different bands that
1:47:39are coming up on different dates. I want
1:47:40you to experiment with the AI features.
1:47:43If you are trying to do this course in
1:47:45the free version, it's okay. Just design
1:47:47it. It doesn't have to be built with AI.
1:47:49You just have to do a little bit more
1:47:50typing and copy and pasting and finding
1:47:53images from free stock library image
1:47:56sites. I don't mind if you are actually
1:47:58if you are in the free version there's a
1:47:59free trial okay it might be great to do
1:48:01this course through the free trial and
1:48:03then you can turn it off at the end okay
1:48:05but if you do have the features um I
1:48:07want you to go through and play around
1:48:08with these so suggest auto layout is the
1:48:10main one we did that in the last video
1:48:12okay where you just kind of design it
1:48:14and say hey give me the auto layout
1:48:16please and it does nice things you will
1:48:18bump into problems like I designed one
1:48:20quite simple so that it worked it worked
1:48:22first time I know I've done other things
1:48:24where I'm like oh this will work and it
1:48:25didn't so keep keep it simple or do
1:48:28something complicated and see how
1:48:30suggest auto layout deals with it. Later
1:48:32in the course, we'll get our skills up
1:48:33so we can fix it. Um, but play around
1:48:35with something simple at least. Okay, I
1:48:37want you to play around with that rename
1:48:38layers features. Uh, if you can't
1:48:39remember where that is because it was
1:48:41kind of a small part of the course is
1:48:43you can go into here and say actually I
1:48:44want to grab this whole thing and right
1:48:45click it. Okay, and there is a rename.
1:48:48Where are you? Rename layers. There it
1:48:49is. There. Okay. Uh, I also want you to
1:48:52duplicate with new content. That is the
1:48:54technical term for that little thing
1:48:56that appears at the bottom. Okay. When
1:48:58you are dragging it out, it's this thing
1:49:00down the bottom here. I can't see there.
1:49:02That thing. Okay. Uh replace content. We
1:49:05did that. Okay. Um in this case, um what
1:49:08I like to do when I I know what I'm
1:49:10going to make is I'll build something.
1:49:13What is that? Get out of my way. Okay.
1:49:15Is Oh, where are we? Remember, if you
1:49:17get lost, uh command one. Oh, I typed in
1:49:20exclamation mark. Uh shift one, sorry.
1:49:22and it will zoom out to everything that
1:49:24you've got. And what I like to do when
1:49:26I'm putting the placeholder text that
1:49:28I'm going to use that replace content
1:49:29with. Okay, I just type in band name.
1:49:32Okay, that gives it a hint. Okay, I
1:49:34typed in an actual date and I use the
1:49:37rewrite this. Okay. Or yeah, rewrite
1:49:40this um to add in a description about a
1:49:43band called and I gave it a fake name.
1:49:45And then I duplicated it so that I was
1:49:49able to then use the um what is it
1:49:52called? Rewrite this. Comes up with band
1:49:54names. You can in your suggest this give
1:49:56it a really clear um description. You
1:49:59could say actually I'm rewriting this
1:50:01and I'm saying uh I'm writing this for
1:50:03techno bands from the '9s. Okay. And it
1:50:05will give you that specifically. You
1:50:07don't have to just leave it blank. All
1:50:09right. Uh, play around with the make an
1:50:11image. Okay. So, I made an image and
1:50:13you'll notice that all of them have
1:50:16middle-aged bald dudes. I tried to do
1:50:18the sideburns. He doesn't like adding
1:50:19sideburns. None of these look like me,
1:50:21but anyway, they're all hidden in there.
1:50:23Little Easter eggs. I think I like this
1:50:24guy the most. He's got a similar hairy
1:50:26hand going on. And what else? Uh,
1:50:29rewrite this we talked about, which is
1:50:30Figma's version of Chat GBT. Play around
1:50:32with that. I want to make your page
1:50:34scrollable. Okay. So, make sure that
1:50:36when you're doing the template, it can
1:50:37do this, okay? If you've never done that
1:50:39before, just make sure that when you've
1:50:41got your frame, okay, and you've got
1:50:43this in it, it's longer, okay? So, it
1:50:45fits in there, okay? And also, this is
1:50:48the height of the phone, okay? My height
1:50:51is uh 852. And we've clipped the
1:50:54contents, okay? So, we don't see it.
1:50:56That doesn't really matter. What really
1:50:57matters is that it is set to a frame of
1:51:00something it knows, like an iPhone 16.
1:51:02If it doesn't work, you can go to
1:51:04prototype.
1:51:05It still probably won't work. So, you're
1:51:07gonna go to prototype. You got to say, I
1:51:08would like the overflow, which is the
1:51:10stuff that's kind of hanging out here.
1:51:12Uh, default is no scrolling. I want to
1:51:14vertically scroll. And that should get
1:51:16you this guy. All right. Awesome. I've
1:51:18taken some liberties and kind of moved
1:51:20that around to remove the camera. You do
1:51:22the same. I played around with some
1:51:23fonts and some colors. We'll get into
1:51:25that more later on, but I couldn't help
1:51:27myself. All right, jump in. Play around
1:51:29with the AI. be excited by some of the
1:51:31time it can save you and realize some of
1:51:34its kind of foibless where it doesn't do
1:51:36what we did in the last course. Simple
1:51:37things, great. Really complicated things
1:51:39we're going to need to fix ourselves.
1:51:41But don't worry, we'll learn how to do
1:51:42it. All right, happy class project
1:51:44making. I'll see you after you've done.
1:51:46Oh, actually, any last things in here?
1:51:47Uh, deliverables, take a screenshot,
1:51:49okay, like this, and upload it to the
1:51:52class projects. Okay. Uh, also share on
1:51:54social media. Let people know you're
1:51:56doing the advanced course with Dan and
1:51:57it's awesome. You guys should check it
1:51:59out. And this is what I made. Uh yeah,
1:52:01there you go. I will see you in the next
1:52:03video. Hi everyone. In this video, we're
1:52:05going to build our very own responsive
1:52:08nested auto layout. Okay, like we did in
1:52:11the earlier video uh where we use the
1:52:13robots, we use AI to do it all, we're
1:52:15going to do it all ourselves because we
1:52:17need to understand how these things are
1:52:19created so that we can fix problems,
1:52:21create more complex layouts, and we need
1:52:23to learn how to hug. Yes, there's going
1:52:25to be hugging in this one. It's going to
1:52:26be real awkward. All right, let's jump
1:52:28in. Let's get hugging. All right, let's
1:52:29get started by hitting the F key and
1:52:31we're going to pick an iPhone 16 frame.
1:52:33For some reason, it plops it in wherever
1:52:35it likes. Got to line it up. Perfect.
1:52:37Um, and this is going to be my manual
1:52:40auto. All right. So, it's got a name.
1:52:42Very sexy. And what we're going to do is
1:52:44just start building it. So, I am going
1:52:46to start with a frame. Okay. And I'm
1:52:49going to draw one in here. All right.
1:52:51I'm going to change the color of it just
1:52:53so that we can see it against the
1:52:56background. Pick any old color as long
1:52:58as it's green. Um, hello. Let's bring in
1:53:01an image. You can bring in anything.
1:53:03I've got one. Um, remember command shift
1:53:06K is the shortcut to bringing in an
1:53:08image. Okay. And there's one called
1:53:10image five. It's a very cool bring a
1:53:12laptop.
1:53:14There we go. And I'm going to just drag
1:53:17it around manually to kind of how I want
1:53:19it to be. And let's have a little look.
1:53:21Okay, the constraints are locked. Can
1:53:22you see that? Like when I'm dragging it,
1:53:24can you see that dotted line that runs
1:53:25through the middle of it? It's just
1:53:26saying the height and the width are
1:53:27locked. You can break it by hitting that
1:53:29button there. Uh lock unlock aspect
1:53:31ratio. Okay. And I want to have it just
1:53:33a weird aspect ratio. Okay. I'm going to
1:53:36drag it out. I should be more
1:53:37thoughtful. It's good enough. Now, what
1:53:39I'm going to do is just build it as we
1:53:40go rather than kind of building it all
1:53:42up and then converting it. Okay. So,
1:53:44what I'm going to say is actually this
1:53:45frame. Okay. Let's give it a name. Let's
1:53:47call this one card. Okay. This image is
1:53:50going to be called image. What I want to
1:53:52do is the parent, which is the card.
1:53:54Okay, I want to say you're an auto
1:53:55layout. So I can click on the button.
1:53:56Where's the button? There it is. There.
1:53:58Okay. Or I can use my shortcut shift A.
1:54:00And now the cool thing about that is,
1:54:02can you see it's kind of wrapping around
1:54:03it. All right. Just want to make sure my
1:54:05padding is 16 and the height is 16.
1:54:07Great. Uh, let's do some type. I'm going
1:54:09to type it over here. I'm going to type
1:54:11in bring your own laptop. Okay. And it's
1:54:15going to go in here. But the problem is
1:54:17if I put an auto layout, well, it's
1:54:18going to work. It's going to go exactly
1:54:19where I need it to do. Excellent. Okay.
1:54:22The problem is I go and add my date. Let
1:54:24me jump to making a date. Okay. I got my
1:54:26date. If I try and pop it in there, this
1:54:28auto layout, this auto layout is set to
1:54:30that. Okay. Which is vertical. Or I
1:54:32could do horizontal. Both of them aren't
1:54:34going to work. We need to do that
1:54:36nesting goodness in the middle here. Let
1:54:38me just move these around. So, bring a
1:54:39laptop. I want top of the date. Okay.
1:54:41They're still not working. But if I grab
1:54:42both of these guys, okay, and put them
1:54:44inside their own auto layout, that is
1:54:47what's called a nested auto layout. I've
1:54:49got one that I'm going to put in here
1:54:51inside this parent. It's nested inside.
1:54:53Okay, so I got these two selected. You
1:54:55can right click it and say I want to
1:54:56frame this selection. You could draw the
1:54:58frame first and throw these guys in.
1:55:00It's up to you. Okay, they're in this
1:55:01frame. I'm going to turn it into an auto
1:55:03layout. Shift A. Okay, this one's going
1:55:05to be called heading. And it's still not
1:55:07working, Dan. Look, it's nested though.
1:55:09Look, heading is inside card. Okay, but
1:55:11this thing here I can do some cool
1:55:12stuff. Remember this card was set to
1:55:14flowing down. This or all out can be set
1:55:18to going horizontal, vertical. Yeah,
1:55:19horizontal.
1:55:21Cool. E, it's not quite working, but
1:55:23that is a nested order out. And you'll
1:55:25find lots of nests inside nest inside
1:55:26nests. That's how AI did it
1:55:28automatically, which was cool. Let's
1:55:29look at making it a little bit better
1:55:31cuz the moment it kind of does that.
1:55:33It's not quite right. And when I type uh
1:55:35type, it kind of works, but just goes
1:55:36off forever. So, there's a few things we
1:55:38need to look at. Okay, let's look at
1:55:40this parent, the heading. Okay, this
1:55:42heading at the moment goes to about
1:55:44there. We want it to go all the way over
1:55:45here. How do we do that? Okay. The
1:55:47moment the width, you see it says hug
1:55:49there. Hug contents. It is hugging. Big
1:55:51bear hug around the contents as tightly
1:55:54as it can, which is very tight. Okay.
1:55:56Right around the edges. What I want to
1:55:58say is don't hug. I would like you to
1:56:00fill your container. And the container
1:56:02in this case is the card. That's the
1:56:04parent or the container. I want you to
1:56:06fill as much as you can. You see the
1:56:08little arrow that appears here? Watch.
1:56:09I'm going to go that way. You're like,
1:56:10"Awesome. That kind of works." So this
1:56:13heading now stretches all the way
1:56:14across. What I need to do now is at the
1:56:16moment they're all squished in the left.
1:56:17I'm going to say I want you to squish to
1:56:19the left. Okay. And it's got a gap of
1:56:21eight. That's a little gap in between
1:56:22it. I'm going to say the gap actually.
1:56:23Can you just make it auto? The parent
1:56:25says I want to be as big as I can. Okay.
1:56:26I'm going to fill out to this container.
1:56:27But we were forcing the gap also to be a
1:56:30certain number. But if we say be auto,
1:56:32it goes all right be whatever you want.
1:56:34And it will expand out to the container.
1:56:36Kind of get it. So we've got let's close
1:56:38that down. Our parent which is an auto
1:56:40layout. We've got this image hanging out
1:56:42inside of it. Okay. And then we've got
1:56:44this little block. Okay. That has its
1:56:46own little world of auto layout going on
1:56:48with these two fillers inside. Okay. Now
1:56:50I'm going to add my description text.
1:56:52I'm going to jump to that being done.
1:56:53Okay. That was the weirdest. I checked
1:56:56to see if the AI would give me Lauren.
1:56:58That's the Lauren we got. Somehow we got
1:57:01Disney. Wow. Oh, it's not Disney. Just
1:57:03felt Disney when I read it. Okay. If we
1:57:06dump them in here, as long as we get
1:57:08them in the right place, it should fill
1:57:10out. bottom got this lovely auto layout
1:57:12much the same way as this was made.
1:57:13Okay, let's double check a few things
1:57:15just to make sure everything works.
1:57:16Couple of things is that's not going to
1:57:18the edge. How do we do it? We select on
1:57:19him and say, "Oh, do we want your
1:57:21width?" Okay, we want you to go let's
1:57:23fill your container. Let's go all the
1:57:25way out. It did. It didn't really work
1:57:27cuz none of the words are small enough
1:57:29to break. Let's do that again. So, I'm
1:57:32going to change the text size. Let's go
1:57:33to Robboto regular. Oh, that'll do it.
1:57:36Okay. And do the exact same thing. Want
1:57:37to grab the text. We can say your width
1:57:39my buddy is fill container. Oh, at least
1:57:42one word popped up. You get what I mean
1:57:45though, right? So, it fills it up.
1:57:46Great. Let's keep typing. The other
1:57:47thing I like to check with auto layouts,
1:57:49we kind of did it early on, is uh check
1:57:52this all works. Keep going. It's not
1:57:55working. Okay. So, this text box is
1:57:57what's called a fixed height. So, with
1:57:59it selected, just the text, I can see
1:58:01the height is set to this height of 115.
1:58:04You're like, I don't want it to be 115.
1:58:05I'd like it to be hug contents. That
1:58:08would work. Okay, there's a couple other
1:58:09ones we could do. We could do hug
1:58:10contents. This button here does the
1:58:12exact same thing. Auto height. It's just
1:58:14another word for hugging contents. It
1:58:17even changes. Look, if you go to hug
1:58:18contents, can you see it just switches
1:58:19to that? And the other way, the third
1:58:22way, because you need three ways of
1:58:23doing stuff. You can just double click
1:58:25the bottom of a text box. It will switch
1:58:27it to hug and auto height all the same.
1:58:30Give it a test. Uh testy
1:58:33testy.
1:58:35Yeah, come on. It does work. Awesome.
1:58:37All right. Anything else we want to
1:58:38check? The other thing we would like to
1:58:40check is is this whole thing responsive
1:58:43or kind of is. Yeah, it is totally
1:58:46responsive. The thing that I was
1:58:48thinking wasn't going to work and I was
1:58:49going to show you was it all works.
1:58:52Cool. And sometimes it's just this box
1:58:54here. Okay. It is set to fill. We
1:58:56already did that. Sometimes when you
1:58:58drag it out ahead mine very clearly like
1:59:01this. Okay. With a specific width. When
1:59:03I'm designing it, often I'll line it up
1:59:04anyway there even though I haven't said
1:59:07fill and it will just be a fixed width
1:59:09still and it'll look like it is. Okay,
1:59:10it'll look like it's going to the edge
1:59:12but when I do this it goes nope. Okay,
1:59:14so this one here I set to fill that
1:59:17container please. Nice. It is totally
1:59:19tricky. Okay, so if you are finding
1:59:22yourself like oh that was a bit tough.
1:59:24We'll do a few more through the class
1:59:25but in terms of auto layouts okay autos
1:59:28on their own one of them is really
1:59:30simple. when you start sticking ones
1:59:32inside of other ones, you're like,
1:59:34"That's weird." And then you throw in
1:59:35this like, is it gonna be hugging or is
1:59:37it going to be filling the container? I
1:59:40remember when I got started, I just had
1:59:41to click on them all and go, is it hug?
1:59:42Is it fill the container? Something's
1:59:44not right. And you kind of just kind of
1:59:46played around with the buttons until you
1:59:47get a sense for like, all right, so I
1:59:49understand like I understand it fully,
1:59:50but it wasn't instant when I was
1:59:52learning it as well. So, if you're
1:59:52finding a little tricky, it is tricky.
1:59:54But when you do get it and you're doing
1:59:56all of this good stuff
1:59:58and you can start to do the things we
2:00:00did in the last one where we go all
2:00:02right you are going to be a duplicate
2:00:06grab them both shift a auto layout and
2:00:08then drag out bunches of them and then
2:00:10go command K because we're awesome and
2:00:12we go replace content and we just say
2:00:16fill with replaceic tab so we can fill
2:00:18with realistic content then hit command
2:00:20enter even though I always just hit
2:00:22enter anybody else do that It's just so
2:00:24good. Look. Networking event. It's just
2:00:27gone through and changed them. Look.
2:00:30Different dates, different descriptions,
2:00:32different kind of knows what we are. How
2:00:36does it know what bring your laptop is?
2:00:38That is kind of scary. It is. This is
2:00:42the stuff we do at Bring My Laptop.
2:00:44Renowned designer. Oh, the robots.
2:00:46You're freaking me out, man. All right,
2:00:48that is it. I'm going to contemplate my
2:00:50life with the robots and I will see you
2:00:52in the next video. Wow.
2:00:56Hi everyone. In this video, we're going
2:00:58to learn about auto layout grids. Look
2:01:01how cool this thing is. It's got grids.
2:01:03Okay. And we can move stuff around. You
2:01:06go there. They're called autoout grids.
2:01:08They're easy to use. I love them. Let's
2:01:10jump in. Okay. To get started, I've
2:01:11created a new frame. Nothing in it. I've
2:01:13made a background color of kind of like
2:01:15a midnight blue. That does not matter.
2:01:18Okay. Let's grab a frame. We're going to
2:01:19stick it inside. Okay. and we are going
2:01:22to find the auto. So, it's this new one
2:01:25here. Okay, we've looked at basically
2:01:27free form just means it's a frame with
2:01:29things wiggling around everywhere. The
2:01:31same way I'm drawing stuff inside of
2:01:32this frame that is free form. There's a
2:01:35rectangle in here. Okay, that's just got
2:01:37no fill, but it's just hanging out.
2:01:39Okay, let's delete him and let's change
2:01:41it. So, we looked at vertical and
2:01:43horizontal for auto layouts. What we're
2:01:45going to do is click on this one here.
2:01:46What it's going to do is convert it to
2:01:48auto. kind of saves us having to click
2:01:50that but also turns it into this grid.
2:01:52It's in beta at the moment. I'm sure by
2:01:54the time you're doing it, it'll be nice
2:01:56and not beatery. Might not have as many
2:01:58bugs. It might do some new features. So,
2:02:00all we've got here is let's bring in
2:02:02some images. It's the best way to
2:02:03explain it. So, let's go to command
2:02:05shift K or control shift K. I'm going to
2:02:07bring in 06 to 10. Okay. Of the images.
2:02:10And I'm just going to click place all.
2:02:12And let's drag one in. And it's not
2:02:14going to work. So, let's you go over
2:02:15there. These are all piled up on top of
2:02:17each other. So, if I grab this and throw
2:02:18it into my grid, which I can't really
2:02:20see. Where are you? There he is. If I
2:02:22grab that and drag it in, it'll kind of
2:02:24It didn't work. Let's make it
2:02:25appropriately sized just to get started.
2:02:28Okay, it'll expand and contract. Let's
2:02:29get it somewhere sized like that. And
2:02:31I'm going to say you get in there. Okay.
2:02:33Or you can go copy and go in here,
2:02:36select the frame where you want it, and
2:02:38go paste. And it will go in as well. The
2:02:40only trouble with this is that it's kind
2:02:41of working. Okay. It's got this little
2:02:43grid. You can see here the image is
2:02:45getting smaller. Uh, it's trying to
2:02:46fill, but it just can't do it. Okay, so
2:02:48what we need to do is either before or
2:02:50after. Okay, we need to select on the
2:02:52image and say do not have your aspect
2:02:55ratio locked. So, let's unlock aspect
2:02:57ratio. Give it a click. I'm going to do
2:02:58it to all of these all in one big go.
2:03:00Okay, so now it's going to do cooler
2:03:02responsive stuff. Awesome. E, you could
2:03:05build this yourself with frames and
2:03:07padding and auto layout, but grids just
2:03:09make it work easily. The cool thing
2:03:11about it as well is let's grab this one.
2:03:13I'm going to copy it and I'm going to
2:03:15actually let's drag it in when it's a
2:03:16little bit bigger. Let's see what it
2:03:17does. So, if I drag this guy just over
2:03:20here, it's not in. It's using the top
2:03:22left of this thing and it's not getting
2:03:25anywhere near close. So, it's too big.
2:03:27It doesn't know where to go. So, that's
2:03:28why it's in beta. If I do this, it's
2:03:30squeezed in sometimes. Okay. It will go
2:03:33and cross two
2:03:36the noises. Okay. This will cross two of
2:03:38my what are they? Rows. The cool thing
2:03:41about it is look, it's all resizy and
2:03:43responsible. Responsive is the word.
2:03:46Okay, so let's pull in. That was my
2:03:47kear. I asked AI to make me a kar. I
2:03:50didn't know what it was. So I said it's
2:03:51a piano with a guitar and it smashed it
2:03:53on the side there. Not what I wanted.
2:03:55Okay, so I'm going to copy that. Paste
2:03:57it. I've just double clicked it. Pasted
2:03:58it in. It is so good. Super easy to do
2:04:02these little grids. Otherwise, it used
2:04:03to take ages to mock these up. You can
2:04:05get them to span more than one like this
2:04:07one here. They can overlap. Okay. Okay.
2:04:09And this thing will still be expanded
2:04:11and contract. Okay. And if you do need
2:04:13to play around with the layers, it's
2:04:15just like normal over here in your
2:04:16layers panel. If I want him below all
2:04:18these guys. Bam. There we go. I don't
2:04:20want that. I want I like the kind of
2:04:22grid that they've got going or the gaps.
2:04:23Undo. Undo. Undo. Okay. You can adjust
2:04:26all of these. Can you see over here? You
2:04:27can say the gap is 10 and 10. If you
2:04:29want it to be, what do we want? 16 and
2:04:3116. You can add padding. Let's add eight
2:04:33and eight. They're quite versatile. Drag
2:04:35that one all the way that way. And
2:04:37they're very responsible. Why is this
2:04:39guy sticking out the bottom there? Oh,
2:04:40let's have a look. He's not constrained
2:04:42now, but under the fill image, he's
2:04:44under fill. Fit fill. Ah, it's cuz I
2:04:48dragged him out earlier on. Remember I
2:04:49was trying to drag him. There you go. Be
2:04:52your little home there, buddy. You can
2:04:53easily move them around. I can double
2:04:55click this guy and just drag him up and
2:04:57he will try and get up there. Nice. You
2:05:00can duplicate them. What's going to
2:05:01happen because of this weird row
2:05:03structure? Let's go command D. Okay,
2:05:05we'll put a new one in. It's so smart.
2:05:06You can add them in yourself by clicking
2:05:08on the just the entire frame and over
2:05:10here. Okay, you can click on this and
2:05:12say see it just defaults to two and two.
2:05:15Let's say I want this to be three and
2:05:18two. I just hover my mouse over get a
2:05:19sense for what I want and then click it.
2:05:21Okay. And in this case, I'm going to
2:05:22have to say you I want it, but I want
2:05:25this over here. And I'm going to maybe
2:05:27make this one go that way. Oh, look at
2:05:30us being all creative. Kar time. Here we
2:05:33go. You go in there. Okay, that dark
2:05:36background was a dumb idea. Let's go
2:05:37back to an off-white.
2:05:39Actually, full white. It can be a little
2:05:41weird when you move them around. Watch
2:05:42this. I want to move this guy over here.
2:05:44Where do I want him? That side. Okay.
2:05:46Kind of squished it out and moved
2:05:48everything around. So, sometimes you do
2:05:49need to copy and paste them. Sometimes
2:05:51it works nicely. Sometimes not.
2:05:53Depending on how much you've got spanned
2:05:55and what's kind of inside of the grid.
2:05:57Now, you can make these rows. So, rows
2:06:00and columns up and down. Okay. You can
2:06:02make them individual sizes. At the
2:06:04moment, they're all on set to auto. See
2:06:05these little dots? When I'm hovering
2:06:06around, those little dots are on the
2:06:08outside there and there is the
2:06:10measurements. So, what I can do is I can
2:06:11say, actually, I want this one here to
2:06:14be just a little bit bigger. And you can
2:06:15either click on it and just drag it,
2:06:17okay? Or type it in. If you know you
2:06:19want it to be 150, type it in. These all
2:06:21change to fit the space provided. It's
2:06:23very cool. You can actually drag them
2:06:25out of their little homes. Okay? All you
2:06:27need to do is the parent frame needs to
2:06:29be not set to clip contents. Okay? You
2:06:32can do some quirky things with it, but
2:06:34you end up breaking it. Don't break it.
2:06:36I'm undoing. Don't break it. But I know
2:06:38you will. You can add text. Let me know
2:06:40in the comments if you can work it out.
2:06:42I can't make the text expand and
2:06:44contract when it's editable text. It's
2:06:45not as responsive, but let's do it
2:06:47anyway. Let's go into here. Let's drag
2:06:49this in you and go to you. I got some
2:06:52text I was messing around with. Here it
2:06:55is. Okay. So, I'm going to put this in.
2:06:57Actually, that's why I had the dark
2:06:58background. Back to dark background
2:07:00time. Okay. Is this here? I want an
2:07:03extra row at the top. Okay. So, what I
2:07:05can do is I can say you I want what do I
2:07:08want? Another row. So, it's going to be
2:07:103x3. Now, okay. I'm going to grab you. U
2:07:13you in. I'm going to have to drag these
2:07:15ones down to kind of give myself some
2:07:18space for the text. Oh, it's so easy,
2:07:20isn't it? Now, this here, I'm going to
2:07:22go to cut. Actually, copy it. Click back
2:07:26in here. I'm going to click on this
2:07:27field and go paste. It will be in there.
2:07:29It's the wrong size. But the problem is,
2:07:31yeah, that's the big problem is I can't
2:07:32work out how to resize it. So, you got
2:07:34to pick an appropriate width so that it
2:07:37can kind of hang out with the dudes.
2:07:38Okay. Do the stuff.
2:07:41Okay. But the text eventually will get
2:07:44to the edge and go bye-bye. Okay. So,
2:07:47that's the only thing. Same with this
2:07:48height here. I want to don't want it to
2:07:50be auto. I'm going to drag it down so
2:07:51it's kind of relatively like this. I
2:07:54could get it to break. Watch this. I
2:07:55can't get the size to change. That's
2:07:56really what I want. Okay. So, I'm going
2:07:58to select the text. I'm going to say I
2:07:59don't want it to be hugging the width. I
2:08:01want it to fill the container. Okay. And
2:08:02I want it to drag it all the way over
2:08:04here. So it will break. Now watch this.
2:08:07Okay. So you can kind of make it work.
2:08:09All right. Let's grab that as well. You
2:08:11get smaller.
2:08:14Oh, very cool. All right. What else got
2:08:16easier using this grid function? Um, one
2:08:18thing I want to show you though is just
2:08:20before I go, it's like a special treat.
2:08:21If anybody's waited this long, um, I
2:08:23forgot to use it. This one here was my I
2:08:25was like, man, that was cool. I got to
2:08:27add AI and I was like, how the heck did
2:08:29I get that? Because I got it for that as
2:08:30well. So, what I did was right is I drew
2:08:33a rectangle and then I did this. It's
2:08:35not going to be the same cuz AI has a I
2:08:37don't know the inability to repeat
2:08:39things. Okay. But I'm going to make an
2:08:41image and I'm going to this is what I
2:08:43put in guitar close-up. Uh you can use
2:08:45color and I use the hexadimal number,
2:08:47okay, of the color. You could use RGB,
2:08:49whatever it is as the main color. And
2:08:51then I did it and I got this and I was
2:08:52like genius. So I did the headphones.
2:08:54Genius. Then I did the kear
2:08:57fail. Oh, I used a different color. It
2:08:59wasn't orange. It was pink. Okay. So, in
2:09:01this case, I might go, "All right, make
2:09:03changes and say acoustic guitar." Up to
2:09:05you. But that's how I got this kind of
2:09:06really nice flat graphics I'm using in
2:09:08here. Thought I'd cheer. And if you are
2:09:10of an age and you're like, "What the
2:09:11heck is a kear?" Maybe it's the accent.
2:09:13You ready? There you go. You are
2:09:15welcome. I wonder one so bad. Hands out
2:09:17who forgot they existed. There you go.
2:09:19Uh, we learned loads in this video.
2:09:21Figma auto layout grids and kitas. All
2:09:23right, that's it. I'll see you in the
2:09:25next video. Oh, fun. It's class project
2:09:27time. It is fun. What are you talking
2:09:28about? Great learning and practicing.
2:09:30Uh, what I want you to do is I want you
2:09:32to use the uh auto layout feature or
2:09:34sorry, the grid auto feature we learned
2:09:36in the last video. Okay, it's pretty
2:09:38easy one. Um, I want you to make what we
2:09:40made in the last video. There's some
2:09:41requirements. Uh, I would like you to
2:09:43use four or more images. Don't mind
2:09:45where you get them. AI generated stock
2:09:47library your own images. Um, I'd like
2:09:49them to be related to your um particular
2:09:52genre of music. So it might be rock and
2:09:54roll, soul, hip-hop, whatever you got.
2:09:56Okay, do that. I want you to experiment
2:09:57using at least one colored box. Okay,
2:10:00you can see in here on my one, I changed
2:10:02mine after the video to add these
2:10:03colored boxes. The thing is they need to
2:10:05be able to move around with them. And
2:10:07that's going to be a bit of a a harder
2:10:09one. I don't know. It's advanced course.
2:10:10I'm setting some uh tasks where somehow
2:10:13when you put it in probably this is just
2:10:15a frame, just a frame that was sitting
2:10:17over here that it's now in there. But by
2:10:19default, this guy does not want to
2:10:21expand and contract. I want you to see
2:10:23if you can figure out how to do it. If
2:10:25you can't do it, don't worry. Check in
2:10:27the next video. Well, check below. Don't
2:10:29look yet, but somebody in the comments
2:10:30will let you know how they got it to
2:10:32work. Okay? So, just a colored box
2:10:33instead of an image. I'll give you a
2:10:35hint. It's something to do with the
2:10:36width and height. See if you can figure
2:10:37that one out. We've done it before is
2:10:39the key. Add text, but that's optional.
2:10:41Um, I want you to do at least one object
2:10:44spanning a column. So, that spans one,
2:10:46two, three. that spans two. Okay, this
2:10:48is just one of them at least.
2:10:50Deliverables, take a screenshot and
2:10:52upload them to class projects and these
2:10:54are looking cool and I like this little
2:10:55grid. Upload at social media and just
2:10:57say you're experimenting with the Figma
2:10:59grid auto layout what you think of it.
2:11:01Make sure you tag me. Have fun playing
2:11:03around with it. All right, I will see
2:11:04you after you finished your homework.
2:11:06Not homework, class project, fun stuff,
2:11:08remember. All right, next video.
2:11:09Components. You know them already. Why
2:11:11are we doing a video? I've got some
2:11:13important stuff that catch people out,
2:11:15catch me out. Um, I want to share that
2:11:17with you. Uh, this video is it fun. I
2:11:20get lost a little bit. Wasn't planning
2:11:21to get lost, but we did. But we fixed
2:11:23it. Hopefully that will be a nice little
2:11:25nugget for you. We swear. I know. We
2:11:27don't mean to, but we do. All right,
2:11:29that's it. Let's get in talk about
2:11:30components. All right, so we're going to
2:11:32use um I created this nav and I forgot
2:11:35yours might be at the front cuz you're
2:11:36like, he left his nav behind there. We
2:11:38did that earlier in the course. So, I'm
2:11:39going to click on this. Just use my uh
2:11:41move to back button, which is just the
2:11:42first square bracket. Okay. And then
2:11:45I've got this. I'm just going to do it
2:11:46over here because it's a little bit
2:11:48clearer. All right. So, I've got this
2:11:49nav that I made. Let's have a look at
2:11:51how it's made. So, it's called nav
2:11:52bottom. Inside of it are some What are
2:11:54these? Do you remember? Yep. These are
2:11:56main components. These are the bosses.
2:11:59Okay. These are the parents. So, when I
2:12:01make copies of these, okay, they become
2:12:04instances of that boss. And the cool
2:12:06thing about it is when I adjust the main
2:12:08one, okay, I'm not sure what I'm going
2:12:10to do to it, but I'm going to wreck it.
2:12:12Can I do it from this distance? Can you
2:12:13see it there? It's doing it to both of
2:12:14them. Cool. So, we know what components
2:12:16do. Um, one of the things though is
2:12:18let's say I want to turn this nav also
2:12:20into a main component because I'm going
2:12:21to use it on lots of pages. I might as
2:12:23well control it all. Okay, let's see
2:12:24what happens. So, I'm going to use my
2:12:25shortcut uh command shift K. U component
2:12:29that is import image.
2:12:33That's command option K or control alt
2:12:35K. Okay. And what happened? It did
2:12:38become a main component. That's awesome.
2:12:40But it fired these out. Where did these
2:12:42come from? And this is what happens when
2:12:43I see other people's files, especially
2:12:45when they're kind of at the intermediate
2:12:46level, not quite advanced. You're like,
2:12:48they just leave these here. And what the
2:12:49heck did these happen? So, the rule is
2:12:51you can't have main components nested
2:12:53inside of other main components because
2:12:55we turn the outside frame to main
2:12:56component. It went and cough these out.
2:12:58Okay? Uh, and left inside of here. Can
2:13:01you see these aren't the main components
2:13:02anymore? Look, they're just instances,
2:13:04the little diamond versions. So, what we
2:13:06need to do is just be thoughtful of
2:13:07that. And what you'll find is that,
2:13:10let's zoom out a little bit. You'll see
2:13:11that this guy here, look, they're
2:13:13underneath there. I'm going to What am I
2:13:15going to do? Yeah, let's fire them out.
2:13:17Okay. And what I'm going to do is find
2:13:18them. They're all there. Okay. Let's
2:13:21drag them out. And we're going to put
2:13:23them on a components page. Okay. So, I'm
2:13:26going to cut them and say you guys now
2:13:28live on my sweet components page, which
2:13:30I don't have much of. Okay. You can keep
2:13:32them on the same document as there's no
2:13:33like law against it. Um, but if when
2:13:35you're working on a bigger file, you
2:13:37really need a components page.
2:13:38Otherwise, you can just have them next
2:13:40to your design, just kind of like
2:13:41hanging out over here. All right, that's
2:13:43important thing number one. Uh, the
2:13:45other thing I want to show you is that
2:13:46this now is a main component. So,
2:13:48clearly, what have I done?
2:13:51Like,
2:13:53what's wrong? Frozen. No, I accidentally
2:13:55hit the shortcut for lock layer. I can't
2:13:57even remember what it is. What is the
2:13:58locking layer shortcut? Please hold. Oh,
2:14:00there it is. There. Uh, shift command L.
2:14:02I didn't click that. I clicked something
2:14:04on my keyboard and it locked it. Anyway,
2:14:06um, so I've unlocked it. And what I need
2:14:08to do is I shouldn't really use this
2:14:10here either. I could leave it here. So
2:14:12that's a lot of people just leave this
2:14:13on their first page. Okay. And then just
2:14:15make instances of it. Let's be clever.
2:14:17Okay. And let's cut this. Let's go to
2:14:20our components panel. Let's put it in
2:14:22here. Okay. So this Oh, is even a bigger
2:14:25mess. What have I done here? You're
2:14:27there. What? Oh, I've got lots of these
2:14:30guys over top of each other. All right.
2:14:32I really want to just cut these out of
2:14:34the course, but these things will happen
2:14:35to you, too. What the heck happened
2:14:37there? I'm going to undo. Go back. There
2:14:39must have been so many guys all hanging
2:14:41out there. So, let's go back to my
2:14:44hi-fi. I want you back. There you are.
2:14:47So, what is this? There's just one of
2:14:49them. H copy
2:14:53and go to my components.
2:14:56Click paste.
2:14:58What did I do? Maybe I pasted them
2:15:01inside of these guys. I had them
2:15:02selected and went paste. That's what
2:15:04did.
2:15:06I don't know what happened there. If you
2:15:09know what I'm doing. Anyway, that
2:15:10happens. There you go. I had those
2:15:12selected. I just had my regular paste
2:15:13and somehow I'm saying it's a bug, but I
2:15:16got three of them. It pasted one for
2:15:18every icon that I had.
2:15:21Oh, it put an instance of it inside of
2:15:23every image. That is weird. All right,
2:15:27there you go. I learned something in
2:15:28this class. All right, let's start
2:15:29again. Shake it out then. Shake it out.
2:15:31You ready? Forget all the getting lost.
2:15:33I was at Mobile Hi-Fi. I'm going to say
2:15:34you, my friend. I'm going to cut him,
2:15:36not copy him. That's probably where I
2:15:38went wrong. I'm going to go to
2:15:39components. I'm going to say you.
2:15:40Nothing selected. Paste him. Okay, this
2:15:42is where I'm going to keep this main
2:15:43component. Inside of this main component
2:15:45has a bunch of these instances of these
2:15:48guys at the top here. All right, we're
2:15:50doing good. Let's go back to mobile.
2:15:51Let's go to our assets panel. And we
2:15:53should have created in this file under
2:15:55components. We should have Where is he?
2:15:57There. My bottom nav. Okay, so I'm going
2:15:59to stick this in. It should now be an
2:16:01instance. Okay, cool. Anything else
2:16:03weird we need to learn? There is, but
2:16:05I've been flustered. Okay, that's really
2:16:07it. What I want to do is I am going to
2:16:09put one over here as well. Okay, and
2:16:12because it's responsive, we get to
2:16:14adjust it. Okay, the cool thing about
2:16:15instances of the main component,
2:16:17remember our main components up here
2:16:18hanging out. These are just like
2:16:19children of them. They do whatever he
2:16:21says. But there are some small things we
2:16:22can do. I can say actually the selected
2:16:24colors in here, I want it to be white.
2:16:26Okay, they're still connected. If I go
2:16:28back to my main component and I say,
2:16:29where is he? This guy here, I say
2:16:32everybody has some padding. Okay, so I
2:16:34want padding at the bottom. What I want
2:16:36to do is split the padding. So when it
2:16:38comes to nav, I like more at the bottom.
2:16:40Nice little chin. Let's go 24. And this
2:16:42one up here, let's go 16. Also going to
2:16:45want a background color. Okay. So I'm
2:16:47going to go give it a fill slightly off
2:16:49white just cuz I think it looks cool.
2:16:52And I'd like to have it and I'd like to
2:16:54say you have an effect of drop shadow.
2:16:56I'd like it going not down. Okay. So
2:16:59zero, nothing going to the right. This
2:17:02is up and down. So I want this to be
2:17:03like minus four. So it goes up. Can you
2:17:05see it there? And maybe the spread or
2:17:07the blur is a little bit more. Maybe
2:17:09just a little bit less opacity. I've
2:17:11done this many times. I kind of know
2:17:13what I like without seeing it on the
2:17:15document. Let's go back to our mobile.
2:17:16And because we did it on our component,
2:17:19all of these adjusted. That's very cool.
2:17:21But you can see here these remained
2:17:22white, which is also very cool. I could
2:17:24probably use that nav now. But I'm going
2:17:26to select on that and say you I want you
2:17:28to be this kind of darker color that I'm
2:17:31using.
2:17:32Haven't really ideally got that sorted
2:17:34out yet. All right. So main component is
2:17:36great. Don't put main components inside
2:17:39of other main components because they
2:17:40get sped out. You should probably keep
2:17:41them on a separate page, but you don't
2:17:43have to. And you can override instances
2:17:46with small things like color. I can't
2:17:48adjust the icon here. I have to go back
2:17:50to the main component, but I can change
2:17:51the color and some of the layout. And I
2:17:53can go, all right, ticketing. I want to
2:17:54go over here. I want to turn the eyeball
2:17:56off on this. And it reflows cuz we're
2:17:58awesome. It's still there. It's not
2:17:59turned off. It's impossible to turn
2:18:01anything or delete anything. If I click
2:18:02on this and hit delete on my keyboard,
2:18:04it just goes to sleep. Sleepy. All
2:18:07right. The last thing about components
2:18:08is something called constraints. You
2:18:10know about them, but let's look at some
2:18:11quirkiness. So this here, I'm going to
2:18:13move these guys up. At the moment, by
2:18:15default, okay, I drag this up, they
2:18:18disappear. I want it to stick to the
2:18:19bottom of the nav. So, I'm going to say
2:18:21U constraints. Okay, I want it to be
2:18:24left and right because at the moment
2:18:25it's not. Let's have a look. I think
2:18:27it's just doing left. So, it's kind of
2:18:28stuck there. So, I need to say you need
2:18:30to go left and right so that it is
2:18:33squishy. Okay. Also, I want it to stick
2:18:36to the bottom. Okay. So, you are going
2:18:38to be constrained to the bottom. You're
2:18:40like, I already know that, Dan. You're
2:18:41like, okay, but where is it now? Where
2:18:45are your lovely constraints? They've
2:18:47gone. I know the constraints need to
2:18:49have a parent frame otherwise they don't
2:18:50appear. So no constraints. Watch this
2:18:53exact same thing inside of a parent
2:18:54frame. Constraints are back. Okay. It
2:18:56doesn't even have to be component. If I
2:18:58draw anything a frame. Okay. No
2:19:00constraints because it has no parent
2:19:02frame. He goes inside of here. Boop.
2:19:04He's got constraints. Happy days. Okay.
2:19:06So that's one thing to remember. Um the
2:19:09other last little thing I say the last
2:19:11thing it's probably going to be 20 more
2:19:12is let's go back to my components page.
2:19:14Like oh I might as well do that for him.
2:19:16So this guy so I don't have to do it
2:19:18every single time. Okay. So you're like,
2:19:19"All right, no constraints." Dan told us
2:19:21it needs a parent frame. So often you'll
2:19:23find all components inside this frame
2:19:25even though they don't need to. Okay? So
2:19:27that you can see things like this. Look,
2:19:29he's stuck to the top and left. Okay?
2:19:31This does nothing. Let's say I make it
2:19:33top again and I change it to
2:19:37so want to stick to the right. Okay. So
2:19:40it should do that. So I'm going to go to
2:19:42another page. Okay. Let's go. F U.
2:19:48That's not what I meant. Frame. Click
2:19:50this. U. Why am I going to U? I think
2:19:52I'm just swearing at everybody. What's
2:19:54the U shortcut? Was in my brain. I got
2:19:55distracted by the FU. Oh, I was just
2:19:57saying you. Grabbing you. There you go.
2:20:00Uh, so I've got this new frame with bad
2:20:03language. So, I'm going to grab my
2:20:05assets. I'm going to find the one called
2:20:06bottom and I'm going to stick him in.
2:20:08Stick him anywhere. And look, he's in.
2:20:11He's top, which is the default. But
2:20:12watch, he didn't go right. So, it
2:20:14doesn't really matter what you do. I
2:20:15don't know why. Check it now on your
2:20:16version. They might change that. It'd be
2:20:18great to set it as a kind of a default
2:20:20for the main component because I don't
2:20:22know. Feels like that's the reason for
2:20:24main components, but it doesn't work.
2:20:25Let me know if it does in the comments.
2:20:26You kind of have to do it afterwards.
2:20:28That's okay. Okay. Top bottom. Cuz once
2:20:31you've done it once, it's not too bad.
2:20:32Okay. Cuz what often you grab him, okay,
2:20:35and you paste him and he will bring that
2:20:37stuff along. Just not from the main
2:20:38component. All right. That was a fun
2:20:40one. We swore a little bit. We got lost
2:20:42and got really lost. Hope you found it
2:20:44useful. Components are easy, but also
2:20:47can have a few quirky bits. And that's
2:20:48the kind of quirky stuff I love sharing.
2:20:50All right, that is it. I'll see you in
2:20:51the next video. Oh, I'm going to put
2:20:52rounded corners on stuff. That's all I'm
2:20:53going to do. Okay, you can go now.
2:20:57You
2:20:59yep.
2:21:00Eight's a nice size for a phone.
2:21:02Actually, they need to look bigger for a
2:21:03phone. 24 is like more representative of
2:21:06um kind of a modern phone. Even a bit
2:21:08bigger. I like to see it in the design.
2:21:10You don't have to. If I undo that and I
2:21:12go back to square, obviously when I
2:21:14prototype it, it will go inside and be
2:21:16clipped off inside of a phone anyway.
2:21:18So, you don't really need it, but using
2:21:20my arrows. Okay, you can see there
2:21:22they've got rounded corners. Really big
2:21:24ones on the new iPhone. All right. Uh,
2:21:27that is all I wanted. I'm going to go
2:21:28back to where I I'm going to go back to
2:21:29my rounded corners. I'm going to do that
2:21:31in the break. You go on to the next
2:21:33video. See you there. Hi, everyone. In
2:21:35this video, we're going to talk about
2:21:36what spacing to use. You can use
2:21:38anything you like, but whatever you
2:21:39decide on. Okay, you can make this like
2:21:41little grid here and it kind of gives
2:21:43you a nice little visual reference to
2:21:44go. All right, got the spacing here.
2:21:46What should it be? Let's use 32. Okay,
2:21:49and I can make sure that this is 32
2:21:51away. Currently, it's 43.
2:21:54It's not good. Okay, so you can use it
2:21:56as just a visual guide of like what
2:21:57should I use and being consistent with
2:21:59your spacing. Okay, what I'll do is I
2:22:01will show you as well how to use an app
2:22:02to add all these like little
2:22:04measurements in or draw the boxes. It's
2:22:06fun. and we'll do it once. And you can
2:22:08copy and paste this little guy onto
2:22:09every new job so it won't take any time
2:22:11in the future. All right, let's jump in.
2:22:13Right, let's start dragging them out.
2:22:14Once you've done it once, you can just
2:22:15copy and paste every future document
2:22:17forever. Okay, so I want this to be a
2:22:19nice bright color so I can see it um as
2:22:22a visual reference. And I want my first
2:22:24one, the most fundamental size is 8 by
2:22:278. Okay, and because I've got
2:22:30constraints turned on, okay, it means
2:22:31that I only have to type it in once.
2:22:33Okay, and it will update both the height
2:22:35and width. just saves a little bit of
2:22:36time. Okay, so eight's the first one.
2:22:38I'm going to zoom in a little.
2:22:40Okay, and I want to see a visual
2:22:43representation of the next size, which
2:22:44is just another eight. Okay, which is
2:22:4616. Okay, then I want just to keep going
2:22:49up in eights. Okay, I get a bit confused
2:22:51with math in my head, so I just had plus
2:22:53eight in the field. Okay, we're at 24. I
2:22:56know that. Okay, 32. These are the
2:22:59really common sizes. You can keep going
2:23:00up. It's up to you. You can also do
2:23:03multiples of six. Okay. Or five. They're
2:23:07just harder to divide by. And your
2:23:10developer will hate you because often
2:23:11the developer, okay, she'll be working
2:23:13with like a framework that already
2:23:14exists. And instead of her writing in
2:23:16all the notes and zeros and, you know,
2:23:1816 pixels, she'll go use the pre-made
2:23:21spacing and it will probably be eight or
2:23:23a division of it. Depends how much you
2:23:25like your developer. Now, I like to keep
2:23:27the spacing in there as well cuz I like
2:23:28these as like what size should my button
2:23:30be, icon be, image be. You get a sense
2:23:32for it by looking at these. The spacing
2:23:34I like to leave if you zoom in far
2:23:36enough. Oh, I can't see my pixels
2:23:37anymore. You used to be able to. I'm not
2:23:39sure if I turned mine off or it's off by
2:23:40default. You'll know because yours will
2:23:42either be on. You'll be able to see the
2:23:43little pixels in here. Okay, you can go
2:23:45up to view and you can go to pixel grid.
2:23:47Boop. Okay, and you can see them cuz I
2:23:49want to count four of them. Look, I got
2:23:51four there. That's the kind of minimum
2:23:52gaps for things. Obviously, the minimus
2:23:54gap is zero. Minimus is not a word, Dan.
2:23:57And the next size is again going up. So,
2:23:59we're going to go one, two, three, four,
2:24:02six is a good one. Sorry, eight is
2:24:04another one. People do use six. I'm just
2:24:06giving you the general rules. People do
2:24:08um put whatever they like. So, six is
2:24:10you'll see commonly. I'm going to stick
2:24:12to this eight grid. Um how do I know
2:24:14instead of counting pixels? You can do a
2:24:16couple of things. If you've got say this
2:24:19selected, hold on the option key on a
2:24:20Mac, alt key on a PC, and just wander
2:24:22around. Okay, you can see it tell you
2:24:24the distance between all of these guys.
2:24:26Eight. You did it. Or you can do this.
2:24:28You can say you start there. And then I
2:24:31want this X position to go plus 16.
2:24:34Okay. So I wanted to go 16 pixels across
2:24:36to see these gaps. Okay. Uh this one
2:24:38here. Do we want a 24 gap? We probably
2:24:40need one in between. So what I'm going
2:24:42to do is instead of going plus 16, I'm
2:24:44going Why did I go plus 16? I did. I
2:24:46wanted a different size in here. Okay.
2:24:48So what I'm going to do is undo that. Go
2:24:51back, please. I'm going to do + 8 + 4.
2:24:57Dan's making maths hard. This works on
2:24:58my brain. Okay. So, I don't want to go
2:25:00the full 16. I want to go just 12. I'm
2:25:02going to go plus 12. Okay. It's a more
2:25:05reasonable size. It's still divisible,
2:25:07okay, by our eights kind of. You get me?
2:25:09Okay. And then this one can be the size
2:25:11of 16. So, we're going to you plus 16.
2:25:13You can keep going up with the sizes,
2:25:15but I like those. It's a good kind of
2:25:16just reference to have on every doc.
2:25:18Copy and paste it across so that you can
2:25:20start doing like see this gap here. What
2:25:22should it be? Probably that one. No,
2:25:23maybe this one. Okay. Maybe the gaps
2:25:25between this would be nice as that. Can
2:25:27you see it's just a visual reference?
2:25:28This might only be working in my head.
2:25:30One thing I want to do though is I don't
2:25:32know what that is. I have to click on
2:25:33it. It says 32. It's not hard. But I'm
2:25:35going to show you a cool plugin. Okay.
2:25:37So, I'm going to go down to my actions
2:25:38panel. Let's go to plugins. And there's
2:25:40this one called design doc. They're
2:25:42renaming it spectral currently. I think
2:25:44they renamed it spectral. And then
2:25:45everybody didn't find it, so they went
2:25:47back to design doc. It might be called
2:25:49something different by the time you get
2:25:50here. There are lots that do this. This
2:25:52is not just one of them. It's the one I
2:25:53like. Is it the best one? I have no
2:25:55idea. I only use this one. Actually,
2:25:56there's one called dimension. There's
2:25:58annotations. There's a few other ones.
2:25:59So, you might just type in measurements
2:26:02and see what you get. If this one's no
2:26:03longer available, it's like the kiss of
2:26:05death if I add them to a class. As soon
2:26:06as I do a plugin, whoever made it dies
2:26:09or stops updating it at least. So, let's
2:26:11run this one. I like this measure. It's
2:26:13got lots of other cool things that will
2:26:15do. Okay. But let's have a look at let's
2:26:17have a look at this one. Okay. So, I'm
2:26:20going to go to this. I'm going to say I
2:26:22would like you to put the height just
2:26:24above it. There you go. It's not
2:26:26temporary. It's there for good. Okay,
2:26:28you can see it in my layers panel.
2:26:30There's this container that has my
2:26:31measurements in it. I can turn it on and
2:26:33off. Okay, it's just really handy. Same
2:26:35with this one. Let's go. You need one of
2:26:37top as well. You two, please. Top. And
2:26:39it's just a nice cleaner way of being
2:26:41able to see what sizes you got. I'm
2:26:43probably going to need a couple of
2:26:44bigger sizes. You can do the gaps
2:26:45between stuff as well. I can say you and
2:26:47you. Let's do the space between. Oh, and
2:26:49it did it down the bottom. It's so
2:26:50clever. Okay. I like little apps like
2:26:52this. That is super helpful. And now,
2:26:54oh, forgot that one. You can have this
2:26:56copy and paste it into the new document
2:26:58every time you start one and then you've
2:26:59got a nice little visual cue of like
2:27:02where everything's going to be. What I
2:27:03like for this app is I like to put it
2:27:06inside of a It creates all of this. It's
2:27:08quite messy. Is it messy? I don't know.
2:27:10I'm going to put it inside of a frame.
2:27:12Okay. And I'm going to put in this one's
2:27:14going to be called Oh, it didn't all go
2:27:15in. Okay. The container really didn't
2:27:17want to go in. I think it's cuz it's
2:27:18locked. I can drag it in. You go in
2:27:20there, buddy. I'm the boss. Okay. And
2:27:22I'm going to call this one spacing
2:27:25just so I can close it up and it's a
2:27:26little bit nicer. So I can close it up.
2:27:29Oh, this is weird. All of it's there. I
2:27:32can't select on it cuz it's locked and I
2:27:34can't Oh, there it is. Hello.
2:27:39Sorry about that. Um, all right. Let's
2:27:41make the background dark of the spacing
2:27:42one cuz it looks weird in white cuz I
2:27:44kind of designed it. Let's go black.
2:27:46Real high contrast. Now that's that app.
2:27:48We'll look at later on. I want to show
2:27:49you cuz like I don't know. I can't help
2:27:50myself. I love that measurement app. Oh,
2:27:52no. We'll do that later in the course.
2:27:53Dan, don't do it now. All right, so
2:27:55those are the basic spacings. You can
2:27:56use anything you like. Whatever you do,
2:27:58though, create a little grid. Put the
2:27:59effort in once and you will be able to
2:28:02use it over and over again. All right,
2:28:04next video. Hi everyone. Let's talk just
2:28:06a tiny bit more about what spacing
2:28:08should be. I've given you some generic
2:28:10stuff in the last one. Where did I get
2:28:11that magic from? How do you get better
2:28:13at it? If you are already, you know,
2:28:15quite proficient at your spacing, you
2:28:18can move on. But if you want a little
2:28:20bit of I don't know help to make sure
2:28:22things are consistent and easy to work
2:28:24with with your developer when you hand
2:28:26off your app not causing problems or at
2:28:28least being mindful of the developer and
2:28:31what they're going to be working with.
2:28:32Watch this video. So there are lots of
2:28:34places that your app or website are
2:28:36going to end up and what will end up
2:28:38happening is your engineer, your
2:28:40developer, whoever you're using to make
2:28:42it, it might be you. It's highly likely
2:28:44to be built on top of what's called a
2:28:46framework. your developer, she's not
2:28:48going to be going through and putting
2:28:48all the knots and zeros, okay? They're
2:28:50going to be building on top of things
2:28:51that are built on top of things that are
2:28:53built on top of things. So, if you are a
2:28:55iOS developer, okay, the developer is
2:28:58going to be using the pre-made or at
2:29:00least guidelines from Apple. If it's
2:29:03Android, it's going to be this material.
2:29:05That's what they call their design
2:29:06system, and they give you lots of
2:29:08helpful things about how things should
2:29:10be spaced apart. If you're going to web,
2:29:12it might be Bootstrap. It might be
2:29:14Tailwind. So talk to your developer,
2:29:16figure out where it's going, what
2:29:17they're building it on, and then have a
2:29:19little read around. It can be confusing,
2:29:21but we need to get started in these
2:29:22sorts of things so that you can
2:29:24actually, I don't know, begin your
2:29:25understanding of maybe a little bit of
2:29:27CSS, a little bit of code so that you
2:29:30don't throw your developer a spacing of
2:29:32seven because seven is tricky because
2:29:34you can't divide it in half. Okay? You
2:29:36can't have a half a pixel. You can
2:29:37divide eight in half, you can have four
2:29:39pixels. Let's have a little look at why
2:29:40eight is good as well. So let's look at
2:29:43material for Android. Okay, I'm in their
2:29:46material.io. They're on their version
2:29:48three. In the future, you might be at
2:29:50version four or five. Check it out.
2:29:52Okay, I'm under foundations. I'm looking
2:29:53at layout. Uh, understanding layout. And
2:29:55it's just really nice to go through and
2:29:56say space between columns is a default
2:29:59of 24 dp, okay, which is essentially
2:30:02pixels, short for device independent
2:30:04pixels. They use this because lots of
2:30:06different phones have different like
2:30:08pixel densities. Just consider it pixels
2:30:10if you understand that. And when you're
2:30:12designing in Figma, DP equals PX. So
2:30:15they're using spacing of 24. So make
2:30:17sure when you're building out your
2:30:18little spacer block and you're going to
2:30:20Android first, make your gap 24. That's
2:30:22the default. It's happily divisible by
2:30:248, not by chance. Or at least it's a
2:30:26really common spacing for the moment.
2:30:28Let's have a look at uh iOS. Have a read
2:30:32through what they do. I think they're
2:30:34using 20 for their margins on their
2:30:36sides. They have some different defaults
2:30:39to a lot of other ones. And the thing
2:30:40with iOS is there is both uh phone,
2:30:44there is TV, there is gadgets, okay,
2:30:47there is watches. So have a little look
2:30:49whatever you're designing for, there
2:30:51will be documentation online. If you're
2:30:53going out to web, say you're building a
2:30:55website or web app, find out. Is it
2:30:57WordPress? Is WordPress using Bootstrap?
2:31:00Bootstrap is a framework that helps
2:31:02developers work fast. Okay? And what
2:31:04they'll end up doing is, let's have a
2:31:06little look. I found this. Okay? Okay,
2:31:08the gutters is what they call it. Okay,
2:31:10the space between stuff. And the default
2:31:12gutters are 1.5 rim. And you can see
2:31:15there they said 24 pixels, the same as
2:31:17material. So if I use 24 as my spacing,
2:31:20the developer is going to like it
2:31:21because it's kind of consistent with
2:31:23Bootstrap and it's consistent with
2:31:24Android depending on where you're going.
2:31:26Now there are 100 different frameworks.
2:31:28Tailwinds, people are using this a lot,
2:31:30okay, to help with their styling. You
2:31:32can see in here I found under gap. Okay,
2:31:33Bootstrap calls a gutter. Tailwind
2:31:35causes gap. It's all useful to know as a
2:31:38UI designer. You can see here what a
2:31:40developer will type in is they won't
2:31:42actually type in the number. They'll
2:31:43just hopefully be close to one of these.
2:31:45So they'll put in spacing when they're
2:31:46coding to say gap is zero, which is
2:31:49zero. Gap is one, which is.25
2:31:53over. A ream by default is 16. So 0.25
2:31:57of 16 is 4 pixels. So remember that
2:32:00little spacing we had before? That's the
2:32:02minimum one here. And it's a good rule
2:32:04to not go three. You know, the divisions
2:32:06become tricky and your developer is
2:32:08going to have to go and override a lot
2:32:10of the framework defaults. You can do
2:32:12it, but your developer will probably
2:32:13just ignore it and use some of the
2:32:15defaults unless you force them. Okay,
2:32:17let's have a look. So, 16 6 8 10. Oh,
2:32:20there's a 10. You might decide that in
2:32:22your uh design that you need a 10. Where
2:32:25was it? We don't have a 10. We've got 4
2:32:296 8 12. There's no real hard and fast
2:32:32rules on what these can be, but if you
2:32:34design for frameworks or understand them
2:32:37a little bit, especially if you know
2:32:39where it's going, if you know the
2:32:40developer uses Tailwind, great. Type out
2:32:42all of these. So, the big takeaways is
2:32:44multiples of eight are good, but really
2:32:46you should check out how it's getting
2:32:47made and copy that. It'll make the
2:32:49transition from Figma to the actual
2:32:51design and development a lot smoother.
2:32:53And you don't have to, but I've got a
2:32:55web essentials as well, which covers a
2:32:57lot of the kind of things that we look
2:32:59at here, like what is a rim, what is a
2:33:01DP, what is Bootstrap, what is flexbox.
2:33:03There's all sorts of good stuff that you
2:33:05can learn that will inform your design
2:33:07when you're in Figma, but kind of
2:33:09outside of the scope of this course, but
2:33:10a little bit of HTML and CSS and
2:33:12framework knowledge makes you a better
2:33:14UX designer in my opinion. All right,
2:33:16was that confusing? A little meandering.
2:33:18Anyway, let's get on to some more hard
2:33:20skills in Figma. It's class project
2:33:22time. We're going to make the lower
2:33:24navigation. We've already done it if
2:33:25you've been following along. I just want
2:33:26to kind of get everyone up to here.
2:33:28Okay. So, what I want you to do, create
2:33:29the low nav. Okay? It's this guy here.
2:33:31Okay? And I want it to do some stuff.
2:33:34Okay? And we're just going to practice
2:33:36the things we've already learned. So, I
2:33:37want to make sure you're using
2:33:38components, both the icons, okay, and
2:33:40the nav. What does that mean? Okay. This
2:33:43thing here is an instance of my main
2:33:44component, which is over here. I want
2:33:46you to do that. These are main
2:33:48components of my icons. So, make sure
2:33:49you're doing that just to kind of
2:33:51practice. You have to use an auto layout
2:33:53for your navigation so that you can do
2:33:55auto spacing between the items. That
2:33:57just means that when I grab this, this
2:33:59squishes up and the icons have automatic
2:34:01spacing that go in and out. So, auto
2:34:03layout on the outside and make sure you
2:34:05can set up the auto between them. The
2:34:07last one on there is constraints.
2:34:09Constraints allows us to do this with
2:34:11the navigation. I want you to stick it
2:34:12to the bottom and left and right so that
2:34:14when we do pick a new page, actually,
2:34:16let's go to this one. and not on new
2:34:17page. But let's say we need to do a
2:34:19different frame size cuz we're doing, I
2:34:21don't know, the old iPhone 13. Look, it
2:34:24shrunk. It's not that much difference.
2:34:26That was exciting. But you can see it
2:34:28attaches to the bottom and to the sides.
2:34:30Okay? That's the constraints part. Do
2:34:32all of those. Okay? And then I want you
2:34:34to record a video of you doing this
2:34:37thing going like this on one of your
2:34:39pages. Okay? So that we can see you made
2:34:40it work. If you can't record videos cuz
2:34:43it's just too hard and you can't make it
2:34:44happen, I will accept screenshots. I'll
2:34:47trust you that it works, maybe take a
2:34:49screenshot of this. Plus, we can see all
2:34:51of the things going on over here. We're
2:34:52like, ah, I can see the constraints and
2:34:54they seem to be working. I'd love to see
2:34:55videos, though. If you're not sure how
2:34:56to take a video on your computer, okay,
2:34:59most Macs and PCs have built-in
2:35:01software. Mac call it image capture. You
2:35:03can do with that. I use Camtasia. You
2:35:05can use QuickTime, which is free on both
2:35:07Mac and PC. There are plugins inside of
2:35:09Figma, which are interesting. You can go
2:35:11to the plugins, okay? And there is one,
2:35:14the one that I've used before is Vimeo.
2:35:16Okay, Vimeo. Um, Vimeo Record will allow
2:35:19you to log in and you have to get a free
2:35:21account with them, but you will be able
2:35:23to record your screen within the app.
2:35:24There will be other plugins as well.
2:35:26Cool. When you're uploading it, we want
2:35:28the link to the video, not the actual
2:35:30video itself. We can't take the big
2:35:32giant MP4s, okay? So, upload it to
2:35:34either Vimeo, Behance, or YouTube, okay,
2:35:37with free accounts and just send the
2:35:39link in. All right, the real goal here
2:35:41is not so much making videos as getting
2:35:43this responsive lower nav going. I want
2:35:45you to practice with that and I'll see
2:35:46you in the next video. It's another
2:35:48class project. Didn't we just do a class
2:35:50project? We did. This one's kind of like
2:35:52a pick a path. Do it yourself. Okay. I'm
2:35:54going to get you to build a responsive
2:35:55event card that does this on your own. I
2:35:58want you to create this thing. All
2:36:00responsive and good. Okay. So, the date
2:36:02stuck up in the corner, bit of text, an
2:36:04image. And I'm just going to leave you
2:36:06to it. find these little projects are
2:36:07some of the best um for people learning
2:36:10where you've got all the tools. I've
2:36:12taught you everything you need to know.
2:36:13But actually making something of your
2:36:14own, okay, that's not like following
2:36:16along can be both tricky and kind of
2:36:19like bed all the skills and you're like,
2:36:21"Oh, okay." Cuz there's a couple of ways
2:36:23of tackling this because there is and it
2:36:25can be tricky depending on your level of
2:36:27Figma skills. Um there's a video just
2:36:29after this of me building it. So if you
2:36:31do get lost, you can cut to the chase
2:36:33and see me building it. Do it yourself,
2:36:34though, and then see where you got to.
2:36:36Like, it's a challenge. I challenge you.
2:36:38See if you can do it. Your way might be
2:36:39different from mine. You might get lost.
2:36:41That's totally cool. I bet you though,
2:36:43you'll learn a ton. When you're
2:36:44finished, uh, share a video of your
2:36:46responsiveness. Okay, this right hand
2:36:47side here, cuz I want the text to expand
2:36:49and contract. Okay, making the box
2:36:52bigger. Doesn't have to be exactly like
2:36:54this. Pick your own image. Again, I'm
2:36:56trying to find pictures of me. Middle
2:36:58age is probably too old for me, but I'm
2:36:59not this guy either. I don't mind about
2:37:01the text and everything. It's more the
2:37:03structure. So, an image in there, a date
2:37:04uh box that sticks to the top right.
2:37:06Okay, remember that's constraints. Uh
2:37:08event details, make sure it's component.
2:37:10Okay, and then the deliverables is a
2:37:12video if you can't do the videos. A
2:37:13screenshot. This is a cool one where you
2:37:15can share on socials. Make sure you use
2:37:17the hashtag Figma advanced and tag me in
2:37:19it so I can check it out. All right,
2:37:21that is it. Have fun making your own
2:37:22event card. See you in the next video.
2:37:29Hello. This video is my version of how I
2:37:31made this thing work. Okay, you can
2:37:33follow along to see how close yours was
2:37:35to mine. Doesn't really matter how you
2:37:37got to the end result, but if you did
2:37:39get stuck, you're still currently stuck.
2:37:41You can watch me. We do get a little
2:37:42lost in this video. There's a few little
2:37:44shortcuts. So, even if you did get it,
2:37:45it was pretty easy. Skim through this
2:37:47one. Maybe turn the speed up. Uh, and
2:37:49there's nuggets in here. That's what I'm
2:37:50saying. All right. So, there's no real
2:37:52rule of where to start. Um, and there is
2:37:55a couple of different ways of doing
2:37:56this. I'm going to show you the way I
2:37:57did. When I do it with students in
2:37:59class, people find other ways of doing
2:38:01this. So you don't worry if yours is a
2:38:03little different. I'm going to start
2:38:04with my top frame here, the image with
2:38:07the date in it. And I'll work on the
2:38:08text later on. Okay. So I'm going to
2:38:10give it a fill just so that we can see
2:38:12what we're doing. Pick any color as it's
2:38:15a green or aqua. Um so what I want to do
2:38:18is put another frame inside of this.
2:38:21Pick another color.
2:38:24Something clear. Okay. And I'm going to
2:38:26say you go in there. And within this
2:38:29frame, I want to see you just need to be
2:38:31constrained to the top and the right.
2:38:33And now hopefully we've got that chunk
2:38:35going. Okay, that's kind of the first
2:38:37part. This bottom part, how do we do
2:38:39that? Now, you don't really want to put
2:38:41it in here. Want it to be in a separate
2:38:43box cuz it needs to do something
2:38:44different. So, I'm going to make a new
2:38:46box. Okay. I'm going to say this is a
2:38:48dark color for no reason. Okay. And I'm
2:38:52going to put some text inside of it.
2:38:53Just throw the elements in. All right.
2:38:55I'm just throwing in text. Okay. There's
2:38:57a couple of things I need to do is I
2:38:59need this to maybe be the right size.
2:39:01Okay, that's the first good step. I want
2:39:02this text to break inside of here. So, I
2:39:05want to say you are not um this kind of
2:39:08auto width or fixed size. I want this
2:39:10middle one auto height. And then I'm
2:39:12going to break it and say you go there.
2:39:14Perfect. But when I resize this,
2:39:16nothing's happening because this guy
2:39:17needs to be an auto layout.
2:39:20Okay. So, I'm going to say U shift A.
2:39:21It's wrapped all the way around the
2:39:23outside. Perfect. So now we've got a
2:39:25little bit of responsive text going on.
2:39:27It's not working. The text in here now,
2:39:29okay, is the auto height, but we need
2:39:31the width to change based on its parent
2:39:33or the container. So let's have a look
2:39:34at the width. It's got a fixed width. I
2:39:37don't want a fixed width. I want to say
2:39:38I would like you to fill the container,
2:39:40please. Okay. Now, if the container
2:39:42change, he tries to fill it. There you
2:39:44go. So we got these two bits. And you
2:39:46could leave them separate, but that
2:39:47would be weird. So what we want to do
2:39:49now is put both of these together inside
2:39:52their own frame. both selected. I'm
2:39:54going to say you frame those guys. Okay,
2:39:56let's give it a name so we're not
2:39:58getting too lost. Actually, let's see
2:39:59how uh how good the auto naming goes.
2:40:02So, let's go use. Let's go to rename.
2:40:05There it is. There. Rename layers. Just
2:40:06see what it does. It gets better and
2:40:08better. I bet you container footer. Oh,
2:40:12it's done. Good. Container. Let's call
2:40:14this one uh image.
2:40:17Okay. And it's thought that was the
2:40:18image, but it's not. This is the date.
2:40:20It got close. It's a good starter
2:40:22anyway. Oh, I do like it. Okay, so I got
2:40:24a container. Inside of it, I got this
2:40:25two boxes that I made. Let's have a look
2:40:27and just keep testing every time. Grab
2:40:29the parent. Does it all work? It does
2:40:31not. Why? It's because it's not an auto
2:40:33layout. So, this container auto, please.
2:40:35Let's give it a go. Let's see what it
2:40:37did. Okay, we're building it ourselves.
2:40:39We're not using the make do it all for
2:40:40us AI feature. Okay, it's kind of
2:40:42working except the bottom doesn't go up
2:40:43and down. Okay. So, what I want to do is
2:40:46probably want to leave this image box
2:40:49here alone. And I just want the text box
2:40:51down the bottom to come down. So, what
2:40:53I'm going to do is you need to do what?
2:40:55You need to fill a container. Okay. So,
2:40:57you uh it's the height this time. Okay.
2:40:59So, the width we did, but we didn't
2:41:01bother about the height. Now, we don't
2:41:03want you to hug. No hugs here, buddy.
2:41:04We're going for fill container. And I
2:41:06want you to fill it, but I want you to
2:41:07stick to the top, please. So, look. Grab
2:41:09the parent. What are we doing here? It
2:41:12worked. All right. Let's put in some
2:41:14more details and just see if we break
2:41:16it. Okay, but that's kind of the
2:41:18fundamentals. What people tend to do and
2:41:21I do, there's no real like hardcore way
2:41:24of doing it, is you start with the
2:41:25parent, then you start working with
2:41:27those blocks in between and then put
2:41:29another block in here for the date. You
2:41:31can do it that way. It's a little bit
2:41:32more complicated when you're new. Okay,
2:41:34if you tackle it that way and you found
2:41:35it really frustrating, try and do the
2:41:37individual pieces first, then combine
2:41:39them. But it doesn't really matter if
2:41:40you try and build the container frame
2:41:42first and then start building stuff
2:41:43inside. It's a little trickier. All
2:41:45right, I want this to be an image. So, I
2:41:47can't just plop an image in here because
2:41:48that's over the top. So, I'm going to go
2:41:51command shift K to bring in my image.
2:41:53Control shift K on a PC. You know, I
2:41:55know you know. Uh, I'm going to bring
2:41:58this in. And what I want to do is I want
2:41:59to grab the Actually, I could have
2:42:00selected the frame and brought it in as
2:42:02a fill. I've done it a different way.
2:42:04Okay. Okay. So, what I'm going to do is
2:42:05grab this. Steal the fill off this.
2:42:07Copy. Grab the green one. Hit paste. I
2:42:09don't need this green one anymore. And
2:42:11hopefully, remember, test test. Always
2:42:13testing. Is it working? It is working.
2:42:15Cool. Nice. The next is this text down
2:42:18the bottom here. I'm just going to
2:42:21replace this with command K. I'm going
2:42:23to say rewrite this. And I'm going to
2:42:25type in something. Oh, with a more sing
2:42:27song rhythm. Don't know what that is.
2:42:29Uh, let's go for All right. Not sure
2:42:31what this is going to do. Command enter
2:42:33to kind of make the AI stuff do it.
2:42:35Sometimes now you need to go make
2:42:37shorter. So if you need to make changes,
2:42:39I think that's long enough. Let's go uh
2:42:41make shorter because I'm going to use a
2:42:43um smaller font. If you don't have the
2:42:45AI and you wish you had the AI, you can
2:42:47just go out to the free chatbt. Okay. Or
2:42:50just type in anything you like. All
2:42:52right. Font size. I'm going to go to 16.
2:42:54You can leave now. Just I don't know if
2:42:56I'm going to run into problems. Maybe I
2:42:58will. Okay. One thing that happened
2:42:59there is you notice that there is no
2:43:01padding. Okay. So, I did make this
2:43:03bigger and this didn't expand. It kind
2:43:05of still works. Look, I you know, it's
2:43:07all scalable, but yeah, it didn't push
2:43:09it out to the bottom. Who knows why?
2:43:10Couple of things. First of all, I want
2:43:12to make this guy auto height. Okay. And
2:43:14also, his parent, the parent frame is
2:43:16kind of working. Okay, but the padding
2:43:18is really small. Okay, so I'm going to
2:43:19say over here in the padding, 24 is
2:43:22great on the sides. Um, I want the top
2:43:24and the bottom to be different. I'll
2:43:25give you a little shortcut for anybody
2:43:26who's hung out this long. So, on the
2:43:28top, let's say I want it to be 24. Okay.
2:43:31But then you could put a little comma
2:43:32in. Just comma on your keyboard. So
2:43:34that's the top. And if you put a comma
2:43:35in, you'll be able to do the bottom to
2:43:3632. That 100% kind of worked. I've got
2:43:4024 at the top. 32. Okay. But my text in
2:43:42here is not doing what it should. Ah,
2:43:45the height of this guy. The height of
2:43:46this fella. You is fill filling the
2:43:49parent container. My parent container is
2:43:51not big enough for the text. Come on,
2:43:53Dan. So that trick did work. Can you see
2:43:55I've got 20 uh 32 at the bottom, 24 at
2:43:58the top. You can do the same for left
2:43:59and right. You can just add commas. It
2:44:01just saves you from not really doing
2:44:03much is opening that out. You can just
2:44:05use commas. You're a computer hacker.
2:44:07You're welcome. All right. Other things
2:44:08are going to cause me problems is I want
2:44:10this height to kind of just as I type to
2:44:14go like this. Is it doing it? It's not.
2:44:16And that's only because I keep dragging
2:44:18it around to kind of prove it works. I
2:44:20want this here to snap to the bottom.
2:44:22So, in terms of the height, there's a
2:44:24couple of things to do. You see it says
2:44:25fill container. So, it should be doing
2:44:27it. Okay. But this parent go click off.
2:44:29Click back on. This parent is a fixed
2:44:31height. He's a height of 330. He's
2:44:33forcing this to be bigger. Okay. So I
2:44:35can say actually I just want to hug the
2:44:36contents. Actually you have a height now
2:44:38of I want you to hug the contents too.
2:44:42It can be a little weird setting these
2:44:43things up. So now what I'm looking for
2:44:45is this. When I type stuff, type stuff
2:44:48and it gets longer. It gets bigger.
2:44:50Awesome. And if I go out and grab the
2:44:53parent now and it goes onto a bigger
2:44:55document. Okay. I can just drag it out.
2:44:57Look at me.
2:44:58How far away from the edges?
2:45:01What I might do is turn on my guides.
2:45:03So, let's go to the parent. Let's go
2:45:05down here. Layout guides. We did it in
2:45:07essentials course. Let's throw it in
2:45:08here again. Add layout guide. I don't
2:45:10want grids. I want columns. I'm going to
2:45:13click on this. And how many columns do I
2:45:16want? I just want one, but I want the
2:45:19margins on the edges to be 16 24. Okay.
2:45:23You can see the edges here. You might
2:45:24just use it for this just so that
2:45:26everything starts lining up. Yep. Snap.
2:45:29Nice. The shortcut for guides is shift
2:45:32G. Turns them on and off. Okay. And we
2:45:34did it. Needs rounded corners. Parent.
2:45:36You're going to say, "Oh, where are your
2:45:38rounded corners?" Rounded corners.
2:45:40Eight. No. 16. Something like that. Oh,
2:45:42it didn't work. Why don't you have 16
2:45:44corner radius? Please hold. I got to
2:45:46figure this out. Where are your
2:45:47radiuses? Oh, I think I know what it is.
2:45:50Let's I'm jump back in so I can prove to
2:45:52you I've done it. Let's go. Clip
2:45:53contents. Oh, that was a good one. I
2:45:56don't know how it didn't end up with
2:45:57clip contents. Here you go. Okay, so
2:45:59let's go to 16. That's way too big. I'm
2:46:01going to go to 12. Even though I said
2:46:02use multiples of eight, you can do what
2:46:03you want. This is our design 10. All
2:46:07right. So, that was a nice little
2:46:08interesting one. Clip contents uh was
2:46:10off. So, everything is kind of hanging
2:46:12outside. Whereas now, I want to say
2:46:14everything inside that main component.
2:46:15Oh, it's not a main component. You I'm
2:46:18going to come over here. I'm going to
2:46:20turn you into main component which I
2:46:22can't remember what the shortcut is
2:46:24right now. Oh, what are you? That's
2:46:26right. Command option K. That's
2:46:28controllaltt K on a PC. Sometimes we all
2:46:31forget. So that is my main component and
2:46:33I'm going to use that. And this guy
2:46:34needs to go cut. You need to go over to
2:46:36my components page. You can hang out
2:46:38over here. You go there. You can go
2:46:41there.
2:46:42Boop. We did it.
2:46:46Ah, it's very exciting. You can go away
2:46:47now. All right. I'm very happy with
2:46:49myself. Uh, you might have done it
2:46:51completely different way. You might have
2:46:52spent half a day working on yours, but
2:46:54you kind of get it now. I guess I like
2:46:55these little exercises. They're like uh
2:46:57like something. Oh, you didn't do the
2:46:59date. Should we do the date? Actually,
2:47:01there's nothing to the date. You just
2:47:02throw the text in. One, two, three. All
2:47:03right. So, I just typed some text. I am
2:47:05going to throw it in here. And you
2:47:07didn't go in the right place. Get in
2:47:09there. Okay. And I'm going to select
2:47:11March and go commandB or controlB to
2:47:13make it bold. Look at us. Check it still
2:47:15works. It does not work. It's not in the
2:47:18right one. So, you are hanging outside
2:47:20of all of this. Ah, why couldn't I do
2:47:24that? It's cuz I'm trying to add text to
2:47:27what is it? Pause. You think it's an
2:47:30instance of the main component, not the
2:47:32actual one itself. So, that's a good
2:47:34tip. Okay. Is that actually you can't
2:47:37add stuff to instances. Okay. You have
2:47:39to go over here and say paste it in
2:47:41there. Okay. Now, it should appear on
2:47:44all of them. Correct. The mobile phone
2:47:46and the text is there. The only trouble
2:47:47now is that I did that kind of that's
2:47:49pink and this one here is green. Okay.
2:47:52What I can do for that I was able to do
2:47:55this on the instance right change the
2:47:56rounded corners and make it green. What
2:47:58you can do is select the whole instance
2:48:01right click it and say actually
2:48:02everything that I've changed can you go
2:48:04to the main component and push these
2:48:05changes onto it and let's go see onto
2:48:07our component. We did it. Look at us.
2:48:10Why can't we just grab it all and go to
2:48:13uh this option that we looked at before?
2:48:16Okay. Remember the AI version, okay,
2:48:17where we said you you you go. All right,
2:48:21let's go to more autolay options. Let's
2:48:23go to suggest it. And it didn't work.
2:48:26That's why it can work sometimes. And
2:48:29when it doesn't, you need to know the
2:48:30skills of kind of trudging through and
2:48:32making it. But I do like the problem
2:48:33solvingness of doing something like
2:48:36this. I feel like I've made something in
2:48:38the world, even if it is just little
2:48:39adjustable pixels. All right, that is
2:48:42it. That's how I did it. I'd be
2:48:43interested to know in the uh comments
2:48:46how you did it. Was anything completely
2:48:48different? Did everybody do it different
2:48:49from me? That's what I'd like to see.
2:48:51Also, give me a time. How long did it
2:48:53take you? Did it take you 10 minutes, 5
2:48:55minutes, 5 hours? Let's have a look.
2:48:58It's okay. I'm just interested. I'll see
2:49:00it when I am. I'll be sleeping. Hi
2:49:02everyone. We're going to make a really
2:49:03simple variant. Okay, you might have
2:49:05made one before. We're just going to run
2:49:06through it just so that everyone's got a
2:49:07good baseline. Okay, it means first of
2:49:09all if you haven't bumped into a variant
2:49:11or it's been a long time since you did
2:49:13the essentials course this button here.
2:49:15Okay, over here you can say actually I
2:49:16want to be watermelon. What's really
2:49:18cool about it is in say my assets panel.
2:49:21Okay, you see I've just got one button
2:49:22but in that button okay he's got two
2:49:25variants. Okay, keep it nice and tidy
2:49:27and it's going to give us the skills to
2:49:28build multi-dimensional variants in the
2:49:31next one. Very serious. Um all right,
2:49:32let's jump in. Let's make a variant. All
2:49:34right, so I'm going to start with a
2:49:35button that I've made. I'll make this
2:49:37button at the end of the video if you're
2:49:38interested, but any old button. Okay,
2:49:40there's nothing to it but a frame but
2:49:41some text in it and it's an auto. None
2:49:43of that is actually important for a
2:49:45variant. Okay, all we need to do now is
2:49:47make sure that it is a component. So,
2:49:49let's do that. Command option K on a
2:49:52Mac, command alt K on a PC. You're
2:49:54getting it. Okay, or you can click the
2:49:55button up here. Wh Okay. Um, and what
2:49:58we're going to do is we're going to say
2:49:59actually I would like another variant of
2:50:01it. See this little option here says I
2:50:02want two of them. I got a variant.
2:50:04They're too similar. So, it's
2:50:06technically a variant, but let's change
2:50:08the color of this bottom one. So, I'm
2:50:09going to click the parent frame. I'm
2:50:11going to say scroll down. Fill color.
2:50:13I'm going to pick that kind of
2:50:14watermelon color we're using. Um, and
2:50:17now we have a variant. We need to go and
2:50:19name it. But that is it. Let's go and
2:50:21have a look. We should be doing this.
2:50:22I'm going to cut it. I'm going to go to
2:50:24my components page. You should be on
2:50:26here, buddy. Let's do everything right.
2:50:28Okay. This is called component set. See
2:50:30the dotted line around the outside?
2:50:31Figma calls a component set. Don't worry
2:50:33about it, but it will pop up. There's a
2:50:35one component. Put more than one of them
2:50:36in there, which is his variant. Okay. Is
2:50:38in something called a component set.
2:50:40Lots of terms. That's okay. All right.
2:50:42Let's go to our hi-fi mobile. Let's go
2:50:44to our assets panel. Um shortcut that
2:50:46we'll start using from now on is if you
2:50:48hold down the option key on a Mac, alt
2:50:49key on PC, and one and two. One and two.
2:50:51One and two is easy to get from file to
2:50:54assets. What is it? Option one and two.
2:50:56One and two. Or alt one and two. Let's
2:50:58go to the assets panel. Let's have a
2:50:59look at the uh files in this library.
2:51:02Let's go to the ones in our component
2:51:04panel. Excellent. There's our button.
2:51:06Drag them out. And the cool thing about
2:51:07him is he's got a variant over here.
2:51:10Default. Nope. I want the other one.
2:51:12Cool, huh? Variants are awesome. What we
2:51:14should do now, though, is go back to our
2:51:17option or alt one. Back to our layers.
2:51:19Okay. Files. Okay. I'm going to go to my
2:51:21components and I'm going to say you.
2:51:22Let's do some naming. So, let's select
2:51:24the whole um what is it called? You
2:51:25remember what the dotted lines mean?
2:51:27Component set. You got it. So with this
2:51:29selected up here, I've got a bunch of
2:51:31properties that I can rename. So it's
2:51:33just given them default stuff. Click on
2:51:34this little settings. Is it edit
2:51:36property? That's what it is. Click on
2:51:38that and let's name it. So this one's
2:51:39going to be called my button. Okay. And
2:51:42I got a couple of values. Okay. Go back
2:51:43in there. I got a couple of values.
2:51:45Actually, the name of this is not
2:51:47button. It is color. Okay. So we're
2:51:50naming our variant, not the name of the
2:51:52actual button. We already did that. So I
2:51:53want to call this variant different
2:51:55color variants. Oh, keep jumping off
2:51:57that one. Uh, where it says default, I
2:51:59want one to be, let's say, green and the
2:52:02other one to be watermelon. Okay, then
2:52:06nothing really changes except when I'm
2:52:08back on my mobile hi-fi, I click on
2:52:10this. It makes a little sense. Look, I
2:52:11got color. Okay, and I've got green or
2:52:13watermelon. This makes it easier for
2:52:15somebody else using it and for you. Come
2:52:17on, let's name stuff. Mr. Untitled 57 or
2:52:20in this case, frame 57. Dan likes to
2:52:23throw shade on people even though he's
2:52:25got really poorly named stuff when he's
2:52:27working on his own. Shh, don't tell
2:52:28anyone. All right, so that's how to
2:52:30build a really simple variant inside of
2:52:33Figma. Let's go and create the button.
2:52:35Now, if you're interested, if you know
2:52:36how to make a button, which you probably
2:52:37do, move on to the next video, but I'm
2:52:40going to build it together. Let's hang
2:52:41out. All right, we're going to do that
2:52:42all again. So, we are going to make the
2:52:44button, but I just recorded it with the
2:52:45microphone off. Let's do it again. I
2:52:47love doing it twice.
2:52:50All right, let's grab the frame tool.
2:52:51draw out any old size. Let's give it a
2:52:53color of the button we want to use. I'm
2:52:55going to use that. We should start doing
2:52:57some color styles soon because there's a
2:52:59couple of greens going on. Dan, I'm
2:53:01going to grab the F tool. Nope. I'm
2:53:03going to grab the um type tool, which is
2:53:04a tik key. Click on the inside anywhere
2:53:06and just type in uh button. I'm using
2:53:09uppercase and I'm using a robboto
2:53:12condensed uh bold. A really common
2:53:14button size is 16. Okay, it's easily
2:53:17seen. It's just super common. Okay, now
2:53:19I should line it up in the middle. I hit
2:53:21escape to get out of the type tool. I
2:53:22should line it up in the middle. But
2:53:24what I can do is just click the parent
2:53:25frame. So I've got this frame here which
2:53:28I will call button lowerase button.
2:53:31Okay. Um with it selected the parent
2:53:34with a text inside of it. If I just go
2:53:35shift A. Okay. It will turn into auto
2:53:37layout. And by default, can you see it's
2:53:39going to hug around the text which is
2:53:41perfect. Hugging is perfect. Okay.
2:53:43Because it means that we get to uh type
2:53:46more. And you see the button expands.
2:53:48Okay. So awesome. And the one thing
2:53:51though is it defaulted to some random
2:53:53padding based on the original size. So
2:53:56in terms of the padding I want to do
2:53:57starts with the width. So 24. I'm going
2:54:00to tab across and hit eight for the top
2:54:02and bottom. There's my little button
2:54:03down here for the corner radius. I can
2:54:05use my up arrow. Look. Go up up up.
2:54:08If you want to be perfectly round, you
2:54:09just got to be above
2:54:12whenever the radiuses start going away.
2:54:14Let me zoom it down here. Can you see
2:54:16what I mean? You get what I mean, right?
2:54:17Like if I make it if I made that 16,
2:54:20you'd be like it's kind of round. Okay.
2:54:21But if I made that 100, it is massively
2:54:24round and has to be the perfect circle.
2:54:26So just put in some giant number and it
2:54:28will be rounded at the ends. That's how
2:54:30I made it just in case you were
2:54:32interested. Um all right, I'll see you
2:54:33in the next video. Hello. Hey, we are
2:54:36going to learn in this video
2:54:38multi-dimensional variance. Okay. Uh
2:54:41they are fancy mostly because I do it in
2:54:42that voice. Okay. But they allow us to
2:54:44take variance to the next level. Okay.
2:54:46Okay. All the voices. Uh, it means that
2:54:48this button not just has one variant.
2:54:50Okay. Like color. We've got
2:54:51multi-dimensional variants. That is a
2:54:53fancy word. That's what they call it.
2:54:55Okay. But it just means I've got two
2:54:56different things. I can go I want to be
2:54:57green, but I also want it to be
2:54:59outlined. This thing here. Okay. It is
2:55:01one lovely little asset. You see him
2:55:03there? The button zoom. You drag him
2:55:04out. But he's got all sorts of stuff.
2:55:06He's got both different colors and he's
2:55:08got different values. Having more than
2:55:11one property just means it's
2:55:12multi-dimensional. Not as fancy as it
2:55:14sounds. But let's just go and build one.
2:55:16All right, go time. All right, so what
2:55:17we're going to do is we're going to
2:55:18start with the simple variant we made in
2:55:20the last video and build on it to make
2:55:22it multi-dimensional. All we need to do
2:55:23is guess what? It is kind of
2:55:25multi-dimensional now. Okay, we've got a
2:55:27third option. Okay, so those are
2:55:29actually just three variants. What we
2:55:30want to do is let's change this one a
2:55:32little bit. Okay, so what I'm going to
2:55:34do is I'm going to fast mode. I'm just
2:55:35going to make it a outline.
2:55:39Okay, I'm going to make another one. To
2:55:41make another one, again, you can either
2:55:42hit this little plus button. There is an
2:55:44option up here. No, there's one of them.
2:55:47No, I'm sure there's a button up there
2:55:48as well. So, either hit that button or
2:55:51control D. I don't think you can copy
2:55:53and paste them. No, for some reason you
2:55:54can't copy and paste them. There we go.
2:55:56Command D. I'm going to change this
2:55:57color as well. You wait there.
2:56:00All right. So, I've got these. I could
2:56:02just leave them as that. And when I'm
2:56:04using them, I can grab them out and go,
2:56:06all right, I've got all of these
2:56:07different options. But what I'm going to
2:56:09do is make it multi-dimensional. What
2:56:11that means is that I'm going to grab my
2:56:12component set and I'm going to say I've
2:56:14got one property. I want to add another
2:56:15one. Okay, I'm going to add another
2:56:17variant. Okay, this one is going to be
2:56:18called fill. I was just trying to think
2:56:21there what it could be called. And the
2:56:22default value is going to be solid. What
2:56:26we're trying to get to here is when I
2:56:27select on this, I'm going to say you, my
2:56:30friend, are both green and solid. You
2:56:33are watermelon and solid. You are going
2:56:36to be green, but also add a new one.
2:56:40You're going to be what? Outline. Okay.
2:56:42So, that one is both that first property
2:56:44we did and this is the extra
2:56:46dimensional. Okay. Multi-dimensional.
2:56:48But you got to say that's
2:56:50multi-dimensional.
2:56:52Okay. So, we got color with fill. We're
2:56:54hardcore. This one here. What are you?
2:56:55You are color four. Nope. You're
2:56:57watermelon and you are going to be
2:56:59outline. What that means now is that
2:57:01when I grab this nice simple button,
2:57:03remember on our assets panel, optional
2:57:05alt two. Okay. One, two, switch the
2:57:07assets panel. this like lovely little
2:57:09button here. If I drag him out, he's
2:57:10multi-dimensional. Okay, he's got color
2:57:12and he's got fill. So, I'm going to say
2:57:14you watermelon. Um, but I want the
2:57:16outline one. Go away. I was scared of
2:57:19doing multi-dimensional variants for a
2:57:21long time. It sounded scary.
2:57:23Multi-dimensional anything sounds hard.
2:57:25Okay, but and it is tricky. Like I I'm
2:57:27trying to like be calm, give it to you.
2:57:30It's really easy. But when you do it for
2:57:32the first time, you like this doesn't
2:57:33make sense. Okay. What I tend to do is
2:57:36kind of like smash through it until
2:57:37you've got at least four of these. Then
2:57:39forget trying to do fancy stuff and just
2:57:41come up here and just make sure there's
2:57:43two properties first. Okay. And then
2:57:44work through every button and go, "All
2:57:46right, I want you to go through this
2:57:48list." And if there's not something you
2:57:49want in here, just click add new. Okay?
2:57:51Same down here. You're like, "Okay, I
2:57:52don't need to be green. There's a third
2:57:54color. So, I'm going to add a third
2:57:55color." Okay? Or it's the right color,
2:57:57but there's nothing down here. So, I
2:57:59need to add a property. Okay? If there's
2:58:00no prop, you know, if you do have the
2:58:02right property and you're like, "All
2:58:03right, I need it to be Oh, I add a new
2:58:05one of these." That is generally the
2:58:06easiest way. And I want you to finish
2:58:08there. Leave there. Feel confident. And
2:58:10now I'm going to give you a more
2:58:11advanced way cuz we're in the advanced
2:58:12course. There is another way to do it.
2:58:14It might be easier for you if you're
2:58:16like, "Man, that blew my brain." Or you
2:58:17might be like, "I love doing it two
2:58:19ways. Why learn to do it once?" So, what
2:58:20I've done here is I've just made a
2:58:22circle with a plus in it. If you do need
2:58:23the plus and minus buttons, often it's
2:58:25better instead of trying to find a
2:58:26symbol is find a font that you like the
2:58:28plus in. I often use this one here
2:58:30called days one. Okay. But you can see I
2:58:31can go through and find a plus that I
2:58:33like. You might like that plus better
2:58:34than that plus. Okay. And what you can
2:58:36do then is you can right click it and go
2:58:38to outline. Where is it? Outline stroke.
2:58:41Okay. And then it's just like a square.
2:58:42You can't change the font. So you need
2:58:44to probably do this first and go you I
2:58:46need Yep. Okay. And then outline it. Or
2:58:50who remembers the uh sweet shortcut from
2:58:53earlier? Okay. If we do a dash and then
2:58:55a greater than, we get an arrow. Days
2:58:57one arrow is not very good. Anybody else
2:58:58got a better arrow? We all got different
2:59:00styles. Let's get that out of the way.
2:59:02Can you see? Kind of work through and
2:59:03see who does a better arrow. Just using
2:59:06fonts. Of course, you can go to some
2:59:08sort of icon library somewhere. That'll
2:59:10work, too. Then I stuck them in the
2:59:12middle. All right, that was a little
2:59:13tangent. So, the reason I want to show
2:59:14you this is I'm going to put you guys
2:59:16down there cuz I'll use you later. Is
2:59:18I've got these two. Okay, so we create a
2:59:19variant. But what we can do is instead
2:59:21of doing what we did where we built a
2:59:23first variant, then we made duplicates
2:59:24and then kind of split them all up. What
2:59:26we can do is we can say all right I want
2:59:28these two um and you just build them all
2:59:31first. So I want these two to be uh
2:59:34eyeropper. So I've got all these first.
2:59:36These all need to be their own
2:59:37components. Um one of the big problems
2:59:40is that I haven't grouped these. Okay.
2:59:42So if I do make multiple components
2:59:43here. Okay. I'll show you this cuz
2:59:44you'll do it. You'll go. All right. I'm
2:59:46going to make uh what are we going to
2:59:47do? We're going to make multiple
2:59:48components. Boop. Okay. And now we've
2:59:50got 1 2 3 4 5 6 7 eight components.
2:59:52Let's undo that. So, what I'm going to
2:59:54do is either group these first. Group
2:59:57group.
3:00:00Actually, I'm just show you one way
3:00:03getting you too distracted. Okay, now I
3:00:05can create multiple components. The
3:00:07other way is you just make them one at a
3:00:08time. But we've got one, two, three,
3:00:10four. Okay, so I've got all these. I'm
3:00:12going to select them all and I'm going
3:00:14to say combine as variance. Why don't we
3:00:16just do it that way then? That is
3:00:18actually probably just easier, isn't it?
3:00:20Eh, it still gets messy. So, we're at
3:00:21this point. Okay, it wasn't hard to kind
3:00:23of design this. It's not hard to get to
3:00:25this point. The next part was what we
3:00:26want is we need a couple of properties.
3:00:28So, we've got one. Let's double click
3:00:29property one. And we're going to call
3:00:31this one color. Color. Okay. And I'm
3:00:34going to have another property. It's
3:00:36going to be a variant. And I'm going to
3:00:37call this one, what do you call plus or
3:00:39negative. Sometimes my brain doesn't
3:00:41work. You just type in value.
3:00:44Okay. And I'm going create that
3:00:45property. If you're unsure what it is,
3:00:46the value is something. It's a good
3:00:47generic catch all. So, now let's click
3:00:50on this. You are a color of group one.
3:00:54No, let's call it rename it. Let's call
3:00:56this one green. It's greenish. Okay. And
3:01:00it is a value of we're going to call
3:01:03this one default. Just going to call
3:01:05this one plus or positive. I don't know
3:01:08whether we should use the plus symbol or
3:01:09write the word positive. I'm not sure
3:01:11what is easier. Okay. This one here
3:01:13though is what a color of. It's going to
3:01:15be green. Green. And it's going to have
3:01:17a value of. We don't have a minus. We're
3:01:20going to add a new one. And we're going
3:01:21to say you are minus my friend and just
3:01:23work our way through. Okay, this one
3:01:24here color of group two. That's not a
3:01:27really good name. Let's call it
3:01:29watermelon
3:01:32and a value of All right, we got a
3:01:34positive. Now, this one here should be
3:01:36easy because we've got watermelon and we
3:01:38got a value of negative. All right, same
3:01:41thing. Have a little think, practice
3:01:43with both of them and just see which you
3:01:45like the option. You know, which one do
3:01:47you think is better? Go to my assets
3:01:48panel. The cool thing about it again.
3:01:49Oh, probably needs a better name. Okay.
3:01:51Can I do it over here?
3:01:56Nope. Can't do it over here. You must be
3:01:59able to. Anyway, let's go to option or
3:02:01alt one. Back to our files. Let's go to
3:02:03components. You have a terrible name
3:02:05called component one. You can either
3:02:07name it over here. Okay. Or you can name
3:02:10it over here. Uh, what is this? This
3:02:13one's going to be button. Can't think of
3:02:16what to name it. Can't call it value.
3:02:17Please hold. I can't think of a word.
3:02:19I'm calling it zoom in outy. Anyway, so
3:02:22there's a better name for it. Let's go
3:02:24back to our highfidelity mobile. Let's
3:02:26go to option or alt 2 to go to our
3:02:29assets panel. Drag out my button zoom.
3:02:31Okay. And we're going to say
3:02:33multi-dimensional.
3:02:35Look at this. All right. So, the big
3:02:37version is it doesn't matter how you get
3:02:38there, but you just need a component
3:02:41set. Then you just kind of work your way
3:02:43through over here adding different
3:02:44values, adding different variants, okay,
3:02:47different properties and then within
3:02:48there kind of giving them better names
3:02:50as you go through. And it doesn't matter
3:02:52whether you like here start with them
3:02:54already made, okay, and work them up
3:02:55that way or start with one and just keep
3:02:57duplicating them and adding the values.
3:02:59Either way, I end up doing it this way
3:03:01for some reason. I don't know why, but
3:03:02you might like it this way. All right,
3:03:04that is multi-dimensional components.
3:03:06Feeling good? Feeling advanced? This is
3:03:08advanced stuff. Now, the cool thing
3:03:10about this is that you will find other
3:03:11people's libraries that will have these
3:03:13and you'll know what the dotted lines
3:03:14mean. You won't remember what they're
3:03:15called, but you know what they do.
3:03:17You'll be like, "Oh, I can grab one of
3:03:18these and go, "All right, it's got
3:03:20multi-dimensions." Nice. It's got lots
3:03:23of different variables. Fancy. All
3:03:25right, that is it. Uh, let's get on to
3:03:27the next video. No, no, no, no. It's the
3:03:30end. But don't worry. Uh if you want to
3:03:33keep hanging out, you're enjoying this,
3:03:35uh this is only like the first chunk of
3:03:37the Figma advanced course, like the
3:03:38first 25%. There is like another 75
3:03:41videos, okay? Where we really get
3:03:42cooking in Figma. Uh so if you want to
3:03:44check that out, there's a link in the
3:03:45description. Um the cool thing about the
3:03:47full course is that there are additional
3:03:49stuff. So there's stuff you get like
3:03:51quiz questions, okay, to kind of help
3:03:52cement the knowledge, kind of test you
3:03:54as you go through, but it's not a test.
3:03:56It's more cementing your knowledge.
3:03:58There's also the class projects, okay,
3:04:00that we're making here. There's more of
3:04:01them. And there's a place to submit them
3:04:03to get feedback both from students and
3:04:05from me and the experts. Um, also what
3:04:08else is there? The all important
3:04:09certificate. So complete the course uh
3:04:12do the quiz and there's a final class
3:04:14project and you will get the Figma uh
3:04:17advance certificate. If you're not ready
3:04:19for the full course, it's okay. Uh the
3:04:21thing I want though is a like give me a
3:04:23like uh and subscribe to the channel for
3:04:24more stuff like this. I give away loads
3:04:26of free stuff here on YouTube. Um, if
3:04:28you do sign up for the Figma advanced
3:04:30course, the other cool thing about it is
3:04:31it gives you access to all of my other
3:04:33courses. So, I've got courses on
3:04:36Illustrator. Okay, Essentials and
3:04:37Advance for all of these. Uh, there is
3:04:39Inesign, Photoshop. Um, what else have
3:04:41we got? Premier Pro, After Effects,
3:04:43we've got Canva, Da Vinci, Procreate,
3:04:47Blender. Did I say that? I'm not sure.
3:04:50I've got a list over here. Definitely
3:04:51not reading from it. Affinity. There's
3:04:53an animation course. uh color theory,
3:04:56web flow, we're trying to add a new
3:04:58course every month or two. So, um the
3:05:01cool thing about it is that one price
3:05:02for Figure Advance gets you access to
3:05:04all of those courses. Seems really
3:05:06reasonable. Just check it out and see
3:05:07what you think. Um yeah. Uh that is
3:05:10going to be it. Um I hope to see you in
3:05:12the full course. Uh but if I don't, life
3:05:15is long. I'll probably bump into you
3:05:17again. And the cool thing about design
3:05:18is that there is a lot to learn, lots of
3:05:20fun, interesting things. So, we'll
3:05:22probably uh cross paths again. That's
3:05:25going to be it, though.
3:05:28Goodbye.

About this transcript

This page contains the full transcript of Free Figma Advanced Course: Become a Figma Pro! by Bring Your Own Laptop, generated from the public captions YouTube serves with the video. The transcript has 42,045 words across 5,549 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.