YT YouTube2Text

YouTube2Text → Transcripts → Free Figma UX Design UI Essentials Course

Free Figma UX Design UI Essentials Course — Transcript

by Bring Your Own Laptop · 37,884 words · 5,000 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00[Music]
0:06Hi there, my name is Dan Scott and this
0:08is the Figma Essentials course.
0:11Together, you and me are going to learn
0:13everything you need to know to get
0:14started as a UX designer inside of
0:17Figma. During the course, you'll learn
0:19how to master all of the tools in Figma.
0:21I'll also share all of the UX design
0:23fundamentals to create beautiful user
0:25interfaces and engaging prototypes
0:28easily in Figma. Who is he? I'm Dan
0:30Scott. Uh, I've been a designer now for
0:33more than 25 years. I've won multiple
0:36teaching awards and my online courses
0:38have been attended by more than a
0:41million people now, just like you.
0:42First, we'll give you your own unique
0:44brief and show you how to work with a UX
0:47persona. You'll learn how to create
0:49simple wireframes.
0:51From there, you'll learn how to
0:52implement colors and images properly in
0:55your designs. You'll learn the dos and
0:57don'ts for choosing fonts for web and
0:59mobile apps. You'll learn how to create
1:02your own icons, buttons, and all sorts
1:03of UI components using Figma's draw
1:06features. You'll learn the scary terms
1:08like components, uh constraints, and
1:10variants. They're all real easy once you
1:12know how. You'll also make our lives
1:14easier by using uh free UI kits and
1:17plugins for Figma to speed up our
1:19workflow. You'll also learn how to use
1:21some of Figma's handy new AI features.
1:24We'll build a simple style guide ready
1:26for client handoff. You'll learn how to
1:28make micro interactions and animations
1:31all the way through to collaborating
1:33with other team members, an overview of
1:36Figma sites so you can build the site
1:38yourself and exporting all the right
1:40files ready for handoff to a developer
1:42or software engineer. You've got
1:43assignments throughout the course uh
1:45that I set so that you can practice what
1:48you're learning and have something
1:49unique for your portfolio at the end.
1:51Now, this course is aimed at people new
1:53to design, uh, new to UX design, user
1:56experience design. Even if you're not
1:58really sure what UX design is, uh, don't
2:02worry. We're going to start right at the
2:03beginning and work our way through step
2:05by step. All right, my friend. It is
2:07time. Sign up and join me and go from
2:09Figma zero to Figma Hero.
2:15Does he design his own shirt? He did. So
2:18proud of this one. That's cool. I kind
2:19of turned it on the side and made it
2:20drippy. Except the gold won't iron.
2:23Every other bit ironed nicely. This bit
2:25drives me mad. Why won't you iron gold?
2:28Why?
2:30Hello. You're in. You made it. Good
2:33work. Hey. Um, first things first is you
2:36need to download the exercise files. Uh
2:38there will be a link on the page here
2:40somewhere. Download those. The files
2:42you'll need for this uh course. Uh also
2:45in those exercise files will be a
2:47shortcut sheet. Okay, we won't go too
2:49deep in the shortcuts for this one. We
2:51will, but there are some ones that are
2:53just really natural and useful to use.
2:55So, I've made a sheet you can print off,
2:57stick next to your computer, and kind of
2:58like circle the ones that you use a lot.
3:01Uh, the other thing is is there is a
3:03free and a paid version of Figma. We'll
3:05start the course kind of using a lot of
3:07the free features and we will bump into
3:10some paid features as we go along. So,
3:11if you only plan to use the free
3:13version, that's totally fine. You can
3:15get really far in Figma. you know, you
3:17can be quite a competent uh UX designer
3:19in Figma using the free version and I
3:22will but I won't hide from the paid
3:23versions uh as well because there are
3:26some really cool things in there to do
3:27as well. So even if you don't do the
3:30paid version, you can it's good to see
3:32what the paid features are and how to
3:34use them. Um the other thing is there is
3:36a desktop version and a browserbased
3:39version. I'm going to use the desktop
3:41version. They they're exactly the same.
3:43One you can download and have on your
3:45computer. one you can just use in your
3:47like Chrome browser. It there's no
3:49difference between the two. Uh use
3:51either. I'm going to use the browser
3:52version because I'm old and I like
3:53things being on my desktop for no good
3:55reason. So there you go. The other thing
3:57is is that I can speak very fast,
3:59especially I'm at the beginning of a
4:00course and I've just had a coffee. I may
4:02be yeah speak too fast for some people,
4:04especially if maybe English is your
4:06second language. Um the other thing is
4:08some people think I talk too slowly and
4:10you can speed me up. There's a cog.
4:12Where is it? I think it's over here.
4:13Click on it. You'll find a speed. you
4:15can speed me up or slow me down as it
4:16suits you. Um, the other thing is is
4:19that Figma is really good at updating
4:21stuff. They're like, "Make it better.
4:23Let's change it. Let's make it more
4:24clearer." The problem for me though is
4:27as a course creator, they go and change
4:30things and make them better. And it can
4:31be tricky. If it's a big change, I'll
4:33just re-record the video and you won't
4:35know. If it's a tiny change, um, just
4:38check the comments. There might be a
4:39note down there of like, it used to be
4:41called this and now it's called that.
4:43Okay? but it's in the same place and it
4:44looks the same and do does the same
4:46thing. So, just keep an eye on that
4:48through the course. Uh the other thing
4:50is is that who's excited to get started?
4:53I am. I love making this course. Uh I'm
4:56excited to get started. Let me know in
4:58the comments if you are too. I love
4:59checking those out after I make a course
5:01of like who's pumped to get started. All
5:03right, get in get on with the course,
5:06Dan. Okay, let's go. All right. In this
5:09video, we're going to talk about what
5:11Figma is and what Figma isn't. So, Figma
5:14is it's actually become many things. Uh
5:17what it's mainly used for is UI UX work.
5:20So, basically, when you boil it down,
5:23you're making or you're designing a
5:25website or an app. So, a client comes to
5:27me and says, "Dan, I need you to design
5:30us a new website." You'd open up Figma
5:31and design it in there. And then you
5:34then afterwards get it developed into an
5:37actual website. So Figma is the look and
5:40feel of a website and is a quick way of
5:44kind of designing it up to get client
5:46sign off. Why do we bother like
5:47designing it in Figma and then go and
5:49build it afterwards. It's mainly about
5:51speed. It's about rapid prototyping.
5:53That's what kind of like the key term is
5:54for Figma and kind of alternatives to
5:57Figma. Rapid prototyping. So if the
5:59client comes to me and says, I want all
6:01these features. I wanted to do these
6:02things. You can quickly design it, give
6:05it to the client, you can prototype it
6:06so it looks like a website and functions
6:08like one. The buttons click, you go
6:10everywhere. We'll do that in the course.
6:11It's called prototyping. So you can get
6:13it to be really uh competent looking
6:16website. So that client can come back
6:18and say it's not what I want or that
6:21doesn't work. Or more importantly, you
6:23can test it with that client's customers
6:26and they can use this kind of prototype.
6:28Okay, it's not a fullyfledged website,
6:29but it looks and feels like one and they
6:32can get lost and you can fix that. Okay,
6:34that iteration is what makes us a UX
6:37designer and also what makes uh Figma so
6:40powerful. I can say, "All right, here
6:42client, here's your project." And they
6:43say, "No, I can go back and make quick
6:45changes, not go back to the developer
6:47and rebuild this huge big code base that
6:50we made." Okay, just drag something
6:52around in Figma, super quick and easy,
6:54rapid prototyping, and then go back to
6:56the client or their customer and say,
6:57"What do you think now?" Okay, and watch
6:59them use it and realize they get still
7:02get lost. So, you change things, change
7:03the language, move the sizing around,
7:06uh, you know, adjust things really
7:08quickly so that you can get to a point
7:10where everyone's signed off on it, the
7:11client's like, "Yep, love this thing."
7:14Then you can work with a developer,
7:16okay, to get this thing built or work
7:18with one of the other Figma features
7:20called Figma sites or WordPress or what
7:24else we got. There's other ones in my
7:27head. Uh, Web Flow, there's more. Okay,
7:30Elementor, there's lots of ways to go
7:32and build it afterwards. Okay, so we're
7:34going to focus on the design side of
7:35here, the kind of UX design process.
7:38Okay, and build sites that look and feel
7:41like they work. You just need to know
7:42that it's not just like and they're made
7:45at the end. Okay, that is the kind of
7:48process. And why do we do it? Because
7:49it's fast and it's way cheaper than
7:51getting the you to design it or spend
7:54the time making this fully functioning
7:56website for only to have lots of
7:58changes. So that's where Figma fits in.
8:00That's what it does really well. Rapid
8:02prototyping. Now, what else Figma does
8:04really well is that it's kind of
8:06creeping into the general design space.
8:08So, Figma was born to make websites and
8:11apps, okay? Rapid prototyping. But now
8:14people have start it's they've excelled
8:17the tools, okay, and people have started
8:19using it for just general design stuff.
8:21So, uh Figma, the tools you're going to
8:23learn in this uh class, we're going to
8:25base it around uh web design and app
8:27design, but we're going to learn the
8:29tools so that you could use it as a
8:30general design tool as well. And people
8:32are using it for that. So, they call it
8:33Figma draw, but it's kind of just baked
8:35into this course. It's the drawing tools
8:36along with it. So, you will find
8:38yourself like, "Oh, why can't I just
8:40design this flyer in here or this uh
8:44social media ad?" You totally can using
8:46the skills from this course. We're going
8:48to focus on UIUX, but you can use it for
8:50all of that. Uh some of the other things
8:52that Figma does that aren't covered in
8:54this course. Uh so, they've got some
8:55other kind of like other tools. There's
8:58one called Fig Jam, okay, which is, you
9:01know, uh kind of a separate product.
9:03It's like a whiteboarding tool like
9:05mirror. Okay, kind of like ideas and
9:07brainstorming. They have Figma Buzz,
9:09which is a specific social media design
9:12tool that's a kind of alternative for
9:14Canva or Adobe create. They've got Figma
9:17sites, okay, where you can take your
9:18Figma file, okay, that we're making in
9:20this the design of it and actually turn
9:22it into a website, okay, so Figma sites
9:24is an it's outside of the scope of this
9:26course. We'll cover it a little bit in
9:27the end, okay? Because it's quite cool
9:29uh in the kind of next step in your
9:30process. But that would be an
9:32alternative for something like uh Web
9:34Flow or
9:36WordPress, okay? Often though, I'm
9:39building stuff in Figma, okay, and then
9:42giving it to the developer to build in a
9:44different kind of codebase, okay? But if
9:46you're building it yourself, you could
9:47use Figma sites. They have Figma slides,
9:50which is basically a PowerPoint
9:52alternative. H what else do they have?
9:54Figma Buzz, social media. Let me check
9:57my notes. Wait, there. There we go.
9:59Figma make is their kind of beta version
10:02of AI coding. You can kind of talk to it
10:04to code your site. That's pretty cool.
10:06Outside of the scope of this course,
10:07we're going to focus on what they call
10:09Figma. And that's the kind of general
10:11use for it. And they call it Figma
10:13design. So, we're going to do it focus
10:14on UI UX design, but know that the tools
10:17you're going to learn how, you know, you
10:19can use for general design purposes as
10:21well. kind of an alternative to less
10:23Photoshop, more Adobe Illustrator if you
10:25know that software. All right, so that's
10:27what it does. I burble it along a little
10:28bit. I hope that's helpful though
10:30because there's lots of different facets
10:31to Figma. We're going to focus on UIUX
10:33design and it's called Figma design.
10:36Next video.
10:40All right, let's talk about the
10:41difference between UI and UX. So the
10:44differences are UI user interface, UX
10:47user experience. UI is the pixels on the
10:50page like the fonts you pick the images
10:52the colors the spacing you're kind of
10:53making it look good okay you were a UI
10:55designer and that's how I kind of
10:56started in this field it is client would
10:58come to me and said I want a website I
11:00design it looked cool he liked it we
11:01sent it okay I was a UI designer where I
11:04became a UX designer is the client come
11:06to me with a problem let's say it's a we
11:09need to update the checkout on our page
11:11we want to make it better okay so
11:12instead of just designing something that
11:14I thought would be better okay I would
11:16design something I'd have a good idea
11:18idea and a hypothesis on what could be
11:20done. Okay? And then I'd go and test it.
11:23Okay? So I'd test it with a couple of
11:24people and see do they find it easier?
11:27Did they find it more trustworthy? Okay.
11:28We run little in-person tests or you can
11:31do it online or let's say uh bring your
11:34laptop. We run a lot of AB tests where
11:36we say all right we're doing the we
11:37always are looking at the checkup flow
11:39um updates and we do AB tests where half
11:42of the people coming to the website go
11:44to the old one and half of it go to this
11:46new one. And I'm like, "All right, is it
11:48better? Do we have better conversions?
11:50Less conversions? Why can we change this
11:52thing? Did it make it better?" We're
11:54starting to get into the UX field, okay?
11:56Where we are testing our ideas,
12:00you know, iterating quickly. That makes
12:02us a UX designer. Um, if you've ever
12:05used a website and you've bumped into
12:06something frustrating, that is UX design
12:09problems. Okay? And that's something
12:10that you're going to take notice of a
12:12lot more now, and you should. Okay? So,
12:14uh, let's say like my, uh, my I use my
12:17banking website via my computer here.
12:20Um, I'm not sure what I'm faking typing,
12:21but you know, one of the tiny
12:24frustrations is every time I go to this
12:26thing, they've updated it. And now when
12:28I type in my password and hit enter, it
12:30doesn't do anything. You got to grab
12:31your mouse and go and click the kind of
12:33submit button. You're like, it's so easy
12:35to go in and adjust that. And if they'd
12:37done some testing on that, okay, they
12:40would see that people got frustrated and
12:42stopped there and it would have been an
12:43easy fix. Okay, it would have made the
12:44whole user experience a whole lot more
12:46user experienceable. It's not a word.
12:49Um, but you get the idea. UI, pixels on
12:51the page, way it looks. UX is how people
12:54interact with your project. And that's
12:56what we're going to do in this course.
12:57We're going to look at both UI and I'll
12:59give you some tips on how UX is done and
13:02prototyping throughout the course. We're
13:04going to kind of focus on the uh Figma
13:06tools, but I'll try and smoosh in there
13:08some UX best practices to get you
13:10started as well.
13:15All right, what are we making in this
13:17course? We're going to make this. It is
13:19a website for a particular e-commerce
13:22brand. Okay, everyone's going to get
13:24their own one. Uh the one that I use
13:25through this course is for wallets.
13:27Okay, and let's give it a quick demo.
13:30All right, our little subscribe
13:31newsletter appears. Okay, we can go to
13:35let's learn more about it. Okay, we make
13:36a kind of a homepage, a features page.
13:39We go to purchase page. Okay, people can
13:42tick things, add stuff, and then you get
13:45a confirmation page and a toggle switch
13:48that currently does nothing. We'll make
13:50both a desktop and a mobile version of
13:52our site, the mobile nav. Okay. Uh we
13:56will also do wireframes. Okay. So, we'll
13:59do we'll end up in this kind of more
14:00highfidelity version. this kind of like
14:02full version, but we'll also build our
14:04wireframes to start. Connect it all up
14:06so it goes places and we can do testing.
14:08We'll make sure everything is responsive
14:11so that it can adjust for different
14:13screen sizes. We'll build out a basic
14:15style guide styles and our various
14:18different components for navigation and
14:20buttons. It's all sorts of fun. So, why
14:22are we building this? We are going to uh
14:25work with this. Okay. So, we're going to
14:26start with a brief that has what we're
14:29doing and a persona. and we're going to
14:30build out this thing called a task flow.
14:32So, basically, let's talk about this. In
14:33the next video, everyone's going to get
14:35their very own unique brief. So, we're
14:37all building something slightly
14:38different. You'll get given a product,
14:40okay? And you'll get given a short uh
14:42persona. A persona is just a brief
14:44description who the client is cuz if we
14:46make something for everyone, it just
14:49gets a bit plain and it's not really
14:50good for any particular person. Okay?
14:52So, we are going to identify who we're
14:54building this for. In this case, I'm
14:56building it for Sam. I know their age. I
14:58know basic information about them so
15:00that when we're making decisions
15:01throughout our design process is we're
15:04using the user okay their persona to
15:07make decisions rather than building
15:08something that Dan wants cuz if it's not
15:10for me I shouldn't be the one kind of
15:12deciding oh this is cool I think it
15:14should work this way I need to separate
15:15myself and think what would Sam want
15:17everyone will get one slightly different
15:18so Sam is keen on fashion latest trends
15:20so I'm going to use that in my head
15:22whereas you might get somebody who's
15:24very eco-friendly okay or eco-conscious
15:26that's going to really change the design
15:28and that's the target audience. So, we
15:30need to be building it for them, not for
15:31you, not for the client or your
15:33customer, okay? For Sam. Now, we'll
15:35cover just a little bits of UX design
15:36process. We're mainly here to learn the
15:38software, but I'll introduce it
15:39throughout the course just so that you
15:41get a basic understanding of the UX
15:43design process. But after this video or
15:45after this course, check out personas,
15:47okay, a bit more, okay? Read up about
15:49them. This is a real barebones one. And
15:50now that we know what our uh persona is,
15:53we're going to work on this task flow.
15:54We're all going to be building the same
15:56one. We're going to build a homepage, a
15:57features page, a checkout page, and a
15:59payment confirmation page. This is
16:01called a task flow. It's a very specific
16:03task to do on a website. Often, you get
16:05given a job for an existing site that's
16:07not a full redesign. It's like, "All
16:08right, I want you to update the signup
16:09flow or the cancellation flow or it
16:12might be how to upload a document."
16:13Okay, you'll be working on a specific
16:15task flow. It's probably important now
16:17to talk about the difference between a
16:18task flow and let's say a user flow. I
16:20found a good example here. This is more
16:21of a user flow. Task flow very linear.
16:24In this user flow, there's lots of
16:26different ways, lots of decisions of
16:28getting to this last part here. And
16:29you've got to kind of account for all of
16:30them. So, a much bigger job than what
16:32we're doing in this course. It's a good
16:34user flow for the bring your laptop
16:36website. It might be that somebody
16:37arrives on the homepage, they sign up,
16:39and to do a course, they might get to it
16:41via the search option. They might be
16:42searchy people. They might be in the
16:44browse people. They might have come
16:46through an ad that goes directly to the
16:49kind of overview page. There's all these
16:50different ways of getting to doing a
16:53video course. And as a UX designer doing
16:55a user flow, those are all the
16:56considerations I need to do. Bigger job.
16:58We they're doing something nice and
17:00simple, just a task flow. All right. So,
17:02in the next video, I'll give you your
17:03unique brief. We'll use this task flow.
17:05We'll build a wireframe version of it.
17:07We'll test it. We'll then build a
17:09highfidelity version of it. We'll also
17:12build out a desktop version. We'll
17:14design it. We'll make it interactive.
17:16All the while learning uh all the
17:18essentials for Figma, but also we'll
17:20bake in some of that UX design process.
17:22All right. You ready? I'm ready. All
17:24right, let's get going. All right, it is
17:27homework time. Did he say homework? I
17:29meant practice by learning. Okay, so
17:31we're going to set tasks throughout the
17:32course just so that you're not just
17:33following along blindly that you get to
17:35make something. And the cool thing about
17:36it is that you get to make something
17:38unique for you. We're going to use this
17:39thing called the random project
17:40generator.com to generate a unique
17:43brief, but we're all going to follow the
17:44same task flow. So, we're all going to
17:46be doing this. We're all going to be
17:47making a homepage for a product, the
17:48product features, okay? There's going to
17:50be a checkout and a confirmation page.
17:51So, we're doing the same task flow, but
17:53if we use a random project generator, we
17:55all get to make something slightly
17:56different that we can use that's unique
17:58for our portfolio. So, open up the class
18:01projects doc. It should be in your
18:03exercise files. There it is there. Okay.
18:06And yours will be a lot more filled up
18:07than mine. So, we're up to this one
18:09here, project 01. So, visit randomprog
18:11generator.com. Okay. And click on the
18:13UIUX button. So, let's do that. Okay.
18:15This is a tool me and the team here
18:17made. And you can click on UIUX. Okay.
18:19And you can enter a name. Doesn't matter
18:21what it is, okay? Your last name,
18:24friend's name, pet's name, kids' name,
18:27granny's name, whatever you'd like.
18:28Okay? And then a location. Okay? So, I
18:30live in Limmerch. And I'm going to hit
18:32generate my project. All right? And you
18:34will be generated your own persona.
18:37Okay? That will be very similar. Um, the
18:39difference will be the product, okay?
18:41Randomly generates it, and the name that
18:43you use, but everything else will be
18:44structurally the same. So, we're kind of
18:45designing the same thing, but with a bit
18:47of uniqueness. If you don't like what
18:49you got, don't hit retry. It's red for a
18:51reason. I'm warning you. Okay. So, I'm
18:54doing Scott Wallets. My customer is uh
18:58Sam. And it tells me a little bit about
19:00them. What we can do is download as a
19:02PNG. So, you've got it. So, you can go
19:04back to it. Just download it for your
19:05machine. Keep it somewhere safe. We're
19:07going to use it throughout the course.
19:08And we'll use it kind of towards the end
19:09as well when we're combining it to make
19:11a more of a portfolio piece. All right.
19:13So, that's how class projects work. uh I
19:15tell you what to do and sometimes I'll
19:17ask you to upload it to the site and
19:19when we've got something a little bit
19:20more interesting to share but for the
19:21moment just save your brief somewhere
19:23keep it in your mind when we're
19:24designing throughout this course. All
19:25right, that's it. Next video time. All
19:27right, let's talk about uh wireframe
19:30versus highfidelity. Ooh, it's pretty
19:32easy. Uh wireframes are wireframes and
19:35highfidelity are these complete looking
19:37websites. So what we're going to do in
19:38this course is we're going to create the
19:40wireframe first, test it and then build
19:42out some more of the design feature for
19:43this highfidelity. So, it's normally
19:45called a wireframe. Some people call it
19:46lowfi and hi-fi or wireframe and
19:49highfidelity. My advice is not to skip
19:51this step. My advice is not to skip the
19:54uh wireframing step. Somebody comes to
19:55you with a project or in brief. You can
19:58get a wireframe going and test it like
20:00the buttons working and the navigation
20:02kind of doing some basic stuff in
20:04minutes. You can go back to your
20:06stakeholder boss client and say, "Is
20:08this what we're trying to do?" and they
20:09can say, "Yeah, you can move on." Rather
20:11than spending ages, you know, kerning
20:13and tracking and picking images and
20:16getting it right for them to go, "It's
20:17not what I meant. It's quick, it's
20:18dirty, it's easy, and you're going to
20:19have to do it for this course cuz we're
20:21going to do build this first, and it's
20:23going to give us a lot of the
20:24fundamental features uh of Figma before
20:27we move on and make pretty stuff." Now,
20:28wireframes don't have to look like this.
20:30There's no real rule on what they can
20:32do. Normally, people put a line through
20:34it for an image, but it's kind of it.
20:36Let's go find some examples on Figma.
20:38So, I'm in Figma. I'm going to go to
20:39this home button up the top here. Okay.
20:41And I'm going to do this one says
20:42templates and tools. They keep moving
20:44this button around, but have a look.
20:45Used to be called community. Okay. And
20:47I'm going to type in the top right here.
20:49I'm going to type in wireframe. Let's
20:51have a look at a couple examples. So,
20:53you can just borrow somebody else's kit.
20:55Let's have a look at this one. Click on
20:56it once. Okay. And it's going to see
20:57this one here is gone even further back
21:00as in they've stripped out the text of
21:02this one. You can do that as well. What
21:03you'll notice though that they are
21:05monochromatic. Some people use one
21:07color, but no more than one. Pick an
21:09inoffensive color or just use black and
21:11white and versions of gray. And pick a
21:13very unoffensive font. We're looking for
21:15boring stuff here because what we don't
21:16want to do, let's have a look at this
21:17one here. This is a good one as well.
21:18Okay, it's a lot more, let's say,
21:20complete. It's a bit fancier. Again,
21:22there's no real rules. You can pick one
21:24that has a little bit more design taste
21:25into it. What you want to avoid is
21:27having conversations with your customer,
21:30client, stakeholder about like, "Oh,
21:31that's not our font. Oh, that's the
21:33wrong image. Oh, we don't say that many
21:35more in our headline. What you're doing
21:37here is just testing function. Okay.
21:39When I click this button, it goes to
21:41here and then this goes to here. Am I
21:42building all the right pages? Yes.
21:44Awesome. Then we can go to high
21:45fidelity. Okay. So, keep it boring, keep
21:47it functional. We'll cover using other
21:48people's templates uh later on. But if
21:50you have stumbled into here, remember
21:52home templates and tools. I've done a
21:53search up here and you can open them up.
21:56Let's open this one here. And it just
21:58says open in Figma. And the cool thing
22:00about it is now I have this file. Okay,
22:03it's open up in another tab. I can go
22:05back to home here. But if I go to
22:06recents, it's now just my file. Figma is
22:09this great community where people share
22:11their files and you can borrow them,
22:13appropriate them, steal them. Of course,
22:15we don't just want to duplicate it and
22:16kind of pass it out as our own. But if
22:18you like the styling of some of these,
22:20okay, from the templates, you can go
22:22through and start nabbing them. Okay,
22:23they're all selectable. You can start
22:25working with them. But that's jumping
22:26ahead in the class a little bit. So, I'm
22:27going to close down this tab. I go back
22:29to templates and just I've deleted the
22:32um wireframe from here just to show you
22:34high fidelity. It's not that fancy.
22:35Okay. It's just readym made websites.
22:37This one here I could open up and start
22:38working with. Okay. This one looks like
22:40for a law firm. Okay. And they've done a
22:41lot of the hard work. I might be doing a
22:43job for an accountant or a lawyer as
22:45well. And I like this. I can start with
22:47this. Okay. And start changing it out
22:49for my own fonts, my own images. But I
22:51kind of like the structure. This is
22:53highfidelity. Skipping the wireframing
22:55stage. Bad. All right. So that is it.
22:58Let's jump into the course and start
23:00making stuff. All right, that is it.
23:02That is wireframing versus highfidelity
23:04in Figma. Let's get on to the next
23:06course. Start making stuff, Dan. Hello.
23:09Hey, just wanted to check on you. How
23:11are you doing? How are you enjoying the
23:13course? If you're liking it, oh, you're
23:14liking it. Uh, give it a thumbs up. Uh,
23:17give it a like and subscribe to the
23:18channel. I have a lot of this kind of
23:20long form format stuff here on YouTube,
23:23so subscribe to the channel to check
23:25more of that out. Uh, also if you're
23:27like, "Oh man, this course is really
23:28good. I wish there was more." There is
23:30more. Uh, this is like the first 25% of
23:33my larger course called uh, Figma
23:35Essentials. There'll be a link for that
23:37in the description. Okay, we carry on.
23:40Where this video leaves off, we carry on
23:42in the course. You can pick it straight
23:43up. Uh, there is class projects, there's
23:46teaching assistants, the help, there is
23:48a certificate. Okay, so if you do want
23:49to go further uh, with your UX uh,
23:52career or Figma, check out the course
23:54link in the description. carry on with
23:56the video. Hi there. In this video, we
23:59are going to make our very first design
24:00file and then we're going to start
24:02adding pages which are called frames.
24:04We'll do some basic navigation and we'll
24:06super excitingly make four white boxes.
24:08Can you see those on the screen? Anyway,
24:10this is going to be our mobile phone
24:11layout for our project. Let's jump in.
24:13All right, so I've opened up Figma. Uh
24:15I've got a kind of a fresh copy here. Um
24:18so what we want to do is this screen
24:20changes quite a lot. Every time I make a
24:22course, this screen is different.
24:24basically the same. What you're looking
24:25for is this little home icon. Okay, they
24:29kind of move that around a little bit as
24:30well, but it should be in the top
24:31lefthand corner. And then we're looking
24:33to create uh what's called a design
24:34file. Remember, this course is about
24:36Figma design. This first one here, my
24:39mouse is on slow motion. All right, wait
24:42there. All right, my mouse is back. Uh
24:44so there is a design button. You can
24:45click on that. But in Figma, there's
24:47about 10 ways of getting everywhere. I'm
24:49going to try and give you like the
24:51consistent best way or the best way for
24:53our level. If you do discover another
24:54way, good work. If you like that way
24:56better, do that way. Just for instance,
24:57you can click on the design file. You
24:59can click on this plus button, then
25:00click on the design file. You can go to
25:03re uh no, was it drafts and hit plus and
25:05get a design file. There's lots of ways
25:08of getting a design file. All right, so
25:09let's create one. Bam. Basically, opens
25:12up in a new tab here. See, home, the
25:14untitled file that we've got open. Home,
25:16untitled file. You can work from
25:18templates to get started. We're not
25:20going to. Okay. You can hover above them
25:21and it just shows you them. That's just
25:22kind of like a getting started. We're
25:24going to uh utilize templates later on
25:26when we get better. Okay, but we need to
25:28kind of start from scratch. Let's close
25:29all this down. And we get this boring
25:31thing. All right, let's go and create a
25:33page. You do it using this button down
25:35the bottom here. Okay, it is called
25:37frames. Frames are like pages or
25:39artboards if you're from Adobe land.
25:41Okay, click on this. Okay, little icon
25:43down the bottom here. Click and draw out
25:45something. You now have a page. Your
25:46little cursor defaults to the selection
25:48tool after you've drawn it. So, if you
25:50want another page, you're going to go
25:51back to the frame tool, draw another
25:52one. Goes back to the selection tool.
25:54That's actually quite handy. Now, we
25:55want a specific size cuz we want our
25:58phone size that we're going to do our
25:59mockup for. So, what we can do is delete
26:00these by just clicking the name at the
26:02top. Can you see if I click the name at
26:04the top, kind of highlights the whole
26:05thing. And I can hit delete on my
26:06keyboard. So, I want to get rid of that
26:07guy as well. What I'm going to do is I'm
26:09going to go to my frame tool. And what
26:11you'll notice is on this right hand side
26:12here, you have to be on design. Okay?
26:14Which it should be. This frame can have
26:15a bunch of preset sizes. Okay? So,
26:17either phone, tablet, desktop. Let's do
26:19phone and let's use whatever the most
26:21common size is for the current time. So
26:24iPhone 16 is kind of a I don't know
26:26they're all roughly the same and you're
26:28not expected to design for all the
26:30different phone sizes. You might be
26:31expected to do phone, tablet, and
26:33desktop if you're doing say a website.
26:35If it's an app, you're obviously only
26:36going to do one size, okay, the phone.
26:38So we're going to start with iPhone 16.
26:40If you're watching this in the future
26:41and there's iPhone 500, use just Google
26:44what the common phone size is, most
26:46usage. Google will tell you kind of what
26:48the most of the world has or you can
26:50figure out what your boss, client,
26:52stakeholder has as a phone because
26:54they'll be testing it. You want to
26:56impress them the most. So, you want to
26:57kind of use their size. So, I'm going to
26:58use iPhone 16. If we're doing it for
27:00social media or something, you need it
27:02to be a specific size. Can you see if I
27:03have the name selected at the top? So,
27:05off selected over here on the right hand
27:07side, you can type in whatever size. If
27:09it needs to be 500 by 800, okay, you can
27:12do that. I don't want that. So, I'm
27:14going to use the undo. On a Mac, it is
27:16command Z, control- Z on a PC to get it
27:19back to the normal kind of iPhone size.
27:21It is under edit as well and undo. Or if
27:24you're in the browser version, you'll
27:25have a little bar up the top here where
27:27you can go to edit undo as well. You'll
27:28work it out. Now, I said we're not going
27:30to do too many shortcuts, but there's
27:31some just unavoidable ones. The other
27:32way is super long. So, the short way,
27:34okay, the shortcut is I want to zoom in
27:36and out. Okay, so hold command key down
27:37and hit plus on my keyboard. Okay, and
27:39minus uh comes out again. So hold
27:42command on a Mac, control on a PC, and
27:44zoom in and out. Okay, you can use this
27:46over here. There's a little manual drop
27:47down, but you'll go mad trying to use
27:48this thing here. Zoom out. Go back up.
27:51Zoom out. Okay, so command or control
27:54plus and minus. All right, so we've got
27:56this document and it's called iPhone
27:586-1. That's not fun. Okay, so we can
28:00rename it by just double clicking it
28:01over here and calling this one homepage.
28:03Okay, and hit enter on your keyboard.
28:05Some people prefer to go to over here on
28:07the lefth hand side here. Make sure
28:08you're under file, not assets. We'll do
28:10that later on. Go to file and you'll see
28:12down here under your layers. You can
28:13just double click it over here as well.
28:14Okay, up to you. I want two of these. I
28:17can go back to my frame tool and say I
28:19want another iPhone 16 and it will dump
28:22it next to it. Let's call this one uh
28:24what is this one? Our features. And
28:26another way you can do it is you can
28:29select the word features and just go
28:30copy paste. So command C, commandV on a
28:33Mac, control C, controlV on a PC. The
28:35kind of standard copy and paste. No
28:37thank you. Now the other shortcut I want
28:38to show you is hold down spacebar. We're
28:40only like one video into making stuff
28:42and already doing the shortcuts. Dan,
28:43just the real key ones. Okay, you hold
28:45down the space bar key and you'll see
28:46your cursor changes into a hand. You
28:48click, hold, and drag it around. So,
28:50hold space bar down, click, hold, drag.
28:52Now, we've got these three. All right.
28:53Now, depending on the job, you might be
28:55expected to do both a phone and a tablet
28:58and a desktop version. What you can do
29:00is let's zoom out a little bit. So,
29:01command minus or control minus on a PC.
29:04Let's click on features, copy and paste
29:06it. And what I'm going to do is I'm
29:07going to click and hold and I can drag
29:09these guys around. Okay, these frames, I
29:11can drag them around to say I want this
29:12one down here. Okay, and you drag the
29:14name. If you drag the edges, you can
29:16kind of manually change the size of your
29:17frame. I'm going to undo that. And over
29:19here, I can say this frame here, I want
29:22you to be not just a frame, but I want
29:24you to be not Android 16. I want you to
29:26be what are we going to do? And I pray
29:28Pro 11. Okay, can you see the frame got
29:30a whole lot bigger? Spacebar, hold it
29:32down, click and drag. With it selected,
29:34you can decide. You see this rotate
29:35here? You can decide if it's landscape
29:37or portrait. Let's double click it. Call
29:39it homepage. Okay. Same thing again.
29:42Copy and paste. Okay. And we can put in
29:44features.
29:46Forgot about this one. So this one's
29:48called checkout. Okay. And I'm going to
29:51copy and paste it. Double click. This
29:53one's going to be called confirmation.
29:56So you can do that for mobile, for
29:58tablet. Same for desktop. Okay. Let's
30:00grab both of these. Okay. I just clicked
30:02and dragged a box around them both and
30:03went copy paste. I think they've ended
30:05up on top of each other.
30:07They did. Okay. So, here we go down
30:09here. Okay. And this one here is going
30:12to be frame. I want it to be the desktop
30:15size. And desktop is You can see there's
30:18a bunch of stuff. You can do the Apple
30:20Watch. You can do some paperbased sizes.
30:23Okay. Twitter post. Oh, they're all in
30:24here. I'm looking for Scroll, Scroll,
30:26Scroll. I've gone past it, haven't I?
30:27There it is. Desktop. That's a super
30:29common desktop size and what most people
30:31use for designing a website even though
30:32there are lots of different, you know,
30:33sizes online. I could drag that over
30:35there. You get the idea. What I tend to
30:38do is design for something first. Okay?
30:41So, we're going to design for mobile
30:42first for this wireframe, then we'll
30:44design for desktop first um when we are
30:47working for our website. So, that's a
30:49kind of a conversation to have with your
30:50client. They might want to see both. But
30:52let's say bringerlaptop.com, my site,
30:54we're a desktop first company because
30:56most people are coming like watching the
30:58videos and interacting with software.
31:00They're on their computer. So, we design
31:01for that first and then work out how it
31:03fits into mobile. A lot of sites now
31:05will be mobile first. They'll be
31:07designing for mobile first and then kind
31:09of coming up with a desktop version
31:11afterwards. You can design them
31:13concurrently. Often what I do is design
31:16one of them, the most important one,
31:17then work out the other sizes in
31:20between. All right. What I'm going to do
31:21is zoom out far enough so I can see
31:22everything. Remember, command minus or
31:25control minus on a PC. And I'm just
31:27going to drag a box around all of these
31:28guys because I'm just going to work on
31:29mobile first. I'm just going to click
31:31delete. So, they're gone. If you do get
31:32lost, sometimes you can zoom in by
31:34accident or you've hit your scroll wheel
31:35and you're zooming zooming zooming.
31:36You're like, where the heck am I? Okay.
31:38You could use these little scrub bars
31:39here. Hello. Okay, these little guys
31:41here, and try and figure your way out.
31:42Often it's easy just to go up here and
31:44say, can you zoom to fit? And it will
31:46just kind of fit everything that you've
31:48got into the middle of the screen. All
31:50right, so let's name our document. Like
31:51some bits of software will ask you to
31:53name, you know, the file as soon as you
31:55create it. Figures are like that. So you
31:56end up with like a million untitled
31:58files. Know that's common, but we're
32:00going to be super awesome and we are
32:01going to rename our file. So I've double
32:03clicked up here. I'm going to give it a
32:05name. We're going to call ours Scott.
32:07You call yours your name. Okay? So
32:09you're not doing Scott ecom. Okay?
32:10You're doing, I don't know, Sandy or
32:12Jim, whatever your name is for your
32:14company. And this is our ecom site. And
32:17we're going to go V1 cuz we're not
32:18cavemen. Don't be that person. Final.
32:22Final
32:23one. No new.
32:26You're laughing cuz you do it. Okay,
32:28let's go. It doesn't really matter if
32:30it's V1 or ABC, just something. So, when
32:33we do have to update old files, yeah,
32:34it's easier to find. There is a fancy
32:36way of versioning inside of Figma, but
32:38that's going to work for us. Now, you
32:39can double click it over here as well.
32:42Okay. And you can close it by going to
32:44file, close, or just hitting this little
32:46cross in the corner. and it's gone.
32:47You're back to your home. And what
32:48you'll find is it defaults to recents
32:50most of the time. If it's not, go to
32:51recents and you'll see there he is
32:53there. Look, ecom. Double click it. Open
32:55it up in a new tab. Let's go back to
32:57home. And what you'll find is when you
32:58have loads of files that are called
33:00untitled, you can rightclick them in
33:02here. On a Mac, if you don't have a
33:04right click on your mouse, you can hit
33:05control on your keyboard and hit click.
33:06PC people, you'll have a right click. I
33:08do on my Mac as well. Okay? But you can
33:10right click and you can rename them in
33:12here. Okay? It doesn't really matter
33:13where you do it. And these things here,
33:15these are a pain in the butt. I'm just
33:18going to select them. Okay, I just
33:19dragged a box around them and hit
33:21delete. Okay, these are kind of like
33:22getting used to Figma files. I just find
33:24they make my life look messy. I'm like,
33:26did I make those? Where did those come
33:27from? You can leave them in here. Okay,
33:29or you can rightclick them and go to
33:31move to trash. Yes. Grab these two as
33:35well. I'm going to delete it just to
33:36tidy things up. All right, let's go back
33:37into it either by double clicking this
33:39or the tabs already open. And that's it.
33:41We've drawn uh four white boxes. could
33:43work. We all thought Figma would be more
33:45exciting,
33:46but we've learned what frames are, kind
33:48of like pages, and we worked out what a
33:50Figma design file is. It's the kind of
33:52thing that houses it all. All right,
33:53let's go and make some more stuff in the
33:55next video. I'll see you there. Hi
33:56there. In this video, we're going to
33:58cover some of the basics of type. We're
33:59not going to go through every single
34:01setting in the uh type menu, but just
34:03the basics to get us going. You know,
34:05how to change fonts and font sizes,
34:07right? I'll just show you the quirks of
34:09Figma. All right, let's go and add some
34:10type to our page. All right. So, let's
34:12start. Spacebar to kind of move over.
34:14Command or control plus to zoom in.
34:16Space bar again. Um, I'm going to grab
34:18the type tool. Okay. It's down here in
34:20the bottom. Capital T. Click on that.
34:23You'll notice that the really common
34:24tools, okay, if you hover above them,
34:26can you see it has a capital C next to
34:27it means I can jump to the comments tool
34:30by hitting C. T for the type tool, F for
34:32the frame tool. So, the really common
34:34ones, just hover above them and you'll
34:36see it'll tell you the shortcut. So, we
34:38want T for the type tool. There's two
34:40kinds of type boxes. There's one where
34:41you click once and start typing. And
34:44this one will go on forever and ever.
34:47Okay? So you click once, you get a type
34:48box. Good for headings, okay? Or
34:50buttons, just little parts of text. And
34:52the type box just keeps on going. Is
34:54this one here? It is called an auto
34:56width box. I knew that name. Okay. The
34:58other type of type box is I'm going to
34:59click in the background. Okay. And then
35:01go to my T key. If you obviously if
35:03you've got your cursor flashing in here
35:04and you hit the T shortcut, you just get
35:06T's. Okay. So I'm going to click off in
35:08the background, then hit my T key. And
35:09I'm going to click, hold, and drag out a
35:11box. This is called a fixed size box. I
35:14want it to be exactly this width.
35:17Difference with this one is when I start
35:18typing.
35:20Okay, you can see it breaks on the end
35:22of the line. Okay, so better for body
35:25copy, anything that needs a line break.
35:27You can convert them afterwards. I can
35:28click in this one here and say actually
35:30you're now a fixed uh size. Okay, and I
35:33can grab the point. I'm going to click
35:34off in the background. Let's go the
35:36whole way. I'm going to click again. If
35:37I click it once, okay, I can grab the
35:39edge here and now it's a fixed width,
35:41right? Same with this one here. Okay, I
35:43haven't got the text selected. What does
35:45that work anyway? It does. Doesn't
35:47really matter how you have it selected.
35:48Okay, I want this to be an auto width.
35:50So, kind of more like a heading or a
35:52button or some sort of small part of
35:53text. You can convert them afterwards.
35:55We'll cover auto height later in the
35:56class. So, those are our two text boxes.
35:58I'm going to undo to get rid of these.
36:00So, on a Mac, it's command Z. On a PC,
36:03it's control- Z. or on my desktop
36:05version, it's edit, undo. Um, if you're
36:07on the browser version, you'll have
36:09another edit. It'll be kind of just
36:10underneath here. Okay, you can go to
36:12edit, undo. Same thing. So, I'm going to
36:14go undo a few times. D.
36:17So many undos. All right, let's hit the
36:19T key and put in our logo for the brand.
36:22Now, if you've got a logo for the
36:24company you're working for and it
36:25exists, you can use the logo. But
36:26because we're kind of at the same time
36:28developing a brand for this app, at the
36:31same time, we're going to use just plain
36:33text. We're not going to get into logo
36:34design just yet. So, mine's going to be
36:36called I'm going to use caps. I'm going
36:38to go Scott or come on caps. Okay. So,
36:42we're going to keep it plain. Um to move
36:44it around, I'm going to click off in the
36:45background. Okay. Use my selection tool.
36:47I'm just going to move it up here. Uh
36:49next, we want our marketing message
36:51here. So, I'm going to grab the type
36:52tool, click and drag out. And remember,
36:55clicking and dragging gives us a fixed
36:57width box. We're just going to type in
36:58marketing message. Marketing
37:02message. goes here. Okay, I won't bore
37:05you with going through all the font
37:06stuff. You know how to change fonts.
37:08Okay, but the trick, let's just change
37:10the font size. Something nice and big. I
37:13want to get it so it breaks on two lines
37:14so that we can look at auto height.
37:16Okay, by default, it's trying to do it
37:17automatically. You can type in
37:19something. So, it's 24. It's really
37:21common to add another eight to it or
37:23another four. Let's go 28. Genius, Dan.
37:27Let's go to what's 8? 32. Okay. And what
37:29you can do is see these little icons
37:31here. I end up doing it quite a lot in
37:33this course. I'll show you now is see if
37:34you hover above this icon, this icon.
37:36Okay, you can click, hold, and drag it.
37:38Okay, so if you're more of a like tongue
37:40out looking at it going, "Oh, is that
37:42the right size? Maybe some letter
37:43spacing." Oh, yep. Okay, rather than
37:45trying to type it in and do math stuff.
37:47Okay, you can drag on one of these like
37:49icons. There you go.
37:52Back to 32. Um, so in terms of fonts,
37:54when you are doing a wireframe, like
37:56when you're doing the high fidelity, of
37:57course, spend a lot of time picking
37:58fonts. When you are doing a wireframe,
38:00it's best to leave it as a super duper
38:02boring font, okay? Something that's not
38:04going to offend anybody. Cuz what you
38:06want to do is when you're doing a test
38:07with somebody, especially with
38:08stakeholders, when they might have an
38:10opinion on the font, and that's not what
38:12you're doing for a first test. You're
38:13just getting you're building a mockup to
38:14test the like mechanics of this thing.
38:16Can they click the buttons? Do they get
38:18to where they need to go? What you don't
38:19want to come back and say, "Hey, I don't
38:21like that font."
38:24Okay. So, stick to fonts that are plain
38:26things that have I don't know characters
38:28that have no character like Robboto.
38:30Sorry, Robboto. Or the default one that
38:32comes uh you know the enter is the
38:34default one for Figma. So, people use
38:36that a lot. Robboto is good. Source
38:40sands uh whatever font you want as long
38:43as it's I don't know boring fonts. Plus,
38:46like Robboto, I like it because it is
38:49boring. Sorry, Robboto. But it has all
38:51these other weights here. I've got a
38:52bold and an italics and all sorts of
38:54other good stuff to go with it. So, keep
38:56your font simple. The other thing is is
38:58when you are picking fonts, it's best to
39:00do it on the actual device. I'll show
39:01you later on how to preview on your
39:03phone. When I'm working on my computer,
39:04I end up spending ages like playing
39:06around with letter spacing and tracking
39:08and line spacing and it's just too big.
39:11So, what you can do just as a hack is to
39:13zoom out until your phone kind of feels
39:16like the right size. Literally, what I'm
39:18doing now is I'm picking up my phone and
39:19going, "It's a bit small. 100's too
39:21big." big. So maybe up here I can type
39:23in maybe 75 is good. Holding up phone
39:26still too big. You'll be able to work
39:28out what it is on your phone to kind of
39:30give you that. Like you see how this is
39:31tiny now. You're like, "Oh, okay. That's
39:33too small." But if I hold my phone up,
39:35it's kind of the right size for the
39:36phone. All right. So, I'm going to go a
39:38little bit bigger on this. The other
39:39trick with any of these fields in here
39:41is look, I got 12. These these numbers
39:44are pretty good for jumping between
39:45stuff, but what you can do is just click
39:47in 12. Okay? And just use your up arrow
39:50doop. Can you see it just goes up in
39:52increments of one? If you hold shift and
39:55press up, it goes increments of 10. See,
39:57we're at 38. It goes up to 48. But if I
39:59just use my arrow key, just got to have
40:01it clicked in there. That works. Up and
40:04down. And then I find this is kind of
40:05like about sort of there. It looks fine.
40:08This one here now needs to be bigger.
40:10Click in hereup.
40:12Hold shift. Go up. And you can see
40:13because I have a fixed line height 32
40:16and my font size is 53, it's kind of
40:18getting a bit weird. If you need to go
40:20back to a line height of automatic,
40:22okay, just delete what's in there. Okay,
40:24and it will go back to auto. You can see
40:25here it's kind of squishing out of the
40:27bottom of my text box. It doesn't really
40:28make a difference here. Okay, but I can
40:30drag it a bit bigger there. And the
40:32other reason is I'm going to go to
40:33alignment. I'm not going to go through
40:34all of these. You know how to use type.
40:35The thing I do want to mention is that
40:37often when you are dealing with uh let's
40:40say you see I've got marketing message
40:41goes here rather than the actual
40:43marketing message, especially when
40:44you're at a really new stage of the app.
40:46I like to add really generic stuff like
40:48this, generic boring fonts with
40:51non-offensive titles. They know where
40:52the marketing message is going to go in
40:54there. But if I start using like, I
40:55don't know, my own creativity to add
40:57marketing messages here at this early
40:59testing stage, somebody's going to come
41:00back and say, "Oh, hey, we don't site
41:02like that. This got to go to
41:03copyrightiting." You're like, "No, no,
41:04no. Just click the buttons. I want to
41:05see if it works." So often I will strip
41:07out anything that will cause any offense
41:09or cause the wrong kind of feedback. So
41:11marketing message goes here. It's fine.
41:13All right. I need a couple little things
41:14before we can move on. And just other
41:16things to point out if I'm dragging this
41:17around using my uh pointer. Okay. And if
41:19I click, hold, and drag around. Can you
41:21see it's jumping around? It's pretty
41:23handy. Okay, you can see there it's
41:25lining to the middle of my page. I can
41:26drag it down. That's the middle middle
41:28of the page. Oh, nice. I'm going to
41:31stick that there. I'm going to copy and
41:32paste. This is another interesting thing
41:34about Figma. I'm going to zoom in. Uh
41:36copy paste. You're like, what happened?
41:38Actually, it pasted on the top of it. By
41:40default, it will stick whatever you've
41:41copied right over the top of it. So, it
41:43looks like you haven't copied it. But
41:44now you know that that's fine. Okay. So,
41:46I've copied and pasted it. This is where
41:47my product shot's going to go. Product
41:49shot.
41:51I'm going to make this smaller cuz it's
41:54more of a I don't know why it's going to
41:55be smaller. Um, the other thing to do is
41:58if you do want to copy and paste, often
42:01what I do is I hold down the option key
42:03on my Mac, alt key on a PC. So, I've got
42:05it selected. I'm on my uh move tool.
42:07Keep calling it the pointer tool. Okay.
42:09The move tool. Hold down that option key
42:10on a Mac, alt key on a PC. See the
42:12little double arrows that are appearing?
42:14Okay, the double arrows means when I
42:15drag it, so I've got my mouse down the
42:17whole time. I've got that option alt key
42:19down, it'll make a duplicate. Same here.
42:22I want another one. There we go. There
42:24are two of them. I can select both of
42:26these. And all I'm going to do probably
42:28is just make them bold and make them a
42:30little bit bigger. Now, typography here
42:32has the basics. If you're like, "Oh,
42:34where's the rest of it?" There's the
42:35rest of it. See, there's little options
42:36here. Okay, type settings. You get all
42:38the extra things. We'll cover different
42:40parts of it in this course, okay? But
42:42here is the kind of the other things you
42:44might have been looking for. So I'm
42:45going to make sure it's centered. I'm
42:46going to make sure it is all uppercase.
42:48Where's uppercase? There it is. There.
42:50Okay. And I'm going to double click this
42:52one and say this one's my buy now. Buy
42:54now. And this one's going to be my learn
42:56more. Learn more. All right. I think
42:58that's it. Look what we made. We put
43:01text on the page.
43:04All right. That's going to be it. Uh
43:05boring old text. Let's do boring old
43:07boxes in the next video. Stand back. We
43:09have added rectangles to the video. I'll
43:11show you how to do rectangles and
43:13circles. We'll do rounded corners. It's
43:15very exciting. I promise. Let's jump in.
43:17All right, let's start by grabbing the
43:18rectangle tools down here. It is this
43:20thing. It's a rectangle. There's a bunch
43:21of other stuff. See a little arrow next
43:23to it. Okay. There's a bunch of other
43:24kind of useful drawing tools all
43:26together, but we're going to start with
43:27the rectangle tool. Okay. And what I'm
43:29going to do is I want a kind of a
43:30placeholder image. Just a big rectangle
43:32like you saw at the beginning. So, I'm
43:33going to click, hold, and drag out. And
43:35it's gray. Woohoo. But it also covered
43:37my text. It's still there. Hey, look.
43:39Hello. You're underneath there. So,
43:41let's look at something called layers.
43:42Layers. You know what layers are. Um,
43:44how do they work in Figma? There's a
43:45couple of ways to get to it. Um, so the
43:48So, I'm going to show you a couple of
43:49ways just to show you all the different
43:51ways in Figma. Not to bamboozle you, but
43:53it's kind of good to know the kind of
43:55main ways of finding stuff and you'll
43:57find the one that works best for you at
43:58your level. So, a nice easy one is to
44:00right click it and say, uh, not select
44:03the layer. I want to send to back. So,
44:05I'm going to say send to the back of the
44:06layers. And it's behind there. Now, I'm
44:08going to undo that. Uh, the other way is
44:10over here. Okay, in this left panel,
44:12okay, you should see file. Okay, you
44:15might be on page one, and we should see
44:17layers. The only other thing you might
44:19be in is an assets. So, jump over to
44:20file. Okay, and in your layers, that's
44:22one page called confirmation, one's
44:24called checkout, one's called features,
44:25and we're on this homepage. Okay, and
44:27inside of here is all the bits. And you
44:29can see it's kind of a layer order like
44:30kind of more traditional design
44:32software. Okay, rectangle is above.
44:34Where is it? Product shot. So, I need to
44:35click, hold, and drag the rectangle.
44:37You'll see there's lines there. Give
44:39that a crack. Undo. If it goes horribly
44:41wrong, you could drag product shot.
44:43Click, hold, hold, hold, hold, and drag
44:45it above rectangle. That works, too. The
44:46other way I want to show you is that I'm
44:48on the desktop version, so I've got uh
44:51file edit view object along the top
44:52here. If you're on the browser version,
44:54you'd be like, I don't have that. Okay,
44:55yours is just hiding in here. Okay,
44:57file, edit, view object. See, they're
45:00exactly the same object there, object
45:02there. So, it doesn't matter. often in
45:04this class. I'm going to go up the top
45:05here to find stuff. And you'll be like,
45:07I don't have it. Okay. It's just under
45:08this F here for Figma. Okay. And you'll
45:10see I can go to edit. I can go to object
45:14and I can go down to uh bring to front.
45:16Bring to forward. I can't actually
45:17because it's grayed out. It's because I
45:18don't have it selected. I'm going to
45:20undo it. So, it's at the top. So, I'm
45:21going to click on the rectangle. Then I
45:23can go to edit. It was under object. You
45:27can send backwood, which will just go
45:29one level down. So, it'll be behind
45:30marketing message. Okay. Okay, I wanted
45:32to go send to back completely at the
45:34back again. It's in the exact same
45:35place. U object and there's center to
45:38back. Okay, you also said there's a
45:40shortcut so many ways. U object. I use
45:44this one quite a bit. Okay, it depends
45:46if you're ready for shortcuts. This one
45:47here, the square bracket is just on your
45:49keyboard. You'll see it normally next to
45:51your P key. Okay, and bring to front. So
45:53I can go square bracket forwards, square
45:55bracket backwards, forward, back,
45:57forward, back. It doesn't matter which
45:58one you use, but in this video, I want
46:00to kind of show you all the different
46:01ways because I want to give you a sense
46:02that there's multiple ways of going at
46:04it, and it doesn't matter which way you
46:05end up choosing. But that's it. I'll go
46:07kind of just an easy way from now on.
46:08All right, let's zoom in down here.
46:10Spacebar, click and drag. Command plus
46:13to zoom in. Control plus on a PC. Let's
46:15grab our R key for the rectangle tool.
46:17Drag out a box. And I'm going to use my
46:19square bracket cuz we're fancy with our
46:20shortcuts, but you use any way you like.
46:22Okay. And I've got my the buy now
46:24button. Now, another trick in Figma is
46:26if you want to select two things, I can
46:27click and drag over these two. Or I can
46:30click one, hold shift on my keyboard and
46:32click the other one, and they have both
46:33selected. Okay. And now I want another
46:35rectangle. So instead of drawing it, I'm
46:37going to click this one once and use my
46:39copy paste, which ends up putting it
46:42right over the top of it. But don't
46:43worry, we know. Okay. And that is going
46:45to be that. All right. And I've been
46:47talking about like keeping design out of
46:48this wireframe. Wireframes are meant to
46:50be super just generic, but I can't help
46:52myself for some things like rounded
46:54corners. Oo, I really like rounded
46:55corners. So, if you click on this
46:56rectangle here and you zoom in far
46:58enough, okay, you will see the little
47:00dots in the corner. You can click, hold,
47:01and drag those. If you can't see them,
47:03watch this. If I zoom out and I have it
47:04selected and you have your cursor
47:06flashing above it, can you see it's not
47:07there? It only shows you at certain view
47:09levels. You have to be in quite close to
47:11see these. Okay, if you want to do them
47:12manually, you have it selected. And over
47:14here under appearance, you've got this
47:15one called corner radius. And I can type
47:17in eight. Same with this one. I can say
47:20I can either drag it. Okay. And you can
47:22see it tells you that's eight. It's up
47:23to you. And hold space bar, move up.
47:26Okay. Click on this one as well. And I'm
47:28going to make this consistent by typing
47:29in eight as well. You might decide that
47:31actually corner radius. You don't want
47:32them eight in all corners. You want one
47:34of them to be different. Okay. See this
47:35little option here? It kind of expands
47:37the individual corners. So at the moment
47:39they're all at eight. You can decide
47:40this bottom right. Can you see it's the
47:42top left, top right. You got it. Bottom
47:44right. I can make this one 30. Okay. It
47:46just means that if I zoom out, one of
47:48them is different. You can do that
47:50manually as well. Okay, you can hold
47:52down the option key on a Mac, alt key on
47:54a PC, and you can do them individually
47:56as well. You see that just one of them
47:59moves around. All right, I'm going to go
48:00back to consistent. So, corners mixed.
48:03I'm going to get rid of mixed and just
48:04delete it and type in eight over the top
48:06and hit enter. Now, they're all the
48:08same. All right, we've drawn rectangles.
48:10We've rounded corners. Let's draw a
48:12circle. Down here is our circle. Okay.
48:14What's ellipse, which is a shortcut for
48:17O. At least that looks like a circle.
48:19Okay. So, I'm going to hit the O key on
48:21my keyboard. And I'm going to drag out a
48:23circle. Another thing when you are
48:24drawing either circles or squares or
48:26anything, if you want it to not be an
48:28oval, okay, O key. Um, here you hold
48:31down. What key is it? You know what key
48:32it is? Hit shift. Hold shift while
48:34you're dragging and you'll get the uh
48:36lock the height and width. Okay. So, I
48:38want something about that sort of
48:39sizeish. You can see the sizes of it
48:41over here. Mine's at 32 by 32. Roughly
48:44about there. It doesn't really matter.
48:46I'm going to zoom in on it. Space bar.
48:48Spacebar. And I'm going to grab the type
48:50tool because I want that plus button.
48:51So, I'm going to grab the T key. Okay.
48:53I'm going to click once and I'm just
48:54going to type a plus on my keyboard.
48:56Font. I'm going to use interim bold.
48:58That's fine. Go back to my selection
49:00tool. Now, if you want to move this,
49:01you'll be like, "All right, I want to
49:02put this above this button." You're
49:03like, "Yeah." Okay. Sometimes you just
49:05need to click off in the background and
49:06then drag it. Okay. And in terms of the
49:08font size, we're going to use our sweet
49:10shortcut. I'm going to click in here and
49:11use up arrow to get it kind of the right
49:14size. It jumps around. It's trying to
49:15lock into pixels. That's okay. So about
49:18there. The right size. Up. Up. Again,
49:20remember we're at 400%.
49:2260 kind of worked for me. So now I'm
49:24like, all right, that's that looks good.
49:26The other trick that I want to show you
49:28is when you're trying to line something
49:29up, it can be quite tricky. I'll show
49:30you more exactly later on. But dragging
49:33it around, it tries to snap. Can you
49:35see? It's like, oh, I want to be here.
49:37Did you mean here? You're like, no, no,
49:38no. Just go right in the middle. So, I
49:39want to nudge it around. So, what you do
49:40is you have it selected. So, I'm going
49:42to click off in the background. Click it
49:43once. And I can use my arrow key. It's
49:46just the keys. Okay. On my keyboard just
49:48to move it around to kind of get it to
49:49where I want. That is good. Oh, what
49:52does that button do? You didn't ask. So,
49:54if you're zoomed in uh close enough to
49:56your circle, you'll see this dot. You'll
49:57be like, "What does this do?" You ready?
50:02That is totally not that useful, but it
50:04makes me happy. Anyway, I imagine bar
50:06graphs and pigraphs and stuff. All
50:08right, let's zoom out. I'm going to use
50:10the shortcut to go zoom to fit is one
50:12that I'm going to try and knock into
50:13your head as we go through this course.
50:15It is command0 or control zero on a PC.
50:18Nope, it's shift zero. No, it's none of
50:20those. Command Z. Oh, heck, my brain's
50:23gone. Zoom to fit. That's what I want.
50:25Okay, so the one I just showed you,
50:27command Z, is go to 100%. That's fine.
50:29This one here are like a lot. Zoom to
50:31fit. Okay, and shift one. I know that.
50:33Okay, hold shift key down, both Mac and
50:35PC, and hit the one key, and it'll just
50:37fit everything into your window. There
50:38we go. We drew some rectangles. Look at
50:40us. All right, I'm going to select both
50:41of these and just kind of move that over
50:43here. We'll use that a little bit later.
50:44It's going to go in the middle down
50:45here. And then we'll get on to the next
50:48video. Let's go do that.
50:54Hey there. In this video, we're going to
50:55go from this to to this
50:59gray to this color. Teal, green, blue.
51:02Anyway, we're going to look at the
51:03basics of color inside of Figma. Don't
51:05skip ahead. There's some useful juicy
51:07stuff in here, plus a little bonus
51:09shortcut at the end. All right, let's
51:10jump in. All right, color's easy. Let's
51:12click on our gray rectangle. It's the
51:14default color for Figma. Okay, and over
51:15here under fill, you can click on this
51:17little color square here, and you get
51:18this color picker. Okay, you might have
51:21used the color picker before. Okay, if
51:22you haven't, this little uh dot here is
51:25the color that you've selected. You can
51:26click and drag it around to pick any
51:28color as long as it's red. Okay, I'm
51:29going to move it up into the top right
51:31here. And what you can do is grab the
51:33hue slider and just drag this along. Can
51:35you see what it's doing to the color?
51:36Say you want it to be a blue. Okay, but
51:38you can decide I want it to be more of a
51:39blue and I want it to be a darker blue
51:42or I want it to be a less saturated
51:44blue. So saturation is left to right.
51:45Okay, and up and down is brightness.
51:47Okay, so you can pick something in here
51:48that works for you. To pick black and
51:50white, it's kind of weird. You can use
51:51these down the bottom here. Okay, these
51:52are kind of some default colors. Or what
51:54people tend to do is click, hold, and
51:56drag, drag, drag, drag, drag past the
51:58corner. So I'm I'm still got my mouse
52:00held down. If you drag it past the
52:02corner, it gems it into full white. And
52:04same with the black. If you drag it down
52:05this way, it drags it full black. Up to
52:07you. Okay, it's the hue slider. This is
52:08the transparency slider. I'm going to
52:10pick this color here. I'm going to drag
52:11the transparency down so it's a bit more
52:13see-through. You can't really tell now
52:15because it's seeing through to the white
52:17in the background. Let's move it above
52:18all of this. And let's move it to the
52:20front. Okay. On the layers panel, either
52:22way you want. I'm going to use the
52:23square bracket down by the P key. You
52:25can see it's kind of frosting and
52:26looking through that now. All right.
52:28Sometimes you don't need to have this
52:29open. Okay. Okay, I can have this
52:31selected if I want the transparency back
52:32up. Can you see it's at uh 47%. That's
52:35where I dragged it on that last window.
52:36I can type in 100 and hit enter here.
52:39I'm going to put it to the back again
52:40using that first square bracket. I'll
52:42put it back to where it should be. I'm
52:45going to pick a color. It's very common
52:46to use blue or kind of a light light
52:48blue on top here. I'm going to use a
52:52teal
52:53for no good reason. The trick here is to
52:56just use one color. Try not to get too
52:59far into picking colors for everything,
53:01especially in this wireframe. Remember,
53:02this is about testing the mechanics of
53:04it, not really styling it, but you want
53:06it to look okay. So, pick a color you
53:08like. Now, the default down here is this
53:09hexadimal number. So, it's a six-digit
53:11code that represents the color on the
53:13web. Okay? You can change it down here
53:15to RGB. If you've got like a corporate
53:17manual spec document, you've got to use
53:19the official company color. You can type
53:21them in here. Okay? So, it's RGBA, which
53:24is red, green, blue, and alpha is the
53:26transparency. You can either drag that
53:28slider or do it down here. It doesn't
53:29matter. Other ones that are useful is
53:32CSS. If you're more of a developer and
53:34you know the CSS colors, you can type
53:35them in. Or I don't use that very much.
53:38Okay. Uh hue, saturation, luminance, I
53:40use hue, saturation, and brightness.
53:42Where I find this quite useful is, you
53:44know, if I want to make this darker, I
53:45got to kind of drag it down here. But
53:46you end up going like and zigzagging it
53:48down. You're like, no, straight down.
53:50Okay. You can click in brightness.
53:52Brightness is up and down. So, what you
53:53can do is just go in here and go, you
53:55see my arrow? I'm just using you see you
53:57can't see my fingers. You can just click
53:59in here like we've done for lots of the
54:01other ones and just drag it up. Hold
54:02shift and it will jump up in big chunks.
54:04How saturated the color is is left to
54:06right. So instead of wiggling it this
54:08way, you can just click in this one here
54:10and go up or down. You see it goes left
54:12to right. Same with the hue. Want to be
54:14a little more blue. So I'm going to go
54:15up up up up up up.
54:18There you go. Uh really common though to
54:20leave it on hex. Leave it on hexan. Uh,
54:23the other thing is is that you'll end up
54:24with a bunch of colors down the bottom
54:26here. It's like colors you've already
54:27used. There's that gray. If you want to
54:28go back to it, there it is. There's that
54:30blue we just mixed up. So, we can say
54:31you I want it to be that color of Oh,
54:34the blue's gone now cuz it's not used
54:36anywhere on this page. Good work, Dan.
54:38I'm going to undo it so it comes back.
54:40So, I can use it now and say you are
54:42that color. I don't like it. You wait
54:45there. All right. This color I'm going
54:47to use. Um, the other thing you can do
54:49is use the eyedropper tool. So you can
54:50click in here and say I want the
54:52eyropper to be that color. The cool
54:54thing about the eyropper tool is you can
54:55get into some really nittygritty. Can
54:57you see next to the icon there? There's
54:59this little Can you see there's like a
55:00little zoomed version of it. Say if you
55:02just want this like weird gray color on
55:04the edge of that type there. You can
55:06only see it when you really zoom in. Oh,
55:09you can't even see it when you zoom in.
55:12It's there. It's great for picking
55:13colors of images. Um I am going to show
55:16you the shortcut though is I'm going to
55:18click on this. I do this very often. I'm
55:19going to hold shift to click both of
55:21these. So I got them both selected and
55:23undo that and undo the move. So hold
55:26shift, click both of these, use my
55:27eyropper tool, shortcut, which is I,
55:29okay, on your keyboard, the letter I,
55:31not your eyeball. Okay, and I can click
55:34in here and they both will become that
55:36color. It doesn't matter really where
55:37you do it. Sometimes it's hard to click
55:38on things. If you do find it's really
55:40hard to click on things, the easiest way
55:42is just to zoom in a little bit. Okay,
55:44and say, "All right, now it's easier to
55:46click." And I can go into here, use my
55:47eyropper tool. There he is. All right. I
55:51go to shift one to show me all my frames
55:53all in one document. You can change the
55:55frame color of the phone we've got here.
55:58Okay. Down here, we can say it's full of
55:59white, which is fff. Okay. You can
56:02change it to something else. Some people
56:03like to make it like a light gray. We're
56:05going to leave it white for the moment.
56:07So frames can be colored just like
56:09rectangles. They're very similar. The
56:11other thing you might want to change or
56:12your I can't remember what the default
56:13is. It's the theme color. So basically
56:15there's a very white layout right of my
56:17interface everything is white
56:18backgrounds are light gray. You can go
56:20into this little F here and you can go
56:22to preferences. You can say actually I
56:24want the theme to be uh light or dark.
56:26Your system theme at the moment is
56:28mine's getting it from my Mac. My Mac's
56:30telling it it's daytime. So you can use
56:31a light one and it's night time. It
56:32changes to black which is kind of weird.
56:34So you could force it to be black. Okay.
56:36It doesn't change the document just
56:38changes the kind of interface. And it
56:40also means when I create a new document,
56:41okay, create new design file, you see
56:43the background is black. And if I grab
56:46my frame tool and draw something else,
56:48we're kind of in the same position, but
56:49the interface looks quite different,
56:51right? It's just a black dark version.
56:53It's up to you. If you do change it to
56:55dark and you're like, "Oh, but the
56:57background is still light color." You
56:59can have nothing selected. So, click in
57:01the background and go up to here and
57:02say, "Actually, I want it to be dark."
57:05I can't remember what the default is.
57:06Yours will be different depending on
57:08your system preferences. So, I'm going
57:09to go back to I'm going to force it to
57:11be light and stay in light mode for the
57:13rest of this class. But, and you know,
57:15you can change it theme light. Nice.
57:18Another thing that's kind of useful is
57:20depending on your vision and your
57:22screen, you can go to view, okay, and go
57:25down to interface scale. And you can
57:26say, actually, I'd like to make it
57:28larger or try and decode those
57:31hieroglyphics. Not useful, Figma. But if
57:33I do that, can you see everything in the
57:35panels gets bigger and you can go bigger
57:37and bigger and bigger. you've got a
57:38massive big wraparound screen. It might
57:40be nicer just to have the interface
57:41bigger. I'm going to go Should I leave
57:43it this size? I'll leave it this size
57:44for the rest of the video so you can see
57:45what I'm doing a little easier. One last
57:47thing is this is driving me mad. Is it
57:49driving you mad? You didn't care. Uh
57:51this doesn't fit in here very well. So,
57:53I can drag this a bit bigger. Just I
57:54don't know. It needs to be bigger. I'll
57:56show you a little shortcut. Little bonus
57:57for waiting to the end. Um if I drag
57:59this side and I want it to be equally
58:01out that side, what you can do is
58:03instead of just dragging one side and
58:04then the other, you can hold a sweet
58:06shortcut. I promise no shortcuts, but
58:08we've done loads. Hold down the option
58:09key on a Mac, alt key on a PC, and you
58:11can see it does it from both sides.
58:14Fancy. See, it was worth hanging around
58:16doing colored squares. All right, that's
58:18it. The big takeaway here really is
58:20don't use a lot of color. Try and keep
58:22your wireframes really simplistic. Use
58:24gray, use blue. Don't try and start
58:26color coding things again. We don't want
58:28to distract from our goal of this
58:30wireframe test. Just test the mechanics.
58:32Do people click where we think they're
58:34going to click? Is this the kind of
58:36thing that the client wants without
58:37fonts, without colors, without styling?
58:39All right, that's it. I'll see you in
58:40the next video.
58:45Hi there. In this video, we're going to
58:46look at the stroke, which is the line
58:48inside of Figma. All the things you can
58:50and can't do with it. Also, I'll show
58:52you how to change the default so
58:53whenever you draw a rectangle, it
58:54matches a previous style that we've
58:56made. All right, let's jump in. All
58:57right, so let's add a stroke. Stroke is
58:59just another word for a line. So I am
59:02going to click this big rectangle at the
59:03top here. And over here by default when
59:05we draw something with the rectangle
59:06tool we get a fill but no stroke. We can
59:08add a stroke by hitting the little plus
59:10button. Okay. You get given a little
59:12stroke around the outside. By default
59:14it's a onepoint stroke. Okay. Or they
59:16call it the weight. That's how thick the
59:18line is. I can click in here and use my
59:19up arrow or type it in. Okay. I'll put
59:21in something nice and thick so you can
59:22see it. Three. You can get rid of the
59:24stroke by clicking this little minus.
59:26Add it back in. You got it. You can
59:27obviously change the color of it if you
59:29want grays. Okay. You want it just like
59:30a lighter gray. Just keep it dragged to
59:32this edge here and kind of find
59:33something in here. Or just make it
59:35black. Let's close it down. Now, let's
59:37say you spend some time, you're like,
59:38actually, I want this to be what? Uh,
59:40three. Okay, you spend some time. You're
59:42like, oh, I love this green color. Well,
59:45you don't love it, but you've got to use
59:46it over and over. If I go over here and
59:48say rectangle tool, which is the R key,
59:50and I drag out another box, you're like,
59:51gh. So, doesn't have the rounded
59:53corners, doesn't have the color, doesn't
59:54have the stroke. Okay, I could use my
59:55eyedropper tool. Click on it. I for the
59:57eyropper tool. Bam. it grabbed part of
59:59it but not the rounded corners. It just
1:00:01grabbed the colors. So what you can do
1:00:05is change the defaults. Okay. So let's
1:00:08say I want this to be the default for
1:00:10every time I draw a rectangle. What you
1:00:11can do is just have it selected. Go up
1:00:13to the F up here. Go down to edit. And
1:00:16there's this one in here. It says set
1:00:18the default properties. So you have to
1:00:19have it selected first. The thing that
1:00:21you want to steal all the properties
1:00:22from. You click on that. Nothing happens
1:00:25except that appears down the bottom. Now
1:00:26I'm going to click off in the
1:00:27background. hit my R key for the
1:00:29rectangle and I draw something else.
1:00:31Look at us. We reset our defaults. What
1:00:33you can also do is let's say we do
1:00:35something different for buttons. So,
1:00:36that's the default for every time you
1:00:37use a rectangle tool, but there's
1:00:39obviously different use cases. We've
1:00:40drawn a placeholder image versus a
1:00:42button. Let's say the button's different
1:00:43and we've got a different color. Um, and
1:00:45it's got a different stroke around the
1:00:47outside.
1:00:49Hideous. But we need to move it over
1:00:51here. Okay. What you can do is you can
1:00:53say you and you kind of probably saw it
1:00:55in there in the same place under the F.
1:00:57Go to edit. You can copy the properties
1:01:00and paste the properties. If you're
1:01:01doing this a lot, there's a shortcut
1:01:02there. So, I can copy the properties and
1:01:04you, my friend, are going to be if edit,
1:01:09paste properties, and it will grab
1:01:11everything from there and paste it onto
1:01:12there. Awesome. I don't want to do that,
1:01:14but now you know how.
1:01:17All right. Undo, undo, undo. Those are
1:01:19the defaults. Let's look at drawing some
1:01:21lines. So, we've put lines around the
1:01:22outside. Okay. Let's draw a line on its
1:01:25own and it's hiding underneath the
1:01:26rectangle tool. There is the line tool.
1:01:28Can I click on that? I'm going to start
1:01:30up here. Click, hold, and drag, drag,
1:01:31drag, drag, drag, drag, drag, and get it
1:01:33down to the bottom corner here. I want
1:01:34it to be the same weight. So, I'm going
1:01:35to click in here and go up to. So, it's
1:01:38three for the weight. Okay. And I didn't
1:01:40line it up very well. We'll do that in a
1:01:42sec. Back to the line tool, which is the
1:01:44L key. Okay. Click, hold, and drag from
1:01:46U down to there. It's really common.
1:01:48Uggh. It keeps changing that. So, I'm
1:01:50going to say U. 1 2 3. We could copy and
1:01:52paste properties. Let's do that just to
1:01:54practice. So I click on this. I go
1:01:56commandoption C on a Mac. That's
1:01:59controllaltt C. Then click on this other
1:02:01one and go commandoption V. It will
1:02:03paste the properties. So I use that
1:02:05loads again. If you This is too many.
1:02:07You're like, man, he said no shortcuts.
1:02:09Way too many shortcuts. I showed you the
1:02:10long way. You can close your ears when I
1:02:12start doing shortcuts. All right. So
1:02:14it's good except I kind of messed this
1:02:16up. So I'm going to zoom in. Command
1:02:17plus+ spacebar. Drag it out. You can
1:02:20click on it once on this line here. If I
1:02:22click and drag it, okay, it'll drag the
1:02:24whole thing. So, what I want to do is
1:02:25double click on the line and I get the
1:02:27two points at the end. Can you see if I
1:02:29click on it, it turns to circles and I
1:02:31kind of get the little end points of it.
1:02:33Space bar move down cuz if I don't, I'm
1:02:36going click off in the background.
1:02:38Okay. And I click on it, I'm like, oh,
1:02:39I'm going to move the square. It ends up
1:02:41doing weird stuff. Okay. So, if I double
1:02:43click on it, I can see you and you space
1:02:46bar. That one looks all right. This one
1:02:48needs work. Double click. Here we go.
1:02:51All right. So, we got a couple of lines
1:02:52in the corners. To get out of that, you
1:02:55need to kind of like click a few times
1:02:56in the background just to kind of come
1:02:58out of this mode here. It's not as you
1:03:00got to kind of triple click. That's what
1:03:02you need to do. All right. So, we've got
1:03:03our lines through there. Let's do our
1:03:05burger menu. So, the burger menu is the
1:03:06kind of common thing on navigation for a
1:03:08mobile phone. Let's grab our L key for
1:03:10the line tool or go the long way. You
1:03:12can totally go the long way. Okay.
1:03:13Wherever you're ready for. Use the L key
1:03:15and I'm going to click and drag out.
1:03:16Now, it's pretty good at snapping, but
1:03:18if you do, what I mean by snapping is it
1:03:19look at that. It really wants to go
1:03:21straight. Okay? If you get a little bit
1:03:22off, it's easy to get it back. What you
1:03:24can do is like we did with the circle.
1:03:25Remember when we dragged out the circle?
1:03:27If we held shift, it kind of like locked
1:03:28it into the height and width. You can do
1:03:30the same thing with a line. Watch this.
1:03:31If I grab the L key, click and drag out.
1:03:33Okay. If I hold down the shift, say at
1:03:35the moment goes anywhere. If I hold down
1:03:36the shift key, you see it locks it into
1:03:38uh 90° angles, 45° angles even. Okay.
1:03:41So, you might that's handy. Get it to a
1:03:42size that you want. Again, when we test
1:03:44on an actual phone soon, that'll be, you
1:03:47know, it's it's hard to know how big the
1:03:48burger menu should be. Basically, just
1:03:50three little lines. I like to call it a
1:03:51nav sandwich. Nobody else calls it a nav
1:03:53sandwich, but most people refer to it as
1:03:54a burger menu. What I'm going to do is
1:03:56zoom in a little bit and let's look at
1:03:57some more linesy stuff. Okay, so we want
1:03:59three of them. You can copy and paste
1:04:01using command C, command V, or control
1:04:03CRV. We've know our we know our sweet
1:04:06shortcut now. Remember, we hold down the
1:04:07option key on a Mac, alt PC, and we can
1:04:09duplicate it. Okay, we do the same thing
1:04:11again. Ooh, I want to do one more
1:04:13shortcut.
1:04:15Close your ears if you're like, "No
1:04:17more." All right, one more. Okay, for
1:04:18those of you still around, hold down the
1:04:20option key and drag it out. What you can
1:04:22do now is you're like, I want to do that
1:04:23same thing again. Just duplicate it the
1:04:25same amount, same distance. You hold
1:04:27command on a Mac, control on a PC, and
1:04:29hit D. That will like duplicate or do
1:04:31again, command D or control D. It's
1:04:34really handy. You can keep going like
1:04:36great for lists and stuff. anytime
1:04:39you're like dragging something out, say
1:04:40it's a list for this a little bit. Um,
1:04:42I'm going to first of all got to
1:04:43duplicate it. So, you're like, I'm going
1:04:45to do that. And then remember command or
1:04:47control D to do it again. It's great for
1:04:49building out little lists like that or
1:04:51squares or circles or dots. All right.
1:04:52So, we've got these guys. We need to
1:04:54look at some advanced stroke stuff. Not
1:04:57really. Um, let's get I'm going to bump
1:04:59it up size-wise to two just so you can
1:05:01see it a bit easier. And with this top
1:05:03one, this is called a butt cap. It's an
1:05:05unfortunate name, but it's the line that
1:05:07comes along and just kind of ends here.
1:05:09You've got another option. Click on
1:05:10this. The stroke here, see this little
1:05:12stroke panel? You have this like uh
1:05:14start and end point. And here they tie
1:05:15in a bunch of stuff. So like arrows.
1:05:17There you go. If you want to get rid of
1:05:18the arrow, hit undo. Okay. If I want the
1:05:19other end to be an arrow, there you go.
1:05:21So you've got some basic stuff in here.
1:05:22The one I wanted to show you is that
1:05:24this I don't know why it bugs me, but
1:05:26this kind of like butt cap on the end
1:05:28here. You can say actually I want it to
1:05:30be either I got to scroll down a little
1:05:32bit. Can't quite see it on my monitor
1:05:34anyway, but there's round and square.
1:05:35So, I'm going to say round. Can you see
1:05:36it rounds the end? Oo, I like it better.
1:05:39Okay, this one here, the last option is
1:05:41under you can do it either one. Okay, it
1:05:44does both ends. There's a square one as
1:05:45well. What I want to show you is
1:05:47basically the line. Can you see there's
1:05:48that little blue thing running through
1:05:50the middle? That is the actual stroke.
1:05:52Then you put a weight on it and you can
1:05:53see the little blue line will stay. Um,
1:05:55but the, you know, blue line's in the
1:05:57middle and it just kind of expands at
1:05:59either side. And if I do a square cap,
1:06:01let's have a look. Okay, can you see it
1:06:04kind of pushes the line in a little bit
1:06:05and kind of goes square on the end. I
1:06:07don't use that very often. People ask
1:06:10it's there, but I use the rounded cap
1:06:12quite a bit just to smooth off the edges
1:06:13of strokes. You might want to butt cap.
1:06:15I'm going to select them all. And this
1:06:17is a good point. You see here it says
1:06:18mixed. You'll see mixed all over the
1:06:20place when you've selected multiple
1:06:21things. So, I'm just in my pointer tool,
1:06:23dragged a box around all three of these,
1:06:24and it's saying the start point is, oh,
1:06:26it's a mixture of butt caps, rounded
1:06:28caps, and square caps. Doesn't know what
1:06:30to say. So, it just writes mixed. So, if
1:06:31it says mixed, it's unsure what to
1:06:33display. So, I'm going to say all of
1:06:34them down the bottom here. Round. And I
1:06:38only did it to one of them.
1:06:41That's weird. Round. It is going badly.
1:06:45This is a weird bug. Doesn't normally do
1:06:47this when I teach it. What is wrong? I
1:06:49am giving up. What happens? I think it's
1:06:51the square cap. They've changed the way
1:06:53they do that. When they make the square
1:06:54cap, it used to kind of jut out. Now
1:06:56they've tucked it in. So the square cap,
1:06:58the line ends up being the same size.
1:07:00But it changed the width of my actual
1:07:03stroke. You're not making sense, Dan.
1:07:04Don't worry, you won't be doing that too
1:07:07often, but it's a bug and I'll leave it
1:07:09in the course cuz you might bump into
1:07:11it, too. Weird, confusing, and even Dan,
1:07:13the instructor, is a little bit weirded
1:07:14out by it. So, I just remade them.
1:07:16Anyway, the main goal here is to look at
1:07:18the difference between the kind of
1:07:19flatended cap, butt cap, and the rounded
1:07:23cap. All right, I'm going to go to shift
1:07:24one to kind of see the whole thing and
1:07:26I'm going to select all of these. And
1:07:28often I just use my arrow key to move
1:07:30them around because at this it's kind of
1:07:32hard to drag them at this size. It's
1:07:34like kind of snaps around. You're like,
1:07:35nope, nope, nope, nope. So, I like to
1:07:37get it kind of where I want it to be and
1:07:38then just use my arrow keys just to kind
1:07:40of taperoon. All right, there you go.
1:07:42We've got a burger menu or our mobile
1:07:43nav or nav sandwich. Let's start that as
1:07:46a thing. All right, I'm just going to
1:07:47move this up here
1:07:49using my arrow key again. Oh, nice
1:07:51little shortcut for you is we've done it
1:07:53before. When I'm using my arrow keys,
1:07:56okay, it just nudges it around. If you
1:07:57hold shift while you do it, it kind of
1:07:59does it in 10 uh like times it by 10.
1:08:03Okay, so instead of moving one pixel up
1:08:04and down, it if you hold shift and use
1:08:06your arrow keys, it does it by 10
1:08:08pixels. Stuff I use that I forget I do.
1:08:10There you go. You know, too. All right,
1:08:11that is it. strokes and looking at the
1:08:14default colors inside of Figma. Onto the
1:08:16next video.
1:08:21Hey there. In this video, I'm going to
1:08:22show you this thing. It's called object
1:08:24editing mode. You might have been stuck
1:08:26here already. I'm going to show you what
1:08:27it's for and how to escape it. See
1:08:29strappy lines? I want to show you early
1:08:31on in the class this. We're going to go
1:08:32into it more advanced later on, okay?
1:08:34But people get stuck early on. Um, if
1:08:36you're a double clicker, you're probably
1:08:38already here and might have figured your
1:08:39way out already. But if I have an object
1:08:41and if you're a double clicker and you
1:08:42double click stuff, you're like, "Oh,
1:08:43what's going on? How do I get out?" How
1:08:45to get out is just to double click on
1:08:46the background. Let's do it with a new
1:08:48uh rectangle. The R key for the
1:08:50rectangle tool, draw it out. Defaults
1:08:52back to the move tool. Double click it
1:08:54and you're inside it. You're like,
1:08:55"Whoa, what is this?" It means basically
1:08:57when you're not in object editing mode,
1:08:59okay, you grab the corners of the
1:09:00rectangle and it does rectangly stuff.
1:09:02It's kind of like forced to be a
1:09:04rectangle. And if I double click it, I
1:09:05go inside of that object and I can wreck
1:09:07it. Okay, I can grab the corner. Now you
1:09:10notice that the edges changed from a
1:09:12square to a circle. And watch this.
1:09:14Look, we've destroyed it. I can click
1:09:16out now. And now it's no longer doing
1:09:18rectangly bits. Kind of like, you know,
1:09:20you've gone inside of this object and
1:09:21you've edited it. It's called object
1:09:23editing mode. You can do some other cool
1:09:24stuff. Watch. Double click. Go inside. I
1:09:26can click on this line here. Okay. I've
1:09:28just clicked on the line. Hit delete on
1:09:29my key. Okay. And I've got rid of that
1:09:31line, which has got rid of the fill. I
1:09:32can say get rid of that line. Okay. And
1:09:34you can kind of start destroying this
1:09:35thing and start pulling it apart. No
1:09:37longer a rectangle. That's going to be
1:09:38handy later on when we start drawing our
1:09:40own icons. I'm going to undo it to get
1:09:42back. But that is object editing mode.
1:09:44That's where we ended up with this line
1:09:45as well. Remember, we double clicked on
1:09:47the line and we're kind of like we got
1:09:48the dots. We're in object editing mode.
1:09:50The way to kind of know as well is the
1:09:52line doesn't have the stripes on it.
1:09:53This thing down here appears. Okay,
1:09:55watch this. If I double click on this
1:09:57over here, can you see this wasn't there
1:09:59before. Click off. Click back on. Okay.
1:10:01Says, hey, do you want to mess around
1:10:02with the move? Do you want a lasso tool
1:10:04stuff? We're going to do the shape
1:10:05builder. We'll do all of these tools
1:10:07later on. Okay. And you can get out of
1:10:08it by clicking the official cross. Or if
1:10:11you're in it, just double click on the
1:10:12background. There you go. Object editing
1:10:14mode and where people get lost early on.
1:10:16All right, that's it. I'll see you in
1:10:17the next video. Hello. Uh in this video,
1:10:19we're going to look at the difference
1:10:20between the uh move tool and the scale
1:10:23tool. The move tool is what we've been
1:10:25using up until now. I'm going to resize
1:10:26this and it just kind of gets biggerish,
1:10:28but it's not what we want. We want to
1:10:30scale it up. So, we're going to use the
1:10:32scale tool. Okay. Select it all. And
1:10:34it's going to do this. They both have
1:10:36their place. Let me show you how they
1:10:37both work. And we get a little bit lost,
1:10:39but we fix it. It's okay. Let's jump in.
1:10:41Right. To start off with, I want to add
1:10:43the stroke around these buttons. So, I'm
1:10:45going to grab this, go to here, go to
1:10:47edit, and I'm going to say copy
1:10:49properties. Or you can use a shortcut,
1:10:50and I'm going to select both of these.
1:10:52Not the type, just want just the two
1:10:53little rectangles, and I'm going to use
1:10:55the command shiftV or control shift V on
1:10:57a PC. All right. So, uh, Figma by
1:11:00default works the way you would imagine.
1:11:02I select on this. I've grabbed both of
1:11:04them, right? So, both the text and this
1:11:06button here. And you're like, I want to
1:11:07move this out a little bit. Cool. And
1:11:09maybe resize it a bit. Okay. But let's
1:11:10say that I want it to get bigger. Like,
1:11:13let's say this one here. I'm like, all
1:11:14right, that's too big. I need to make it
1:11:15smaller. Watch. The font doesn't get
1:11:17smaller. Okay. It just kind of resizes a
1:11:19rectangle, but nothing inside of it.
1:11:21Same with the stroke down here. If I
1:11:22want this whole button to be bigger,
1:11:23watch. If I drag it bigger, you're like,
1:11:25"Huh, the stroke is the same width. The
1:11:27text is the same size." Like, how do I
1:11:29do that then? I want it all to be
1:11:30bigger. I'll hold shift. Nope. it kind
1:11:33of scales it proportionally for the
1:11:35rectangle, but the font is still the
1:11:36same size. So, we're going to use the uh
1:11:38scale tool. You will toggle between the
1:11:40move tool and the scale tool quite a lot
1:11:43in this course. Okay, so I'm going to
1:11:44grab scale, and that's going to do the
1:11:46thing that we wanted it to do. Scale
1:11:49both the stroke and the font and the
1:11:51rectangle all together. It does it
1:11:52proportionately. Okay, I'm going to undo
1:11:54that cuz I want to do it to this. I'm
1:11:55going to select both of them. I'm going
1:11:56to go to my scale tool. It's already
1:11:58defaulted to it. Okay, so now I can say
1:12:00you get a bit smaller. And you can see
1:12:02it's shrinking down the cross, which is
1:12:04a font on the plus. I'm going to move
1:12:06that in here. Actually, I want a stroke
1:12:08around the outside. Let's do that at the
1:12:09end. Uh, it's more about the scale
1:12:12versus stroke. So, you'll need it'll
1:12:13toggle between the two quite a bit. So,
1:12:15fonts, um, we've done the if I click in
1:12:17here, I can play with my font size.
1:12:19Okay, I double clicked inside of the
1:12:20type box, but let's say I just want to
1:12:21make it bigger. You're like, but don't
1:12:23worry, there is a super awesome easy
1:12:25shortcut, okay, for scale, which is
1:12:27clearly S for scale. Nope. S is for the
1:12:29slice tool, which I never ever ever use.
1:12:32It's K for no good reason. Okay, so V is
1:12:35the move tool. See down the bottom here?
1:12:37V and K. You toggle between those quite
1:12:39a lot. V K. You see it changing down the
1:12:42bottom here. VK. VK. I want to be on K
1:12:44for scale.
1:12:46And I can say, all right, you bigger.
1:12:50This thing here, I want to select all of
1:12:52this. I'm on my scale tool. I can say,
1:12:54all right, switch my scale tool. I'm
1:12:56going to select all of this and just
1:12:57scale it down so it's smaller. See,
1:12:59somehow I didn't get that. Grab it all.
1:13:02Then scale it down. What's wrong with
1:13:04you? What did I do to this guy? Let's
1:13:06have a look. It's working.
1:13:09Please hold.
1:13:16All right, I'm back. Uh, I know what I
1:13:18did now to break it. Yours is probably
1:13:21operating fine. I'm going to show you
1:13:22why mine's broken. It's cuz I was
1:13:24showing you something earlier on. and
1:13:25you might bump into this anyway. So,
1:13:27let's keep this in the course. So, this
1:13:29line here, can you tell the difference
1:13:30between these two? This one here has
1:13:32this box around it. Okay. The reason is
1:13:35is cuz when I was showing you about how
1:13:37to like go into it, double click it and
1:13:39move around in side of it. I showed you
1:13:41the wrong way of doing it is this.
1:13:43Watch. If I grab this one, so you and I
1:13:47grab the rectangle and tried to scale it
1:13:48up, it ended up putting a box around it.
1:13:50Okay? Instead of it being a line, now it
1:13:52is a line inside of a rectangle. That's
1:13:54what happened when I grabbed this square
1:13:56head here to demonstrate the wrong way
1:13:57to do stuff. I don't normally do it, so
1:13:58that's why it kind of freaked me out a
1:14:00little bit, as in I was lost. We won't
1:14:02go too much into how to fix it. It's
1:14:05really complicated for earlier in the
1:14:06course and not really that useful. We
1:14:08can just copy and paste. So, I've got
1:14:10another one of these. I'm going to drag
1:14:11it out and I'm going to show you get a
1:14:13bonus because we got lost. Okay, what
1:14:14I'm going to do is I'm going to go over
1:14:16here and say flip this one over. Okay,
1:14:17and I'm going to pop that into the
1:14:19corner. So, when I'm dragging it, let's
1:14:20drag click off in the background and
1:14:22let's click and drag the line. if we end
1:14:23up putting a box around it like we did,
1:14:25watch this. If I click, hold, and drag
1:14:28this, it causes those problems when
1:14:29we're resizing. So, try not to try and
1:14:32drag the edges of these boxes because it
1:14:34might cause us a little bit of trouble.
1:14:36So, if you do need to edit the line,
1:14:37make sure you go into object editing
1:14:38mode by double clicking it and then
1:14:40moving it around, okay? Rather than kind
1:14:42of dragging the uh squares around the
1:14:45outside cuz it causes that problem. All
1:14:46right, that's the problem. That's how to
1:14:48fix it. Where were we? Oh, yes.
1:14:49Selection versus scale. Hopefully now I
1:14:51can select all of these, go to my super
1:14:53sweet shortcut, which is K. You got it.
1:14:56And now I should be able to scale this
1:14:57up and down. And the stroke comes along
1:14:59with the font comes along. Everything
1:15:01scales. Back to the move tool, which is
1:15:03probably the most common tool. Remember,
1:15:05is I've got nothing selected. Let's hit
1:15:07V on my keyboard. There we go. Shortcuts
1:15:10or use the long way. It doesn't really
1:15:11matter. That is the difference between
1:15:13using the move tool and using the scale
1:15:15tool. You will toggle between the two
1:15:17all the time. Great for fonts. Okay.
1:15:20Scale it down. There we go. Smaller
1:15:22font. All right, that is it. I'll see
1:15:24you in the next video. Let's try not to
1:15:26get too lost in the next one, Dan. All
1:15:27right. Hi, everyone. In this video,
1:15:29we're going to look at frames versus
1:15:30groups. We've kind of use both of them.
1:15:32Well, at least you know what a group is.
1:15:34This is a group up here. Okay. Just
1:15:36keeps things together and I can kind of
1:15:37squish it and move it around. Okay. Does
1:15:39groupy stuff. Frames though are super
1:15:42super special. They're kind of like
1:15:44groups, but they can do fun stuff like
1:15:46this. Look, it's sticking to the
1:15:47corners. Okay. I can make it smaller and
1:15:49I can clip stuff. Frames have special
1:15:51powers. The light groups and I want to
1:15:54introduce them quite early in the
1:15:55course. If you're like, man, after this
1:15:57video you're a little bit confused about
1:15:58frames still, don't worry. Kind of
1:16:00introducing it earlier so that it's not
1:16:01just a big freak out later in the
1:16:03course. And because you will run into
1:16:04lots of templates and other people's
1:16:06works that are all using frames instead
1:16:08of groups. You'll be like, why? Why?
1:16:10We'll cover some of the why. Now, let's
1:16:12jump in. All right, let's start by
1:16:13drawing some shapes on this side. So,
1:16:15let's grab the rectangle tool. We'll
1:16:17draw a rectangle. I'm going to hold
1:16:19shift so it's a perfect square. Let's do
1:16:21the polygon, which is triangle. Okay.
1:16:24And let's do an ellipse as well. So, all
1:16:26roughly the same size. They don't have
1:16:28to be. I'm going to zoom in. And I'm
1:16:30going to say all of you have no stroke.
1:16:34I select on both of these and say you
1:16:36don't have any corner radius for no good
1:16:38reason. Just want simple shapes. Okay.
1:16:40So, we've got three shapes and I can
1:16:43line them up for no good reason. Come
1:16:45on, Dan. Move on. Uh, let's select all
1:16:47three of these and I can right click it
1:16:49and say group. Command G, control G on a
1:16:51PC. Really common grouping. So, grouping
1:16:54works how you imagine. Okay. I can click
1:16:56off in the background now. And now I can
1:16:57click and drag all of these cuz they're
1:16:59in a group. The other thing to look out
1:17:00for is can you see over here on my
1:17:02layers panel? Remember, you got to be on
1:17:03file page one and we're on this features
1:17:06page. Okay. And there's this one called
1:17:08group one. We're going to call this one
1:17:10icons. You can rename it over here. And
1:17:12inside of here, sometimes they're
1:17:14collapsed, sometimes they're open. Okay?
1:17:15Okay, see this little chevron here? You
1:17:17can open them up. So, inside of my
1:17:18group, there is an ellipse, a polygon,
1:17:19and a triangle. Excellent. Groups. You
1:17:22can ungroup them by right-clicking and
1:17:24saying ungroup. And the group goes away.
1:17:26And just the shape sitting here now all
1:17:28on their own. I'm going to undo that cuz
1:17:30I want that group. There they are.
1:17:32Icons. Twirl down. All right. I'm going
1:17:34to show you the difference between a
1:17:35group and a frame. So, what I'm going to
1:17:36do is I'm going to duplicate this. Okay.
1:17:38So, I got two of them. I'm using my
1:17:40option or alt drag. I'm going to ungroup
1:17:42these. Okay. So, they're just there's my
1:17:44group up the top. Okay, called icons.
1:17:46And these are my three ellipses. I'm
1:17:47going to move these above this in the
1:17:49layer panel just to make it easier uh
1:17:51for you to kind of see. There's my
1:17:53icons. And then I've got these guys just
1:17:54hanging out. So, I'm going to do is hold
1:17:56shift, grab you, you and you. So,
1:17:58they're all selected. Instead of saying
1:18:00group, we're going to say frame
1:18:01selection. Okay, which got a similar
1:18:03shortcut. Okay, you're going to go. They
1:18:06look very similar. Okay, as in this is
1:18:08all just stuck together. You can move
1:18:10them around. This one here that's now in
1:18:12a frame, not a group. Okay, I can move
1:18:13them around. What's the difference, Dan?
1:18:15Well, in terms of grouping stuff,
1:18:16nothing really. You can use a frame or a
1:18:18group. In Figma, they use frames for
1:18:20everything instead of groups. Why?
1:18:22Because they are like groups, but you
1:18:24get some extra bonus features. I'll
1:18:26cover a little bit in this video. Maybe
1:18:28just a teaser of like how frames work.
1:18:30Mainly because like if you're opening up
1:18:32somebody else's template, you know, you
1:18:34uh, you know, use somebody else's UI kit
1:18:35or opening up somebody else's project,
1:18:37they can use frames for everything. And
1:18:39that's what confused me when I first got
1:18:40started. I was like, why is frames
1:18:41everywhere? because they do some I say
1:18:43weird stuff but really they do some
1:18:44powerful stuff and as we go through the
1:18:46course we'll learn more and more about
1:18:48them but I want to introduce it early so
1:18:49that you're not like the heck of frames
1:18:51cool so let's talk about frames over
1:18:52here you can see the difference in the
1:18:54icon okay as in you can see uh groups
1:18:57are represented by this like little
1:18:59dotted square and frames are this little
1:19:01pound symbol hash thing all right it's
1:19:04got a frame works the same way look
1:19:05there's stuff inside of it some of the
1:19:07fundamental differences watch this if I
1:19:08go into my group okay so this is my
1:19:10icons one Okay, let's just call this one
1:19:12groups to make it easier. Okay, so
1:19:14inside of here, if I go if I double
1:19:16click to go inside. Okay, this is uh
1:19:18object editing mode. You go inside of
1:19:19it. I double clicked it. So, I'm inside
1:19:21my group. Or you can just click on it
1:19:23over here. I'm going to delete the
1:19:24ellipse, delete the polygon, delete the
1:19:26rectangle, and the group goes away.
1:19:28There is no use for a group with nothing
1:19:30inside of it. I'm going to undo that.
1:19:31Now, what happens with the frame? If I
1:19:33go inside my frame, delete this, delete
1:19:35this, delete this, the frame is still
1:19:37there. This is weird. This is why you'll
1:19:39end up with lots of like empty frames.
1:19:41You're like, "What the heck is an empty
1:19:42frame for?" It can exist on its own. And
1:19:45this kind of brings us back to how we
1:19:47got started in this course. Watch this.
1:19:48Remember when we drew out our phone
1:19:51pages? Okay, they were using the frame
1:19:53tool down here. We used
1:19:56Down here. We used the frame tool, the F
1:19:58key. So, a frame can exist on its own
1:20:00with stuff inside of it or not. Groups
1:20:02can't. That's one of the perks of having
1:20:04a frame. It makes them kind of weird
1:20:05when you delete things out of them and
1:20:06they still exist. Like that's weird.
1:20:08That's all right. We're getting used to
1:20:09the weirdness. Let's look at a little
1:20:11bit more of the differences. So, when
1:20:14I'm using a group and I just, you know,
1:20:16I'm just got the group selected and I
1:20:17resize it. Everything squishes. Whereas,
1:20:19if I grab this one, the frame, can you
1:20:22see, can occupy like its own little
1:20:24space, okay? It doesn't kind of squish
1:20:26the contents. This is really handy
1:20:27because frames, let's say I kind of do
1:20:29it like this and kind of drag it up.
1:20:31You're like, it's doing nothing, Dan.
1:20:32Well, what you can do is you can say, I
1:20:34want to clip the contents. So, you can
1:20:35use it like a mask. That's a perk of a
1:20:37frame. I'm going to undo that. Let me
1:20:39show you a couple more just so that we
1:20:40can yeah get used to Why am I making
1:20:43everyone scared of frames if I wait till
1:20:46the end and show you frames? It's kind
1:20:47of too much too soon. So, we're going to
1:20:48do a little bit here and we'll go
1:20:50through the course and by the end master
1:20:52of frames, you will be. Okay. So, let's
1:20:53look at the group. So, the group here
1:20:55has a few different settings on this
1:20:57right hand side, but watch this. If I
1:20:58click on the frame, there's a few extra
1:21:00parts like layout. We can click on flow.
1:21:03At the moment, that is mixed free form.
1:21:04Watch this. I can go I can stack them
1:21:06this way. Okay, I can stack them
1:21:08vertical. See? Go back to free flow.
1:21:10Actually, you have to undo. I can do
1:21:12some other cool things. Let me just demo
1:21:14one more. Get move the group up there.
1:21:16Let's grab this frame. And what we'll do
1:21:19is we're going to Another kind of a
1:21:21weird thing about frames is like you
1:21:22don't unframe. You group and ungroup,
1:21:25but you frame and then ungroup. They
1:21:29both of those use the ungroup to kind of
1:21:31break them apart again. So, we've lost
1:21:32our frame. What I'm going to do is going
1:21:33to go over you. Copy and paste this.
1:21:35Move it over. It's kind of jumping ahead
1:21:37a little bit, but I want to give you a
1:21:39sense of why frames are powerful and why
1:21:42you see them in so many people's other
1:21:43documents. So, I'm going to select all
1:21:46three of these, four of them. Now, okay.
1:21:48I'm going to right click. I'm going to
1:21:49say uh frame selection. What I can do is
1:21:52go inside of the frame by double
1:21:53clicking it. Remember, object editing
1:21:55mode. Go inside. I can say you are going
1:21:57to have the constraint of top and left.
1:21:59It's by default. this three though. I've
1:22:02selected all three with my shift key. So
1:22:04I'm inside of the frame by double
1:22:05clicking and I've held shift to grab all
1:22:07three of these. I'm going to say not top
1:22:08left. I'm going to be top right. You're
1:22:10like nothing changes except if I come
1:22:12out now, I grab the edges. Watch this.
1:22:14Can you see the icons here want to stick
1:22:17in the top right cuz I set them to top
1:22:19right constraint. This becomes super
1:22:21handy later on when you're like, "All
1:22:22right, I've got nothing selected. F my
1:22:25frame tool. I want, you know, we're now
1:22:27working on the tablet version. Okay,
1:22:29we're going to do an iPad Pro 11 in.
1:22:32Okay, I'm going to drag the name down
1:22:33here. And I'm going to grab this and
1:22:36copy and paste it. Okay, and move it
1:22:38down here.
1:22:40Stick it there and watch what happens.
1:22:42Look, drag it out. It's sticking to the
1:22:44top right. Okay. You can do with lots of
1:22:46elements inside of frames where you can
1:22:48kind of drag them out and they resize
1:22:50nicely. If you're feeling a little
1:22:51overwhelmed, it's okay. We're going to
1:22:52cover this over and over, but I just
1:22:54want to kind of yeah, get into a bit of
1:22:56frame action early on so that it's not a
1:22:59huge big kind of like shock later on,
1:23:01but also you will just see everyone uses
1:23:03frames. You're watching somebody else's
1:23:05tutorial online, you're like, why are
1:23:06they using frames? This is why they're
1:23:08really powerful. I don't need this now.
1:23:09So, I'm going to click on the name and
1:23:10hit delete on my keyboard. I don't
1:23:11really need any of this either. So, I'm
1:23:13going to get rid of it all. Oh, one last
1:23:14thing about frames that is interesting,
1:23:17okay, is watch this. When there's a
1:23:18frame on the background, it has a name.
1:23:21This frame has no name. Let's have a
1:23:23look. So, I've got this features panel.
1:23:24Remember, we named that. That's my
1:23:26iPhone size in and that is a frame
1:23:28exactly like the frame we just made. You
1:23:30can either draw frames using the F key.
1:23:32Okay. Or you can select stuff and wrap a
1:23:35frame uh around it. Frame selection. It
1:23:37doesn't really matter how you get your
1:23:38frame. They are the same once they're
1:23:40made. And the weird thing about it is
1:23:42see how this one has a name up here and
1:23:44this one here doesn't. Even though look,
1:23:46it's called frame one. I can see the
1:23:47word features here, but not for frame
1:23:49one. It only happens when this is out.
1:23:51You see? Boop. I got a name now. Boop. I
1:23:54got no name. So, you will find things
1:23:56you're like, that has a name. That
1:23:57doesn't have a name. It's just because
1:23:58they're not nested. Okay, which just
1:24:00means there's a frame inside of a frame.
1:24:02The name goes away. Oh, Dan. This is
1:24:04meant to be helping you be less confused
1:24:06about frames. But, uh, let's just move
1:24:08on. All right, move on. That is frames
1:24:10versus groups inside of Figma. Oh, one
1:24:12thing is is that should I never use
1:24:13groups? Are they bad? They're not bad.
1:24:15They just lack some of the features. So,
1:24:17if you like to use groups, you can use
1:24:18them. If you need them to do other
1:24:20things like clipping or that uh
1:24:22constraints where it sticks to the
1:24:23edges, then you need to use frames. But
1:24:25there's nothing wrong with a group.
1:24:26People just use frames though. All
1:24:28right, that is it. I will see you in the
1:24:29next video. Hello. It is class project
1:24:31number two. Uh we are building out our
1:24:33wireframe to a kind of more complete
1:24:35version. So basically just this. And
1:24:37we've kind of built this part together.
1:24:39I want you to build out these other
1:24:40pages. They're not particularly hard cuz
1:24:42they're just rectangles with some type.
1:24:44I've put some placeholder text in here
1:24:46just using X's. It doesn't have to be
1:24:47exactly like I've got, but just
1:24:49something similar to this. We want to be
1:24:51relatively similar as we work through
1:24:53because we're going to build stuff
1:24:54together. So, even if you disagree like
1:24:56no, they shouldn't be there. Do it
1:24:57similar to mine. Okay. And the only
1:25:00other thing is the arrow. We covered
1:25:02arrows, so you might have to go back to
1:25:03that one. But yeah, just build out this
1:25:04for the three pages. We're following our
1:25:06task flow. Um, if you're unsure about
1:25:08all of this, remember there is class
1:25:10projects in the document, okay? Uh, in
1:25:13the exercise files, there's a class
1:25:15projects PDF. You can check that out.
1:25:17And also, we're using this task flow
1:25:18that we looked at earlier. Okay, there
1:25:20is uh you know, we're building the
1:25:21homepage, product features, the check
1:25:23out page, and the confirmation. So,
1:25:24that's what we're building. Also, just
1:25:26remember, pick a simple color and just a
1:25:28simple font. And it's also probably good
1:25:30time to mention that uh there is an
1:25:32illegal fonts you can pick. You're like,
1:25:34you can't pick uh Papyrus, Comic Sands,
1:25:37Times New Roman, uh Ariel, or Brush
1:25:40Script. Those will get you locked up.
1:25:42So, any other font than that. And then
1:25:44when you're finished, I want you to take
1:25:45a screenshot of it all. Okay? So, there
1:25:47is a way of exporting frames. Uh, at the
1:25:49moment, like on a Mac, I know I can hold
1:25:51down command shift4 and click and drag a
1:25:53box around them all, and I get this kind
1:25:55of like handy uh screenshot that appears
1:25:57on my desktop. PC, I'm not exactly sure
1:25:59what it is. Just double check what it is
1:26:01on a PC. The different versions are
1:26:03slightly different. Or take a photo with
1:26:05your phone and then upload it to the
1:26:06assignment section of this website.
1:26:08Okay, you'll find a place where you can
1:26:09put them. And for those people that hang
1:26:11around to the end, you got a bonus.
1:26:13You'll notice that my one doesn't have
1:26:15the these across the top cuz I was like,
1:26:17"Oh, I just copy this and click on this
1:26:20features one and paste it." You're like,
1:26:22"Huh? How did that what why is that
1:26:25there?" Okay, it's because of some
1:26:29weirdness that I want to show you
1:26:30actually. So, um just a doesn't normally
1:26:32happen, but it happened in this case and
1:26:34I was like, I'll keep it in the video.
1:26:35So, Scott's wallet are inside this
1:26:37homepage. Can you see homepage? Okay.
1:26:39Okay. And in the layers panel inside of
1:26:41there kind of like indented is Scott
1:26:42Wallets. I click on this though. Okay.
1:26:45You are hanging out on no page somehow.
1:26:48It's not on confirmation. It's not on
1:26:50screen uh checkout or features or
1:26:52homepage. It's just hanging out by
1:26:54himself. This is my uh burger menu.
1:26:57That is why when you're selecting it,
1:26:59it's copying this so it knows where it
1:27:01is on the page. This thing doesn't
1:27:02really know where it needs to go. So
1:27:04when I copy it and paste it, it just
1:27:05kind of like throws it into features
1:27:07page and it's like I don't know. Okay.
1:27:08So that happens every now and again. Not
1:27:10very often. Kind of often. Anyway, what
1:27:12I'm going to do is just make sure this
1:27:13burger menu is inside of my homepage,
1:27:16which is where I'm going to twirl those
1:27:18up. This just needs to be make sure it's
1:27:20inside of here. Can you see? You can
1:27:21kind of like hover above and go inside
1:27:23of there. Now, when I select both of
1:27:25these and go copy, I click the word
1:27:27features and hit paste. Goes in the
1:27:29right place. That is a quirk of Figma.
1:27:31It happens every now and again if things
1:27:32aren't in uh inside of the uh frame that
1:27:36you need it to be. It's just kind of
1:27:37hanging out on its own. Don't know how I
1:27:39did that, but you go. Little bonus tip
1:27:41for you there at the end. All right. Uh,
1:27:43go make your project and I will see you
1:27:45in the next video. Hello. Hey, we're
1:27:46going to talk about free icons. There
1:27:48are loads online. I'm going to show you
1:27:51good places to get them both from
1:27:52websites and from the Figma community.
1:27:55And I'll show you what kind of file
1:27:56types we need and how to kind of clean
1:27:58them up to get them usable. All right,
1:28:00let's jump in. All right, so there's
1:28:01lots of places to find free icons. I'm
1:28:03using iconfinder.com. I like it. I've
1:28:06used it forever. Let's go and find an
1:28:08icon and talk about the dos and don'ts.
1:28:10So, I'm going to type in I need a
1:28:12shopping cart. Okay, so I've typed in
1:28:14shopping cart. Couple of things you want
1:28:16to be wary of. It depends on how you're
1:28:18using this. Um, let's say we're using it
1:28:20just for study practice. You can use any
1:28:22of these. Okay, the ones that you like
1:28:24there's free and premium. So, I'm going
1:28:26to go to free for this class. Okay, you
1:28:28might pay for them. That's fine. um we
1:28:30are looking for the other thing is like
1:28:32if I want to use them commercially so
1:28:33for work I've got to make sure I use
1:28:35commercial use. Now some of these
1:28:37commercial use ones um require you to
1:28:39have what's called a backlink. Okay, if
1:28:41you hover above it says uh you need to
1:28:42add a link back to the designer's
1:28:44website. So they'll let you use it but
1:28:45you need to kind of like on your website
1:28:47or app somewhere you need to kind of
1:28:48link back to say this is where I got
1:28:49this font. You might choose to do that.
1:28:51I'm looking for a shopping cart that is
1:28:53used for commercially but there's no
1:28:55backlink as in I can just use it freely
1:28:57without having to acknowledge the
1:28:59creator. Now what am I looking for? So
1:29:01basically find something you like. Okay.
1:29:03I like this one. Uh I'm going to click
1:29:05on it and there's a couple of ways you
1:29:07can download it. There's PNG and SVG.
1:29:09You probably know PNG already. Um you
1:29:11know it's just an image file. It has
1:29:12transparency which is perfect. And then
1:29:14there's SVG which is better for this
1:29:16case. So let's have a look at both. I'm
1:29:17going to download a PNG. It's going to
1:29:19be 28 pixels. and download it. All
1:29:21right, I'm going to click save. You can
1:29:23just copy the PNG to clipboard. Okay,
1:29:25and then go to Figma and just go to
1:29:27paste cuz I just copied and pasted it.
1:29:29Okay, that's obviously a quicker way or
1:29:31you can download it if you need it to
1:29:32share with other people. Anyway, let's
1:29:34have a look at the other one. Let's go
1:29:35to SVG. But let's download it cuz I want
1:29:37to show you some stuff. So, I'm
1:29:38downloading SVG as well and I'm going to
1:29:40copy the clipboard and I'm going to
1:29:42paste it. You're like, they look the
1:29:43same, Dan. Okay, kind of. If I grab both
1:29:46of them and scale them up. Remember our
1:29:48scale tool is the K tool. Okay. And I'm
1:29:51going to scale them up. Can you see the
1:29:52difference between SVG here, PNG here?
1:29:54PNG is made of pixels. It's transparent,
1:29:56which is cool. Okay. But it is not
1:29:59scalable. That's what SVG stands for.
1:30:01Scalable vector graphic. So I'm going to
1:30:02grab this and it is scalable and it is
1:30:05transparent. You can obviously get a
1:30:07larger PNG. I can go in here and say I
1:30:09want a PNG. And Dan, if I make it big,
1:30:10it's going to work. Copy to clipboard.
1:30:12Perfect. Okay. Okay. So, it's nice and
1:30:14clear at this big size. It's still made
1:30:16of pixels, though. Okay. So, eventually
1:30:17if I scale it up, I'll start to see
1:30:19them. You see there the little fuzziness
1:30:21around the outside. The other thing is
1:30:22if I download it, I want to show you um
1:30:26download it again.
1:30:29Let's have a look at the sizes. Okay,
1:30:30SVG is pretty small. It is uh 500 bytes.
1:30:35There's that first PNG, the small one,
1:30:37which was too small, right? And it's
1:30:39pretty close in file size. But as soon
1:30:40as I make a bigger PNG, the file size is
1:30:43much bigger. So 5 kilobytes, these are
1:30:46bytes, these are kilobytes. That is
1:30:475,000 bytes. So it is 10 times as big.
1:30:51When it comes to web and app design, you
1:30:53want when you're producing a website,
1:30:55you need these icons to be super small
1:30:57and load super fast and be scalable. So
1:30:59SVGs win. The other perk for SVGs is
1:31:02that get rid of this one.
1:31:05Zoom, zoom, zoom, zoom, is that they are
1:31:08color changeable. Okay, so watch this. I
1:31:10can double click it to go inside. Okay,
1:31:11so I'm in that object editing mode and I
1:31:13can say you are now red. Whereas PGs I
1:31:16can't as easily. I have to jump out to
1:31:18something and recolor it. Okay, harder
1:31:20to do. SVGs for the win. Sometimes
1:31:22though, you will pull down an icon
1:31:24that'll have a white background. Okay,
1:31:26it'll just be on like this. Okay,
1:31:28sometimes they're on, sometimes they're
1:31:29not. So, can you see here now it's not
1:31:31transparent. Okay, because it had a
1:31:33frame around the outside that has white
1:31:35in the background. You can fix this by
1:31:37Let's have a look. Let's get rid of
1:31:39this. SVGs when you get them from other
1:31:41people from websites quite often come as
1:31:44a kind of a mess. So the mess is there's
1:31:46a frame and inside of that frame is a
1:31:48rectangle and my little vector drawing
1:31:51that I want of the shopping cart. I
1:31:53don't need this other junk. What I can
1:31:55do is just select it in my frame. Okay,
1:31:57here's my vector. I want to pull them
1:31:58out of that frame and this frame here
1:32:00now is not very useful. Okay, so I can
1:32:03clean them up afterwards. You end up
1:32:05doing that quite a bit when you are
1:32:06working with other people's SVGs in the
1:32:08way that Figma deals with them. Little
1:32:10complicated, I know, more complicated
1:32:12than a PNG for sure, but this is just
1:32:14the way we need to go. The other nice
1:32:15thing about SVGs, if I double click on
1:32:17them, you can start to see these dots.
1:32:18We saw these dots when we're working
1:32:19with that line. Watch this. Okay, you
1:32:22can start customizing them. That'll mad
1:32:24Max trolley. A super fast. Another good
1:32:26place to get free icons is from Figma
1:32:28itself. It has a community. So, I'm go
1:32:30back to this little home icon here.
1:32:33I'm going to go to template and tools.
1:32:35They keep renaming this. Sometimes it's
1:32:37called community and sometimes it was a
1:32:38button down here and then it was a
1:32:39button up here. So just keep an eye out
1:32:41for where it might have gone. Every time
1:32:43I change this they go and change it. So
1:32:46I'm from the community. I'm going to
1:32:47search this community. I'm going to type
1:32:49in icons. Okay. And what you'll find is
1:32:51there's loads of brilliant stuff in here
1:32:53in groups. So let's say that I want I
1:32:56don't know hero icons is a really common
1:32:58one to use. It's a kind of a group of
1:33:00icons that a lot of uh designers and
1:33:01developers will use. I'm going to open
1:33:03that up. It doesn't really matter which
1:33:04ones you use. You're looking for the
1:33:05style that you like. Okay, so this is
1:33:07going to bring up a good point. I'm
1:33:08opening up basically somebody else's
1:33:10file. This is the preview. Okay, so I've
1:33:11gone into community, found something I
1:33:13liked. Okay, there's lots of other stuff
1:33:14in here like other people's wireframes,
1:33:17like mockups of full apps and websites.
1:33:19We'll go into this again later on. For
1:33:21the moment though, it's going to say I
1:33:23want to open this in uh Figma, which is
1:33:25a kind of a weird thing. You don't kind
1:33:26of like check it out. you actually open
1:33:28it and now this copy is yours. What I
1:33:31mean by that is so we're on hero icons.
1:33:33If I go back to my home, close this down
1:33:35and go to my drafts. It's kind of where
1:33:37we started off. Okay, there's the task
1:33:39flow. There's the wireframe that we're
1:33:41working on. And now hero icons is a file
1:33:44that I have. Okay, it's in the cloud,
1:33:46but think of it on your desktop now.
1:33:48It's like your file. It's not connected
1:33:49to the original one. So, this can get a
1:33:51bit messy. I've got uh you know, when
1:33:53you're opening up lots of different
1:33:54icons, they'll stack up in here. So,
1:33:56what you can do is once you've found the
1:33:58stuff and maybe pull it out of here, you
1:34:00can go back to this home tab, right
1:34:01click, and move it to trash. Okay? So
1:34:04that you can keep this tidy. So, if
1:34:05you're going through loads of different
1:34:07templates, other people's community
1:34:08stuff, they'll mess up your documents.
1:34:11All right, let's have a look in here.
1:34:12Okay? And you can see just loads of cool
1:34:14stuff, different sizes. is like the nice
1:34:16thing about it is let's say something
1:34:17like this where this house icon okay
1:34:21this this is building here they've got a
1:34:23solid version versus an outlined version
1:34:25but when it gets smaller can you see
1:34:27they actually change it when it has to
1:34:28operate a really small size they lose a
1:34:30lot of detail see the windows get
1:34:32smaller a designer has thought this
1:34:33through and think when it's at this big
1:34:35size it looks like this but when it's
1:34:36smaller we'll kind of like adjust it
1:34:38okay you can see this one here is a
1:34:40little bit more elaborate when it gets
1:34:41smaller okay it gets just a bit more cut
1:34:44down to be more visible at a smaller
1:34:46size. Loads of cool stuff in here. One
1:34:48of the other things that if you've
1:34:50downloaded something that's other than
1:34:51the hero icons, you might find that
1:34:53under pages here, okay, there might be
1:34:55like a cover page and then there might
1:34:57be the icons. That's what they've done
1:34:59here. Okay, so you might open up
1:35:00something, you'll be like, I can't find
1:35:01it. Okay, cuz there's pages. We'll do
1:35:03pages together later on, but have a
1:35:04look. There might be something else. The
1:35:06other thing is trying to find the icons
1:35:08in here. You can search, search, search,
1:35:09but there is an option. So, I'm on
1:35:11icons. Okay, I can have a look through
1:35:13here. Okay, there is all my icons. Loads
1:35:15of stuff. They're very well organized,
1:35:17but you can do a search. You can do what
1:35:19are we looking for? Shopping. Is there a
1:35:22shopping one? I imagine there is. Oh,
1:35:23look at that. Okay, so it's jumped
1:35:24straight to it. Now, how do I pull it
1:35:26into my document? What I'm going to do
1:35:28is I'm going to say, all right, I like
1:35:30this guy here. I'm going to double click
1:35:31it to go inside. Now, this is where it
1:35:33gets a little bit messy. I'm going to
1:35:34close down the search. Okay, so there it
1:35:36is. There. I'm double clicking it again.
1:35:38Okay, so it was inside of a group. Okay,
1:35:39now it's inside again. And I can go
1:35:41inside again and I can get right down to
1:35:44the vector there. Okay, so you kind of
1:35:46know you end up in this object editing
1:35:48mode. Okay, that's when you know you've
1:35:49gone deep enough cuz it could be groups
1:35:50inside of groups inside of groups. So
1:35:52you're trying to find those. I'm going
1:35:53to copy it and then I'm going to switch
1:35:54to my other tab. Oh, shortcut time.
1:35:56Command 1 2 3 on a Mac. Control 1 2 3
1:36:01will switch between these tabs at the
1:36:03top here. If you've got four things
1:36:04open, you can go 1 2 3 4. If you've got
1:36:06nothing open, you can only go to command
1:36:08or control one. That's just the home
1:36:10base. Okay. So, I can switch back to
1:36:11command 2, paste. And there we go. I'm
1:36:14going to use my scale tool. Okay. And
1:36:17we've got somebody else's icon. One last
1:36:19thing that might happen is that you
1:36:21might grab, let's say it's this, and I
1:36:23just grab that. I think I've got it. And
1:36:25I'm going to go command 2, control 2 on
1:36:27a PC, and I paste it in. What I want to
1:36:29show you is I've got it, but it's got
1:36:31this kind of weird icon over here.
1:36:33Basically, this little icon here in this
1:36:34little group here looks kind of weird,
1:36:36right? It's got a purple color. It's cuz
1:36:37it's an instance. We're going to look at
1:36:39instances later on. It's too far from
1:36:41where we're at now. But you can then go,
1:36:43"All right, what is all this stuff?"
1:36:44Remember, I can go inside of it, say, I
1:36:46want you. I can either cut it and paste
1:36:49it. Okay, so it comes out of that and
1:36:51that little container. Okay, which is
1:36:52called an instance can be deleted and
1:36:54we're back to having our vector. Okay,
1:36:56so I guess I want to show you that
1:36:58because you're going to be looking for
1:36:59stuff and you're like, what is all this
1:37:00junk? Okay, essentially we just want to
1:37:02pull the vector out of it later on when
1:37:05we know what an instance is. They're
1:37:06going to be useful, but we don't know
1:37:07what those are yet. So, just grab the
1:37:09vector. All right. And we don't need any
1:37:11of that right now.
1:37:13All right. We've figured out where we
1:37:15can get them from. I'm going to show you
1:37:16one other place to get them before we go
1:37:18and make it a class project. Okay. But
1:37:20we'll do that in another video cuz it's
1:37:21another kind of function inside of Figma
1:37:23called plugins. That's it. Working with
1:37:25icons in Figma. Try and find SVGs and
1:37:27try and dig out the kind of vector part
1:37:30of that icon, ditching the frame in any
1:37:32sort of instance that wraps it up. And
1:37:34we learned a sweet shortcut. command or
1:37:36control 1 2 3 will jump between our
1:37:39tabs. Impress your colleagues with your
1:37:41tab jumping. All right, I'll see you in
1:37:42the next video. Hello. Hey, we're going
1:37:44to look at plugins inside of Figma.
1:37:46Basically, a plugin is a little mini
1:37:48program that runs inside of Figma to
1:37:49kind of extend it. Okay, it could be
1:37:51finding fonts and images. It can do all
1:37:53sorts of stuff. Okay, there's lots of
1:37:55different plugins. I'll show you how to
1:37:56find them inside of the Figma design
1:37:58doc, also in the community. They're a
1:38:00super powerful way of extending Figma
1:38:02and super useful for us. So, let's dive
1:38:04in and I'll show you how to find them
1:38:06and use them. All right, plugins. Uh,
1:38:08they are found under here under actions.
1:38:10They do move this around. Every time I
1:38:12record this video, it's somewhere new.
1:38:14Have a little look around. You're
1:38:15looking for um actions and we're going
1:38:16to go to this one called plugins and
1:38:18widgets. Okay. So, we're going to look
1:38:19at plugins now. We'll look at widgets
1:38:21later on. Um, and let's look at
1:38:23something we kind of already know. So,
1:38:24we'll look at icons. So, um I'm going to
1:38:26type in hero icons. Okay. Because that's
1:38:28the one we found that community document
1:38:30for. Okay. It doesn't really matter, but
1:38:31there happens to be an a plugin for it
1:38:34as well. Rather than opening up the
1:38:35community doc, searching in the files,
1:38:37and then bringing it in. What this means
1:38:38is plugin just like a little mini
1:38:40program that runs on your screen. It's
1:38:43just easier than going and digging
1:38:44through files. Okay. So, I can go in
1:38:46here and say, "All right, I want the
1:38:48account page." They have a couch. Let's
1:38:50go for So, there's no account. I'm
1:38:52looking for a person. Person
1:38:55man. Uh,
1:38:57do they even have one? Account person.
1:38:59man, woman, nobody. Come on, brain.
1:39:02Let's give up. Let's go book. Okay, so
1:39:04there is a book. Let's use this bookmark
1:39:06one. So, what you can do is you can
1:39:08click and just drag it out and you have
1:39:10an icon ready to go. Look at that. Super
1:39:12cool, super quick, super easy. And
1:39:15remember, it's come through in a frame
1:39:16with the vector inside. There's nothing
1:39:18wrong with having a frame. I think in
1:39:19the last couple of videos I'm like, get
1:39:20rid of the frame. No, it's kind of like
1:39:22a group. It's got the vector inside. It
1:39:24keeps it in a nice square. There's
1:39:25nothing wrong with it. Sometimes though
1:39:27they come with a a white background. You
1:39:30can see they've turned the eyeball off
1:39:31on this to hide it. Okay. Sometimes they
1:39:33come through with it and you can turn it
1:39:34off. And a frame sometimes is often used
1:39:37because uh let's drag out another one.
1:39:39Is that they can be lined up. Can you
1:39:42see they have they're different size
1:39:44vectors but they let's select them both.
1:39:46They're in the same square if you know
1:39:48what I mean. That's handy for icons cuz
1:39:50that is the same height by width. The
1:39:5224x 24 by the look of it. Okay. So you
1:39:54don't have to get rid of it. I'm just
1:39:55making you conscious of the frame
1:39:57because what ends up happening is let's
1:39:59go for something else. Let's find
1:40:01something with bits. There we go. So,
1:40:02this one here, I end up sometimes doing
1:40:03this and you're like, okay, I want to
1:40:05get rid of this part and then this part
1:40:08and then you end up with junk left over
1:40:10cuz there's this frame that I haven't
1:40:11deleted. Okay, so over here I can see
1:40:13it. It's got nothing in it. I can delete
1:40:15it. It's getting you used to it. Okay,
1:40:16you can find plugins other ways. I'm
1:40:18going to get rid of these guys. Ooh, you
1:40:20see I did it there. I didn't get rid of
1:40:22the frames. I got rid of the insides.
1:40:24thought I did. I just didn't drag a big
1:40:25enough selection around them before I
1:40:27hit delete. So, let's go to community.
1:40:29Okay. And let's go to templates and
1:40:31tools, which used to be called
1:40:32community, which they still kind of call
1:40:34community. And let's go to plugins.
1:40:37Actually, there is a set here that says
1:40:40specifically find me plugins for our
1:40:43organization. There's lots in here. My
1:40:44advice to you is after this video is
1:40:46just spend 5 minutes having a look
1:40:48through the plugins. You'll be surprised
1:40:50at how many things have been made for us
1:40:52here in Figma. It's really useful. Um,
1:40:54if there's something you're doing
1:40:55repetitively or something weird for your
1:40:56job that you use this other company,
1:40:58Unsplash or some stock library site or
1:41:01some database, you probably find
1:41:03somebody's created a plugin. There's so
1:41:05much here. So, spend some time have a
1:41:06look around. Editing and effects,
1:41:09icon plugins. Oh, there we go. And the
1:41:11reason this way is quite useful is that
1:41:13often they are you can say I want the
1:41:16free ones. Okay. And the other thing
1:41:18that's handy in here is let's say
1:41:19iconify. So, let's have a search. Let's
1:41:22just go Iconify.
1:41:23[Music]
1:41:24Okay, it's meant to be a company, but
1:41:27there's a lot of different people. So,
1:41:28I've typed in Iconify. All products I
1:41:30want to show plugins. Okay, and you can
1:41:33see there's Iconify. There's another
1:41:35Iconify. Okay, you can have a look and
1:41:37say, "All right, this one's been used by
1:41:3923,000 people, which seems like a lot
1:41:41until you see this one, and this one's
1:41:43been used by 3.5 million." And when
1:41:45you're new, that's just kind of a good
1:41:46signal to go, "All right, lots of people
1:41:48are using this one. This is probably the
1:41:49one I want." So, that's the same
1:41:51plugins. We can just get to it a
1:41:52different way, either via the community
1:41:54or via inside our design doc. I'm going
1:41:56to open it in. Which file are we working
1:41:57on? We're working on that one there. And
1:41:59there's my plugin.
1:42:01There it is. Okay. And you'll notice
1:42:03that all plugins are made differently as
1:42:05in there's no consistency. So, um like
1:42:07me showing you how to use this one was
1:42:09very different from the hero icon one.
1:42:11So, you know, some of them are really
1:42:12big. Like this one's quite in the way.
1:42:14The other hero icon was quite small.
1:42:15This one here has some cool features.
1:42:17Like, watch this. If I go I like this
1:42:18one here. I can decide what color it is
1:42:20before I get it into Figma. Okay. And I
1:42:22can decide what size it needs to be.
1:42:24It's going to be an SVG and I can import
1:42:26it as a frame or as a component. And
1:42:28when we get more advanced later in the
1:42:29course, you might jump to this. Okay? So
1:42:31that'll save us a step later on. But for
1:42:33the moment, we know what a frame is.
1:42:34We're going to bring that in. Where did
1:42:35it go? Just on my page. You can just
1:42:37drag them out as well. Okay. Just
1:42:39remember, they're not made by Figma. So
1:42:41they if they're not working, it could be
1:42:43that they're not supported anymore or
1:42:45they're a new plugin and there's one
1:42:47poor girl trying to kind of keep the
1:42:49plug-in alive on her lunch breaks. Okay,
1:42:52so they're not, you know, sometimes you
1:42:54feel like, oh, this should work and it
1:42:55doesn't. Why is it not working? Plugins
1:42:57are done by the community, sometimes by
1:42:58companies, but not Figma. The one thing
1:43:00down here as well that I want to mention
1:43:02is let's find another one. Let's go
1:43:03Unsplash. It's a really good one for
1:43:05free stock images. Okay, if I search
1:43:07that, I'm going to plugins and widgets.
1:43:10And let's say that I click on this one.
1:43:12It gives me a little preview. You got
1:43:13run and save. Okay, run is the one you
1:43:15want. It just runs within this document.
1:43:17Okay, it just starts working. That's the
1:43:19one you want. Save will save it for your
1:43:21organization, which just means if you're
1:43:23using Figma as part of a larger team,
1:43:25like an organization in a big company
1:43:27with multiple Figma users, you can save
1:43:29it and it means everybody will have
1:43:30access to it. Most of the time though,
1:43:32you just want to run it. There we go.
1:43:33Unsplash. All right. There are loads of
1:43:36plugins and that is your introduction to
1:43:38plugins. Last thing is if you go back
1:43:39down in here in your actions panel, you
1:43:41will see that it has recent ones so you
1:43:43don't have to go and search them every
1:43:44time. All right, that's it. That is
1:43:46plugins inside of Figma. We'll look at a
1:43:48few more later in the course, but that's
1:43:49a good intro. Let's get on to the next
1:43:51video. Hello. It is not homework, but
1:43:53super fun class project time. I want you
1:43:56to find three icons for your site. A
1:43:58want you to find a cart, an image, and a
1:44:00success icon. Uh let's have a look at my
1:44:02one. So, the cart icon goes on every
1:44:04page, okay, at the top here. Okay. And
1:44:08uh the image icon, we're going to switch
1:44:09out for the uh crosses, okay? So, it's
1:44:12really common to use this kind of
1:44:14generic looking I'm in image placeholder
1:44:17icon. Okay? So, I want you to switch
1:44:18that out where you've used it. And also
1:44:19on the confirmation page, find some sort
1:44:22of like good work, you've done it icon.
1:44:24It doesn't have to be a tick. It can be
1:44:25a tick. Your image can look different
1:44:26from mine. Your cart might be a shopping
1:44:28bag. It depends on your product. if you
1:44:30find a good place for another one. You
1:44:32can have more than three. That's fine.
1:44:33Couple of things I want to show you
1:44:35though before we go on is a little
1:44:37trick. Um, for those of you who are
1:44:39doing the homework and haven't skipped
1:44:41it, you get to win. Okay, so I'm going
1:44:42to copy this one. I've got to make sure
1:44:43I've grabbed the frame. Okay, that's got
1:44:46my vector in it or just the vector if
1:44:47you've cleaned it out. Okay, I'm going
1:44:49to click on features. You click on the
1:44:50page name and I hit paste. It'll go into
1:44:53that page at the same position. Same
1:44:55with this one. I can hold shift and grab
1:44:56both of these and go paste. It ends up
1:44:58on both pages. Look at us. It's great
1:45:00for navigations or anything that you
1:45:02know is consistent across the page or is
1:45:04consistent across lots of pages. Imagine
1:45:06you've got, I don't know, 20 or 30 uh of
1:45:09these frames, okay, for your mobile
1:45:10phone, different pages. You can paste
1:45:12them across lots of them easily. The
1:45:14other thing I want to show you is I used
1:45:16the um the Iconify plugin. You can get
1:45:20them from icon finder. You can get them
1:45:21from wherever you want. The community, I
1:45:23don't mind where you get them. I'm going
1:45:24to jump back in time now and show you
1:45:26some of the issues I have just to I
1:45:27don't know just to keep showing you some
1:45:29of the quirks with Figma when importing
1:45:31uh icons from other people. All right,
1:45:34let me show you now. All right, so I
1:45:36ended up using iconify and just dragged
1:45:38out some versions of it. I ended up kind
1:45:41of on this page here and this is where
1:45:42it's kind of weird. Let's let's zoom
1:45:44out. Let's just let's say I'm going to
1:45:46drag this one up here. That worked fine.
1:45:48It came the vectors inside the frame.
1:45:50I'm going to leave it like that and it's
1:45:51up there. This one here I'm going to
1:45:53drag out. Okay. And the vector came out
1:45:56of this frame. The frame is still down
1:45:58here. Okay. It is just one of the weird
1:46:02things about Figma. That's okay. We're
1:46:03getting used to it. So, the thing that's
1:46:04making it kind of weird is that if I
1:46:06click on this vector, it is a vector
1:46:08inside this thing called ix. Success.
1:46:11Okay. And somehow I clicked on the
1:46:12vector and not the frame. If I click on
1:46:14the frame and then drag it out. Okay. I
1:46:17get the whole thing. Sometimes you can
1:46:19grab the vector and not the frame. We
1:46:21got it, Dan. Uh, the other thing to know
1:46:22is that this first one I'm going to
1:46:24undo. So, this icon here is inside my
1:46:28features page because it looks like it
1:46:29is. Look, there it is there. This other
1:46:31one, if I click on this one here, the
1:46:33success one, it is actually hanging out
1:46:35my layers panel. Okay, not inside of uh
1:46:38features. It's just on top. Imagine if
1:46:41you know layers, you'll know. Okay, but
1:46:43if you don't, it just means it's looks
1:46:45like it's on top of it, but it's not
1:46:46actually inside of that parent frame,
1:46:48which is called features. So, what I'm
1:46:50going to do is it's just something to be
1:46:52mindful of and I'll keep reminding you
1:46:53through the class cuz that's where we
1:46:55get caught out. So, what I'm going to do
1:46:56is I'm going to say you. So, selected
1:46:58the whole parent frame and then I'm
1:46:59going to drag it out. Okay, now it's
1:47:01completely out. That's fine. Same with
1:47:03this one. He's come out of features. So,
1:47:04he's no longer in there. And then this
1:47:06one in here. I grabbed the vector again
1:47:08by accident. So, I'm going to grab the
1:47:09parent frame and drag it out. So, now
1:47:12these guys are hanging out, not on
1:47:14anything. And I'm going to be a bit more
1:47:16specific. Sometimes it's easier just to
1:47:18zoom in because it's easier to grab the
1:47:19little names. In this case, it's a dot
1:47:21dot dot because it's quite small. And
1:47:22I'm going to add it to the Oh, one last
1:47:24thing I want to show you is that I
1:47:25grabbed three different. They went from
1:47:27the same family. These match size-wise,
1:47:30but this one doesn't. So, what I'm going
1:47:31to need to do is drag it up and be a bit
1:47:33bigger. Some reason this came as 24x 24.
1:47:35That one's 24x4. This one came at 16x6.
1:47:38Now, I can use my scale tool. Okay. And
1:47:40just drag it up. It should snap and get
1:47:42There you go, 24x 24. Now, it's the
1:47:44right size. You can select on the parent
1:47:46frame and say actually you are going to
1:47:48be 24. See it says dimensions by and
1:47:52because the height and width are locked.
1:47:53They're called the aspect ratio. Okay.
1:47:55So it'll do both at the same time. Was
1:47:57that helpful?
1:47:59I got to add these things cuz yeah
1:48:01there's some quirks to Figma. They're
1:48:03real easy once you get used to them. I
1:48:04want to throw these in here just in case
1:48:06you do get lost yourself. And what I
1:48:08might do to make this a little bit nicer
1:48:09is I'm going to say you. Okay, I'm going
1:48:11to call this one icon hyphen art. This
1:48:16one here, remember maybe you can double
1:48:17click them over here or in the layers
1:48:19panel. This one's going to be called
1:48:20icon uh image. This one here is going to
1:48:22be don't click that button. That is the
1:48:25uh let's remove this. That is that there
1:48:27little icon. If you do click it, that
1:48:29just says to the developer when you're
1:48:30finished this course, I'm done with
1:48:32this. That is ready to go to
1:48:34development. When it's off, it means
1:48:35it's not. in case you'll accidentally
1:48:37click it like I did.
1:48:40We'll cover dev mode a little bit later
1:48:42on. Um, and we're going to call this one
1:48:43success or tick. It doesn't really
1:48:46matter at this stage. I'm going to put
1:48:47them on my document now. Move them
1:48:48around like you saw at the beginning.
1:48:50Okay. I want you there. Actually, this
1:48:53one didn't need to be that size because
1:48:54I'm going to use it a lot bigger. Okay.
1:48:57And yeah, work your way through and
1:48:59finish the project. All right. I will
1:49:01see you after the class project.
1:49:05Hi everyone. This video we're going to
1:49:07look at the exciting world of pages. I
1:49:09want to have its own video cuz there's a
1:49:10few things to it. I want to add some
1:49:12extra value and we're going to need it
1:49:13because at the moment we starting with
1:49:16just one page, our mobile uh wireframe,
1:49:18but we're going to add a bunch of other
1:49:19pages to keep our persona and task flow
1:49:21on. We'll have this one we're working on
1:49:23currently a desktop version and also I
1:49:26want to show you because uh one page you
1:49:28can get quite far with but eventually
1:49:29you end up with stuff like this. This is
1:49:31like more of a real world project from
1:49:33me. Okay, it gets messy. So you end up
1:49:35having lots of different pages, okay?
1:49:37Instead of just page one with all the
1:49:39junk on it, you need to separate things
1:49:40out, okay? So that you've got kind of
1:49:42like different groups of content to make
1:49:45things a little bit easier. We're going
1:49:46to do that in the course. So let's jump
1:49:48in and learn pages in Figma. Let's go.
1:49:51All right. Pages. Uh so you get given
1:49:53page one uh by default. Okay. If you
1:49:55can't see it, you might be on assets.
1:49:56Okay. Make sure you're on file and see
1:49:58page one. You can get pretty far with a
1:50:00document. You don't need pages is what
1:50:02I'm going to say. if you need to
1:50:05understand them though because yeah,
1:50:07they're handy having extra pages. Um,
1:50:09plus when you're working with other
1:50:10people's documents. So, let's go through
1:50:12now and make sure on file. Let's call
1:50:14this one instead of page one. This one
1:50:15is mobile and it's going to be
1:50:17wireframe, not Wi-Fi.
1:50:21Let's add a new page. We're hitting the
1:50:22little plus button. Let's call this one
1:50:24desktop. And we're probably going to
1:50:26skip wireframes. We're just going to
1:50:27call this one desktop. And you've got
1:50:28two pages. Okay, these feel like pages,
1:50:31but they are just frames. and let's go
1:50:33to desktop and let's create some pages.
1:50:35So F is the shortcut for the frame tool
1:50:38or grab it down the bottom there. I'm
1:50:39going to go over here and we're going to
1:50:41switch from tablet phone desktop. We're
1:50:43going to pick desktop this uh 1440x
1:50:471024. I don't know why you need to say
1:50:491024, but that's how everyone refers to
1:50:51that size, not a,024 for some reason.
1:50:54Okay, so we want how many of these we
1:50:55want? We want four. So I'm going to use
1:50:57my option down on a Mac, alt on a PC,
1:50:59and just drag this one out. So, I've got
1:51:01two or you could use your copy and
1:51:02paste. Just click the name first at the
1:51:04top and then go command who remembers
1:51:06what duplicate is. That's right. Good
1:51:08work. It's command D on a Mac, control D
1:51:10on a PC. So, I've got four of them.
1:51:12Then, we're going to go to the shortcut
1:51:13shift. Hold shift down and hit one.
1:51:15That's like fit everything onto the
1:51:17page. I like this. All right. I'm going
1:51:20to speed this up cuz I'm going to copy
1:51:21and paste. Actually, I know what that
1:51:22one is. Homepage. Let me copy and paste
1:51:24them so they match. You wait there. I'm
1:51:26just going to flick between this one and
1:51:27this one.
1:51:29The shortcut for going between the two
1:51:31pages is just your page up, page down on
1:51:34your keyboard. Okay, you might have to
1:51:36hold the function key if you're on a
1:51:37laptop. I'm going to copy that. Hit
1:51:38escape to come out of it. Page down.
1:51:40This is painful, so I'll skip it. Let's
1:51:42jump to the end. We're going to create a
1:51:44third page. Okay, this one is going to
1:51:45be going to hit plus. And this one's
1:51:47going to be our persona and task flow.
1:51:51Now, on this page, I want it to be the
1:51:53top. So, I can click, hold, and drag it
1:51:54so it goes at the top. And I It doesn't
1:51:56have to have a frame. So, I'm just going
1:51:58to dump in from the exercise files. I'm
1:52:00going to dump in my uh persona example.
1:52:03You should have yours kind of
1:52:05screenshotted or downloaded from
1:52:06earlier. I'll zoom out a little bit and
1:52:08then add my task flow. So, in here
1:52:11there's two task flows. The PNG version,
1:52:13which is just like a screenshot. Okay,
1:52:14we can use those. Shift one to squeeze
1:52:16them all in. Okay, so that's a great
1:52:18place to keep the kind of brief and what
1:52:20we're doing all on the document. As you
1:52:22can see, these guys don't need frames to
1:52:24go onto. They can just be dumped on the
1:52:26page. Another thing I want to show you
1:52:27is that um if the task flow at the
1:52:29moment is a PNG because it's easy to
1:52:31add. But say we do want to add somebody
1:52:33else's Figma file. Okay, you've
1:52:35downloaded it, you found it, it's on the
1:52:37hard drive, you've somebody shared it
1:52:38with you. It's most easy just to share a
1:52:41link to the file, but people do share
1:52:43Figma files, their actual file. You can
1:52:45save a local version. Okay, so I've done
1:52:47that in the exercise files. I'm going to
1:52:48show you how to open one. So what we're
1:52:50going to do is go back to home. Okay,
1:52:51and we're going to go over to this
1:52:53little icon here, import. Okay. And
1:52:55we're going to import from my computer.
1:52:57We're going to find our exercise files.
1:52:58We're going to say figfig. You see it
1:53:00there? Not the wireframe. I'm going to
1:53:03grab the task float.fig. I want this one
1:53:06because it's kind of a working file.
1:53:08I've imported it. Where is it? There.
1:53:10So, this instead of an image is actually
1:53:12all the rectangles and things. So,
1:53:14instead of that image, I can copy this.
1:53:16Go back to my what do we shift two?
1:53:19Command two even. Okay. need to go back
1:53:21to this and get rid of this PNG and just
1:53:23paste in the actual files cuz then we
1:53:25can go and change it and modify it and
1:53:27fix Stan's terrible spelling and pick
1:53:29new colors. Up to you, but I also wanted
1:53:31to show you how to import other people's
1:53:34Figma files when they're a physical
1:53:35file. We'll do sharing properly later
1:53:37on. Why do we bother going through
1:53:39pages? I kind of mentioned at the
1:53:40beginning, but I want to show you one
1:53:41other good example. So, I'm going to go
1:53:43to home. I'm going to go to templates
1:53:44and let's look for let's say you're
1:53:46building an iOS app. Okay, so iOS um
1:53:49we're going to hit enter. We're going to
1:53:51find one that has Okay, so for iOS 17,
1:53:54let's open that up. And what you'll find
1:53:55is let's open it in Figma, which we know
1:53:57we're going to agree uh will give us a
1:53:59local copy of our own version. Okay,
1:54:01we're not actually working on there's
1:54:02now the person who made this. Okay,
1:54:04we're working on the version now that if
1:54:07I go to home and I go to my recents.
1:54:10Okay, there it is. There it's actually
1:54:11on my computer now. Okay, but when I'm
1:54:13in it, you're like, oh yeah, it's kind
1:54:15of nice. So, it's very comfortable.
1:54:17There's not a lot going on. But then you
1:54:18go to make sure your files under pages.
1:54:20Look, cover and then a change log. Woo.
1:54:23Getting started. Okay. But look at this.
1:54:25Watch. I can scroll down and there are
1:54:27lots of pages for this one particular
1:54:30document. Okay. For obviously the
1:54:32operating system for mobile devices is
1:54:35huge. Okay. So, we can go down and say
1:54:37actually can you see what they've done
1:54:38is they've grouped them instead of like
1:54:39mobile versus desktop. They've gone all
1:54:41right. I want to find let's find
1:54:42something interesting. Uh let's look at
1:54:46notifications.
1:54:47Super interesting then. Okay. But here
1:54:49is a page dedicated to like links up
1:54:52here to like the guidelines for them and
1:54:54stuff you can start using. Okay. They're
1:54:56a little bit complicated now cuz they're
1:54:57in something called components, but
1:55:00we'll learn those. You'll get hang of
1:55:01those later on. But it's just gives you
1:55:03like page control. Look at that. All the
1:55:06dots you need for when you're like
1:55:07swiping popovers. Let's have a look. Oh,
1:55:11this is for iPad only. But you can start
1:55:13to see people group things in uh pages.
1:55:16And when you're new, you might not find
1:55:17it or get a little confused or lost.
1:55:19There is lots of stuff hidden in the
1:55:21pages here. All right, let's close that
1:55:22down. I'm going to go back to here and
1:55:24keep everything clean. You won't. You'll
1:55:26have loads of junk lying around in here.
1:55:27That's okay. I'm going to go into here
1:55:29and say just to be tidy for this course.
1:55:31Remove to trash. Excellent. And that's
1:55:33it. We made a whole video on how to add
1:55:35a page. Good work, Dan. I hope there was
1:55:36something useful in there for you and
1:55:38I'll see you in the next video. Hi
1:55:39everyone. In this video, we're going to
1:55:41prototype. One of the powerful features
1:55:43of Figma is be able to mock our uh
1:55:45designs up and test them on a at least a
1:55:47virtual phone and later on on a physical
1:55:50phone, okay? Where we can click through
1:55:51to our different pages and check out how
1:55:53it's working. We can get it to a more
1:55:55appropriate size. We can check sizings
1:55:57and we can keep this open and keep
1:55:59working and be testing all the way
1:56:01through. Okay, it's called prototyping.
1:56:03Let's jump in and learn the basics. All
1:56:05right, first thing, shift one. Just so
1:56:06everything's in the screen, we're going
1:56:08to switch to this option here called
1:56:10prototype. So you will toggle between
1:56:12design and prototype quite a bit and get
1:56:15probably a little lost to begin with
1:56:16because prototype. If I click on this
1:56:18now, it loses all of the design things.
1:56:21So the color and the font and the sizes.
1:56:23Okay, so um just be mindful. I'll remind
1:56:25you through the course. Let's click
1:56:26prototype. Let's click on this first
1:56:27frame. You click on the first heading of
1:56:29the frame. Okay, so we've got homepage
1:56:31selected. And what we're going to do is
1:56:32watch this. So if I hover around, okay,
1:56:34you can see this like dot that appears
1:56:36on the corners here. Okay, what I can do
1:56:37is I can say you click, hold, drag, go
1:56:40there, and by default, it's just going
1:56:42to say all this is going to be fine. It
1:56:43says the trigger is going to be when I'm
1:56:45tapped, I'm going to navigate to the
1:56:47features page instantly. Okay, let's do
1:56:50the features page. Uh this one, just
1:56:52drag it here. You can drag it back this
1:56:53way. Okay, you can drag it all sorts
1:56:54like see these like things here called
1:56:57noodles or wires. Okay. And we're going
1:57:00to drag it from features to this page.
1:57:02Then when we go to check out, I'm going
1:57:04to scroll over space bar. Okay. And drag
1:57:06it to this one. Okay. We're going to use
1:57:08all the default interactions. All right.
1:57:10Get ready. You ready to prototype? You
1:57:12do it by hitting this little button up
1:57:13the top here. The little play button.
1:57:15It's called present. Ready. Loading.
1:57:18There it is. It's in a phone. Not good.
1:57:21There is all my logo and stuff stuck in
1:57:23it. We'll address that later on. Okay.
1:57:24Watch this. If I click once, it moves to
1:57:26the next page. Next page. Next page. Oh,
1:57:28very exciting. And then doesn't go
1:57:30anywhere because we don't have uh
1:57:32anywhere for that to go when it's
1:57:33finished. All right. The thing to note
1:57:35when you are dealing with um this
1:57:38prototype view is that it's actually
1:57:39opened up in another tab. Okay. So,
1:57:41there's the tab we're working on. All it
1:57:43did is when we hit the play button, it
1:57:44opened up our design in another tab.
1:57:48Okay. A couple of things we're going to
1:57:49look at is watch this. There's kind of
1:57:50nothing here at the moment, but if you
1:57:52give it a real big jiggle of the mouse,
1:57:54jiggle jiggle. Okay. Or click in the
1:57:56background away from this. Okay, it will
1:57:58say, "Oh, look all these other options
1:58:00here." The main ones you're going to
1:58:01look at is restart. Can you see down the
1:58:02bottom here? Restart or the R key. We'll
1:58:04just get it back to the beginning. So,
1:58:06we can go through it again. Lovely.
1:58:08There are more options up here. You can
1:58:09go full screen to get rid of the chrome
1:58:11if you want it to be, you know,
1:58:12presenting it to a client and click that
1:58:14off again. There are more options here.
1:58:15I'm not going to go through everything.
1:58:17The only other thing you might do is
1:58:18you've got a manual way of going through
1:58:20this as well. Okay. So, just back and
1:58:23forth through the frames. Okay. You can
1:58:25leave this open. You don't have to close
1:58:28this once you're finished. Okay. You can
1:58:29just leave it there and it's kind of
1:58:31live. Okay. So, what happens is watch
1:58:33this. If I click in this, you'll notice
1:58:34that I can't see the color. Why can't I
1:58:36change the color, Dan? Oh, yeah. That's
1:58:38right. I'm on prototype. Going to go to
1:58:39the design. Okay. Down here, I'm going
1:58:41to pick a new color. Okay. I'm just
1:58:42going to drag any old thing in there.
1:58:44And if I go back to preview, I don't
1:58:45actually have to launch it. Okay. I can
1:58:48restart it. And you can see I'm kind of
1:58:49back here. It just can stay open. What I
1:58:51tend to do is click and drag this tab.
1:58:54Okay. And I can move it around and I can
1:58:56say all right I want it to be on this
1:58:58right hand side here. Okay. So I can be
1:59:00working on this side which is a bit
1:59:01squished now. Okay. But it's kind of a
1:59:04live update. Okay. So I can say this
1:59:05actually I want to go back to that
1:59:07original color. What was it? Undo. Undo.
1:59:09Undo. You can see it's updating over
1:59:11here. And what I do even more is less
1:59:13side by side. Okay. And what I do is
1:59:15actually drag this and have it open.
1:59:17What I'm going to do is close that down.
1:59:19What I normally do is I'll preview it
1:59:21and actually grab this tab. Okay. Okay.
1:59:23And you can actually drag it out of the
1:59:26browser onto my other desktop that you
1:59:27can't see. So, I'm doing the exact same
1:59:29thing, but it's appearing on my other
1:59:30document. Up to you. I'm going to close
1:59:32it down. Okay. Another good way of
1:59:33previewing is in here. There's another
1:59:36one. So, instead of hitting the play
1:59:37button, there is a preview button. Okay.
1:59:40So, you click this little chevron here,
1:59:42this little down arrow, click on
1:59:43preview, and it'll open up in like a
1:59:44little window that can be moved around.
1:59:46It's just hanging out there. It's too
1:59:48big. I can scale it down to kind of more
1:59:50my phone view. What this is really handy
1:59:52is here I can say all right say I'm
1:59:54working on the size of click on
1:59:57features. Can you see it updates? Okay.
1:59:59I click in here and the product text is
2:00:01just too small. So I can go through here
2:00:03and say upup upup upup upup upup upup
2:00:03upup upup upup upup upup upup upup upup
2:00:04upup upup upup upup upup upup up up up
2:00:04up up up up up up up up up up up up up
2:00:04up up up up up. You can see it instantly
2:00:06updates. I'll move it closer. Grab the
2:00:08top of it there. You can start to see in
2:00:10my desktop view. I can be quite zoomed
2:00:12in, be working on stuff and go all
2:00:13right, what does it look like in terms
2:00:15of font size on a mobile device? So I'm
2:00:17not designing kind of the wrong size.
2:00:20Because you see that 99 way too small.
2:00:22Okay, so I'm going to go in here, make
2:00:23it bigger, bigger, bigger, bigger,
2:00:24bigger, bigger, bigger, bigger, bigger.
2:00:26You get the idea. Shift click. Ah, nice
2:00:27and big. Again, you can restart this one
2:00:29and close it down when you're finished.
2:00:31Okay, I'm going to go back to my
2:00:32prototype mode. You can delete these
2:00:34wires, okay, by just clicking on them
2:00:35and hitting delete on your keyboard.
2:00:37Just physically deleting them. So, click
2:00:38on the frame itself, okay? And click in
2:00:41here and hit delete if you want to get
2:00:43rid of them. I'm going to undo undo
2:00:44because I kind Oh, no. We're going to
2:00:46delete them. That's what I want to do.
2:00:47So, delete that guy. You wait there.
2:00:50Actually, I'm going to put them back
2:00:51because I want to show you a couple
2:00:52other things that are interesting that
2:00:54it kind of maybe catch you out. If I'm
2:00:56on checkout and I go to play. Actually,
2:00:58it's gone to that one there. Yeah,
2:00:59that's fine. Okay. If I click on, you
2:01:01see it switched it from preview to
2:01:02present. Okay. Whichever one, whichever
2:01:04frame you have selected is the first one
2:01:06that's going to appear. Can you see I've
2:01:07ended up at checkout? You're like,
2:01:08that's not the first page. Okay. It just
2:01:10means that whatever one you are working
2:01:12on will present first. So, if you want
2:01:14it to be the homepage for the first one,
2:01:16I'm going to hit reset. it'll be on that
2:01:18page. One thing it can't do is you can't
2:01:21Let's delete this interaction. You can't
2:01:23connect to another page. So, I'm still
2:01:25in prototype mode. I can click on
2:01:26homepage. I can see this little dot. You
2:01:28can do it on either side. It doesn't
2:01:29matter if you want it to come out of the
2:01:30top. Okay. It just kind of automatically
2:01:32goes to places, but you can't get it to
2:01:34go to another page. Doesn't like that.
2:01:36Okay. So, you have to go to another
2:01:37frame. That's fine. You see there, I let
2:01:39go too early. So, you got to get it to
2:01:40drag across and connect. One thing
2:01:42people ask is sometimes you don't have
2:01:44the mobile frame. So, I'm going to go to
2:01:45homepage. and you're like, "How did I
2:01:47get the mobile phone?" Or, "Maybe I
2:01:48don't want a iPhone. I want a Android or
2:01:50something else." In prototype mode,
2:01:52click on the background. So, you got
2:01:53nothing selected. And here you can see
2:01:55your prototype settings. Okay? So, you
2:01:57might want an older phone. You might be
2:01:59you're going to be in the future. You
2:02:00can only be in the future. So, you
2:02:02probably got a 17, 18, 19. Okay? You
2:02:05might go, "All right, I want a Google
2:02:07Pixel 2 from the Dark Ages." Okay? Then,
2:02:09when I hit present, it's going to use
2:02:11that as the frame. Same for desktop.
2:02:14Let's go to desktop. Okay. with nothing
2:02:15selected. You can go through. I think I
2:02:17changed mine. Yours probably is on
2:02:19nothing. Okay. I put mine on MacBook Pro
2:02:22cuz it looks cool. Okay. I'm going to
2:02:23preview this page. There's nothing on
2:02:24it. Not very exciting, but it is on this
2:02:27MacBook Pro. So, I'm go back to my
2:02:30mobile one. You can change it to
2:02:32horizontal and vertical. They don't
2:02:34perform very well as in it's very
2:02:36uncommon to design for vertical
2:02:39landscape mobile unless you're
2:02:41specifically designing an app to do it.
2:02:42Okay. often it takes the shape of like a
2:02:44tablet size. Just doesn't preview very
2:02:46well cuz it gets kind of squished in
2:02:48there. Look,
2:02:50there you go. All right, that's it. That
2:02:52is basic prototyping. We'll do something
2:02:54a bit more exciting in the next one.
2:02:55Let's delete the um interactions. Okay,
2:02:58so I'm clicking on these and just
2:02:59deleting them. Okay, and say goodbye to
2:03:02the noodles. Not many people call them
2:03:04uh navigation noodles. It might just be
2:03:07me. So, be careful when you go into the
2:03:08meeting and talk about noodles. Anyway,
2:03:10let's get on to the next video. Let's
2:03:11connect the buttons up.
2:03:15Hello. In this video, we're going to
2:03:17look at adding interactions to buttons.
2:03:19And when we click them, okay, oh, that
2:03:20one didn't do it. We're going to click
2:03:21on this one. Can you see? We're going to
2:03:22add some animation to the transition
2:03:25between the different frames. Okay.
2:03:26We'll get the navigation to work up the
2:03:28top here. Learn more. Oh, slidy. Okay.
2:03:30So, let's add interactions to buttons
2:03:32and add a little bit of animations in
2:03:34between them. Jump in. All right. To get
2:03:36started, make sure you're on prototype
2:03:38mode and make sure you've gotten rid of
2:03:40the old noodles. Okay. So, I'm going to
2:03:42get rid of you, you, and you. All right.
2:03:44And shift one so we can see them all.
2:03:46All right. So, we've done page
2:03:47transitions or page interactions. Okay.
2:03:50What we're going to do now is actually
2:03:51do it to the buttons. So, we're going to
2:03:52go click on the buy now button. Make
2:03:55sure you're on prototype. Okay. And you
2:03:56can see you get the little dots here
2:03:58like we did for the entire frame. Okay.
2:04:00Where they appear, we can drag around.
2:04:01We can do it for anything. Look the text
2:04:03here, this icon. Okay. We've got this
2:04:05button here. I want when the buy now
2:04:07buttons clicked to click, hold, and
2:04:08drag, drag, drag to the payment page.
2:04:10We've skipped the features page. Let's
2:04:12give this a test. So, shift spacebar to
2:04:14open up that little preview. Okay. And
2:04:16when that I'll move you there. When I
2:04:18click on buy now, it jumps to the
2:04:20checkout page, skips the features page.
2:04:23Awesome. I'm going make that smaller so
2:04:24we can see things. Okay. The other Well,
2:04:27actually, before we go too much further,
2:04:29I'm going to hit R for reset. Can't see
2:04:30the buttons. This is a good point to
2:04:32kind of like point out. We are designing
2:04:34for the I'm scrolling up for the iPhone
2:04:3616, right? And the buttons are fine. you
2:04:38can see them, but you might have to
2:04:40support older uh models of phone. Okay?
2:04:42So, you might have to just check what
2:04:43the most common phones are currently,
2:04:45what are the sizes, and just test on a
2:04:47few of them to make sure that your Cuz
2:04:48like if I go back to this uh where is
2:04:51it? Pixel 2. Okay. And that if these
2:04:55buttons are below this screen, okay, the
2:04:57initial screen, it's called below the
2:04:59fold. That's what they call it. Okay?
2:05:00Old printing term where I can't see them
2:05:02and aren't as likely to find them, okay?
2:05:04Cuz they have to scroll here. So, what
2:05:06I'm going to do is they can scroll on
2:05:08the phone. Okay. But over here, what I
2:05:09can do is watch this. I can grab both of
2:05:11these. And that's an interesting thing
2:05:13inside of Figma is if I'm in prototype,
2:05:16not design, I can still move things
2:05:17around. I can't change the color of it.
2:05:19It's a little hard to grab them. I
2:05:20grabbed a whole bunch of stuff there. I
2:05:22don't know what I grabbed. Okay. I'm
2:05:24grabbing a You can move them. Come on,
2:05:26Dan. All right. I'm going to zoom in.
2:05:28Clearly not as useful in prototype mode,
2:05:30but you can move things around. Can you
2:05:32see my little preview? I'm like, I want
2:05:34them there. Okay, that means they can be
2:05:36seen on iPhone 16 and this old phone.
2:05:39Um, what else can we do? Let's do this
2:05:41button. Okay, now be careful where
2:05:43you're selecting to prototype from.
2:05:44Okay, you can click on the text and get
2:05:47that to prototype over to our features
2:05:49page and that will work. The click area,
2:05:51the thing they've got to click is the
2:05:52text, which is a lot smaller than the
2:05:53actual button. So, I'm going to undo
2:05:55that and just make sure I'm clicking the
2:05:56button. I want that whole thing to be a
2:05:58button. And I'm just clicking, holding,
2:06:00and dragging. Okay, the next thing I
2:06:01want to show you is the animation. So,
2:06:03by default, it's on instant. What I
2:06:04would like to do is when that learn more
2:06:06button is clicked, I would like it to do
2:06:08something a little bit more interesting,
2:06:09like dissolve. Okay, dissolve is if you
2:06:11hover above this little thumbnail here,
2:06:13it'll give you like a little preview.
2:06:15Dissolve is clearly pretty easy to
2:06:17understand. Skip, animate. There's a
2:06:19bunch of different animations in here.
2:06:20It's missing the best ones in the world,
2:06:22like page peel, okay? But it's got your
2:06:23regular ones like move in, move out. Let
2:06:25me just demonstrate. I won't go through
2:06:26them all. You can explore those. Okay,
2:06:28but let's do the difference between
2:06:29let's say move in. Can you see? It's
2:06:32very exciting. I'm hovering above it.
2:06:34Just kind of slides in there. Watch.
2:06:36Off. On. There's something a little bit
2:06:38more special for like push or slide in.
2:06:41I quite like. Can you see slide in? It
2:06:44pushes the other one and dissolves it at
2:06:46the same time. So, the white one there
2:06:48gets pushed out. Let's just preview it
2:06:50actually. So, over here I can click on
2:06:51this. You can see the other one kind of
2:06:53moved to the left and dissolved while
2:06:55this one, the second uh frame moved in.
2:06:58That's quite a cool one. Some of the
2:06:59other things to look at is let's look at
2:07:01direction. Okay, we can get it to go
2:07:03from the other side. I'm going to hit
2:07:04I'm clicking in here, hitting R for
2:07:06reset. I'm going to go a little more.
2:07:07Can you see it? Push from the left.
2:07:08Okay, I'm going to go back to the right.
2:07:10You can go up or down. Let's talk about
2:07:12the curve. So, ease out is the default.
2:07:15And what that means is that it comes in
2:07:17really fast and slows down at the end.
2:07:20It eases out. Okay. If you want it to
2:07:22come in really slow, okay, you want it
2:07:24to ease in and then be fast at the end,
2:07:27you can use ease in. Okay, you can do
2:07:29both. Ease in and out is often just a
2:07:31good default. I like it. Kind of slow at
2:07:33the beginning, fast in the middle, slow
2:07:35at the end. Um, some of the other nice
2:07:37ones is ease in and out back.
2:07:42Okay, this has a nice little bounce at R
2:07:44again. Watch this. Learn more. It's got
2:07:46this kind of like what do you call it?
2:07:47Anticipation from animation. It comes in
2:07:49and goes a little bit past where it
2:07:50needs to be. Kind of bounces a little
2:07:52bit. I like it. So, you can play around
2:07:54with these. You're not allowed to use
2:07:55bouncy. Okay. It's illegal. Let's have a
2:07:59go with bouncy doing. Okay, you're
2:08:01allowed to do that. Uh, I'm going to use
2:08:02these in and back. Let's look at
2:08:03duration. Duration is just how long it
2:08:05takes for this whole animation to take
2:08:07part. Um, milliseconds, K is ms. And
2:08:10there's a,000 milliseconds in 1 second.
2:08:13So, that's 1 second right there. So, you
2:08:15want it to be longer. You want it to be
2:08:161 seconds instead of.3. You can do that.
2:08:18And watch this. I reset it. No more. It
2:08:21takes a lot longer. Okay. So, you kind
2:08:22of work out your timing. The defaults
2:08:24are pretty good though. I'm going to go
2:08:25back to 400.
2:08:27reset. I lag it. Probably a bit fast,
2:08:30actually. I'm going to go to 700.
2:08:33[Music]
2:08:35There you go. Now, let's do some of the
2:08:37other ones. So, we've got by now
2:08:38working. Uh, learn more. You can just do
2:08:40a select all. So, you have to have
2:08:42nothing selected. I'm going to zoom out.
2:08:44Shift one. Okay. To see everything. I'm
2:08:45going to close that down. And you can
2:08:47have nothing selected by clicking in the
2:08:48background. And then go to select all.
2:08:50So, it's edit uh I don't know the
2:08:52shortcut. There it is. Select all. Okay.
2:08:54Or command A on a Mac. CR+ A on a PC and
2:08:57you can see all of the different
2:08:58noodles. Can you see them there? There's
2:09:00two. So, which other ones do I need to
2:09:01do? Let's click on purchase. Okay. On
2:09:03the button, let's drag this off to like
2:09:05I've bought it. Congratulations. And
2:09:07what it'll do is it'll remember the last
2:09:08thing you did. So, it's going to slide
2:09:09in using all of our curve and duration.
2:09:12Perfect. Okay. Another tip is we kind of
2:09:14get stuck. Remember, uh shift spacear to
2:09:17open up the little preview or you can
2:09:19hit the little play button up here. Up
2:09:20to you. I'm going to go to buy now
2:09:22purchase. Okay. And I get to this end
2:09:24bit and then I'm kind of like stuck.
2:09:25There's no real way I can do anything
2:09:27else. What do we do? Move him down
2:09:29there. Grab the white bit to drag it
2:09:31around. It's really typical for the logo
2:09:33to be clicked to go back to the
2:09:34homepage. Let's do this. So, I'm in
2:09:36really close and I need this to go to
2:09:38the homepage. Obviously, I could zoom
2:09:39out and I could drag the wire over or
2:09:42the noodle. Okay. But your designs get
2:09:44really, really complex. Okay. So,
2:09:46sometimes you just know where it needs
2:09:48to go, but you don't want to have to
2:09:49zoom out and try and drag it across all
2:09:50of this stuff. Watch this. Dragging
2:09:52dragging. and you're like,
2:09:54okay, it can be a bit of a pain. So,
2:09:56what you can do is just do it manually.
2:09:57So, with it selected, you make sure on
2:09:59prototype. You can see interactions
2:10:01here. You can add a plus next to it. So,
2:10:03I've got a new interaction. The trigger
2:10:04is on click. Okay. So, when this thing
2:10:06is clicked, the action is going to be,
2:10:08we'll cover these later on. Okay. But
2:10:10we're going to say I'd like it to
2:10:11navigate to what destination? Well,
2:10:14look, these are my pages. I want it to
2:10:15navigate to my uh homepage. Okay. What
2:10:18kind of animation? I'm going to get it
2:10:20to do a dissolve. I'm going to leave
2:10:21everything default. You can close that
2:10:23down. You can see that the wire is going
2:10:25down here. Sometimes that's just easier
2:10:27to do it manually. So, let's give it a
2:10:28go now. Wallet goes back to there. Learn
2:10:30more. Nope. Can't go back. Ah, so I
2:10:34haven't done it to this page. I did it
2:10:36to just this one logo here, but not to
2:10:39these two. So, this is a good point. So,
2:10:40what you can do is you can just work
2:10:42your way through doing the same one for
2:10:43all of these. Or what you can do is
2:10:45let's delete that one. Delete that one.
2:10:47Um, what you'll notice is you can do
2:10:49some basic design stuff inside a
2:10:50prototype. I think we discussed that. We
2:10:52did. I'm going to select that and copy
2:10:54it. So, I've selected on the
2:10:55confirmation page. I've copied it using
2:10:57my shortcut. Okay. And I'm going to
2:10:58click on check out. So, I know it knows
2:10:59where to go. And then just said paste.
2:11:01You see it went into the right exact
2:11:02right spot. We've talked about that
2:11:04before. But also bought through the
2:11:06interaction. It doesn't work when you're
2:11:07in design. Watch this. If I click on
2:11:09this and go copy and I go over here and
2:11:11hit paste and then go back to prototype.
2:11:14It worked.
2:11:15It never used to.
2:11:18It does now. Hooray. I knew that.
2:11:20Anyway, so you can copy and paste
2:11:22elements and they bring along the
2:11:24interactions with them. All right. So
2:11:25now we should be able to go here and go
2:11:27boop and go back. Go to the buy now
2:11:30page. Let's purchase. Go back to the
2:11:32homepage. Oh, we're doing it. We're
2:11:34prototyping. If you do need to update an
2:11:36old one, okay, like this one here, I
2:11:38don't think does the same thing. You can
2:11:40click on it. Actually, maybe it's this
2:11:41one. You can click on the uh wire and
2:11:43you can see it underneath. Or you can
2:11:45change it up here. It doesn't matter.
2:11:46Okay. If you want to see a bit more over
2:11:48here, you can click on it and it will
2:11:49open up with all of the stuff that
2:11:51appears when you click on the wire here.
2:11:54All right. Um, so have a little
2:11:56experiment with the different uh
2:11:58animations. Okay. Uh, you know, all of
2:12:00these. Unfortunately, there's no page
2:12:02peel like we all love. Uh, I think it's
2:12:04been made illegal in most countries. Um,
2:12:06so yeah, that is it. Experiment. Don't
2:12:10mess with smart animate. Oh, got a good
2:12:12idea. Uh, editor, can you exit us from
2:12:15this video using the uh super lovely
2:12:18page peel? Let's go. I said do it. There
2:12:22you go.
2:12:28Hi everyone. This video we're going to
2:12:29look at the status bar, which is the
2:12:31time and the battery and the Wi-Fi
2:12:33signal. And we're going to add it to our
2:12:35template cuz at the moment it's getting
2:12:36bunched up here on the iPhone 16. So,
2:12:38we'll add it so we've got a bit of space
2:12:40so we can avoid the letter box window
2:12:42pill. I can't remember what it's called,
2:12:43but anyway, I want to avoid the camera
2:12:45that pokes out through the screen on
2:12:46most new phones. All right, let's jump
2:12:48in. It's called the status bar. All
2:12:49right, so let's do it together. Uh, I've
2:12:51done this for a little while, so let's
2:12:53figure it out. I'm going to go to home.
2:12:55I'm going to go to tools and templates.
2:12:56And I'm assuming I can type in iOS. It's
2:12:59called a status bar. Okay, I'm using iOS
2:13:02cuz I'm using the iPhone. You could use
2:13:03the Android status bar. Okay. And then
2:13:06the way I decide which one to use is I
2:13:08don't know. Just start looking at them.
2:13:10See which one. Oh, that looks kind of
2:13:12good. It's got lots of likes. Got lots
2:13:14of downloads. There's probably more.
2:13:16Don't care enough. Okay. I'm going to
2:13:19grab one. Open it. See if I can grab an
2:13:21iOS 7. So, let's have a look. Status
2:13:24bar. There it is. There. So, I'm going
2:13:26to say actually these look like parts of
2:13:29the status bar. Let's have a look. Oh,
2:13:32okay. They got lots of options. We're
2:13:33going to go for just a basic one. Are we
2:13:35doing on dark or on light? We need the
2:13:37dark one, right? So, I'm going to copy
2:13:38this and go over here and I'm going to
2:13:40say uh let's do it to the homepage.
2:13:43Let's go homepage. Go back to design.
2:13:45Okay. And I'm going to go to first of
2:13:46all, I'm going to have to I know I'm
2:13:48going to have to move all this down. You
2:13:49don't have to add the status bar. That's
2:13:51the first thing here is that your
2:13:53developer is not going to want it, but
2:13:54when you're previewing it, it can be a
2:13:56bit weird not having it right. So, here
2:13:57we go. I'm basing it up the top there.
2:14:00Perfect. Doesn't quite fit. That's
2:14:02probably going to do it. Let's go to our
2:14:04preview and let's make sure that we've
2:14:07got Let's have a look. It's up there.
2:14:09We're going to switch the phones. So,
2:14:10let's go back. Let's go to prototype.
2:14:13Let's go in here and go back to iPhone
2:14:1516, which is all the way at the top
2:14:16there. And now, let's preview it better.
2:14:19Okay, cuz it's put in the what do they
2:14:21call this? The pill? No, the letter box.
2:14:22The door. Oh, I can't remember. Uh, but
2:14:26now we've got our nav in here. What
2:14:27tends to happen, especially for mobile
2:14:29web, is you don't need it cuz the
2:14:31browser ends up pushing it down anyway.
2:14:32Okay. And there's a bit of browser
2:14:33chrome up the top, but for our template,
2:14:35I think it's good. We worked it out
2:14:37together. Okay. Um, the one thing we
2:14:38might do is Oh, do I want it? I really
2:14:41don't want it. What we might do is
2:14:42select it and go to design and maybe
2:14:45just give it a fill color. Okay. Just so
2:14:48that when we're designing, we can kind
2:14:50of work around it. Can I drag it up? Oh,
2:14:52I can. It's nicely designed. The one
2:14:54thing though is when you start adding
2:14:56complex components from somebody else is
2:14:57it's going to bring along a few things.
2:14:59Cuz this thing here is an instance of a
2:15:02component which you don't know what it
2:15:03is yet. So you just got to be careful.
2:15:04You're like, do I really need it? Could
2:15:06be. There's a dark mode option. Look.
2:15:07Oh, light mode, dark mode. This is the
2:15:09stuff we're going to be able to build as
2:15:11well. The really interesting thing is
2:15:12that actually these icons are pulling
2:15:15from this document over here. There's a
2:15:17way of doing that in Figma and I'll
2:15:19include it here in the course just
2:15:20because you'll end up doing it. You be
2:15:22like, "Oh, I want that." And you'll grab
2:15:23it from somebody else's and it will
2:15:25start pulling from other documents which
2:15:27can be a little confusing. So what you
2:15:28can do is you can select it. You can
2:15:30right click it and you can say I would
2:15:32like to detach this instance. Okay? And
2:15:35you can do the same for all of these.
2:15:36All these little diamonds are linking
2:15:38back to that original document. So I can
2:15:40go to you as well and go to detach
2:15:42instance. Now it's like just part of
2:15:44this document. Same with this one. This
2:15:45is a bit of a crude way of doing it as
2:15:47in it would be great if you know what
2:15:49instances and components are which you
2:15:51will do later but I don't want to go too
2:15:53deep on that stuff now. just want to
2:15:55throw things in here and just want to
2:15:57put a little bit of this in here so that
2:15:59if you are like jumping ahead and like
2:16:00I'm going to grab that and going to grab
2:16:01that and you end up with a little bit of
2:16:03problems. Know that it's not you, it's
2:16:05just your current knowledge is not quite
2:16:07there yet. But don't worry, we'll get to
2:16:08that. So, we've got that. Do I want it?
2:16:11I'm going to take it off. Okay, for this
2:16:13course, you can do it. You're totally
2:16:14allowed to. Okay, but I'm going to take
2:16:16it off for the rest of this. Just we're
2:16:19keeping it easy, man.
2:16:23There you go. And let's move on. Where
2:16:25did the line around my button go? Has it
2:16:28always been gone? It has. It's been
2:16:30annoying, hasn't it? I have no idea when
2:16:33that went away. All right, that is it.
2:16:34That is how to grab the status bar and
2:16:36kind of mess around with that so that
2:16:39you can get it to preview just a little
2:16:40bit better. All right, let's jump into
2:16:42the next video. Forget this video
2:16:43happened. I guess that's the moral of
2:16:46today's story. All right, next video.
2:16:54Hello. Uh, this is the other side of my
2:16:56office. You normally looking from that
2:16:57way across this way. This is that way.
2:16:59Looks like it's my junk and my
2:17:01soundboards to try and make it sound
2:17:02nice. Uh, and it's night time. It's not
2:17:05kind of moody. It's just actually dark.
2:17:08Uh, it's about 11:00 at night and we're
2:17:09making courses for us. Um, and in this
2:17:12video we are going to be looking at
2:17:14something called Figma Mirror. What is
2:17:16it? It's a way of testing our, you know,
2:17:19we're on the computer trying to design a
2:17:21phone website, a mobile first website,
2:17:24okay? Or an app, okay? There's no point
2:17:26spending all your time on there. You
2:17:27need to be testing it on the device,
2:17:29that thing. Okay? So, there is an app
2:17:31you can download from either the Android
2:17:33or the Mac app store. You can tell I
2:17:37don't use it. Um, but it's called Figma
2:17:40Mirror. They might be changing that
2:17:41name. um check in the comments if they
2:17:44have updated it, but it's called Figma
2:17:45Mirror. All right, pause there for one
2:17:47sec. Hey, they've updated the mirror app
2:17:48a tiny bit. Okay, so once you've
2:17:50installed it on your phone, okay, what
2:17:52you can do is it used to just start
2:17:54automatically. Now, what you need to do
2:17:55is click the mirroring button, which is
2:17:57in the bottom right, just click on
2:17:58mirror and then here inside of Figma on
2:18:01your desktop, just click the page that
2:18:02you want to mirror. Okay, I'm going to
2:18:04click on homepage and it'll appear in
2:18:06your phone. It's magic. Actually, you
2:18:08might have to click the begin mirroring
2:18:09button, but then it'll be magic. Back to
2:18:12the video. You sign in with your Figma
2:18:14username and password. Then somehow
2:18:16magically just starts happening. You
2:18:18don't have to be on the same network.
2:18:20It's magic. Um, and basically what
2:18:22happens is, uh, can I show you here? Um,
2:18:26I'll show you. Can you zoom in on that?
2:18:28You kind of can. Basically, if I click
2:18:30on different things here on my desktop,
2:18:32you can you can't see what I'm doing
2:18:33over here, but if I click on my details
2:18:34page, where is it? Details page. There
2:18:37it is. Click on my checkout. So, it's
2:18:39kind of live updating. And even better,
2:18:41it's actually live um interacting. So,
2:18:45will this work? Maybe. So, click on my
2:18:48home button. What can you see? Home
2:18:51button. Home button's too small because
2:18:53I can barely click on it and you can't
2:18:55see what I'm doing. Buy now button. Look
2:18:56at that. Okay. Purchases. What is it
2:19:00focusing on? Is it focusing on the right
2:19:02thing? Maybe. Fades. Oh, look how good
2:19:06this is. So, I can actually work on it.
2:19:08And the big thing I'm going to show you
2:19:10is the buy now buttons too small. The
2:19:12text look fine on desktop, but it's
2:19:14teeny tiny in there. Okay. The purchase
2:19:16button looks all good when I go to buy
2:19:17now. Um, how is this filming the cam?
2:19:21This is probably terrible, but hey, that
2:19:23purchase button feels good to me. I'm
2:19:26finding it very hard to click on the
2:19:28buttons along the nav as well. They just
2:19:29need to be they don't need to be bigger.
2:19:31They need to be smaller with a bigger
2:19:32area around them. So, a frame to make
2:19:34them bigger. logo is too small. Text on
2:19:38the purchase page is good, the check out
2:19:40page. Um,
2:19:43and I do get stuck on the learn more
2:19:44page. I don't have any sort of like
2:19:47prototyping off the
2:19:50uh the um more det product details page.
2:19:53I forgot to add it. You probably saw it
2:19:55in the last video, but it's when you get
2:19:57to this kind of stage and you're like
2:19:58testing it on your own, you're like,
2:20:00"Ah, forgot that bit." Or that's way too
2:20:02small or that's a hideous color. green.
2:20:05Okay. So, um actually that's probably
2:20:08pretty good. Um oh, one let's do a live
2:20:11update because that's pretty cool. I'll
2:20:13I'll adjust the zoom so we can do it a
2:20:17little bit better. You wait there. I'm
2:20:19going to change the camera. All right.
2:20:20So, probably should have done this at
2:20:22the beginning. H watch this. It live
2:20:24updates. I'm moving stuff around on my
2:20:25desktop. So, you're looking at my laptop
2:20:27there, my phone over there.
2:20:30Um and yeah, you can just kind of work.
2:20:32So when I'm working, especially at this
2:20:34initial stage getting font sizes and
2:20:36stuff ready. Uh I just kind of like I
2:20:38don't have it propped up. I just have my
2:20:39phone lying down on the ground. Uh but
2:20:41so you can see it. Um this is really
2:20:44handy. Now I can go through and say
2:20:45actually font size here. What do I want
2:20:47to do? It's a group. So I'm going to go
2:20:48into my group and I'm going to use up
2:20:51and down until I find something. What
2:20:54I'm looking at is I am keeping my eye
2:20:56out on my phone here. Okay, that's what
2:20:58I'm looking at. I'm like, is that an
2:20:59approachable size? What you'll find is
2:21:02pretty much always 16 is good. Okay, you
2:21:05can't see it because it's on this side
2:21:06of my desktop, but I've gone to 16
2:21:08points. That generally is a no-brainer
2:21:11good one. Okay, can't wreck it. 15 if
2:21:14you're trying to be cool and fancy and
2:21:16trying to keep it small, but if you get
2:21:17down around the 12elves and 13 points,
2:21:20it becomes quite a tricky thing to it's
2:21:22fine for some things, but for a big old
2:21:25click now buy button, it feels a bit
2:21:28small.
2:21:30So, I want to go through and let's make
2:21:32this a bit bigger.
2:21:36Move them across.
2:21:39Center them together.
2:21:44Just move there. And I'm going have to
2:21:45do the same for the learn more button.
2:21:47It's hard doing it onehanded. I need my
2:21:49hands over here, but I don't want my
2:21:50hairy knuckles in the video. But you get
2:21:52the idea. You can make changes really
2:21:54quickly. Be seeing what it looks like on
2:21:56a phone. Okay. It's pretty much
2:21:58instantaneous. I'm I don't know. I'm
2:22:01pretty amazed by how that works. So,
2:22:03yes, if you're designing for tablet,
2:22:05have a tablet. If you're designing for
2:22:06desktop, it's a bit easier because you
2:22:08can just do it on your desktop. But
2:22:10mobile phone or an app, okay, or a
2:22:12mobile first website like we're doing,
2:22:14okay, desktop is part of our plan, but
2:22:16it's secondary. Most of our audience is
2:22:18going to be coming from uh paid ads
2:22:20because I talked to the client about it.
2:22:22Those are the kind of conversations you
2:22:23talk about as well. Like lead
2:22:24generation, where is it all coming from?
2:22:26It's coming from Facebook ads. it's all
2:22:28going to come from mobile phones. If
2:22:29it's coming from YouTube how-to videos
2:22:32like a lot of my courses do, then it's
2:22:34desktop first. So, kind of questions you
2:22:36going to get into as a UX designer. What
2:22:38do we design for first? All right, it is
2:22:41late and surprisingly hot with all these
2:22:43cameras and uh lights going. I am going
2:22:46to Let's make another video before we go
2:22:48to bed. All right, that is Figma mirror
2:22:51and testing your prototype on your
2:22:53phone. See you in a bit. It's class
2:22:55project time. Okay, we are going to
2:22:57prototype your mobile website and test
2:23:00it on your phone. So, use the techniques
2:23:02that you've used already that we've
2:23:04learned over the last few videos to wire
2:23:06up all your buttons so that when you
2:23:07click the buttons, they jump to the
2:23:08right pages. Then, download the Figma
2:23:10app. I think it's just listed now as
2:23:11Figma. Um, you should find it. It has
2:23:13the mirror option. Okay? You'll find it
2:23:15on the Google Play and the App Store.
2:23:16That's what it's called. And test it.
2:23:18Okay? Click the buttons. See if it
2:23:20works. If you for some reason can't make
2:23:22the app work, okay, the downloadable
2:23:24app, you can actually just go to
2:23:25figma.com/mirror,
2:23:27okay? And you can use that as well. You
2:23:30do that on your phone. It'll ask you to
2:23:31log in. It's kind of a workaround. So,
2:23:33when you're in the app, log into it,
2:23:35test your design. What you're looking
2:23:36for is just make some light adjustments
2:23:39like are the buttons clickable? Are they
2:23:40big enough? Is the text legible? One of
2:23:43the big things you might find and a
2:23:44little bonus for this video is that
2:23:45let's say there's a shopping cart here.
2:23:47I haven't rigged up. It should be. Let's
2:23:48go to prototype. Let's go. You when that
2:23:50is clicked, you go to the checkout page.
2:23:53Okay. And the one thing that might
2:23:55happen is that this button is quite
2:23:57small. You know, it's hard to tap or
2:23:59maybe close to the menu. So, what you
2:24:01might learn through your prototyping is
2:24:03I'm going to zoom in. Okay. And I'm
2:24:04going to say actually this needs to be a
2:24:06little bit further away from this. So, I
2:24:07can actually click it with my big
2:24:09finger. The other thing you can do is
2:24:10that um depending on how you've got your
2:24:12icon, you might have picked a different
2:24:13one. It might be working differently.
2:24:15So, let's go through. Let's go to
2:24:16design. Um, let's say I want the
2:24:18clickable area to be bigger, but not the
2:24:20actual icon inside. Okay, I want the
2:24:22icon to stay there. It's the right
2:24:23appropriate size, but I want the area
2:24:25that is active that I can click to be
2:24:27bigger. I've got the move tool. Okay,
2:24:28and in this case, what's happening is
2:24:30it's scaling up everything inside. We're
2:24:32getting a little advanced here, but it's
2:24:34something you might want to do right
2:24:35now. We'll cover it properly later on.
2:24:37Let's double click to go inside of that
2:24:39frame. If you don't have a frame, I'll
2:24:40show you how to do that in a sec. Okay,
2:24:41so this stuff inside of my icon cart,
2:24:45okay, is set to scale. I can just set it
2:24:48to center. Okay, where it says
2:24:50constraints. So that if I click off and
2:24:52click back on the parent uh frame, you
2:24:54can see here, not the vector, the frame
2:24:56that's around the outside. And now look
2:24:57what happens. I can make it bigger, you
2:25:00know, the area around it bigger, but the
2:25:02icon stays the same. So there's more
2:25:04places for your finger to actually touch
2:25:06and click. If you don't have one, let's
2:25:07say I have an icon and it doesn't. I'm
2:25:09going to copy and paste that out. Okay.
2:25:11So let's say you have followed me
2:25:13earlier and you didn't have a frame. You
2:25:14just got the icon sitting there. What
2:25:16you can do is you can right click it and
2:25:17say frame selection. And now you're kind
2:25:19of at where I started. Okay, we're going
2:25:21to go inside. And by default Oh, gone
2:25:24too far inside.
2:25:27Let's go the vector here.
2:25:30Okay, that's a good point. And when I
2:25:32click enough, I get all the little
2:25:33icons. What I want to do really is have
2:25:35the frame selected, correct the vector,
2:25:37and then you'll get the whether it's set
2:25:39to scale or center. Okay, so there you
2:25:42go. Little bonuses for people doing the
2:25:44class projects. You can make the frame
2:25:46bigger but not the things inside. All
2:25:48right, test it out. And when you're
2:25:49finished, what I want you to do is I
2:25:51want you to uh take a photo of you of
2:25:54the frame of your sorry,
2:25:56take a photo of the phone, okay? Just to
2:25:59prove that you've done it and upload the
2:26:01photo of your phone with the um project
2:26:03on it, the wireframe, and upload it to
2:26:05the project section. I can imagine lots
2:26:06of people are like, I don't have a
2:26:07second phone or a buddy or a partner or
2:26:10kid or somebody to take a photo of your
2:26:12phone. Okay, you can just upload a
2:26:14screenshot if you'd like. And once
2:26:15you've done it, what I want you to do is
2:26:17be excited. I don't know. I bet you you
2:26:19probably have the same thing when you
2:26:20get it going on your phone. There's some
2:26:21sort of like magic. Even me, like I've
2:26:23done a million of these. I'm like, when
2:26:25I see it on my phone and start working
2:26:26on it, okay, touching the buttons, I'm
2:26:27like, it's real. It's alive. It's
2:26:30exciting. So, I hope you feel that, too.
2:26:32Um, so get practicing. Prototype it.
2:26:34Make some adjustments. Maybe the fonts
2:26:36aren't the right size. Maybe the buttons
2:26:38aren't clickable. And then upload it to
2:26:40the assignment section, project section
2:26:41even. All right, enjoy. I'll see you in
2:26:43the next video. Hello. Hey, it's time to
2:26:46learn how to do basic animation inside
2:26:48of Figma. Okay, we are going to get this
2:26:50arrow to animate in on our
2:26:51congratulations, your purchase is on its
2:26:53way page. Okay, animation is pretty
2:26:56interesting inside of Figma. It's a
2:26:58little quirky. We're going to learn
2:26:59something called smart animate. Let's
2:27:00jump on in. All right, first up, shift
2:27:02one. Just get everything on the page.
2:27:04Uh, spacebar, click and drag. We are
2:27:06going to make two versions of this
2:27:08confirmation page. We're going to
2:27:09animate between them. So you can copy
2:27:11and paste it. I'm going to hold down my
2:27:12option key on a Mac, alt key on a PC,
2:27:14and drag it out. So I've got two copies
2:27:16of it. Okay. And what I want to do is
2:27:18we're going to animate this arrow. What
2:27:20happens in Figma, it's kind of a little
2:27:22strange, right? Is that basically we're
2:27:24just going to animate between these two
2:27:25pages. And something needs to be
2:27:27different. Uh this arrow is going to be
2:27:29different. We're going to move it over
2:27:30here. Just move it a little bit to the
2:27:32left. And all we do is we say
2:27:34confirmation page. If I go to prototype,
2:27:37um, when this one's prototyped, when we
2:27:39play it and we get to the confirmation
2:27:41page, I want you to then go over here.
2:27:44We'll just leave all the defaults and
2:27:46we'll give it a test. Okay. So, let's go
2:27:49to our little prototype. What are we on?
2:27:51Let's use present. Nope, not use
2:27:54present. Present's fine. Go away. H, I'm
2:27:57going to use a little version so we can
2:27:58all see it. So, we're going to go to
2:27:59preview. Giant phone. Okay. So, I'm
2:28:01going to go to the buy now page and I
2:28:03purchase. And then it goes here. And if
2:28:05I click once, it moves.
2:28:08Kind of works. Okay. So, what we need to
2:28:10do is add the magic. The magic in this
2:28:12case is if I click on confirmation page.
2:28:14Okay. And I click on this uh transition
2:28:16between the two. Instead of using
2:28:18instant, we're going to use the one we
2:28:20ignored before, smart anime. Okay. We're
2:28:22going to leave everything by default and
2:28:24give it the same preview. Let's close
2:28:25this down. I'm going to use shift enter
2:28:27to open up that little preview. It's not
2:28:29shift enter, Dan. It is uh shift space.
2:28:32Shift space. Okay. Okay, I'm going to go
2:28:33to buy now. Go to purchase and click
2:28:35once. And it animated. How very
2:28:39unexciting. Okay, but we got it. We did
2:28:41it. Good work. Your first animation.
2:28:42Let's make it better. Actually, we're
2:28:44going to break it because I bet you
2:28:45you're going to break yours. Now, one of
2:28:47the things I want to do is it didn't
2:28:48move in very far. So, I want it to kind
2:28:50of come off screen, right? So, I'm going
2:28:51to move it over here. You can hold shift
2:28:53so it kind of comes across while you're
2:28:55dragging it in a straight line. Great.
2:28:57So, it's over here. I'm going to preview
2:28:58from this confirmation page. If you
2:29:01click that one first, then hit shift
2:29:03spacebar, it will start here rather than
2:29:05the homepage. If you have nothing
2:29:06selected, it starts from that first
2:29:08frame. But if you have the name of the
2:29:09frame selected, it will start from
2:29:11wherever you have selected. Okay, let's
2:29:12click it once. And it didn't work. Kind
2:29:14of worked, right? I'm going to use my uh
2:29:16back arrow to go back one. Okay, just my
2:29:18arrow keys. Or you can hit reset. I just
2:29:20use my left and right arrows to go
2:29:21forward and back. So back. Click once.
2:29:23Doesn't work. Why doesn't it work? Okay,
2:29:25this happens a lot. If things are fading
2:29:27in, it's broken. So, first thing we're
2:29:29going to do is I'm going to click on the
2:29:31title up here, move it a bit closer. I'm
2:29:33going to hold shift and grab both
2:29:34confirmation pages. Okay. And move them
2:29:37so we got some space. It's really common
2:29:39just to keep the animations a little bit
2:29:41separate. So, you've got some room. This
2:29:42guy over here, what is he doing? If I
2:29:44put him there, okay, hold shift. He's
2:29:47still not going to work. Why is because
2:29:49have a look at the layers. So, I've got
2:29:50my confirmation page. One, two. Okay.
2:29:52And I'm on my layers page. Okay. And I
2:29:55can see my layers panel over here. So
2:29:57file, mobile, wireframe. You can see
2:29:59this confirmation page. And this one, if
2:30:01I twill him up and close them, this guy,
2:30:03line 13, is just hanging out by himself.
2:30:05He's not on any of these frames. So it's
2:30:08playing this page and ignoring this guy.
2:30:10And what it does, it goes, well, he's
2:30:12not here, but he appears here. So he
2:30:14just fades in. So what we need to do is
2:30:16make sure this is on this page. You can
2:30:18do it by dragging it. Watch. You see,
2:30:19now it's inside the confirmation page.
2:30:21Look, he's inside there. But if I drag
2:30:23it out, click it once, hold shift, it
2:30:25pops out. What I can do is just force it
2:30:26in. Which page is it? Let's name these.
2:30:29Double click it. Confirmation one.
2:30:34Confirmation two. Just so that I can
2:30:36know the difference between I want it to
2:30:38be on confirmation page one. So you line
2:30:4113 should be in there. It disappears.
2:30:44It's in there. It's just kind of like
2:30:45hidden because it's clipped into this
2:30:47page. Give it a go. I can kind of see
2:30:48it. I want know where it is there. Okay.
2:30:50So let's give it a preview. Click on
2:30:51this one. Shift space. Let's click it.
2:30:54We did it. It animated in. We're
2:30:56geniuses. Okay, let's close that down.
2:30:58One of the things you can do is if
2:31:00you're doing animation that comes off
2:31:01the page is you can click on this
2:31:02confirmation page. And one of the perks
2:31:04of a frame over a group. Okay, which is
2:31:07this page here is over here. If I go to
2:31:09design, there's an option here. It says
2:31:11clip content. See this one here? Feel
2:31:13like we learned this earlier. Did we?
2:31:14Can't remember. All right, it's been the
2:31:17weekend. Uh, so let's turn that off. And
2:31:20it means that you can actually see it.
2:31:21So you can go actually I want it to be a
2:31:23bit closer or a bit further away or I
2:31:25want to change the stroke size or width.
2:31:27Okay. And when I preview it, you shift
2:31:29spacebar, click again, it still works
2:31:31the same. Okay. It's just not clipped
2:31:33off. Now, it doesn't really matter how
2:31:34you publish this, whether it's clipped
2:31:36or not. Sometimes you want the clipping
2:31:38just to be off while you're working and
2:31:39then turn it back on when you kind of
2:31:41finish the project. Now, another couple
2:31:42of things that might wreck your if yours
2:31:45is still like fading in. You're like,
2:31:46it's still fading in, Dan. Check that
2:31:48it's inside the right frame. So, maybe
2:31:50name them. Okay. The other thing that is
2:31:53important to know is that basically what
2:31:55it's doing is it's saying, "All right, I
2:31:56got these two frames and Dan decided to
2:31:58smart animate between the two." And what
2:32:00it is, it's looking at all of the things
2:32:02in here. If anything moves, it will
2:32:04animate it, which is awesome. But it
2:32:06needs to know what it's talking about.
2:32:07Like, let's say I've got line 13 and
2:32:10I've got line 13 here. If somehow for
2:32:13whatever reason you've copied and pasted
2:32:14them and they've this one's line 14, it
2:32:17won't know what to do. It needs to be
2:32:19the same name. Okay, so 13 and 14's not
2:32:22going to work. Let's give it a go. You
2:32:24It's going to go click and it's going to
2:32:25fade in. You're like, "Oh, it's fading."
2:32:27Fading means broken because it's like,
2:32:29"All right, this thing just appears on
2:32:30this page. I'm just going to like make
2:32:32it appear." Okay, so you just need to
2:32:33make sure that your names are the same.
2:32:36It doesn't matter what they're called as
2:32:37long as they're the same. If it's still
2:32:39not working, what you can do between
2:32:40your two frames is, let's say this one's
2:32:42not working. I'm like, I can't make it
2:32:43work, Dan. Getting rid of it. What I can
2:32:45do is grab this version here, copy it.
2:32:48Click on the frame title and paste it.
2:32:50And you'll see it's pasted line 13, line
2:32:5213, and then animated again. Make sure
2:32:56it doesn't leave the page. Okay, it's a
2:32:59little hard one to see. Can you see if I
2:33:00twill these up? Line 13 has actually
2:33:02come off that page. So, I need to drag
2:33:04it back in. We've learned that.
2:33:05Sometimes that can just solve your
2:33:07problem. Okay, let's give it a go. Click
2:33:09once. The next thing I want to do is uh
2:33:11this clicking once business. Obviously,
2:33:13people aren't going to click after they
2:33:15get to this page. So, we're going to
2:33:16learn another animation technique. Okay.
2:33:18Let's click on confirmation one. Let's
2:33:20make sure we're on prototype. Okay. And
2:33:21what we're going to say is the moment
2:33:22it's on this interaction called uh tap
2:33:25go to confirmation. In this case, it's
2:33:26going to confirm two. Okay. Or you can
2:33:28click on this Y here. It doesn't matter.
2:33:30Okay. So, we don't want it to be on tap.
2:33:32We want this other one. We want another
2:33:34one that says after a delay of how long,
2:33:37we'll just leave it as the default. Then
2:33:39go to confirmation too. It's not going
2:33:40to ask for permission. It's just going
2:33:42to wait for Can you know how many
2:33:43seconds that is? That's right. 088.
2:33:45Okay, let's go. U shift plus. And now,
2:33:48can you see it just went on its own? I'm
2:33:49going to use my arrow keys to go back to
2:33:52the homepage. You can use left and
2:33:54right. I want to find the homepage.
2:33:55Where are we? There we are. And let's go
2:33:57to buy now. Let's purchase it. And wait,
2:34:00wait, wait, wait, wait, wait. Oh, look
2:34:02at that. It did it on its own. Okay,
2:34:04that is called after delay. You can play
2:34:06around with the timing. Okay. Uh, we've
2:34:07got it at 08. We can make it 100
2:34:10milliseconds. So it's basically you
2:34:11can't put in zero. Can you not put in
2:34:12zero? Yeah, you have to put in 1
2:34:14milliseconds. Okay. So we can instantly
2:34:16after 1 millisecond go. The other thing
2:34:18we might look at is you can click and
2:34:20drag these by the way if they're in the
2:34:21way. Often they can end up like this.
2:34:23You just need to click and drag this top
2:34:25part of it to move it up. Let's look at
2:34:27our uh easing. Okay. So we kind of
2:34:29looked at easing. Let's do the one I
2:34:31like the most, which is ease in and out
2:34:34back. Got that kind of like little
2:34:36bounce to it. How fast should it be?
2:34:38Let's make it 1 second and give it a
2:34:40roll. Takes too long. Okay. So, there is
2:34:44a lot of that kind of like changing the
2:34:46duration. Shift plus. Just checking. Oh,
2:34:49far too fast.
2:34:52H. Uh, R for reset. That feels nice.
2:34:56Now, we've only done the movement. You
2:34:57can animate anything. Okay. So, as long
2:34:59as you don't change the name, you can
2:35:00animate anything. So, let's find Let's
2:35:02click on confirmation one. Let's go back
2:35:04to design. Okay. You'll end up toggling
2:35:06between these two a lot. I don't want to
2:35:07get too heavy in the shortcuts. So, if
2:35:09you are like block it out if you're
2:35:10already fill up. Um, but if you're
2:35:11looking for the shortcuts, shift E.
2:35:13Toggles between design and prototype.
2:35:15Design and prototype. You just hold
2:35:17shift on both Mac and PC and just tap E
2:35:19and we'll toggle between them. Okay. So,
2:35:21I want to be on design. Let's clip
2:35:23content so we can see this thing. And
2:35:24I'm going to say let's change the
2:35:27transparency of the stroke. So, we can
2:35:28make it zero. So, it fades in as it
2:35:31comes along. So, Uh, shift space. You
2:35:34see it kind of faded in. Can't really
2:35:35see.
2:35:37But it did.
2:35:39Where are you now? All right, it's gone
2:35:40away. Line 13. There it is. There. Let's
2:35:42turn the appearance back up to
2:35:48100. Okay, we can decide on the
2:35:50triangle. Maybe the triangle is none to
2:35:52start with and grows a triangle. Let's
2:35:54give that a go. I'm going to move it
2:35:55just in a little bit so we can actually
2:35:56see the animations that we're messing
2:35:58with. Reset.
2:36:03Okay. I don't think you can grow that
2:36:04one.
2:36:06Yeah, it kind of grew. There you go. It
2:36:07just couldn't really see it. Can you see
2:36:09it kind of like appears? That's not that
2:36:11fun. Dan,
2:36:14let's change the stroke weight. Try not
2:36:16to click on these. These are called
2:36:18variables. We'll look at them later on.
2:36:19See the little diamonds? They're in a
2:36:21lot of things. Okay, we'll do variables
2:36:23later on. They're pretty hardcore.
2:36:26Trying to avoid them. Let's give this a
2:36:27go. All right.
2:36:30R for refresh. Oh, giant arrow coming
2:36:32in. All right. So, that is it. That's
2:36:34animation. The basics of animation in
2:36:36Figma. Okay, you have two frames.
2:36:38Something's different on both of them.
2:36:40As long as the two things appear on both
2:36:42frames. You can't have it not appear
2:36:44here. Okay, you can't delete it from
2:36:45this frame and just hope it appears over
2:36:47here. It will, but it will just fade in.
2:36:49Okay? So, you need two things the same
2:36:51name on both. And you need to make sure
2:36:53they're actually on the frames you're
2:36:55animating between. So, have a check at
2:36:57these layers here. Close them all down.
2:36:58I find that's the easiest way to kind of
2:37:00see is there anything hanging out here
2:37:01that shouldn't be. Then just make a
2:37:02change between them. Okay. either
2:37:04movement or size or color or anything
2:37:06you like. And the big trick here is to
2:37:07switch to prototype shift E. Okay. Or
2:37:10click the button up here and just make
2:37:11sure this page, okay, you click, hold,
2:37:13and drag. Okay. And you make sure it's
2:37:15animated between the two. And you use
2:37:17smart animate. Okay. And it will smart
2:37:19animate them between them. If you
2:37:20accidentally have two interactions like
2:37:23I just did, okay, what you do is you
2:37:24click on the frame, you say, which one
2:37:26do I want, tap or delay? I want to get
2:37:28rid of this tap. Okay. I want my delay
2:37:30and move to this one here. All right.
2:37:32That is the basics of animation inside
2:37:34of Figma. It is a little clumsy if
2:37:36you're from any other animation tool
2:37:37that has like a timeline. That's just
2:37:39the way it is in Figma. But we know now
2:37:41it's a little clunky. We don't do a lot
2:37:42of animation in this kind of like
2:37:44wireframe stage. Uh but it's fun and I
2:37:47want to introduce it earlier so we can
2:37:48do more complicated stuff later on. All
2:37:50right, that is it. Animation inside of
2:37:52Figma. All right, that was meant to be
2:37:53the end. And I record the intros at the
2:37:55end and then I was recording the intro
2:37:58and mine was broken. I'm like, uh, what
2:38:00do I do? So I've come back to show you.
2:38:02So I'm going to preview from the
2:38:03checkout here. So shift plus and then I
2:38:05had this on that big arrow appeared
2:38:07along. You're like where did that come
2:38:09from? Anybody else have that problem
2:38:11when they're testing? The arrow kind of
2:38:13moves that way. What's happening? All
2:38:15right. And how do we fix it? So we have
2:38:17got an animation between the checkout
2:38:18and the confirmation page. Okay. So it's
2:38:20this little noodle here. Okay. So that
2:38:23button goes to here and it says on tap I
2:38:24want you to slide in. Okay. And I'm
2:38:26using this in and out. What it's doing
2:38:28is it's sliding this way. There was a
2:38:30little animation. So you see the whole
2:38:33page is sliding across. That thing there
2:38:35can be seen. Okay. Cuz I left the under
2:38:38design shift E. Okay. Under design, I
2:38:41left clip contents off. If I turn it off
2:38:43now, it should work. Because I've left
2:38:44that out. Even when I preview it, this
2:38:46can be seen. And because the animation
2:38:48between here and here, okay, is a slide.
2:38:51This whole unit, okay, slides across,
2:38:54okay, goes and we can see it on this
2:38:58transition. So, there's two ways of
2:38:59getting rid of it. This one where I say
2:39:01this page, I'm going to clip it so it's
2:39:04hidden. Let's see if that works. Pretty
2:39:06sure it works. Okay, it worked. The
2:39:09other thing we can do is okay, is this
2:39:13here when it is prototyping between the
2:39:16two. Instead of doing all of that slide
2:39:19in, we can just go instant.
2:39:22There's no visual between these two. It
2:39:25just goes dink and I'm already here. So,
2:39:26that'll work as well, I hope. Okay, you
2:39:30Okay. Either way, it's probably just
2:39:32easier to clip contents after you've
2:39:34finished working on it. You might have
2:39:35had that problem. I had that problem.
2:39:38Now, we're going to do the end. Okay.
2:39:40Final final end. See you in the next
2:39:41video. Oh, no. It's the end. Uh, it
2:39:43doesn't have to be, though. Uh, remember
2:39:45this is just like the first uh first
2:39:47chunk of the course. There's loads more
2:39:49to come in this course. So, if you want
2:39:51to go further uh with UX design and
2:39:53Figma, there'll be a link in the
2:39:55description. and you come join me for
2:39:57the full course. Uh, I hope you're
2:39:59feeling a little bit more like a UX
2:40:01designer. Remember, if you enjoy this
2:40:03video, like and subscribe to the channel
2:40:05and I hope I see you in the full course.
2:40:07Come join me.

About this transcript

This page contains the full transcript of Free Figma UX Design UI Essentials Course by Bring Your Own Laptop, generated from the public captions YouTube serves with the video. The transcript has 37,884 words across 5,000 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.