Hi everyone, my name is Dan Scott... and this is a small extract from my larger
course, called Figma Essentials... loads of value here, but if you do want
to go further with Figma... check out my Figma Essentials course,
there'll be a link in the description... all right, let's get going. Hi everyone, my name is Dan Scott... welcome to Figma Essentials... together, you and me, are going to learn... everything we need to know to get started
as a UX Designer in Figma... we'll use this UI/UX design tool
to create beautiful interfaces... we'll also create some
engaging prototypes... and also, we will look at some of
the real world expectations... of you as a new UX designer. Now this course is aimed at people
who are new to design... new to User eXperience design... even if you are not even that entirely sure
what UX design actually is... don't worry, we're going to
start right at the beginning... and work out our way through
step-by-step. First, we'll describe the brief, and how
to work with a UX persona... then you'll learn how to create
very simple wireframes... from there we learn how to implement
colors and images... properly in your Hi-Fidelity mock-ups... you'll learn the dos and donts for
choosing fonts for web and mobile apps... you'll learn how to create icons, buttons,
and all sorts of UI components... you'll learn all the scary terms... like components, constraints,
and multi dimensional variance... they're all very easy ones,
you get to know... we'll also make our lives easier by using
free UI kits and plug-ins for Figma... to speed up our workflow... we'll build a simple style guide,
ready for colleague or client hand-off... you'll learn how to make both simple
and advanced micro interactions... page transitions, and animations. Before the end of this course you'll have
fully interactive prototypes... ready for user testing... all the way through to collaborating
with other team members... and exporting the right files,
ready for hand-off... to your developer or software engineer... you've got assignments that I set
throughout the course... so that you can practice
and develop your skills... plus you'll have something unique
for your portfolio at the end. All right, it is time
to upgrade yourself... go from Figma zero to Figma Hero... so sign up, and I'll see you in class. Now, the shirt... this shirt made a whole lot of sense... it makes a whole lot of sense later on
when you know Figma a little bit more... but at the moment, I've realized
it's going to cost a little bit... probably just creepy... but it's made now, and, we've going
to have to live with it... so, let's dive into the course,
I'll see you in there. Hello, you made it, congratulations,
welcome to the course... first things first, is, you need to
download the exercise files... there is-- there'll be a link on
this page here, download those... in those exercise files will be the files
we'll use for the course... but also there'll be a shortcut sheet... we won't go to deep into
mad shortcuts here... but there are just some
super useful ones that... you'll need to know by
the end of the course... so print that sheet out, and you can
circle the ones you really like... also you need a version of Figma... so Figma, go to figma.com... either use the browser version, so sign up,
use the browser version... or download the desktop version,
there is absolutely nothing... you know, no difference between the two,
I'm going to use the desktop version... because I'm old and I like
things being on my desktop... for no good reason, because,
they're exactly the same... so it doesn't matter. You'll also know, from only watching
a tiny bit of my video... that I talk fast, I've had lots of coffee,
it's early... I do slow down... but if you find that I speak very fast... or maybe English isn't your first language,
and you find my accent a little tough... there'll be, on all the videos there's like
a little cog, where is it, down there... and you'd be able to click that
and slow me down to a slower version... I sound a little weird, but it's,
it might make it easy for you... and that is it, uh, free version,
paid version... we are going to use the free version
for most of the course... mainly because, it's amazing... it's amazing what Figma
has allowed to be free... versus what is paid... towards the end of the course
I will show you... why you might want to
jump up to the paid... you can get quite far, like a professional
designer using the... free version, but I will show you the perks
for paid later on. Also, Figma is always updating... which is amazing, to me
as a designer... means new features come out all the time... they rejig things to make
it simpler and easier... include more advanced features... it is really painful for me
as an instructor... because basically, I know this, as soon
as I finish recording this course... they're going to go
and shuffle some bits around... so keep an eye out for that... if it's fundamental stuff I'll re-record
the videos, if it's just small stuff... just take a look, often it can
just be a name change... it's in the same place, does the same job,
maybe they've called it something else... so clarify that little bit... also check the comments below... either I'll leave a comment
if it's just a small change... or other students will, as well... so just keep an eye out on that... yeah, for lots of updates,
booh, for lots of updates... all right, let's get on to the next video. All right, let's talk about what Figma
is for, and what it's not for... it is amazing at rapid prototyping
of things like websites and apps... it does do other things,
which we'll cover a little bit... but it is the main tool
of a UX or UI designer... and they roll in creation
of either wireframes... which we'll do in this course... a really quick kind of look and feel
for an app or website... through to kind of like, really,
like it looks exactly like a website... Hi-fidelity mockups of this website,
with interactivity as well... and this kind of leads me to
what it doesn't do. You can make something that looks
very like a website... enough so that you can go out
to testing, and that's probably the... the best bit about Figma
and UX in general is that... we'll create something, and we'll actually
be able to get it in the hands of... the client, the intended audience,
our customers... and they can, it's not going
to be complete... but they'll be able to use it enough
that we can make... some observations, and actually
test some theories about... you know, what the users want... and if things need to be changed, we can
change them really quickly in Figma... and then get them back to there,
like why are they sitting there? So it is about rapid prototyping, quick... you know, changes, and get to a point... where you're like satisfied
with the website or the app... and you're like, "This has gone through
a bit of user testing"... client's happy with it, now, this is
where Figma doesn't do anything else... is just the prototype, it's not going to
code the website for you, or the app... it hands over little pieces to
the developer, to use... CSS, and SVGs, and graphics, and stuff... but not a lot that the developer can use... all end up starting from scratch,
using your mockups... lots of things like spacing, and--
they'll make it look like your app... but that's what Figma doesn't do,
doesn't do the coding side... so what you do is you get it
signed off with the client... and then you either work
with the developer... if you're a developer yourself
you start coding it... or you might start, like... if you're-- you might get into HTML
and CSS, I've got a course on that... if you want to start doing
your own stuff... or you might be using something
like WordPress or Webflow... I've got courses on the horizon
for both of those two, or Wix... or something more drag and drop,
you've been had to build it... based on your Figma mockup that you've--
it's a lot faster to do... then go and build it in either one of
those tools, or code it... that's what it is, rapid prototyping... and what it's not is, you're not going
to have a complete site at the end... that's a question I get asked a lot,
so, next video... actually, I forgot one thing,
don't go away, editor, don't cut it. What else is it getting used for? Figma is getting used a lot for like just
regular old graphic design... mainly in the digital space,
so like social media campaigns... there's some amazing things you'll-- you'll see as you go through the course,
you'll be like... "This would be really handy for doing
Instagram story posts"... or Carousels, or a bunch of different
sizes for ads... it is getting really good at it,
doesn't do very good print stuff... you can put a normal page into it,
you can say, A4 US Letter... so our people are using it as an
alternative for something like maybe... Illustrator, and a bit of Photoshop... Photoshop, still required, but... you'll see, it's made for design websites
and apps... but people are using it for all sorts of
other stuff now, becoming... not a general design tool,
but know that... you will find some people using it
a lot more for things it's not meant to... but does it just perfect... all right, so that's what it is,
that's what it isn't... now this is the end, cut. All right, let's talk about what
UI versus UX is... if you already know, you're allowed
to skip this video, it's okay... and this is not going to be
a very, like detailed... just give you an understanding of like
the differences between the two... because it comes up a lot. So UI design, the simple way,
this is all very simple. The UI, User Interface, versus UX,
the User eXperience... the UI is the way something looks... and the UX is how it works,
how somebody uses it... so often, the way it looks,
how it's used. Now in terms of being a UI designer,
like, UI designer is in charge... like, up until UX became part of my life,
and lot of us, it's kind of new-ish... I delivered UI design,
I design a website... and that was based a lot
on my intuition... like, "Oh, button should be this big,
and should be over here... traditionally things go over
here in the Nav"... so there was a lot of that, and I've give
it to the client, they'd like it, great... but it's a big element missing, the UX,
there was very little testing... I had an idea what would work,
but it was totally an idea... it was like, hypothesis
of how it should work... and the UX part of being
a UX designer is... the taking that kind of UI, that layout... and getting it in the hands of
client, and testing it... that part of it turns you from
just a UI designer into... you know, the beginnings of a UX designer,
is getting it out there... and actually testing that,
did it work, did it do exactly... you know, what I hoped it would do... is the client, when they click this button,
did they go where they expected... or were they surprised? Is the language like, let's say
UI designer designs the button... and the rounded corners, and the beautiful
gradient, and the text in the middle... the UX designer says, "That's great,
let's go and test that," and says... you know, "Is it big enough, can they
click on it, is there enough contrast... is it accessible for people that have--
that are visually impaired... is the hierarchy of buttons,
is this one too big"... because it feels like it should be
doing something else... so a lot of that side of things,
is the UX. Now in all honesty, this course
is based mostly around UI design... because we're learning Figma,
Figma is the creation of these things... the testing side of stuff,
I'll give you a... some insights as we go along about... what are we doing,
different testing phases... but it is broader than what can be
covered in this course... but we'll do UI with a little bit of UX... but Figma basically,
is we're learning software... that was why you signed up, probably... so it doesn't make you instantly
a UX designer... the UX part is the, taking it further than
just moving pixels on the screen, like... giving it out there, getting it tested,
and changing things... and testing things, that's UX. My little example, where I'm
kind of running through at the moment... example, it's yeah, my bank, updated
its website and its app... and it looks beautiful, the UI, amazing,
the UX is terrible... I'm sure it went through some testing,
imagine it went through lots of testing... not right at the end though,
because they're just... just simple things, like... let's say that I'm typing in my password,
hit Enter... Enter, Enter, no, you got
to get to the mouse... and click the Enter button, so I'm like,
why, you know, there's a, in code... it's not hard, that kind of,
can't remember what it's called... where you get to the end,
it will know that... when you press Enter you mean,
this button here... so that's just one thing. Another thing, you go into like
updating a, I want to update a... person in my standing orders,
like a Direct Debit... or, not sure what you
call it in your country... but a regular payment that I'm making... so went to, find how to edit it,
I'm like, "Huh"... have to delete it, because couldn't find
anywhere, now I'm not tech savvy... I know how to use computers, I'm like,
"Couldn’t find it," so I was like... maybe have to delete it,
now I've been doing this a few times... I'm like, "I'm going to email him"... now like, who's going to click the name of
the person to edit it, I'm like, "Huh"... seems simple, go and have a look... and you do, if you click on the name of
the person, it does go in to edit it... but it's missing a couple of things... any sort of indication that
that's possible... underline arrow, big sign, two tip... and the other weird thing about it is,
you know, when your mouse... your mouse is kind of moving along... when you go into something clickable,
changes to a little hand... doesn't do that, you just click over
the arrow, hope for the best... it's like clicking everything... that must be hard to turn that thing off,
somehow it's off... there is a million of one of those
little things, ah, it just come out... but I do have a problem with,
anyway, I'm babbling... and red, why do you bring it in... this feels very ominous, my little colored
like, I just put the color like... you know, I say it all the way through
the course until I get sick of it... but yeah, that's my UX story
at the moment... you'll have them as well, and that's
the kind of thing if you're new to UX... it's keep those ideas open, like... they're terrible, and they're
pain in the butt... but it's kind of language and stuff you're
gathering as a designer... so that when you're working,
you can avoid some of those things... or at least, when it comes back from
testing you're not surprised... like, "Yeah, that thing I hate as well
is in this thing"... so UI, UX, that's my explanation
for the moment... all right, next video. Hi everyone, in this video we're
going to look at what we're making... we are going to start making
some wireframes initially... then we will make some Hi-Fidelity
versions, that look a little prettier... and one's actually pretty messy,
let's look at this one here... see the screens down the bottom... so we're going to work on these... we're going to build Styles components,
all sorts of goodness... let's have a look at one
of the mock-up versions. So yeah, this is going
to be what we make... we'll design it,
we'll add some interactivity... we'll make a form, people can purchase
stuff, it's going to follow our brief... both our persona and our Task Flow... so let's talk about
what those things are. So we are going to focus on the software
Figma, but I will throw in some... kind of general UX design advice
for people that are quite new... so what are we working to? We've got
a company called Scott Headphones... that wants us to design a few pages
for this Task Flow... the Task Flow here in this case is,
they want a Home page that... goes to some features
about the product... those that product can
be added to a Checkout... and then once the credit card details
are filled in, Confirmation... so that's what they've
asked us to build... they've given us our persona... so let's quickly talk about
what our persona is. So this is just a bare bones
kind of persona... they can run to one whole page,
two whole pages... and this is going to be enough
for this particular course... what is it for?
So I'll read it out, you can read... but our ideal customer
is a woman named Sarah... Sarah's in her 20s,
she has a Bachelor's degree... she works for herself,
she's married, with kids... and she lives in Ireland, she has never
bought anything like this before... and some of her concerns
is that she is... very Eco-environmentally
and waist conscious. So why do we have a persona? It's to allow us to be specific... not specifically to Sarah herself... Sarah is representative of a,
a type of person... a group of people that are going
to be using this website... and it helps me distance myself... otherwise I end up building things
that I would like... based on my own history,
in the way I know the product. So this gives me boundaries,
otherwise you end up... either designing for yourself,
or for everybody, and then nobody wins... because you end up with
this generic thing... that doesn't actually work
for the target audience... so our persona helps us
define that audience... it also helps when you are dealing with
the client or stakeholders as well... because you can detach your own
kind of personal preferences... like I want Brush Script,
they want Times New Roman... but what does Sarah like?
We need to have empathy for her... and her situation,
and her experience with the product... and it does, it helps with those
conversations to be separated... from what Dan likes as the designer... what the client likes,
is her, or himself... and let's talk about
what's right for Sarah... and that's through to like
color, fonts... language, types of imagery,
organization of information... like what features should be
shown earlier, based on... you know, some of the preferences she has,
and some of the knowledge of the product. Now this is just like a super quick
overview of persona, it's a... we're kind of learning UX design
here in Figma... a UX researcher will
spend a lot more time... and potentially produce, you know,
a lot more documentation around... and understand Sarah a lot more
than kind of what we've done here... so I guess it's a kind of a broad
overview, if you're new... and if you are new, my advice to you
is to spend some time... now, or after this course,
researching personas, what they’re for... so to get a better understanding... just know that this is a very
simplified version of it... but good for what we
need for this course. Now Task Flow,
if you haven't heard of it before... Task Flow here, we've been given... instead of designing all
of the mobile website... we've been asked to design a certain
kind of important critical feature... so we have to design this Home page,
it shows the products... all the product features,
a Checkout page and a Confirmation page... so this is a nice simple Task Flow,
they can be a bit more complicated... they can be less complicated,
might be like... you know, Task Flows could
include things like... how, you know, how does a person cancel
this product, what is the process there... you might be designing
the cancellation process... maybe it's the sign up process,
maybe it's how to change your password... how to download
or upload a document... it might be a specific thing
that needs to be done... on your particular app or website... so let's consider it a Task Flow... and also, actually, let's throw in
this other term, kind of his buddy. So Task Flow versus user flows
comes up quite a bit... and there's this great article here
by Erica Herrano... I'll put a link on the screen here... and after this video
or after this course... do spend a bit more time
understanding these... but I'll give you the brief rundown... so basically Task Flow,
let's have a look... they've got the pancake Task Flow... so I'm going to look at this,
finding a recipe version... very simple, kind of like what
we're doing in our course... Home Page search for
pancakes search results... find the super banana pancake recipe,
simple Task Flow... it's step-by-step, it's sequential,
kind of linear... whereas a Task Flow is a lot more
complex, let's have a look at this one. So this one here, can you see... we end up with... it's the same kind of process,
so you start at the Home page... and you end up with
super banana pancake... but there's a lot more
ways of getting there... there's more than one option,
which we know is always the case... like this option is, like the big one
here, the first one is... are they going to use
the Search bar at all... they'll task low up above, said
assumed, using the Search option... but there is going to be-- your persona might not be
a search bar kind of person... and they're going to go this way, so no,
they're not going to use the Search bar... so then we're going to have
to build out and mock up... the browsing the categories,
and there's a breakfast category... then there's a breakfast page... and they're finding pancakes
within that breakfast page... and then they click on the recipe
that they want... and they've ended up
back at the same place... but it's a different
way of getting there... there is, you can see the key up here,
there's decision nodes... they're different shapes for different
actions, these are our pages... these are interactions between
the user and the interface... and these are decisions,
they've got the start and stop there. So user flows are more complex,
show different options... so you've got to make sure that you
are designing for the right thing... if you're designing a user flow
it's going to have more to it... and a bigger job, whereas a Task Flow
can be quite a simple bound read option. Now you will have Task Flows
within this user flow... can you still see our Home page
search results... banana is still there, it's just kind of
baked into this more complex flex... or different pathway that
the user might follow... a user flow will help you find more things,
like any sort of dead ends... or where people get stuck in a loop,
or don't know where to go anymore... so yeah, that's the brief
user flow versus Task Flow. Another thing to mention is that... we've been asked to design a mobile
website version of this, not an app... so an app, you just have
the one mobile size screen... because it's a mobile website... it means you're probably
going to have to design out... not only the mobile version but maybe
a tablet and a desktop version as well... so that can often catch you out
when you're new and you're like... does somebody ask you to
design a desktop website... you're going to have to... the developer is going
to want to see what... you know, how the site breaks down
to a mobile version... or up into a desktop version,
so take that into account... but our focus here is
the mobile version. Lastly, this is a pretty
bare bones in terms of... you know, we've got a persona,
we've got a company name and a Task Flow... and often a brief can be
a lot bigger than this... like designing a whole website... and sometimes you can get
a lot of details around it. So for me as a designer, what would
be hard with this particular one... is how much do I know about Scott
headphones, very little at this stage... I would like to see,
I'd like to talk to them... or I have my Product Manager
talk to them... or you know, whoever is in charge,
talk to them about what they're about... what are their values,
what is their mission... to help me kind of help
with this persona... to kind of build another level on there... and sometimes you won't get that
information, and sometimes you will. If you get given something
from a bigger company... they're probably going to have
values and mission statement... so you can go off and find that,
and add that to your kind of tool set... when you are designing
this thing to have... better conversations
with the stakeholders... when you are referencing
what you're doing... versus where they're
going as a company... you're going to get jobs where there is
no values, and there is no mission... and they haven't really thought about it,
and you're going to have to... do your best with what you've got,
and as you get more experienced... push back for those types of things... it's probably conversations that
I want to have more and more... the more experienced I get... like not just a persona but like,
why are we doing this... where is the direction we're going,
who am I helping, why are we helping... to really influence my design work,
but anyway... this is a good starting point
for this course... let's let's move on. Hi everyone, it is time for
your very first bit of home-- we're not going to call it homework,
we're going to call it class projects... they're here to-- you can ignore them,
you totally can... but it will really help you solidify
what we've learned, and my goal is... so that you can create
something through this course... that is unique from the course
material that I'm making... that is great for
your own portfolio... and the first one is to
create your own Brief... so we saw in the last video that
I made a Brief, where is my Brief? So that's my one,
what I want you to do is... go to this website that
we've just created here... so randomprojectgenerator.com ... I want you to enter your last name... or your pet's name... or a friend's last name,
somebody's name... for the company,
and enter your location... Manurewa, it was where I was born,
you can put in... you know, Ireland as a country... if you're in a big country put in
your state or town, whatever it is... and then click
'Generate My Project'... make sure we're on
the UX/UI tab there... and click 'Generate My Project', and you
should get something unique for you. So I've got Shadow Surfboards,
it's kind of cool... and so this gets
randomly generated... do not hit Retry,
the red button is red... I just want you to pick the first one
you got, even if you're like, "Hmm"... some of the more tricky objects... tricky personas is... one of those things that will really
help build you as a designer... don't hit it... and yeah, have a little read through,
so you're going to get something unique... and it's going to be unique in some ways,
as in the company name and the product... but the actual thing we'll build together
will all be the same kind of structure... so we'll follow the same Task Flow... you're going to use Home page, Product
features, Checkout, and Confirmation... whatever the product is... and it just means though that when
you do start following along..... we're still going to draw a button,
and it's still going to say Learn More... but you're going to be using colors
that are good for your persona... and when I say bring in an image... instead of bringing in headphones
you're going to bring in... surfboards or whatever
your product is... you're still going to have
an image in a circle... so they're going to have
the same structure... but at least at the end you're
going to have something... kind of unique for
your own portfolio... plus it's going to get you
thinking about your own persona... and how you might kind of design
for them, get the idea? So follow along in this course,
but using your own company name... which I'll get you to make
a little bit later on... in picking your own images
and colors for that brand. So once you've done it you
either take a screenshot of it... or copy it to clipboard,
or download it as a PNG... and just store it away on
your computer or your phone... ready for later in the course... we're going to put them together on a kind
of a brief and Task Flow page later on. Another thing I want you to do, so we've
got our kind of company name and persona... so you've downloaded it,
copied it to a clipboard... something, you've got it somewhere,
stored away... and let's bring in the Task Flow as well,
because we're all using the same one... so it's going to allow me to show
you something strange, weird... I don't know, interesting for Figma... Figma really wants everything
to be in the cloud, online... so go back to your
kind of Home page... or if you're on a PC go to the little
Figma icon, and go to the one that says... it's about here, it says, go to files,
or something similar... be on your drafts,
and if you want to import a Figma file... rather than it being shared with you,
this is a little icon up here, Import... look for that icon, it has moved
around in the past, give it a click... and in your Exercise Files is
one called taskflow.fig... load that in there,
and we'll use that later on as well... you can open it, have a look... basically it is just... our Task Flow... and we'll copy and paste that,
and combine it later in the course... but you've got your Task Flow,
you have got your own brief... or at least persona and name,
and you're ready to carry on... so go do that as homework,
and I will see you in the next video. Hi everyone, in this video we're
going to talk about the difference... between wireframes and Hi-Fidelity... well, it's pretty easy, you can see... wireframes are pretty budget,
Hi-Fidelity mock-ups look really nice... and they'll call them Hi-Fi, Lo-Fi,
generally they'll call them wireframes... and Hi-Fi is High Fidelity... this one's going to be really
quick and easy to make and test... and do not try and skip
if you're new to UX... skipping the wireframe section of your
kind of design process, at your peril... you can probably knock up
a wireframe in a few minutes... always Hi-Fidelity,
you can end up kind of like... playing with the tracking,
and leading for hours and hours... and you will not get a better test out
of your potential kind of audience... you know, we're being assigned
a Task Flow... we can really easily create a wireframe
and test that Task Flow even on the app... I'll show you how to do that, it's like,
on a phone or on a website... super quick, super easy,
and no distracting... like, "Oh, is it the right image... is that the right font,
I'm not sure about the colors"... you're talking about the Task Flow... like the actual mechanics of
how this is built underneath... and we can test it quickly
with wireframes. Wireframes don't have to look like this,
that's my wireframe. Another wireframe that I downloaded,
a lot prettier... buttons, got color in them... pick one color only, gray and a color
if you want, or stick to gray... you want to take away the design elements
here, and you spending time doing it... or at least, you know, decline going... "Oh, I don't like pink," or,
"This blue's not the right blue"... you want to take all of that
out of the equation... when you're designing wireframes... keep it simple,
pick a boring font and a boring color... Another wireframe, slightly nicer... yeah, somebody spent some time on
lots of kind of headings and stuff... and yeah, you can,
there's no reason you can't take your... you know, wireframes further
than what we do in this course... a really simple one,
that's kind of removed all the text... another sketchy one,
ooh, kind of sketchy... I think that's too close
to Comic Sans for me... but I like the sketchy lines
around the outside... so they're all Lo-Fi wireframes. Hi-Fi, it's in the same document,
this one looks a lot prettier though... this one here, another Hi-Fi, a lot more
time and effort going into this one... but for testing you only need the basics... so that's why we're doing wireframes... and you have to do it because that's
the beginning of the course... we're going to learn lots
about how to use Figma... building the wireframes before we start... building our super beautiful things
a little bit later in the course... all right, let's actually get started
with Figma and do something. So let's make our first design file... so it can be a little confusing
for this first screen... yours is going to look different from mine
because they change this quite often... if you have nothing like mine you might
go up to the top left hand here... and click on the little drop down... if you're somewhere else you might have
to click on the Home button first... and then this little drop down... and what you're looking to do
is to click on your name... might be a bit blurry here because
it's got my email addresses as well... but click on your name,
not Community, click here... and you should get to something
resembling my screen. What we want to do is a new design file
that only appeared the other day... so what I've normally done in the past... is I go to-- we're going to
create drafts... and it's this little +,
it's kind of next to it... so, either way we're
making a new design file and there we go. All right, if you're brand new
I've kind of reset my Figma... so all these little pop-ups... you can show stuff, I'm here to show you,
so I'm going to cancel that... you end up with this big nothing screen... so we've got our design file,
now we need to introduce frames... frames of these guys here, this little
icon here, third one in, click on it... and you can draw out any size frame,
think of a frame as a page... so if we're drawing an app, we're
going to draw something kind of like... oh, go back to this tool here, draw out
something that looks like an app... you can have multiple frames,
all sorts of different sizes... desktop one, tablet one,
so frames have many uses... but at this early stage of the course... think of them as a page or an artboard,
if you're from Adobe land... and what we need to do is delete them
because those are random sizes... click anywhere in the inside of them,
hit 'Del', click them, delete them... all right, so go to your Frame tool... and actually, let's be a little bit more
specific with our sizes... over here you'll have
some pre-made sizes... you are going to be in the future,
so you might be at iPhone 52... I'm going to use iPhone 8, it's a nice
generic size for both Android and Apple... some of these big ones get
a bit big and strange sized. Now the goal here is to pick
a size that is generic... we're not going to design every
different iPhone in different size... we're going to design something close
enough to the general purpose phone... and our developer will build something
that is a bit more responsive... and will adjust for the kind of
small changes in different pixels. So pick a phone size
that is quite generic... it's easiest just to Google,
like most common phone size - and you will get something
- or most common desktop size... and you'll get something in here,
and pick it... if you're designing a watch, if you're
doing kind of just regular old... old school paper, the wood stuff... there's all sorts of things in here,
so yours will be different. Now I'm going to start with the phone,
and I'm going to start with iPhone 8... even though it's really old,
I don't know why it's still in here... hey, it is, but it's a good generic size... 375 pixels, I like... you can adjust afterwards,
here's your frame... you can say, actually,
the new size is not even listed there... I'm going to use 400
and just type over the top... I'm going to undo that because
iPhone 8 is perfect for what I need... and again if you're watching in
the future, and there's no like iPhone 8... you can type in this, 375667
to get the same dimensions... but hey, go with whatever
is common for you right now. The other thing I tend to do is
I try and, at the meeting figure out... what kind of phone my client has... because they're going to be potentially
testing it on their phone... so I want to make sure,
like if they've got some sort of phone... I might use that just so that the mock-up
works really great on their phone. So we're going to end up with
naming loads of these frames... because iPhone 8, 1, 2, 3, 4, 5,
6, 7, 8 is not going to help us... so we're going to double click
on the word up here... or you can double click over here
in your Layers panel... if you can't see the layers
you might be on Assets... double click it, either one,
and let's call this one... remember our Task Flow. we've got,
we're going to have our Marketing page... we'll call it the Home page,
Home page/Marketing page... we want another one,
so you can go back to your 'Frame' tool... click on 'iPhone 8', again,
you'll get another one... and just keep going the way through... we're not going to do huge amounts
of shortcuts in this course... but we're going to have to learn a few. The first one's going to be space bar,
so hold down 'space bar'... it's pretty common in lots of design
programs, click, hold, and drag... and I'm going to name it in this one... so remember, our Task Flow is
Marketing page, then Product Details... another shortcut that we use quite a lot... is you can just copy and paste these
frames, so just click the name... 'Command C' on a Mac,
or 'Ctrl C' on a PC, then 'V'... so 'Command V', we've got another one,
'Ctrl V' on a PC, up to you... I say no shortcuts and then
I start with lots of shortcuts... let's put in our four pages,
so our Task Flow said... we're going to do that, Product Details,
what else is there? So Checkout... copy, paste, space bar, click and drag... we're going to do our Confirmation. So in the same document there's
no reason why you can't... then go, actually,
now I want my desktop version... so I'm going to click on 'Frame',
I'm going to say 'Tablet'... and I'm going to say, we're going to
be designing for the iPad Pro 12 there... because that's the one I own... and over here, landscape, portrait,
space bar across, landscape, portrait... you can remove them,
I'm going to click the name... drag the name, space bar around,
drag the name around... you might say copy, paste,
paste, and do the same thing... we're going to have Home page... Product Details,
same with like the desktop versions... I'm just going fast here because we're
going to delete them, you don't need to... maybe practice playing around with it... if you, see this one's iPad Pro
at the moment... you can click on this frame
and say that actually, now you are... a normal kind of standard desktop,
that's a really good desktop size... really common and generic... now zooming in and out,
'Command' on a Mac, 'Ctrl' on a PC... and just hit the plus and minus keys. There's a million different ways of
doing lots of things here in Figma... I'm going to give you one way that I think
is probably the easiest at your level... or just the generic best way... if you do find another way,
and you're horrified... I'm not using the hold option, hold
'Command' key down, and use scroll wheel... that's what I can do, to zoom in and out,
you can do that, that's fine. What I want you to do is,
for this course is... I'm going to select all of these,
and I'm just using this tool... it defaults to it every time, so you
don't really need to pick it that much... I'm just going to delete it, this is where
I want you to be at the end of this... if you end up in the middle of nowhere,
I zoomed in into the middle of nowhere... I'm going to zoom out, use my space bar,
get right in the middle and then zoom in. So this is what I want you to get to,
I want just... four boring old frames,
and I want you to name them all... and the last thing I want to show you... kind of kicking off this,
getting used to Figma,... is naming your file... just so you know, you're going to
end up with lots of untitled documents... it just happens... I don't know, this program loves
untitled documents. So we're going to be really specific
and actually name them... if we click off in the background here,
you see, it appears up there... if you've got something selected
it goes away... have nothing selected,
click on no man's land... and you can click up here,
and you can say, give it a name... and you've already got your brief, right? So mine is Scott, yours is going
to be something different... but we're all going to call ours 'Ecom V1',
so you pick your... the name of your company, and put
Ecom V1, our eCommerce version one... so V1, just something,
a, b, c, 1, 2, 3, it doesn't matter... as long as you're not like a Final person,
Final 1, Final Revisited, Final-Final... if you're laughing, it's,
you know what I'm talking about... I'm talking to you,
give it some version numbers... there are some sweet features later on... for like versioning within the document,
but that's later on. Another thing is, if you have got
a bunch of untitled, you can-- let's go back to,
I want to explore this little house... or go back to, yeah,
go back to the little house... remember, make sure you're at your
little name here, and not Community... and what you'll notice is,
look, there he is down there... Ecom 1, if you've got lots of untitled
already, I've planned mine out... you can right click them and go
to 'Rename', and just do it there... or open them up and do
what we just did... back to this tab, back to 'Home',
keep practicing that... Home base, into our work,
kind of like a browser. All right, that is our basic setup,
these are frames... the whole thing is called a design file... frames have other sneaky settings, that
we'll talk about later in the course... but for the moment consider
them pages or artboards... but they call them frames,
onwards to the next video. Hi everyone, we're actually going to
start making things in Figma now... and what I'm going to do over
the next couple of videos... is I'm going to introduce
things like Type in this one... and the next one's going to be like
circles, and buttons, and colors... and just the stuff that we need
to get going, we're not going to-- I'm just going to touch on them,
and throughout the course... we'll get deeper and deeper into
them rather than trying to like... click every button to do
with Type in this video... we're going to get all the basics in... and when appropriate throughout the course,
we'll dive a bit deeper into them... so let's get started. In this video we're going to look at Type,
and the various quirks in Figma... all right, so let's start off with
the Type tool, it's this letter T here... if you hover above stuff,
can you see, it says text... and the shortcut is T, on my keyboard,
so I can tap 'T' on my keyboard... I'm not going to go through
all the shortcuts... but if there's one that you're
using quite a lot, hover above it... and it should tell you what it is,
here, C for adding a comment. All right, so we've got two kinds
of text boxes, you click once... and you can type forever... that is this one here,
it is called Auto Width box... because I know that off by heart... and the other type of box you're going
to create is a click and drag box... so grab the Type tool,
click and drag it out... instead of clicking once,
click and drag it... we get this option here which is
the fixed size box... and this one is, just means that when
I get to the end, it will break... and we'll use both of these in this course,
especially for this wireframe... so I'm going to undo, if you don't know,
there's Edit, Undo... if you're on the browser version
it is in here, Edit, Undo... you'll see the shortcut
for it there, undo, redo. So we're going to do two things,
we're going to do Auto Width... so Type tool, click once,
and just type in your brand name... so mine is Scott Headphones... when you finish you can just kind of like
click out in this no man's land... and you can move it around, and stuff... grab the Type tool again, and let's
do a box about this sort of size... and we're going to type in
our marketing missions... so just type in something, like... "This is our marketing message"... you've got to be at this stage,
with things-- it depends on who
you're working for... it's best to keep
everything very generic... try not to use language, you know,
marketing speak here... because you might send off to testing,
and instead of people testing the flow... they might end up testing, you know,
coming back with spelling mistakes, or... it might be controversy
about the marketing message... "That's not right,
let's get it to copywriting." So at the moment we're just going to
keep everything as simple as we can... to take out any sort of variables for our
testing, just so that we're focused... now you can switch these later on... let's say that this one here, we want
to actually make it that auto width... so we can click it here, same with
this one, we can make it a fixed box... and the difference now is,
watch this, when I start typing... kind of blows out of the box,
and it's got a fixed width. So you can change them later on,
I'm going to hit 'undo' couple of times... I'm using my shortcut,
'Command Z' on a Mac, 'Ctrl Z' on a PC... to get back to-- undo's aren't as consistent, as you
would imagine from other programs... undos, can you see, the undo didn't put
my rectangle back to the big size... it's undoing my Type,
but it's not doing that big rectangle... this is pretty common throughout Figma... sometimes you can, like draw an arrow... change the arrow head, hit undo,
and that leaves the arrowhead there... this may change over time, but it's
just one of those quirks about Figma. Sometimes if you hit undo it decides
not to always do what you ask... does bits of it,
and so what I've got is... I've got it selected
with my Selection tool... I've made sure it's a kind of fixed size... I'm going to drag it out
so it's a bit bigger... because what I'd like it to do is,
I'm going to play around with... just the basics here,
and let's look at font size... the basics over here, not going to cover
them all because you know how to go... font size is a little drop down,
look at that... go to something nice and big... you might have to select your text first,
so double click it... highlight it, and say over here,
I'm going to make it nice and big... and because it's a fixed box it's going
to kind of break on the sides here... left aligned, centered,
you know all that sort of stuff. One thing I will show you is that, let's
say things, if you hover above them... that little icon there is the line height,
but you can click and drag them... any of the icons, so I'm going to
undo that, undo again, there it goes... if you see the little icon,
so over here, not draggable... over here, on any of these little icons,
you can click, hold, and drag them. So I tend to do this quite
a lot when I'm working... and you'll see me
throughout the course... dragging line height, and tracking,
letter spacing, and that sort of stuff... so that's one little trick,
the other one I do quite a bit is... let's say this is not draggable,
I wish it was... but if you click in here, and,
see my little cursor flashing... if I hit the arrow key on my keyboard,
just the plain old up, down, left, right use the up and the down, if you
hold Shift it goes up in big chunks... in 10s, units of 10s... so that's true of like every box in here... if I want the width to be a bit wider,
up and down... or hold Shift, go up in big chunks... I'm making the width of this
text box bigger, undo... undo, undo, wrecking my boxes... but for the fonts I use it quite a bit,
just kind of going up and down... I'm looking at my desktop,
I'm not really looking over here... I'm just kind of checking, is this
a good font size, not a good font size... Now when it comes to fonts here... there's a couple of things,
we are picking font sizes now... you've got to really be at 100%... at the moment we're at 86,
you might be at 100... but if you're picking font size
you're like, "Oh, that's too small"... you've got to try and pick
a font size at 100%... you don't want to be trying to pick
a font size when you zoom right out... because you can make it too big... and this, because this is going
to be on a mobile device... it's a mobile website, it's not an app... but it's only going to be viewed through
a mobile website at this kind of... you know, ratio, this height... it's best to be actually
picking font sizes on your phone... I'll show you a little bit later
in the course not too far... we can actually preview
everything on a device... so don't be spending
too much time on... deciding, is it 12, should it be 16, 14?... actually, get it onto the device
and start looking. All right, the last thing
I want to share with you... when you are kind of at
this font picking stage... especially for a wireframe is I want you
to pick a nought font... a font that has zero character,
I feel bad because this is Roboto... sorry, Roboto,
you have zero character... and I don't want, you know,
let's not go all Brush Script... or even if it's a beautiful font
and it's exciting... we want really plain fonts here,
because when we do do our testing... we want feedback, not on like,
"Hey, I don't like that font"... or, "That's not communicating right,"
we don't want to... you know, bring that into the conversation,
we want to keep it all separate... and just have it very, very simple... it'd be really common to use something like
Roboto or Open Sans, let's have a look... Roboto, Open Sans, what's another one? Source Sans, Source... you can tell, it means, these guys are
not the guys you invite to the party... they've got no,
they've got little personality... they're clear and they are professional... and great for a wireframe,
but they're no Brush Script... so whatever you decide,
pick one... we're going to use Roboto for this,
because it's... the most generic of them all... plus it has a lot of weights that
you can play around with often... if you don't have Roboto you can
find it online, download it... it is, yeah, it is pretty common
around the place, and it is free... you can use Arial or Calibri,
or whatever you want to use... actually you're not allowed to use Arial
or Calibri, it's too Microsoft-ey. All right, so we've picked
a nought font... we're going to throw in a few
different things for our mock-up... so we've got our--
for our logo as well... we're just going to
keep it super simple... even if you have,
if your company already has a brand... it's probably appropriate to throw it in,
in black and white, just keep it simple... because the brand isn't being
developed yet for this company... we're just going to
keep it super simple. I'm going to play around
with the fonts. Now this is where I break
all my own rules... like, "Hey, don't pick a font that
has character, stay away from..." and then you can't help yourself, you're
like, "Man, that leading's really big"... if you want leading to go back to 0,
just delete it and hit 'Enter'... and it goes back to Auto, and even then
you're like, "Huh," I'm just going to... oh, wrong one, this one here, just tuck it
over a little bit, I can't help myself... yeah, do as I say, don't do as I do... don't be playing around with
letter spacing and stuff... and making it, your wireframe looks good,
making your wireframe look really good... it's hard to stop that,
you can do a little bit of design. So we need a couple of things,
we're going to keep that... we're going to copy and paste,
and use this again, wow, that went weird... and when you do copy and paste,
did you notice that... so there's only one
of them there now... if I copy and paste in Figma
it goes back over the top... so there's two of them right over the top,
so that's, a weirdness, but hey, it works. We're going to have a Buy Now button... "Buy Now"... Now I end up duplicating,
instead of copying and pasting... you may or may not do this... on a Mac you hold down the 'Option' key,
you see a little arrow... it's a little, that arrow there... on a PC it is your 'Option' key, so if
you do that before you start dragging... so Selection tool, hold down that key,
'Option', or 'Alt'... drag it out, and you get a second one. Figma is really good at lining things up,
can you see, oh, so handy... I've got a Buy Now and a Learn More. We are going to go centered
for that one... I need another one up here,
that's going to be my Product Shot... I think that's all the text we're going
to do for this particular mock-up. All right, so we will go into a little
bit more text detail later on... but see this little dotted line down here,
this is where you get into the... it's pretty amazing how deep it does go,
if you're a designer who loves a bit of-- loves a bit of ligatures and... all sorts of amazing things, you can see,
alignment, not that exciting... decoration, underline,
strike throughs, nothing. So there's a lot,
bullet points are in here... you can start doing uppercase,
lowercase, I won't cover them all... we will look at little bits
throughout the course... but here's all the, if you really want to
get into stylistic sets, man, it gets deep. So it is, most of it's just sitting here,
in your kind of right menu... they call it the Right panel, sometimes
they call it the Properties Inspector... this thing here, on the right,
you can get most of it just here... this little dotted line
gets you a bunch more. All right, we've actually made something,
kind of, a bunch of boring text... let's get into the next video, make some,
uh, boring rectangles and buttons... I'll see you in the next video. Hi everyone, this video we're
going to draw some rectangles... and some circles,
and some rounded corners... very exciting, let's jump in... all right, let's first of all put in
our kind of Product Shot... we're going to put in
a placeholder image for that... I'm going to use my Selection tool,
just click and drag over a bunch of them... and then I can drag it down,
so I've got a bit of space... let's grab the 'Rectangle' tool,
it's one of those ones... that you'll probably
learn the shortcut for... they're all hiding in here, see, rectangle,
lines, all the kind of basic shapes. So 'R's for the Rectangle tool,
which makes sense... so I'm going to click, hold, and drag
it out, and you get the big gray box... and you'll notice, our text disappeared... so this brings us to layering... so over here, if you can't see it,
you might be on Assets, go to 'Layers'... you'll see, there's my Home page frame... inside of that, all these different things,
all the different texts we've added... now we've got a rectangle
but it's on top... so we can do a couple things,
right click, say 'Send to Back' please... and it's just that shortcut, you'll learn
that one quite a bit as well... learn the different shortcuts,
at your level... you might be ready for shortcuts, you
might be not, you might be freaking out... so just right click and say,
actually, 'Send to Back'... or I want you to practice,
I've undone that... can you see here, I can drag this, kind
of more like Photoshop, I'm holding it... holding it, holding it, dragging it,
now it's at the bottom of all those guys... and I can see it, easy. I'm going to undo it,
and show you just one more painful way... mainly because there is a ton of ways
of doing everything in Figma... and I'm going to show you the way that
I think makes most sense for your level... and what's really common and useful... but if you find a different way,
and you're like... "Hey, why didn't he show us
that way, that's heaps better"... if you find it , and you like it,
you can do it... but let's say this one here,
see this little Figma menu here... if you're on a Mac you've got
this top bit along the top here... which is exactly the same as Edit... where is it?
Arrange, you can see how... no, I don't want Arrange, Object,
there it is there... you can see how much I use
this menu, not very often. So you can, on a Mac, you'll see these on
the top, and they will correspond, see... so File, there's File,
Edit, there's edit... So often, I use these ones
along the top here... but I know, if you're using
the browser version... these aren't there,
on a PC, these aren't there... these are exactly the same... so I'll try to remember
through this course... that I'm going to go to 'Object',
send it backwards... but you might find in this course
that Dan's going up... to arrange up the top here, and you're
like, "Hey, I don't have that"... there it is there, look, so I'm going
to go, 'Object', 'Send to Back'... yeah, loads of ways of
doing the same thing. Let's kind of get that
in the middle there... you'll notice, Figma's just naturally
wanting to go to the center of things... center of boxes, center of artboards... and just drag it around,
you don't have to do a lot... there are the full-on Arrranges along
the top here, kind of Arrange Center... Arrange to the left, but often just
dragging it around does perfectly well. All right, let's do our buttons
down the bottom here... so I'm going to zoom in, 'Command +',
or 'Ctrl +' on a PC... and I'll hold my 'space bar' key down,
and click and drag... okay, 'R' for the Rectangle tool,
or just go up there... drag it around,
we know that it is on top... you can drag it over here,
what's the shortcut, it's a test... what's the shortcut to go
all the way to the back? It's that square bracket, '[',
next to P on your keyboard... there it is, down, up,
the other one, down, up, down. So I've got that button, I'm going to hold
down 'Option' key, and drag another one... you might have to resize this... I want to move on to
rounded corners... because when I say do not, whatever
you do, don't design this thing... it's hard, because you're like... "I want rounded corners,
you're not the boss of me, Dan"... I'm going to make some
little design choices... so with the Rectangle selected... you might notice these little dots,
if you don't see these little dots... if I zoom right out, minus, '-',
see, they go away... so those little dots in the corners
help with rounded corners... if you can't see them just keep
zooming in, look, still can't see them... yeah, they're there... zoom out, there's a level,
you look there, they're not there... zoom one more in,
I can grab them and drag them... and you're like, there you go,
nice rounded corners. You can do it, I'm going to go
zoom all the way out to 100%... the shortcut is, where is it... so this is the long way, 100%, see this,
Shift, that little arrow key is Shift... I was like, what is that one,
especially on a Mac, I'm like... "What the heck is that guy?" have to look at my keyboard, luckily it's
written on it, you think I'd know that. So 'Shift 0' on the top there,
goes to 100%... because that's probably a better place
to be designing rounded corners... because you're like,
that's the way it's going to look. So if I'm doing it here,
I can actually just do it here... in my kind of Property Inspector here... this Right panel, I can say,
actually, let's try it at... using my arrow keys, remember,
the sweet shortcut, up one... oh, how's it, look up another one... smashing it up, down... so I'm going to just put in
some rounded corners. It's handy because you can get
consistency, select this other one, go 5... click on this one, they're all going to
have five rounded corners, look at that... because we are doing rounded corners,
it's not appropriate right now... but if I click on this,
zoom in enough so I can see this radius... you can actually hold down the 'Option'
key on a Mac, 'Alt' key on a PC... and actually just click one of them,
and go like that... undo it, because we don't
need it right now... but you probably
had that question... like, "Can I do one by itself?"
You can... just hold down the 'Option' key
on a Mac, 'Alt' key on a PC... and click it and drag it. Now before we go let's add our
little circle down the bottom here... so the Circle tool,
the ellipse is the O... I'm going to drag it out... another thing that I haven't
quite covered yet... if you want it to be completely
circular or square... you hold down the Shift key
while you're dragging... so watch this, I'm going to
go back to my Circle tool... and before I start dragging,
hold down the 'Shift' key, drag it out... and you see, perfect circle,
if I let go of it... ellipse or oval... back to holding Shift,
I'm going to get about that. Now for the moment I'm going to put it down
here, I'm going to grab my 'Type' tool... and click once, and I hit my '+'... and I'm going to pick
an appropriate font size. Now with Type, I want to move it,
just going to kind of select it... click off in the background, and then
kind of just drag it to where you want... font size, in here I'm using my up arrow... to get it to a kind of size that I want... kind of weird for that... here we go. All right, that is going to be
good enough for this video... circles, exciting rectangles, oh... one little bonus thing for circles,
was going to do this later, but... look at this, see the circle,
what's that thing do? You probably already dragged it,
you ready? Absolutely useless, never used it... I can see, I'm like,
"Yeah, that does a Bar graph"... I have not mocked up
a Bar graph before... sorry, pie chart is what I want,
so you can-- that's what that thing does... anyway, let's get on to the next video. Hi everyone, just a quick little segue,
I wanted to check on you... see if you're enjoying the course,
how was it, is it okay? If you think it's good enough for
a like give it a "Like"... and think about subscribing
to the channel... got lots of other stuff like this,
so yeah, subscribe away... also know that this is a short part
of a longer course... like this is the first 20-ish videos... so if you're enjoying this
and you want to go further... the full course is about
111 videos, about... it's exactly that... and what you're seeing on screen now... so these are some of the things that
we continue on in the full course... so if you want to go further on
after this course... there will be a link in the description... or there should be a card
there in the top right now... come check out the full course, otherwise
continue on with this amazing free stuff... all right, carry on,
enjoy the rest of the course. All right, I hope you're sitting down,
this video, we're going to look at color... you ready, steady, boom,
it's green and black... it's not very exciting, I know,
I am going to try and convince you that... you don't need a lot of colors... when it comes to your wireframes,
you should probably leave it gray... but hey, we're learning
about color in this video... let's jump in, and I'll show you
what you need to know. All right, to work with color,
select on something... we're going to use this
big rectangle here... that's the default color for Figma... or you just click on it,
so Fill, click on it once... and you get this little guy, if you've
never used a Color Picker before... there's little dots, where our color is,
you can click them and drag them around... so at the moment you can only pick red,
to change it, this little Hue slider here.. drag it along to the kind of zone
that you want it to be... I'm going to pick some
sort of greeny thing... and then move this around to get the... full saturation, no saturation,
light, dark, somewhere in there. Other things you should know about
in here, if you want full white... just click, drag, and drag it like past... you know, like just keep going,
and it'll be full white... and either of these dark ones down
the bottom, are going to be the same... so white, black, or that one is black,
doesn't matter... and I'm going to pick some sort
of like greeny color. So you could pick it from the brand,
or just pick, like light blue... is the, probably the most common
kind of wireframe color... it's the default in like XD
and a few other ones... so we end up seeing this kind of like... tealy blue thing throughout, I'm going
to pick a slightly greener version... you pick anything you like. Other things to know about color is,
transparency down the bottom here... you can make things slightly transparent,
which makes no sense unless... I bring this all the way to the front,
so I'm using my square bracket... you can see, it's kind of covering
things with a bit of transparency.. I'm going to go back to, actually,
I was to change that there at 100%... it doesn't matter whether you do it here... you can see it there, 100%,
or you just type it in here... and you say, I want it to be 50... or, same again, you can kind of
use your up and down arrows... to kind of go through it all. So I want mine to be a 100, perfect... and if you are a bit more of a color nerd,
then, you might be like me... Hexadecimal numbers, that's the kind
of like web version of a color... you might not like that, you might like
the RGB versions, there you go... it's RGB-A, so you can still get
transparency at the end... Red, Green, Blue, you might be
mixing colors from maybe... a corporate spec manual,
or something else... and other colorways, CSS... you probably, if you're a developer
you might be working this way... your RGB-A colors,
you can type them in there... Hue, Saturation, and Luminance,
I don't often use... I use this quite a bit,
Hue, Saturation, Brightness... actually, do I do it in this one,
probably not in this program very often... I do a lot in things, in like Premiere
and Illustrator, but not here in Figma... so I'm going to stick to
the Hexadecimal number. Other things I want to point out
is the Eyedropper... so we've got this here, I want to
steal this color, so I select on it... go to my 'Fill Color', click on the little
'Eyedropper', and you'll notice... can you see up here, there's like
a zoomed in version, and watch this... I can move it around, can you see,
it just zooms in on things... so it's, you know, ours is pretty easy,
because we can pick this big rectangle... sometimes you're trying to pick a teeny
tiny bit of color from, like that bit... but it's going to be that weird light gray. So Eyedropper, I'm going to
click on this one, same with this fella... you, Eyedropper, you... now to get to the Eyedropper, very often,
I won't be going into... the color picker to do it, so I'm going
to undo, let's get my grays back... so I select on it, there is the shortcut
for, I, for Eyedropper... like I, not e-y-e, the letter I... it's a shortcut, so selected it,
hit the 'Eyedropper', click on that... there's a lot of that going on... however you want to get that... this, all the same color for me,
and be resilient... don't try and add a bunch of colors... keep it really, just black,
grays, whites and, you know... a color just to sex it up a tiny bit. When you start adding color palettes
to it you again start entering... different parts, you know,
the conversation about... "Oh, is this the right color,
is it the right brand color?"... just keep it generic, keep it gray,
then nobody's going to complain. Last thing about colors is... down here, can you see,
Document Colors... you're like, "Oh great, these are
the colors that I've used already"... so this though gets mad big,
and not very useful... it's fine for the moment,
because you're like... "Okay, I want to go back to
that gray that we had before"... there it is, there,
something that's been used... or there's that green, is that the green?
It's the same green... it gets, yeah, later on we're going
to look at this... and we're going to look
at Team Library colors... it's quite later
in the document... plus we're going to look at
something called Color Styles... in the not too distant future,
where we kind of tidy it all up... and get a bit more consistent... the Document Colors will show everything
that have been used in this document... so it gets a bit mad,
that's what they are. All right, that's the basics of colors,
let's jump into the next video... actually, we're going nowhere,
driving you mad, it's driving me mad... "You can't do that, Dan"... so this needs to be bigger,
we're going to do... some responsive buttons later on
but for the moment... I can't live with this, needs to be bigger
and this needs to be more in the center. One of the things I want to show you,
another little shortcut, might be handy... is because you want to like
make it bigger on both sides... you can hold down the 'Option' key
on a Mac, 'Alt' key on a PC... and when you're scaling things,
instead of just like dragging the edges... and then trying to move it around,
if you hold down the... 'Option, key on a Mac,
'Alt' key on a PC... kind of does it from both sides,
you're like, "That's better." All right, now we can move on
to the next video... "Is that even in the middle, Dan?,"
yeah, Arrange, look... that is better, let's do the same thing
with this one... I got closer with that one, some of you
are like, "Why does he care so much?"... and then some of you be like, "Oh,
my goodness, finally, fixed the button"... "Will he ever get rid of the full stop?,"
it's not lining up properly, is it?... anyway, let's get on
to the next video now. Hi everyone, in this video we're
going to look at Strokes... Strokes around the outside,
that's the line around the outside here... we'll look at Burger menus,
which is just a group of lines... but we'll also look at the ends here,
can you see... they've got nice little rounded lines... instead of this kind of like
big flat end on the edge... we'll look at setting
some of the defaults... that every time we draw something,
like a rectangle, kind of set to the... rounded corners, and the Stroke, we like,
and the color, we like... there's a few things we cover in
this video, all right, let's jump in. So let's do our Stroke, so we're
going to click on the rectangle... the Stroke is this one here, by default
you get a Fill, you don't get a Stroke... to add a Stroke hit
the little '+' button... and we've got a black Stroke
on the outside... the Stroke width, we can drag... I'm going to put in just two for mine... do you have to have a Stroke around stuff?
You don't, but we're learning stuff. The one thing you will get annoyed about
later on, if you do have like a style... you've decided that this green, with that
Stroke on the outside, and you're like... "I'm going to draw another one,
on this Product Details here"... 'R' for my Rectangle tool,
and you're like, "Ah, it's gray"... it's gray again, it's got no Stroke
and no rounded corners, and you're like... "So I'm going to go over here
and I'm going to change it to 5"... and go slightly mad trying to get
the Eyedropper tool... so what you can do is you can
get to a point, you're like... "Actually, I like that... I like my rounded corners,
like my green, I like my Stroke"... and I can go change it
as the default... so let's go to our little 'Figma'
icon here, and go to 'Edit'... and there's this one here, it says,
Set Default Properties... nothing really happens,
except that word appears... but now if I click off, grab my Rectangle
tool, draw something out, look at that... I got a sweet green rectangle with
black line around the outside... and yeah, rounded corners. So that is how you set the defaults,
and I'm going to leave that... another thing you can do is... because these are already drawn in
the past, I can't go like, I don't know... I want it to now look like this... so we don't have Style set up,
which we'll do later in the course... what you can do is you can
click on this guy and say... 'Edit, 'Copy his properties'... these are his properties over here... and we go copy them
and we click on him... and it doesn't matter
what color he was... if we go to Edit, Paste Properties,
it comes along... we can click more than one,
got the two rectangles... and let's go 'Edit',
'Paste Properties', there we go... so that's Stroke,
let's look at a bit more... we got on a bit of a tangent
there with setting the defaults... let's look at doing a little
Burger menu at the top. so I'm going to zoom in, remember
'Command +' on Mac, 'Ctrl +' on PC... you can kind of get up here-ish,
to get started at least... and let's look at-- let's drop down
the rectangle... so you just kind of click and hold it... and we'll show you other things,
I'm going to use the Line tool ... and I'm going to use my Line tool
to click, hold, and drag... that didn't work, I don't know why... click, hold, and drag... it will try and be straight, if it's
kind of not straight enough for you... hold down the Shift key, Shift key
will do something with the Line tool... remember, it did with the Circle tool,
it made a perfect circle... with the Line tool, it just makes it go
in kind of some, 45°, 90°, and straight. So I want something kind of that long... don't worry about how long it is just yet,
we'll make it... then we'll go out to 100%,
and kind of make it the right size... so we're going to grab this guy,
we're going to have three of them... so we're going to
either copy and paste... remember, copy and paste has
that weird option where it's... well, it's not weird,
but it's over the top of it... so remember, I tend to just
use the Selection tool... hold down my 'Option' key on
a Mac, 'Alt' key on a PC... and just drag another version out... and that really wants to go
underneath it, which is great... I'm going to introduce one more
shortcut, if you're like... "If this guy introduces another
shortcut here I'm going to scream"... close your eyes, or your ears... I'm going to introduce you
to the command D or Ctrl D... really common in Figma,
it just means, do it again... duplicate, do it again,
whatever you want to call it. So command D will just do
the last thing I did... so I can go Command D, D, D... it's great when you're doing like lists
and images, and you've got four of them... you just want to kind of like... make a new one, it doesn't matter
what you're doing it with... so let's say I want some Type
and I'm making a list... drag it out, holding my 'Option'
key on a Mac, 'Alt' key on a PC... Command D, D, D, D,
or Ctrl D, D, D, D on a PC... you can open your ears now, people
that are screaming about my shortcuts. So with these lines here, you're like,
"How big should the Nav be?" The best way is to copy
an existing template... I'll show you kind of some of
the templates that Figma's got... but if you are building stuff on your
own, especially things like icons... it's best to be,
remember, at Shift 0... or at 100%, up here... so that you've got a good
sense of this size... because if you have them like this
they're going to be very hard to click... or if they're going to
be big jumbo ones... just not that fun, well,
they don't look like they should... so I got lucky with mine, I think
mine are appropriately sized here... so what you can do is just
drag a box around them all... grab the corner and scale them to what
you think they should feel like... that feels good to me... and I'm going to put them
in a kind of appropriate... position for a navigation,
so it's called the Burger menu... or the Nav Sandwich... that thing you click,
that gives you all the sort of options... really common in the top right,
but can appear in the top left as well. So let's look at a bit more Stroke-ey
goodness, so I'm going to zoom in on it... because I want the little bubble ends... now, over here, my Stroke,
the Stroke weight we've talked about... so start and end point, they do
two things, click on the first one... you can put an arrow at the end, that's
great, if I hit undo it doesn't go away... maybe this is just on my machine,
I don't know why, undo, undo... that's one of those quirks... I'll leave it in this course
because it's a weird quirk... is it just on my computer? No, I think it's universal, it's probably
going to be gone in the future... it's one of those updates
where it's on somebody's-- some developer's bug fix list,
it's not super important... because I can go back to None... but my undo doesn't turn those off... we've gone off at a tangent,
let's stay on point... because I want to show you these,
there's three options. So your Stroke at the moment just finishes
right at the end, can you see there? the second one, I'm going to go,
this Stroke has a rounded end... and that is the pretty one that I want... so it's, the Stroke still ends there
but there's this like... little round, that's a butt cap,
that is a round cap... and this is going to be a square cap... see this one here, look at the difference
between this top one and the bottom one... the Stroke is the same size... underneath, but this has got
like a big square cap on the end... this has got an unfortunately
named Butt cap... and that has got a nice round cap... that's what I want,
I want all you guys... you'll see mixed quite a lot,
if you've selected stuff... and it doesn't know what to say... instead of going, "Question mark,
I'm confused," it says mixed... which means one of them... they're all sorts of different things,
I'm going to say, you're all, round... which only partially worked, oh yeah,
when I do the end as well... there we go. All right, so what have we learned? There are some quirks to Figma,
like they undo with arrows... we've learned about Strokes, actually,
the last thing I want to do is... with images, we've written,
you know, Product Shot... but it's actually more common to just
draw a big cross through the middle... there's a placeholder
for an image... so, I'll just grab my Line tool... and I'm going to go,
from this corner over to here... and this corner... you got to go back to
the tool every time... so it'd be really common
to have that as, like a... that's kind of a visual cue, that,
there's an image to come here... but it's not available right now. The other thing you might do,
just while we're on the topic... is instead of those lines I'm going to... get rid of them for a second
and bring them back... is we can put in a like an icon
that shows an image... so a really common one for this... is an icon, I'll show you. So it's in your Exercise Files... so how do you bring in an image,
or an icon? You can go up, there's couple of ways,
there's this way here... so it's weird, under your Rectangle tool... is where you bring in images as well,
so I can place an image... there's the shortcut,
the other way is, under Figma... you can go to Edit... no, 'File', 'Place Image',
use the shortcut quite a bit... but I'm going to bring in an image... under your 'Exercise Files',
under 'Icons'... bring in the one that says 'Icon Image'... and click 'Open'... and within-- with this... if you bring in an image,
you click once it'll come through... at gigantic size, or whatever size
that it was, I'm going to undo... go back to my 'Import Image'... find him again... is you can click and drag, and it
gives you a more appropriate size... and what you'll notice is that
it's squishing it, which is... killing me inside,
never leave your icon like that... hold down the 'Shift' key,
if you want to drag it out... remember, same thing with like
the lines making them go straight... and the rectangle
being perfectly square... that would be very common as well
for placeholder image. We are going to not do that
for the moment, I don't mind... I don't really care... lines, actually no, keep the lines there... because we're going to look at
something in the next video... that is kind of reliant on having
a couple of diagonal lines there... all right, that is Strokes 101,
let's get into the next video. Hi everyone, I'm going to briefly
introduce Object Editing mode... this kind of stripy lines,
where you're stuck currently... you might be trapped in here right now,
and you don't know how to escape... let me show you how to escape,
and what it's actually used for. So I want to introduce
this early in the course... because if you're a double clicker... you've probably already been in there by
accident, and I'll show you how to get out. So I'm going to grab my Rectangle tool,
I'm just going to draw something out... and normally you can just kind of
grab the edges, and you're like... "That's, I imagine, how I want it"... but if you want to like say break
the edge and distort this... you double-- well, there's the official way
of getting in there... so I've got it selected, look, there's
the official way. 'Edit Object'... click on that,
and nothing really happens... except this top menu
changes, watch it again... click on that,
you get these extra features... we'll go over them in more detail
when we start drawing our own icons... but I want to, yeah, I want to get
you escaped now early in the course. So the official way to get into it,
click that... and what you can do is
you can grab a corner... and drag it, and you're like,
"Yay, destroyed it"... or, you know, manipulated it... you can also click the center,
and delete the center of your rectangle... click on this edge here... delete the top part. So that's what object editing mode is,
it kind of breaks it from that kind of... you know, that rectangle,
that does only rectangle stuff... I show you here because me, a lot of
people get lost or stuck in here... so I'm going to undo that... now the official way to get out
is to click 'Done'... but the normal way, the way most people do,
just to double click on the background... so official way,
have it selected, in, out... unofficial way, double click it,
double click the background to get out. I'm going to delete that I don't need it,
I just wanted to show you... what Object Editing mode was,
and how to get out if you got trapped... all right, on to the next video. Let's look at Scaling versus
the Selection tool... because you're going
to need both of them... and they're a bit quirky from other
programs that I've used, and yeah... caught me out at the beginning,
so let's do it together. So with my Selection tool I'm just
going to click on the rectangle... I'm not in Object Editing mode,
remember... and all I want to do is, I've got
this tool here, the default tool... and I can click the edge,
and I can drag it around... that's kind of how you imagined it... and that's most of the time
what you want to do... what you'll notice is is that the Stroke
stays at 2 the whole time... and if I do something else,
let's say that I select... both the text and the rectangle,
and I'm like, I want it to be bigger... and I drag it out, that's weird,
maybe if I hold Shift... hold Shift, still doesn't work,
that's where the Scale tool comes in. So there's times where you actually
want to just make everything bigger... Stroke, Type, everything,
and it's this tool here... hiding underneath the Selection tool,
click, hold, drag... don't hold and drag, just click and hold,
and there it is there, the Scale tool... click on that,
I've got both of these selected... and I can just click and drag this,
the corner there... and if I hold nothing down,
it does it kind of proportionately... scales it up, both the Stroke,
can you see, the Stroke got bigger... and the font and the rectangle,
so there's times where you need both... let's say in this case I've drawn this,
too big for what I need it to be... so I'm going to go to my Scale tool,
and I'm going to make it a bit smaller... in both the font,
because I use that as the rectangle... and my little Stroke gets smaller... I'm going to bring it to the front
using my square bracket. Even if you group stuff first... you still got to use a Scale tool,
what I mean by that is... let's say that we do, what have we got?
These two.. select them both,
I'm going to right click it... I'm going to say, you are group,
that selection... and I'm going to use my normal
old Selection tool... it still does the same thing,
even though you think I've grouped it... nope, still does the weird stuff. So you're going to switch to
the Scale tool, and you do it so often... that there's a shortcut, and you're like... "Excellent, that's easy to remember"... it's probably S,
because it's the Scale tool... nope, it's K, I don't know why... but don't worry, the S tool, if I hit S... it's the Slice tool that nobody uses... there's people out there,
probably use it but I never do... it's a big waste of a good shortcut... though we have to use K,
that's just the way it is. So V is the shortcut for
the Selection tool... and K, you end up toggling, I go... again, I'm trying not to do
too many shortcuts... just the ones that are really helpful,
and I'm going to... I'm going to beat them into you
throughout this course... so you're going to go to the end,
and you'd be like... "I know it's K, I know it's V,"
because they're helpful... and it's hard to remember them
sometimes, so you need some beating... all right, it's K, and you can
scale them up, perfect... so back to the Selection tool,
and off to the next video. Hi everyone,
this video we're going to look at... the differences between
groups and frames... up until now in this course it's
been pretty basic, right?... like the Type tool, does what you imagine,
Rectangle tool does what you imagine... like it's not rocket science... ready for this video to
be rocket science-ey... I introduced it earlier
in the course because... it was probably the hardest thing I had
to get used to coming to Figma... so I'll introduce a little bit now
and a little bit later on... a little bit more, and you know,
towards the end... you will become master of frames... but if you get to the end of
this video and you're like... "Oh, I kinda get it, but I don't
kind of get it," don't worry... I'm introducing it early so that
we can revisit it a few times... all right,
first let's understand groups... let's draw a bunch of shapes up here,
so we're going to grab... we'll do Rectangle tool... we'll do three shapes,
let's look at the Polygon tool... get them roughly, don't need to be the
right size, they can be three circles... I'm doing these because,
I don't know, it looks good. So make three of something, and what you'll
see here on this Product Details frame... is my ellipse, my polygon, and my
rectangle, I can select them all... and I can right click them,
and group them... or the really common, 'Command G'
on a Mac, 'Ctrl G on a PC'... and they're grouped,
you're like, "Great." What happens? Over here, can you see,
the icon has changed... it's called Group 2, where is it, group?
It must be a group somewhere else... I made a group earlier, didn't I,
there it is, the red button... so Group 2, I can rename,
so this could be my Icons, great... this little icon here is, not important,
but you'll get used to these shapes... so that there,
the dotted line is a group... so I can look around, look,
there's another group... I can look inside the group of my layers,
see this little turned down arrow here... so yeah, you can see stuff inside of it,
you can say... "All right, I want to move,"
like grouping is useful because... we know what grouping is, you can
grab them, and they move together... but I can go into them individually
by either clicking them here... in the Layers panel, and going,
"This needs to be bit further this way"... or we can kind of go into
that Object Editing mode... so let's double click on the background... click on it once, double click,
we kind of go inside of it... inside of the group, we can-- you know,
work on it, double click it to come out... and it's still a nice helpful group. You can ungroup by right clicking it
and going to Ungroup... and then it kind of comes
out of that dotted group... and it's back to being single units... I'm going to go back, 'Command G',
or 'Ctrl G' on a PC' and group it. So what's the difference? Let's make two versions,
so I'm going to duplicate this fella... and I'm going to right click it
and say 'Ungroup'... so I got this Grouped 1, you can
see in here, it's called Grouped 2... these guys here are just hanging
out by themselves in this frame... so what we're going to do is, very similar,
I'm going to select them all.. and instead of right clicking and saying
Group, we're going to Frame Selection... and it's basically exactly
the same as a group... except the icon's different, can you see
over here, there's my top one... let's move the Layer order
so it makes more sense... there's my group, that's them there,
there's my frame... the icon's different, you get this
like little, what do you call it? Pound symbol, hash symbol,
grid, whatever it is... but they do a lot of the same thing. So you can still see them in there... they're all still trapped
inside of this nice frame... "So what's the difference, Dan?" The difference is,
that frame can survive on his own... the group, if I go into this group,
say, "You are gone, and you are gone"... remember, double clicking it
to go inside the group... the group disappears, by group--
I undo that, because I want them back... the frame on the other hand, if I go
in, delete this guy, this one... you're left with a frame,
which can be weird when you're new... you're like, "What are these
empty frames everywhere?"... because the frame can exist without
the group, "Why is this useful, Dan?" It is useful because - I'm undoing. - is because I can do things like,
let's say I want to cut that off... I can drag my frame in, can you see,
it's operating differently... if I drag the edge of this,
look what happens, squidgy... if I drag the edge of this in I can do
things like this, clip the content... so I can use the frame
as kind of like a mask... to kind of hide things,
which is one thing... actually let me show you quickly. So this is why that's useful,
you created a nice big list... you can grab your frame,
make it a bit smaller... I know we're jumping
ahead in the course... but I guess I want to introduce frames
couple of times, so that's why it's good... you got this list,
and you can set this to scroll... so that it kind of clips it off,
same with this... you've got the stuff hanging
over the edges here... I can say, where are you, frame,
you can be over there... then I can say, Clip Contents... so I can use a scroll, so people can... scroll left and right,
clip off the edges... there's one of the things,
let's jump back. All right, so Clip Contents
is one of the reasons... there are other ones, and the reason
I show it to you here is that... you're going to download
somebody's free UI templates... and you're going to be like... "Why is everything framed, it's all
a bit weird, I don't understand"... that was my position anyway. So the reason people do do it,
they get to an intermediate level... or an advanced level in Figma... and they just stop using groups,
never, because Figma... sorry, frames is just like groups
but with bonus extra features... and clipping contents is one of them... let's look at one of
the other main ones... just to introduce it now, and we'll work
on it at a bit more in-depth later on. So what we can do is,
I'm going to actually ungroup this... weird thing about a frame
is that you group it... so you group this top one,
and then you ungroup it... your frame, you frame it,
then you ungroup it, does that make sense? Ungroup works for both of these... so I'm going to ungroup it, and you'll
notice these guys just come out... I'm going to put these
kind of over here... I'm going to grab my name here... and I'm going to select all of these
and turn them into a frame, not a group... because I want to see the bonus... the bonus is, watch this, I can click on... double click to go inside our
kind of Object Editing mode... I'm inside my frame... and I'm going to say, you stick to
the top left of this frame, that it's in... this frame is the thing
around the outside... these guys though,
I'm going to click on you... and I'm going to say, "Actually, you are
going to go to the top, top right"... same with you,
you can go to the top right... same with you, top right,
you're like, "What does that do?" Watch this, if I go now and--
I'm going to make a copy of it... and watch this, when I drag it, hey,
sticks to the top right of the frame... groups can't do that,
they call them constraints... we'll do the Property later on,
but when it gets to things like... "Okay, I need another version,
it needs to be tablet"... so I'm going to click on my
Frame tool, I'm going to say... "Oh, it's going to be a Tablet"... Mini, it's going to be in portrait,
I'm going to stick it over here... I'm starting to design... so instead of trying to drag it all
out and try and make it all line up... you can click on this guy and go,
you go over here... and I can get in the top
and I can drag this over... and I can stick it to that side,
can you see the perk? It gets more and more in-depth when
you start kind of stacking things up... and it means, when you start
adding text, things start reflowing... it gets, not complicated,
gets more awesome, that's what it does... but that awesomeness comes at
a kind of confusing stage, because... remember at the beginning of this
course we dragged out frames... remember the frame,
that was our mobile phone... we just did it now again,
with the tablet. So frames get used for the big thing
around the outside... but also the little things inside of it... these little nested frames, so I've got
a frame inside of a frame, weird... if I bring in say, remember that icon
we brought in earlier... you probably didn't notice,
but if I go to our Place Image... and I bring in the same one,
or a different one... watch what happens,
if I drag this out... you'll notice that actually, can you see,
I brought it in as a frame... it's a frame, inside of it is our little
vector thing, but it's inside of a frame. So that's why we can't leave it
to the end of the course... because there'll be frames
everywhere, and you're like-- in this case it doesn't matter,
we're not using any sort of this... goodness with constraints and variants,
and all sorts of cool stuff... we're going to do later on,
it's just kind of like a group... that's all we're going to use it for,
for this guy... but know that later on there's
some fancy stuff we can do. "So what you're trying to tell me, Dan,
is group's bad?" Nope, groups are great,
and they work just fine... and they just don't have all
the extra fancy features... so that is my whole point of this video... we're going to use frames
from now on instead of groups... because they have features that we're
going to learn on, learn later on... and they just appear lots in Figma,
and I wondered why. The weird thing is when you've got
frames inside of another frame... weird, why have you got
frames inside of frames? The one last thing is that, this frame... why does this one have a name... how did you get that name there,
and this one doesn't have a name? Basically, if a frame is
not nested it has a name... what I mean by that is,
see this frame here, got it selected... if I drag them out over here,
watch, his name appears... inside, his name goes away... so that's kind of why you might
sometimes see a frame name... and sometimes the frame is just
used as like a group... and it's inside of another frame... "Wow, what a confusing video, Dan." Anyway, let's-- hope it got us closer to
understanding frames versus groups... what we don't need is we don't need
these particular examples that we made... we're going to create some
specific icons in a little bit... but yeah, we're moving towards
understanding frames versus groups... so delete those,
and I will see you in the next video. Hi everyone, it is class project time... I want you to create
something like this... you might be following along so far,
and you might be kind of... at similar sort of stage here,
if you're not, I want you to build... get all your frames in, I want you to build
this first page, plus these other three... basically just other kind of versions
of this first page... rectangles, lines, some text... I want you to keep it reasonably
similar to my layout... even if you're like,
even if you disagree and you're like... "No, they shouldn't be there"... keep it kinda similar, because... I want you to be able to follow along with
your example throughout this course... and these kind of units help me... show you all the different features
in Figma, so keep it close to that. The actual requirements for
the different class projects... are in your Exercise Files, you'll see
something in there called Class Projects... open that up,
and it will look something like this... we've done this first one,
so ignore that now, if you haven't... this website URL will change,
kind of building it at the moment... but remember,
you're going to go to that website... and you're going to create
your own brief and persona. So we've done that one already,
potentially... then we're up to here,
so use the skills you've used so far... it should look something like that... if you're looking for
a larger version of it... you should be able to zoom in,
in this PDF... but if you can't, in your Exercise Files
there is the PNG wireframe example... just a nice big version of it,
you can look at... there is a Figma file in there as well... remember, if you can't remember
how to do the Figma file stuff... maybe go 'Home', go to your 'Drafts',
and hit that... and you can import that Figma file,
up to you. All right, what else needs to be done? Here are the requirements,
so four pages... those are the four pages,
from our Task Flow... pick your own color, it doesn't have
to be green, and your own font... you lose points if you use Papyrus,
Trajan, Brush Script, or Comic Sans... all terrible fonts, pick a plain
simple font that I don't hate... it's part of the requirements,
I'm looking at you, Papyrus... and then what I want you to do
is just take a screenshot... I'll show you how to export
frames and stuff properly later on... but it's actually just
easier at the moment... to go into Figma and open up your
project, and just take a screenshot... on a Mac it's 'Command Shift 4',
you can just drag a box around it... and on your desktop you'll
probably have a screenshot... on a PC it's slightly different, you use
'Print Screen', you paste it somewhere... I'm not big on PC... exactly how to do it for
the different versions... so just Google,
"how to take a screenshot"... you're allowed to take a photo with
your phone, either way, do that... and then upload it to either
the Projects or Assignments... it depends on the website you're on... you'll have a look,
there'll be a way to kind of submit it... either as an assignment or
a discussion, or a project... once you've done that,
I will see you in the next video... is that big work?
Oh no, it doesn't take too long... but it's good, practice our tools,
our techniques... and we're going to get better together,
but we need our wireframe... all right, I'll see you in the next video. Hi everyone, let's talk about
where to get free icons... I'm not going to talk
specifically about websites... even though I'll give you a couple... it's more about what
you're looking for... when you are downloading
icons for our Figma file... so I'm using iconfinder.com, I like it... there's lots of free stuff on here,
good paid stuff as well... but if this website's not here
when you go visit the internet... there's plenty of free icons... so what you're looking for is,
let's say I want the Shopping Cart icon... that's what I need
for my mock-up here... what you're looking for is a particular
file format, it's called an SVG... I'm stalling, that took ages to load. Anyway, so there's a couple of things
on most of the sites... the main thing is all to do
with how free it is... because it's free, and then there's
properly free, so free, or licenses... I'm going to use the one
that's for commercial use... and this one here requires you though
to use it for commercially... but you have to link back to them,
which is totally fine... you might find good free stuff in there. This one here requires commercial use,
but doesn't require a back link... so I don't actually have to acknowledge
the people that made it. So in here, pick anything,
I say pick anything... I'm going to find a Shopping Cart,
that looks like a shopping cart... where is one? "Pick something quickly, Dan,
people are watching," all right, this one. All right, so this one here,
I'm going to open it up... and what you'll find in
most of these sites is... there's a PNG version and a SVG version... let's look at both of them, PNG is
probably the one you already know... SVG, you may or may not know already,
so I'm just going to pick... a smaller icon version of this PNG
and I'll show you the difference. So I'm going to download both of them,
stick them on my desktop... and there's SVG... let's compare both of them,
and how Figma deals with both of them. So is there a right one and a wrong one?
Yes, SVG is better but more complicated... but now that we know what frames are... and groups are,
it's actually not that bad... so let's bring in a file,
I'm going to do this way, Place Image... and let's bring in both of them, you can
bring in more than one image at a time... by holding Shift and clicking both
of them, let's click open... can you see, I got like a little 2 there... you can even see my little icon,
look, a little trolley. So I'm going to click, hold Shift,
so that when I drag them out... they are not going all wonky like that,
so hold Shift on your keyboard... that's the reason we have
SVG rather than a PNG... I acknowledge that I downloaded
a very small version... in here, you can download
like the really big version... let's download that,
and it will look fine. So let's bring in another one,
'Command Shift K'... we've got this other PNG, the difference
is, can you see that, size of that one... so I can get a good quality PNG but my
SVG is 1 Kilobyte, this is 112 Kilobytes... that's the reason we don't, you know,
we prefer to use SVGs. So it looks good, but it's ginormous,
so I can't use you, PNG... it's transparent, which is awesome,
this SVG is transparent, kind of... you're like, "Well, that's not transparent,
it's got a white background." SVG is into Figma... what they do is,
we kind of looked at this earlier... can you see, they come in as our frame... inside of that frame is a group,
inside of that group is a vector... that's all we really want,
so I'm just going to copy it... come out of that frame and hit Paste,
I didn't actually come out of that frame... you can drag it out of the frame,
so just sitting there in no man's land. So I'm going to click on this thing,
I kind of like, that's what I do... I don't want it in a frame, at the moment
I just want to kind of yank it out... and delete their original frame... just so I've got the vector
sitting lying around, happy days... now it's transparent, and it is colored... I can go through, use my Eyedropper tool,
and actually start using these now... whereas the PNG,
we can't change the color, we could... we can go to Photoshop, change it... but obviously SVG is scalable,
that's what the S in SVG is, woohoo... and yeah, we can go into Object Editing
mode, which you know about already... if you're like, "I love this,
but I really want a..." double click... start going in, I really want... a spiky handle, Dan... looks like a digger,
anyway, you get the idea. SVGs are better, so whenever you are
looking for icons, free, or not free... make sure you get the SVG. All right, another great place to get free
stuff, is part of the Figma community... so if you go back to your like
little house along the top here... there'll be an option... somewhere around here, called Figma
Community, it's kind of new... it's better on mine,
depending on how long in the future... it'll get more and more robust... there is just amazing stuff in here,
and most of it's free. So in here you can do things like icons... and you will find loads
of great icon sets... created by people that
we're allowed to use... it's not as searchable as
something like iconfinder... if you just want to, like a, "Hey, I need
a sharing icon, or a social media icon"... you have to kind of do a little bit
more searching through this... but there is great stuff, and it's kind of
already in Figma, so let's have a look... let's have a look at the Fig Pick... Fig Pick just means Figma's decided this
is awesome, and everyone should look at it. So what we can do is, when we are
dealing with the community for Figma... you end up downloading things,
so let's have a little look... let's kind of, you can go into it to
preview it, but eventually at some stage... to get all the stuff out of it you need
to do something called duplicating... so let's click on 'Duplicate',
and basically you get your own copy... saved to your Figma kind of flow,
so now let's have a look... have a look around here, there's two
different pages, oh, lots of good icons... and before we actually copy and paste
them out let me show you... what happens to these community files,
or at least anything you've duplicated. Let's go back to 'Home'... what you'll notice now, in my Home... I'm kind of lost, so I'm going to
go to my little drop down here... my blurry email address,
and I'm going to say, pick my name... let me get back to kind of home base,
where we were before... that took a while... yours might do the same,
so I'll leave it in there... I was like, "Have I done something wrong?,"
it eventually loaded. What happens is,
it duplicates into your drafts... you'll notice that now I have unicorns,
I'm like... you kind of opened it,
just to grab something out of it... but now it's part of your flow... you can right click it and delete it... but everything you open or duplicate
in Figma, ends in this like... it's part of your world now,
that's the kind of benefit I guess... of working in the Cloud,
which Figma does... it's not saved in your hard drive,
it's part of your Cloud... kind of online login stuff. It also means that after a little while
you're going to have... a ton of things open in here... and it's going to be hard
to know which is yours... so we'll look at searching and finding
the files you want later on... and you might be really tidy... and actually go delete the ones
you don't want anymore. So we've got a couple of files open,
we've got the one we're working on... plus our little unicorns... unicorns? Is that unicorns?, anyway... so let's go and have a look... now it will depend on how these
things have been created... these things have been created as... what's going to be called a component
later in this course... so this can be a little bit
tricky for us at this level... so let's just do it anyway,
let's go copy, I really need this... I like it for my wireframe,
I'm going to go back to this document... and I'm going to paste it,
and what will end up happening is... this weird file turns up, with the weird
icon, ends up in our Assets folder... used in this file, there it is, there... it's a special thing that we're
going to learn later on... for the moment though what
we're going to do is... select it, right click it,
and say, 'Detach Instance'... you're like, I don't know
why I'm doing that... don't worry,
we'll learn about it later on... but it means you can just say,
it's kind of like ungrouping... we're going to say,
detach the instance... you can see, kind of goes back
to that frame... and you might decide,
actually, like we did before... you can keep the frame,
that works fine... or you might go, like we did before... like get it out of that frame,
drag it out... so it's kind of just hanging out
by himself, where is he, there. Let's rename it, let's call it "File"... and in my case it's on the, where is it on?
It's ended up on a weird page... so let's say that I want it
on the Checkout page... it's currently not on the Checkout page,
there we go, haha... and that is the community,
I kind of introduced it earlier on... getting into the community, because
there's so much good stuff in there... you can find good wireframes
and good kind of like layouts... and lock-ups and cards, and icons... we're going to be used to
copying and pasting them... and sticking into our document,
and seeing what happens... they come through as
components, sometimes... sometimes there's frames, sometimes
they're just groups, they're real easy... but for the moment I'm just going to
tidy up, I don't need these guys... a kind of an example of
what to go get and find... and I will see you in the next video... now we know what we need when
we're getting these free icons... let's get some icons, onto the page,
ready for our wireframe. Hi everyone, in this video we're
going to bring in some icons... that I've got in our Exercise Files,
we're going to try and match them... so that they look, you know, the Stroke
widths kind of match this first one... and I'll show you how to replicate
them across all our Artboards... so yeah, let's dig in. All right, let's bring in some icons,
and get them all tidied up... so that we can use them... so we're going to use the long way still
for the moment... using a little arrow there, Place Image... I want 1, 2, and 3, so I want Icon Share,
User, and Home... I'm just holding down
the 'Command' key on a Mac... and just clicking them individually... on a PC it's 'Ctrl',
I'm going to open them up... now what's the key I hold down to
make sure they don't go all squiggly? 'Shift', that's it. So I'm going to get mine to a size,
don't worry about the size at the moment... drag these in. Now what will end up happening is... the size here will depend on... the last kind of Stroke size
that you're working with... so sometimes you might drag in,
and they might be thick, like this... or might be super thin... one thing we need to do though is
get them all to be very similar... I've got them kind of
a similar-ish sort of size... what I want to do though is,
scale them down... and you've got to decide here
whether you're just going to use... the normal Selection tool,
or our fancy Scale tool... it'll depend on what you want to do. So in my case, you see, the Strokes
are kind of staying at that 2 point... so it's kind of getting, if I get them down
to about there, they're kind of close... or you can use the Scale tool and just
scale them down, it will go down... and we can adjust them afterwards,
I want them down to about a size-ish... and get them into that position. So import them,
get them down to kind of this position... and we're going to try and match these now,
now you got to decide whether-- I'm twirling all these up,
these are frames... just like groups with stuff in them... if you're happy to work like this now,
we'll just leave them there... you can pull these out
and delete the frames... what I'm going to do is leave them, so my
Share icon in here, with that selected... you can see in here,
I need to go inside of it... because I want to click on this thing,
came in with a group inside of it... but with it selected, actually, I can go
in here, and I can see the Stroke color... in my case I don't need to change it
because it's matching what else I've got... but the Stroke width is about 2,
that's what I used here... and I want to try and match these all. So same with this one, sometimes,
so I can't see the Stroke yet... so I need to go inside the frame
and click on both of these... holding Shift to select both of them... and it's scaled down to like 0.5, you can
see there, so I'm going to type in "2"... this one here,
this is not a terrible thing... but the way this has been drawn is that,
it's not a nice little Stroke... it's actually a Fill, if I double click it
and go to Editing mode... it's not like lines that
are on top of each other... for an Illustrator person, from way back,
you'll know what I'm talking about... if you're not,
and kind of new to this vector world... you will just find some of them
that are made of Strokes... and this one is actually made up of a Fill,
it makes a little bit harder to adjust... so for this one to make it thinner... I literally have to go
and do stuff like this... which is no fun at all, so you might
just download a different one... or just draw one, we're going to draw... you could easily redraw that with
the Line tool, so I'm going to undo... double click to get out... and scale wise, probably need
to come down a little bit... and this is where I don't want
to be using my scale. If I use scale now,
and scale it down to the right size... it might look like this one here... but if I go inside of it, double click,
you can see, it's no longer 2, it's 1.8... that can catch you out, probably,
nobody's going to notice... but I notice, you'll notice... we're just going to use the Selection tool
to do the scaling, and it means that... holding Shift, it means it'll retain
being a 2-point Stroke... you know what I mean?
Oh, broke that... I'm going to leave it, broken forever,
I can't live with it, wait there... all right, I'm back. So what we're going to do now is... get those three in,
get them kind of looking the same... I feel like this one maybe is
not looking exactly the same... "Don't spend too long in there, Dan,"
this is just a wireframe... what I want to do is I want
to show you another... not trick, but a useful thing in Figma... is, I'm going to delete these... because what I want to do is
have that on all of them... so what I'm going to do is copy it... so from this first one, click on the name
of Product Details, and just hit 'paste'... so I'm using 'Ctrl C',
and 'V' on a Mac, you'll use-- oh, that's a PC,
so PC uses Ctrl C and V... and a Mac uses Command C and V... so it is Command V on all of these,
and gets it back... exactly where it got it off
that first frame, which is cool. So do that, I'm not going to spend too long
getting all the spacing perfect on this... because we're going to have to go
and test this on a phone, because, like... are they too big on a phone?, probably,
are they far enough apart? Probably not... my big old fat fingers is going to
end up touching more than one icon... so we'll do that when we
actually test on our phone... but we've found our icons,
we've got them in there... we've got them looking
kind of the same... that'll be good for now,
let's get into the next video. Hi everyone, in this video we're going
to look at some of the secret source... what makes Figma amazing,
and it is the plugins... that are run in parallel with Figma... so plugins are made by other people,
not Figma... and basically, you install them... in this case I've installed
a little icon plugin... and let's say we search for a house,
I can grab my icon and just drag it out... so it is a way of-- he's a bit teeny tiny there,
but you get the idea. This is a way of extending Figma, there are
lots of plugins, and they are amazing... we'll focus on the icon one
at the moment... but they all work roughly
the same sort of way... they extend what Figma can do, let's
jump in and look at, at least one of them. So to install our first plugin,
if you go to this little drop down... next to the Figma icon,
you can go to Plugins... we're going to browse them
in the Community... Manage, just will be able to see
the ones you've already got installed... and maybe uninstall them, I'm going
to go to browse in the Community... often, I don't use this method... I just go to this Home screen,
and remember, under Community... we were looking at icons a second ago,
there's another option here, says Plugins.. so this is kind of new,
and always getting developed... what I'd like you to do is, plugins are
just so, an amazing part of Figma... that just means, like take a break,
take, you know, take five minutes... and just have a read through
all the amazing plugins... there's just so much in here
that can get you so far... and kind of enable you to
be fast and efficient... and like, visually really compelling... let's have a look through
all the different plugins... we're going to look at icons
for the moment... what you need to do is, well,
the way that I use to gauge... whether this plugin is good,
is mainly bound to installs... there's no like star rating yet,
which I wish there was... but like Unsplash, which is a way of
getting kind of commercial free images... is a really cool plugin, really common,
probably, first one everybody installs... we'll do it later in the course... but you can see, 630,000 other
UX designers decide it was useful... so there must be some big in here. We're going to use Iconify... if this one is not in here, or hasn't been
updated for the last three years... you'll find another version
that will work similar... this video is not actually
how to use Iconify... but just like how to install
a plugin and get it working... so we're going to click 'Install'... yes, please... remember, these aren't made by Figma,
so no responsibility taken... and let's go and have a look now
how to actually operate a plugin... we'll do a few through this course,
so let's have a look. So you have to turn the plugin on,
you can only have one running at a time... so you've got to say I want a plugin
called Iconify to start working... now, this is where they all vary,
most of them have some sort of UI... they all look different, none of them
look the same, this one here, it's big... I put mine on another screen... but I'm just going to move it over here,
let's have a look. So let's have a look at that
shopping one we're looking for... let's look at another house... remember that house was broken,
was hard to change it... so in here, let's have a look
at the houses... is that going to be a Stroke, none of them
are going to be Strokes, I bet you... maybe that guy won't, and maybe
that guy will be, probably not... I'm going to use this one,
fingers crossed... so you can just click and drag them out... look at that, got a giant SVG icon,
and really, that's it... that is that plugin,
you can just drag stuff out... obviously, there's other options in here... you can search icons, and there's
lots of tagging and stuff going on. So plugins all work
a similar sort of way... there are some sort of UI, and you'll
be able to click and drag things out... we'll do a few more
throughout the course... but yeah, that is the plugin,
specifically for icons... I don't need this guy now
so I'm just going to delete him... now when you are deleting
bits and pieces... it's probably because you're always
going to be left with a frame... so try not to, like... you can, you can just delete it,
you know, with this Frame... it's best to go into your actual layers,
and say... that's it, I'm going to hit 'Del',
and everything inside of it... and then just make sure your layers
are kept nice and tidy... what the hang is that? what are you doing down there?
I have no idea how I got that one. Anyway keep it clean, delete that guy too. All right, that is, yeah,
a really simple plugin... plugins are amazing in Figma, going to
learn a few more throughout the course... let's get into the next video. Hi everyone, it is class project time,
not homework... we are going to be doing
something around icons... so if you haven't already,
I want you to go and make sure that... you add the three icons along the top
that we've kind of done in the class... and then on your own, I want you to
add this section down the bottom here... on the Confirmation page,
just, you know, like... a prompt to ask people to
share their purchase... and when they click on this it'll
pre-fill out their Facebook page... or their Twitter tweet about... "Hey, I just bought these great headphones,
check them out here, there's a link"... and when you are doing this you're going to
kind of start dabbling with our persona... so in my case, Sarah here,
she's in her late 20s... so I feel like I can be a little bit,
not as explicit with my language... because if somebody else maybe,
is a little less technologically savvy... born in a different decade... they might need a bit more explicit,
"Click this button to... upload to your social media,
and to share with your friends... what you have purchased,"
it might have to be a bit more deliberate. So my persona, she's in her 20s... so she gets the gag or the joke, or the
inference, without being too explicit... also she, these are the social media
icons that I feel... I'm not going to put them all there don't you hate sites?
They just have like ... here's the 40 different social media
platforms that you might share on it... I've excluded a bunch, because
I feel like her age group-- what else? Like she's working for herself,
so probably has a LinkedIn profile... and it's not going to be corporate... so she's probably going to be okay
sharing her new headphones purchase... and everyone's using
Facebook still... so, like use these sorts of, you know,
what should I have here? Go back to persona, decide what it's going
to be in there, it might be wrong, like... I might have got these totally wrong,
my client's going to come back and go... "Why isn't there Reddit there?"... or some other thing that's new,
and TikTok-ey thing... but this is something that I feel
like it's worth testing. We might add more to these later on... and hopefully in our user testing,
there will be some feedback like... "Hey, where is that thing that I don't
even know about, why isn't that there? All right, so that is it,
so the top Navs... I want you to find the icons from... I don't want you to draw them,
I want you to find existing ones... from either a free site,
just to practice the SVG stuff... and/or plugin, install your plugin, get it
working, see if you can get stuff out... there's a little bit of text there
that goes on there... choose the appropriate icons,
we've talked about that... add them to the Confirmation page,
take a screenshot... and upload it to the Assignments,
Projects, Comments... and that's an example... and actually, before you go, if you are
using plugins, which I think you should... get it installed, have a go with it... doesn't have to be Iconify,
something else... and sometimes, when you are
dragging things from plugins... let's say, it depends on the size of them,
let's say I drag in this Facebook one... sometimes you're like, giant F... and it just makes everything really tough,
in terms of your layers, when you're new. So I'm going to undo that,
often, it can be-- undo... it's just easier just to find an empty
part on your Artboard... and just drag it off there... because then they're on their own,
in their own little kind of frame... and I can drag off a bunch of these... where are they, and what else we got? I can drag up a bunch of these,
and I can scale them down... and get them appropriate,
and then bring them in... rather than trying to push them
around in there... and they ended up inside
of groups or frames... that they shouldn't be, that's my advice. When you're finished with the plugin
close it down, you guys are gone... and yeah, I'll see you in the next video. Hiya, in this video we're going to
look at pages, that sounds boring... it is, and it isn't... over here, at the moment we're
going to end up creating a page... we've currently got a Page 1,
we're going to rename it "Mobile'... we're going to create a second page... that's going to have our
desktop frames on it... and then we're going to create another
page that has our brief and our persona... and also our taskflow,
all in one kind of nice Figma document... these pages are going to
be nice and separated out... so let's jump in and learn
how to make them. All right, so to start off, you've already
got a Page 1, it's lurking there... it's kind of probably closed up,
you're on your Layers panel... you've got Page 1, there it is... you can get quite far in Figma,
and never have more than Page 1... on Page 1 is all of the stuff
we've made so far, we've got-- I'm going to use these little
chevrons here to close them down... just to make everything look tidier... so we've got our Confirmation page,
Checkout, Product Details... you can rearrange these because
that doesn't make sense, does it? Confirmation at the end, huh, I don't know,
ah, that feels better anyway. So we've got our frames,
which you could argue are pages... they're more like Artboards,
but we call them frames... because that's what Figma calls them... pages are a way of separating
this kind of Artboard here... so Page 1, you can have more than
one page, a Page 2, and basically... you get to here, and you go... "Okay, I'm going to start
making something different"... why would you have two pages? In our case what we might do,
Page 1 might be... I'm going to double click it
and call it "Mobile"... this other one is going to be "Desktop",
so I want you to do that... because we will design a mobile version
and a desktop version in this course... there should be a tablet version as well,
we're not going to design it because... we're not, it's just a small bit
in between... so we've got our Mobile and Desktop... let me show you some
other examples of it... well, you've got a Desktop, let's,
before we go, go to our Frame tool... now your Frame tool, again, I'm not
trying to get too many shortcuts... but the F key is pretty common one... over here I'm going to say,
I want Desktop... and depending on when in the future
you're watching this... this is a really good generic size... 1440 x 1024... we're going to have one, two, three, four
of these, so I'm going to drag one out... don't do that, go to your Move tool,
grab the name... hold down the 'Option' key on a Mac,
'Alt' on a PC... hold Shift as well, if it's not
locking into place, totally is... then command D or Ctrl D couple of times,
I love that, Command D, so satisfying. So I've got three of them,
go through, I'll speed this up. I'm going to name them all
exactly like my mobile one... I totally can't remember, so I'm going
to flick back and forth, please, hold... yep, that was a painful copy and paste... so that's a good use of pages... there's no reason why you can't just have
them underneath here, but you will see... before you get too far, they end up
looking like this, let's have a look... that's my Mobile one, later in this course,
just stuff ends up everywhere... and it's not pretty... but it's truthful or honest,
it's an honest file, that's what that is. So other use cases is... we're going to do in this version as well,
is often, you'll put another page... with things like your Task Flow
and persona, we'll do that in a second... also, let's have a look,
I'll show you now... because you'll have opened up some
of the stuff from the Community... remember, we looked at these un icons,
uni icons, whatever they are... over here, like maybe I flicked through it,
maybe I didn't, I can't remember... but you might have noticed that... I kind of might have gone to Layers
and I might have popped that down... because I'm like, "Oh, there's pages,"
and there's cover, and there's unicorns... I want to say unicorn so bad... and that's how I found it, these are
different pages within this one... this one here is just acting
as a cover or a thumbnail... and there's where all the good stuff is... it gets even more hardcore,
let's look at something a bit more big. I'm at Home,
I'm over here at Community... and I'm in Explore, I'm going to find the,
find anyone, let's try this one... so Microsoft Teams is liable to
be massive, let's open it up... it's going to be big, if you've got a slow
internet connection, and it's a big kit... or a big Figma file,
it might take a long time to download... mine's, I've got kind of rural broadband,
it goes okay, it's on a mobile device... so that's, that's okay. Okay, what you'll find is,
can you see, in this one... is you might get to here, and go... "That's not that useful,
where's all the rest of it?" It's in here, all the pages are... and you'll notice there's a cover page,
great, and general information... they've created a page with nothing on it,
just to make it easy over here... can you see, this one doesn't do anything,
this one here is where we get started... a bit of documentation on it, resources,
what else? Things to download. So you can see, there's quite
a complex one, the Change Log... let's have a look at-- I bet you,
there's more here... look how many pages this one has,
loads, let's pick a bit of them... the layouts, the avatars, the icons... so, at the end of this course
we're not going to be creating a full-- this, we call it a design system,
it's called a UI kit... UI kit, understating what this
thing does, this is a system... for how to think about everything
about Microsoft Teams... so somebody's made this,
somebody at Microsoft... and they've separated out,
so that, me as a designer... if I'm a junior designer,
I come in here, and I go... "All right, I've got to make this
pop-up window that communicates"... that, "I've lost all your files,
and I'm really sorry"... you can go through here,
find, read the guidelines... understand fonts... how they're communicating with
different fonts on different platforms... spacing, what colors they
are allowed to use... what the colors communicate,
so this is a full design system... later in the course we'll make
a teeny tiny design system... normally called like a Style Guide,
but this is, it's a pretty big use case... but I guess I wanted
to do just two pages... because you're going to have
to file through these... I'm going to make mine up again... every page, see in this case,
has a bunch of frames in it... inside these frames, bunch of other frames,
Artboards, and all sorts of good stuff... so that's what pages are for. Other use cases might be that,
you have like... say you've got Mobile,
there might be option one... might have a specific kind of Task Flow,
and you do another Mobile, option 2... with a different Task Flow,
or different colors, or... a different look and feel, concept one,
concept two, you get the idea... you can use pages to separate it out... I'm going to get rid of that. What I want you to do though
is have a third page... and this one's going to be
our brief and Task Flow... so it's great to have all
this stuff together... so it's going to be at the top... and in here I want you to bring in
the screenshot or the JPEG... or however you got your persona
earlier on in the course ... I got mine here,
so I'm going to copy and paste this... yours will be slightly different, I'm kind
of building this functionality for you... but earlier in the course I would have
shown you how to create your own Persona... and I want you to grab it, the screenshot
or the JPEG that you've downloaded... and put it onto your brief and Task Flow,
so we'll put it in here... yours is probably just a big JPEG. I'm not going to resize mine, and I'm
going to bring in that Task Flow... if you remember from earlier,
if you've opened up the Task Flow... it should be under your little Home button,
under your Name... and where is that Task Flow?
There it is there, Task Flow... if you haven't opened it, remember,
go back there, go to your Name... go to Drafts, go to Import... and the Task Flow is in your Exercise
Files, there it is there, open that up... and I just want you to
copy and paste it in here. It's just handy to have all your documents,
copy, close it down... go back to our initial,
the one we're working on together... I'm going to put that over there, so my
Task Flow and my brief, all in one place... so that I can refer back to it easily,
and we learn what pages do... simple, all right, do those things,
and I will see you in the next video. Hi everyone, in this video
we're going to Prototype... we're going to put it in a phone,
and when we click stuff... it moves through to the next frame,
cool huh... I'm also going to get a little bit lost,
a little bit into this video... something goes wrong,
we're going to fix it together... so we all learn, let's get started. It's exciting time, how do we prototype it?
We'll do some basic stuff first... what we need to do first of all,
is go from Design... which we've been at for a long time now,
go to 'Prototype'... and what we're going to do is,
have the 'Home' page selected... we'll start with this one... and what you'll notice is this little dot,
this little dot's important... we're going to click, hold, and drag,
drag, drag, a little arrow, and go, boo... stick him on there, give it a play. You can just kind of click it,
and then let go... now that's it, it's going to do some
basic stuff to start with... we'll do the other pages,
it's the same with this one... click on the name at the top... and say, you, click the name at
the top of this one, and there you go... all right, let's prototype it. Prototyping it, it's called Present, you
can see it here, the little Play button... click on that, and it will open up, you'll
notice another tab, there's our original... we've gone off to this other tab... and what happens is, it'll present
from whatever page you were on... so that's not what I want,
I want to go back here... and if I go to this Home page here... just click on the word 'Home' page,
and then 'Present'... it'll basically jump back
to that same tab... but at least we're at the Home page now,
look at that, that's our sweet Home page. So what we're going to do is just click
anywhere, so click once, oh, moved along... click again, Checkout page... what is that?
Confirmation page has had a bad day... what is on there, that is doing that? Shouldn't do that... let's close it down, start again... what is on there? Nothing... something weird's happening, I'll leave it
in the course in case it happens to you... Home page, Present... yours is probably going to have
this little Load Screen as well... there we go, you, you, you... giant something in the way,
I'll figure that out later on... but it's kind of working... we're getting another giant black box... you wait there, and I'll figure it out,
so we all learn, wait there. All right, I'm back,
I have no idea, is the answer... did you-- you already saw it
in fast mode... basically, what I normally do
in a situation like that is... I will start, I'll start going
through and deleting stuff... I figured it was some SVG doing some
weird stuff, so I deleted that ... and I tested it, and it still was broken,
just double check it's still broken... no, it's fixed, weird, I don't know then. So all I did was delete it and then
undo it, and it came back to life... so just in case something else happens... and it's not as easily fixed,
like that took me ages... it took me about five, ten minutes to
kind of figure out what was going on... what I normally do is, actually,
I go through and I just delete stuff... and then test it, delete stuff and test it,
delete stuff and test it, to see... eventually, something that
I've deleted kind of... shows that it was causing the problems,
that's normally how I do it... and then I gave up on that, so I just made
another version of it, and that worked... and in this case I just deleted it
and undid it, and it came back... probably closing the program, opening it
back up, restarting machine, anyway. All right, that was a little bit of
a tangent, but these things happen... so it kind of worked,
let's go to our present now... this is back in the zone, Dan, back in
the zone, so we're going to preview it... and we have done some basic prototyping,
where you click anywhere, it moves along... gets to the end, and it's kind of stuck. So what you can do,
if you kind of wiggle around... you'll notice that, after a while
some other little options appear... Restart, which is R,
it's a really common one... to get back to the beginning... so you can kind of work
through your prototype again... you can manually get through it,
can you see, down here, Page 1, 2, 3, 4. Other things that might be useful is,
under these options here... you might just, well you won't want
to go like 100% or full screen... to get rid of all the kind of
Chrome around the outside... what else we want to do,
that's kind of it. One thing you need to know is that you
don't need to close this every time... feel like,when you're finished you close
this down, and then come back over here... but you don't have to, leave it open,
and just always go back to it... because what happens is, it updates... see this, if I go in here and I decide
to change the color of this... oh, good point, this happens
quite a bit when you're new... you're like, "Where did it all go?"... because you're in Prototype,
remember, to go back to the Design... there's three at the top here, we'll look
at Inspect later in the course... but whenever you're missing
your colors or fonts... it's because you're stuck on Prototype,
not Design. I'm going to go in here, I'm going to say,
you are now going to be another color... now I'm going to jump out to this tab,
that's still open, and you'll notice... if I go back to my pages it updates... if you're using the browser version,
it's handy to get this tab... pull it out and put it
on another desktop... on the desktop version, it's kind
of stuck in here at the moment... I can't kind of pull it apart,
so just toggle back between the two... if you do want to toggle back
between the two. The shortcut is, there's no shortcut,
that is a bit of a pain... there might be in the future, check,
you want to Google, the thing that says... Figma Present, what is it called?
Yeah, Present Shortcut... it doesn't exist at the moment... what we do is we use the Command
on a Mac, Ctrl on a PC... and Command 1 is back to your little
Home screen, we've been clicking on that... Command 2 is whatever
the second tab is... that's considered the first one,
two, three. So in my case I'm going
to be going back... between Command 2 and Command 3,
Command 2, Command 3... Command 2, make a change... Command 3... and it updates instantly,
so you can keep that open. Another thing to note is,
you can't prototype across pages... so I go to my 'Home' page... I go to 'Prototype', and I'm like... I want to go to page, something
over here, that's not possible... so it's only between frames on a page... what you'll notice in mine as well... is that I have this nice Chrome
around the outside of an iPhone 8... that might look ancient when you're
watching this, but you can change that... let me show you how,
so let's be on 'Prototype'... let's go to 'Show Prototype Settings',
or have nothing selected... you end up at the same place,
so having something selected... 'Prototype', click this button,
or just click on no man's land... and you can say, "All right,
I don't want an iPhone 6, I want..." I don't know a Google pixel like, I own a 4 at the moment... why can't we have a 4? You have to look at a really old 2... and and you can pick through
the different colors... not that they change much on an iPhone... but obviously, on iPhone 8... instead of the gold one you can pick
the space gray one or the silver one... it's basically the backs of the phone,
so not a whole lot changes... you can change the background color,
you can go from portrait to landscape... and when I go into Preview now,
let's have a look... doesn't quite work on landscape,
but you get the idea. If you can't see any of these
it's because when you started... remember, way back in the beginning, we
went, "All right, make our first frame" ... we picked one of these defaults,
they're attached to this... so even if you just typed out,
you've started with a desktop version... you've typed it out, and made it a phone
size, it doesn't connect up anymore... so you might have to make phone sizes,
and copy and paste them on... if you want that Chrome there... it doesn't help the testing very much,
other than it looks cool. You'll also notice that our desktop
versions-- so let's have a look... Desktop, click on this one,
even though there's nothing on this... so click on 'Home' page... click on the 'Home' page, you'll notice... in Prototype, Prototype Settings,
there's nothing in here... so I can go and say that I want it to be... a Desktop, like a laptop,
and it's not there... there's only a few things you can actually
wrap that Chrome around at the moment. One last thing before we go,
if you have been following me... what I want you to do is,
go back to Mobile... and I want you to break all of the... these prototypes here, because
I don't want to just click anywhere... I want it to go to Product Details only
when I click the Learn More button... and I want to go straight
from Buy Now... all the way to the Checkout page,
when that button's clicked... at the moment it's using the entire frame. So to get rid of it,
you can do two things... what I tend to do is just click
on little arrow, hit 'Del'... or you can click on your frame here,
and say... under Prototype, can you see, it says-- we've applied this interaction called
Tap Checkout, just hit minus, ' - '... it's the same thing, you want to
delete it by selecting and deleting it... or selecting the frame and then just
minusing any interactions you've got. All right, so we're back,
we've gone nowhere... we added them, but we deleted them... let's jump into the next video,
and we will break up the buttons... but we'll also add some
animations with our transitions... all right, I'll see you there. Hey everyone, in this video we are
going to rig up this Prototype... so the buttons go to places,
not just clicking the frame... plus we'll look at the different animation
techniques in between the frames... actually, I'll show you,
Buy Now does a cool push-ey thing... this one does a slide-ey thing... so I'm going to show you those... I'll also show you, remember that
problem we had on this last frame... the big giant black boxes... that came back, and we fix it
right at the beginning here... so I'll leave that in there
so we can all learn... we'll learn about Easing as well... it's a teeny bit of a long one, but we
cover a lot, all right, let's jump in. All right, to change the animations,
we're going to do a couple of things... we are going to-- make sure we're
on Prototype, here in the top right... we're going to delete these, if you haven't
already, click on the names at the top... and delete these transitions,
oh, where did he come from? do you remember, in an early video
you were like, I was like... "What were those big black boxes?" I've turned Figma off, open it back up... and I totally figured out
what those big squares were... there are something in here,
yeah, that's what they were... big giant letters,
Facebook, and there we go... oh well, problem solved... I think I was demo-ing it with you
guys, showing you how to drag it in... and they all ended up there,
but they disappeared... and now they're back, oh,
we've fixed that problem. Let's look at the animation, so we've
deleted the connections between them all... and let's do it for actual specific buttons
rather than the whole entire frame... so what we can do is,
we're going to say, the Buy Now... gives its own little dot,
every little unit has a dot... so you can make everything clickable... so I want this Buy Now button to go to... it's going to skip our Product Details,
go all the way over to this one... can you see, I'm just dragging it around,
and you can connect it up... I wanted to go to, straight to Checkout... that's for the keen buyers,
to go straight there, no fuss, no mess. Now the animation is this... it is instant at the moment.
just moves across... let's look at Dissolve,
and let's just go and test it... remember, you don't have to reload this... but you might, if you've closed it... just go to this little Play button,
and go to Present, and will open it up. All right, so our little button,
going to click it... look at that, Dissolve, very exciting,
remember, R is the refresh button... and you can practice through it... so we won't cover every single one... because some of them are
pretty self explanatory... we're going to do, Instant is easy,
Dissolve, you just saw... Animate, we'll leave for this video... because it's a little bit more
complicated for later in the course... it is amazing, but we can do it later on,
you need to set it up a bit more... let's play with Move-in,
let's have a look... R, for reset, move in... can you see, it slides in from the side,
that's pretty cool... it gets really nice when you're doing
kind of like mobile navigation... you want to kind of like
move in from the side... or maybe images flying across... and instead of testing every single one,
what you can do is, like move out... and can you see,
down the bottom here... if you hover above it, kind of gives you
a visual cue of what it's going to do... so Push, can you see, instead of moving,
which is one-- kind of sliding in on top... push will push one out, to move one in... so this is kind of an easy way to-- Slide's really good when we
do get to those mobile apps... where it just kind of like pushes it
to the side, not all the way in... I'm going to stick to Move in,
and can you see here... the directions, you can decide
if you want it from the left... or coming from the right,
down from the bottom... down from the top,
and up from the bottom... so those are all pretty easy. Let's look at one of the other
interesting things, is Easing... so Easing is on by default... and it just means that, Ease Out means... it's going to start fast
and go slow on the out... it's going to ease out
that little curve there... I'll exaggerate it here, so... this is another term we need to learn,
ms, which is milliseconds... 300 milliseconds is... there's a thousand milliseconds in
a second, so that is one second... so 300 is, I don't know,
a small part of it... third-ish... I'm going to turn it up to a second just
so that I can preview it and have a look. So let's go over here... 'R' for refresh, Buy Now... can you see, nice and slow,
but it starts fast... and then gets nice and slow at the end,
so that's Ease Out... what's very often nice is,
both Ease In and Out... you can ease it in, so it goes slow
at the beginning, watch the little-- you can see, this actually shows it
even better in this little icon here... so it starts slow, slow, slow,
slows out, and gets faster... it just always looks good with
that Ease In and Ease Out. So I'm going to crank it right up to,
exaggerate it to 200 milliseconds... oh, I can do that,
there's one fifth of a second... so let's preview it, let's have a look,
'R' for reset, Buy Now, that is too fast... so let's try 3-- let's try 400... reset, click it... still probably a little fast
but you get the idea, right? Easing is to play with the animation... Ease In and Out, it's pretty cool... it's kind of like a bounce,
so let's have a little look... it's probably still going a bit faster,
have a look... yeah, too fast, but cool,
let's make it go to Push In... yeah, that's it, Push In,
I'm going to ease it in and out... and I'm going to turn it to 600. There's a lot of playing with this,
it depends on how long it is... and what kind of Easing you're doing,
what kind of direction it has to move... kind of how far it has to move,
so 'R' for reset... so they're kind of e--
what was it called? Ease In and Out,
that kind of bounce option. Before we go we're going to kind
of rig it up a little bit... you do this on your example as well,
not going to do it as a class exercise... because I can't really check it... so what I'm going to do is, just follow me,
we want to go from Learn More-- you could do it from the text,
it's better to do it from the button... you could group it and do it from both. So I'm just going to do it from
the button around the outside... and I'm going to say, Learn More
is going to our Product Details... so you can learn more about it... we're going to do the text over here... so when you often click
a heading on a website... it'll go back to the Home page,
this is my Home page... so what I'm going to do is,
I'm going to say, you go to this one... this, go to this one... now, what animation is it using? It's going to use whatever the last thing
you used, so I'm using a lot of pushes... so if you don't like push,
we're going to have to go change them all. So pick it first,
before you start clicking on them... so it'll just remember the last one... so I'm sticking to push... and the other thing to
note about animation... and just the interactions in general,
in prototyping, if I copy this... and delete this one,
click on there, hit 'Paste'... can you see,
it brought along with it. So as long as we're in Prototype mode you
can copy and paste to different ones... so it means you can rig up
the entire navigation on one of them... and just copy and paste it along... so let's say it's this one here,
I want it to go to the Home page... you know, I make this
go to the Home page... I don't have a Share,
and Account button yet... or even a Mobile Nav yet... but I could just copy them all
and paste them on everything... just to save some time, so Buy Now,
you end up with a spaghetti... it gets more and more
spaghetti-ish depending on... how detailed you want your
kind of prototype to be. What I want to do is make sure that
this Purchase button goes to here... and my Home button's going,
Home button's going... you don't have to drag it, after a while,
it's really easy with only four of them... because you can just kind of like,
ah, zoom out... and just quickly drag this one,
get it over here... it's do-able, after a while it's not... you saw that, like Microsoft Materials one,
no, Microsoft Teams one... there's no chance of rigging that up,
with dragging and dropping. So what you can do is, you can click on
these, and, actually don't click on them... you select it, in Prototype mode,
click 'Interactions', hit '+'... it's going to say, Tap, what happens,
when you tap this one, going to go to... navigate to the Home page... so you can do it that way
and play around with your Dissolve... so instead of dragging it you can
just kind of like select it... add this interaction and do it this way,
I'm going to Dissolve back, fancy... I think that's it, that's it,
that's it, that's it... hang on, let me think,
I'll pause it, hang on. It's hard to get it right, anyway,
when you're in the Desktop view... in our upcoming video we will
test it on our actual phone... and then you'll know instantly, you'll be
like, "I'm stuck, and I can't get back." So you can update your prototype,
oh, updating them... we didn't do that, so if I want to
update this one from, you know, push... you can click on this line
and it will pop that out... otherwise click on it and then
you can click on Home page... and it just pops that
thing back out again... to delete one, you can drag it off
back into itself so it disappears... or you can click on the line like
we did before, and delete it. All right, starting to get prototype-ey,
let's have a look at our prototype... what can we do,
let's go back to Home... did you notice that if I click
on somewhere that doesn't work... these little blue dots appear... it's just to help people that are testing,
even yourself, what to actually click... because we are doing, let's say
a Task Flow, and it's very simple... there's only four slides in it... and I only want to test that,
I don't want people going... I'd probably remove that
- button for my test... just because it's going to confuse
the test itself... but maybe it goes to
the Product Details page... but if you click anywhere it should
highlight the one, so Buy Now, Purchase... congratulations, the push and the bounce
is a bit weird, but you get the idea. All right, that is animation, what you
probably are thinking, your thinking is... "I'm not sure I can use Figma,
because it doesn't have the best... most amazing animation transition
in the world," let's have a look... it doesn't have Dissolve, where's my
Page Peel and my Barn doors, I know... they're actually illegal in most countries
now because they're so terrible... so for your viewing pleasure, editor,
can we wrap up with a Page Peel? Hello, this is the other side
of my office... you're normally looking from that way... across this way, this is, that way,
it looks like... my junk and my soundboards,
to try and make it sound nice... and it's night time, it's not kind
of moody, it's just actually dark... it's about 11 o'clock at night,
and we're making courses for us... and in this video we are going to be
looking at something called Figma Mirror... what is it? It's a way of testing our,
you know, we're on the computer... trying to design a Phone website,
a Mobile First website, or an app... there's no point spending
all your time on there... you need to be testing it on the device,
that thing... so there is an app you
can download from... either the Android or the Mac
App Store, you can tell I don't use it... but it's called Figma Mirror,
they might be changing that name... check in the comments if they have
updated it, but it's called Figma Mirror... you sign in with your Figma
username and password... then somehow, magically,
just starts happening... you don't have to be on the same network,
it's magic... and basically what happens is,
can I show you here? I'll show, you can you zoom in on that,
you kind of can... basically if I click on different
things here on my desktop... you can't see what I'm doing over here,
but if I click on my Details page... where is it, Details page,
there it is, click on my Checkout... so it's kind of live updating, and even
better, it's actually live and interacting. So will this work? Maybe... so click on my 'Home' button,
can you see, Home button... Home button's too small,
because I can barely click on it... you can't see what I'm doing,
Buy Now button, look at that... Purchases, what is it focusing on,
is it focusing on the right thing? Maybe... Fades, oh, look how good this is... so I can actually work on it, and the big
thing I'm going to show you, is... the Buy Now button, is too small,
the text look fine on desktop... but it's teeny tiny in there... the Purchase button looks all good,
when I go to Buy Now... how is this filming, the cam--
this is pretty terrible, but... hey, that Purchase button
feels good to me... I'm finding it very hard to click on
the buttons along the Nav as well... they just need to be,
they don't need to be bigger... they need to be smaller with
a bigger area around them... so Frame, let's make him bigger. Logo is too small, text on the Purchase
page is good, the Checkout page... and I do get stuck on
the Learn More page... I don't have any sort of
like prototyping off... the Product Details page, forgot to add it,
you probably saw it in the last video... but it's when you get
to this kind of stage... and you're like testing
it on your own... you're like, "Ah, it's not that bad"... well, that's way too small,
or that's a hideous color, green. So actually, that's probably pretty good... oh, one-- let's do a live update... because that's pretty cool,
I'll adjust the zoom so we can... do it a little bit better, you wait there,
I'm going to change the camera. All right, so, probably should have
done this at the beginning, watch this... it's live updates, I'm moving stuff around
on my desktop... so you're looking at my laptop there,
my phone over there... and yeah, you can just kind
of work, so you-- when I'm working,
especially in this initial stage... getting font sizes and stuff ready... I just kind of like,
I don't have it propped up... I just have my phone lying
down on the ground... so you can see it... this is really handy now, I can go through
and say, actually, font size here... what do I want to do, it's a group,
so I'm going to go into my group... and I'm going to use up and down... until I find something,
what I'm looking at... is I'm keeping my eye out
on my phone here... that's what I'm looking at, I'm like,
"Is that an approachable size?" What you'll find is,
pretty much always, 16 is good... you can't see it because it's
on this side of my desktop... but I've gone to 16 points... that generally is a no-brainer good one,
can't wreck it... 15, if you're trying to be cool and fancy,
and trying to keep it small... but if you get down around
the 12s and 13 points... it becomes quite a tricky thing to-- it's fine for some things, but for
a big old, click now, Buy button... it feels a bit small... so I want to go through
and let's make this a bit bigger... move across... center them together. I have to do the same for the Learn More
button, it's hard doing it one-handed... I need my hands over here, but I don't
want my hairy knuckles in the video... but you get the idea,
you can make changes really quickly... be seeing what it looks
like on a phone... it's pretty much instantaneous, don't know,
I'm pretty amazed by how that works. So yes, if you're designing for tablet,
have a tablet... if you're designing for desktop,
it's a bit easier... because you can just do it
on your desktop... a mobile phone, or an app, or a mobile
first website, like we're doing... desktop is part of our plan
but it's secondary... most of our audience is going
to be coming from paid ads... because I talked to the client about it... those are the kind of conversations
you talk about as well... like lead generation,
where is it all coming from... it's coming from Facebook ads, it's all
going to come from mobile phones... if it's coming from
YouTube how-to videos... like a lot of my courses do,
then it's desktop first... so kind of questions you're going
to get into as a UX designer... what do we design for first? All right, it' late, and surprisingly hot,
with all these cameras and lights going... I am going to-- let's make another
video before we go to bed... all right, that is Figma Mirror... and testing your prototype on your phone,
see you in a bit. All right, it's class project time... I want you to download
the Figma Mirror app... from the Google Play or the App Store... I both named those wrong
in the last video... so go in there and look for Figma Mirror... if that's not working for you for
any reason, you can actually... on your mobile phone,
not on the desktop... go to figma.com/mirror,
it works mostly the same way... so log in with your account,
your Figma account, and test your phone. What I want you to do is just have a bit
of a, be critique of your own work... are the fonts large enough
and legible enough... are the colors easily contrasting... so I can actually see some
of the text that is... like, over the top of these, I know it's
wireframes there's not much going on but... are these fonts for the description
big enough? They don't all have to be 16,
and massive... but, you know, there's some parts
that do need to be bigger ... like this one here, this, like smaller
part down here, does it have to be bigger? I don't know, I'm going to test it
on my phone... also make sure that your buttons
are all wired up... go to Prototype and just make sure they're
all connected when you're testing... and also, are they easily clickable,
are the buttons big enough? The last one-- I'm going to
go back to Design mode... I have problems with these,
they just didn't feel clickable... they're not, they weren't very nice,
just a bit awkward to click... so what I don't want to do is, can you
kind of see them there, I can see that... like this one here just needs to be bigger,
like not the actual icon... I kind of like it that size,
it's the frame around the outside... so unlike a group, remember, a group,
can't deal with the frame independently... but because we're dealing with these sweet
cool frames with the little hash symbol... it means that- let's have a look
- that this thing inside... and this outside kind of
wrapper, which is the frame... can be different sizes... we're going to get a teeny tiny bit
advanced here, but hey, let's do it. So I don't want to just grab the edge... because what I want to do is, I want to
go inside of that group, hello, group... or any of these things,
go inside of them all... and I want to say, actually,
I don't want you to scale... it's trying to match the size of the frame,
which is cool... but actually I don't want that,
I wanted you to say... actually, just stay in the center,
don't scale... means when I grab my frame, which is this
one on the outside, and I grab it, look... hey, I can make it bigger,
stays in the middle, which is cool... but I can start making my buttons
a whole lot more clickable... without actually distorting the image
or trying to make the icon bigger... same with this one here,
I can go inside of it... there's two vectors, I'm going to
'Shift' click both of them... don't scale, please,
just stay in the center... awesome, go back to the frame
on the outside... I'm going to say, actually,
just be a bit bigger, nice. So, haven't changed the size, I just
made the clickable area easier to get to... and it's the only one I've actually
rigged up, isn't it, you get the idea... so that is it, go and test
your wireframe... and check in your--
where is it, class projects... I just want you to take it, can you take
a photo of your phone? Not everyone can... if you've got another person's phone,
take a photo of it... I just want to see it on the screen,
kind of proof that you did it... and a nice little cool graphic of your
first wireframe up on the screen. How do you feel now? Like I remember,
when I did my first ever wireframe... I still get that buzz of like... oh, the thing I made,
it's on a device, it's on my computer... and it's exciting, it's interacting... I'm clicking buttons,
I feel like a professional... I don't know, is that you too?
Anyway... take a photo, if it doesn't work,
and you can't... you've got no one else around to take a
photo of your sweet new wireframe app... just take a screenshot from your phone,
and upload it to the... Assignments part of this website... all right, that is it,
I will see you in the next video. Hi everyone, in this video we're
going to look at animation in Figma... up until now we've been doing
kind of more page transitions... with the whole thing sliding out,
but now, you ready for it, wait for it... hey, cool, huh... that's the arrow sliding in, just the arrow,
rather than the whole thing... and to do that we need to learn
something called Smart Animate... and we need to add a delay
on our pages... so let's jump in and I'll show you
how to make it. So to animate in Figma,
just like one element... we've just been animating like
a transition between the entire thing... we just want this arrow to move in,
like we saw at the beginning there... so what I want to do is basically,
you have two of the same frame... so we're going to have Confirmation,
this first one... we're going to duplicate it... let's hold down the 'Option' key on a Mac,
'Alt' key on PC we've got two of them... and on this first one I want it to
be off screen, kind of over here... and this, one of the tips is... when you are doing animation is
- I'm undoing that... - is just have a bit of space... so I'm going to move it over here,
just so I've got space for my arrow... so we're going to have
this first confirmation... where the arrow is going to be off... and the second one,
where it's going to be on... and to make the magic happen,
is we need to connect these two. So I'm going to click on this frame,
and I want to say, Prototype... and I want to say, go there,
and when you go there... and when you go there,
I want you to use Smart Animate... that's the one we ignored earlier... basically, this works when there
are objects of the same name... on two separate frames,
and it will animate them... you can see them on this first one,
and you can see them on the second one... and you can see like, hey,
they're in different positions... I'm smart, I'm going to animate them... and I'm using the Ease In and Out back,
because it looked nice... so yeah, let's give that a go. Confirmation, let's hit 'Preview',
and it's not going to work... I know it's not going to work... this is going to be the big thing
that catches you out... especially with these kind
of slide in animations... let's have a go, click once, it faded in... what's happening is, is that this arrow
is actually not part of this frame yet... or not yet part of this frame anymore,
there was a time it was... look, I'm part of this frame... so have a look over here,
in my Layers panel... I've got this line 13 on
the Confirmation page... but watch what happens, look, watch it
in the Layers panel, if I drag it out... it's still part of it, still part of it,
still part of it... at some stage it goes,
boop, can you see, it-- I'm not sure where that noise
came from, but there you go... it is line 13, and it is now,
like not in this frame, or this frame... so it doesn't know what to do,
so basically it says, there's no arrow... now, there's an arrow, that's why it just
fades in, so that's really important... to make sure that it is part of this frame,
you can have it over here... you just got to make sure it is inside
the frame, you do it by dragging it in. Now we've got a little tip, is, we've got
two Confirmations, and that is pain... it's hard to know which one is which,
in the Layers panel... so I'm going to do Confirmation A,
and Confirmation B... just to be helpful over here... and my OCD says, A needs to be
below B, A, B, here you go. now Confirmation A doesn't
have my little line in there... so all I'm going to do is drag it in,
there you go... it doesn't matter where it is
as long as it's in this frame... and there's one that
corresponds in this frame... so there's line 13, where, there,
there's one there, it's going to work... all right, so let's go and give it a test. I'm going to use my back arrow once,
I'm just using the arrow... you can click these
down here if you want... I'm on Page 4, click once... hey, a little animation... so yeah, that's the basics
of Smart Animate... as long as there's something on both
frames, that has the same names... and it does something different... it'll work, it could be even--
let's do a couple of things... one of the things with stuff off screen,
on Confirmation A, we know it's there... like we can see it there... but we can't see it over here,
so what we might do is turn the... remember, one of the perks of
a frame is, under Design... with the frame selected,
you could say 'Clip Contents'... so it kind of clips it off... so you can actually see it
and work on it... it's still part of the right layer order,
nothing's changed... except you can see it now
while you're working... but there are times you want to kind
of turn it off, so it's all tidy. So now I can see it, I can,
we did animation of movement... it will actually smart animate anything,
so let's say we want to start it here... so it's still in the right, where are we?
We're still in the right frame... it's still a different movement... but here we're going to turn the opacity
down to 10%, just so I can still see it... and let's go test that now,
so back arrow, click once... it fades in and does that... so there's a lot you can do, we're just
going to keep it simple for the moment... let's talk about some of the quirks. So one of the quirks is that
if you rename it... so we've got line 13,
and line 13, if you're like... "Oh, I'm going to be very careful,
and good... and rename at least
one of my layers"... because it's got a different name
now, it's not going to work... let's go back, back arrow, click once,
just kind of like fudged it... so if you get a Name 1, that's fine... just make sure you name
the other one Arrow... back one, click. What else do I want to do? I don't like
the Fade In, going to go back up to 100%... the other thing I want to do is,
I'm doing it On Click... basically what I want to happen is,
I want to go to Checkout page... and when I click this, I want the arrow
to start kind of like moving in... automatically, because at the moment
I've got to click it and bring it in... you'll also notice, if I go back one,
when I click on this... because of the transition between... the Checkout page
and Confirmation page... because it does this back and forth,
you actually see the arrow, look... that's weird... so we're going to do a couple of things,
when the Checkout is open in Prototype... I don't want it to do the crazy--
what are we doing? We're going to get it to do On Tap,
navigate to our Confirmation, perfect... but I don't want to do the Move In,
I'm going to go to Instant... and I'm going to turn that clipping
back on, so back to Design... remember, we clipped it off before,
or turned it off so we could work on it... it's great while you're working,
but if you start seeing weird things... you might have to turn the Clip Contents
back on, so let's give that a go. I actually want this off screen... make sure that it's
inside Confirmation A... ready? It's going to go back,
let's click this, Instant... I want it to automatically go across, not
have to click somewhere and go across... so we're going to introduce another
kind of transition between frames. So basically what I want to happen is,
when it gets to here... we go to Prototype,
at the moment what happens is, we say... on Tap, navigate to this
other confirmation B... I don't want to be on Tap, I just want
to use this one that says, After a Delay... so I want it to get here,
and then after a delay of however long... I'm going to turn it down
to one millisecond... you can't have 0 for some reason... you have to have one millisecond,
which is one thousandth of a second... so it's going to be instantaneous,
it's going to get here... and then automatically move to this... and it's going to still use our Smart
Animation, so that's the only change... let's give it a go, let's go back to
our Purchase page, give it a click... see, it got to there,
and then automatically moved on... if that's a bit confusing
let's change it to 2 seconds... so 2000 milliseconds, and let's go back... so we click this, it gets here... waits for two seconds and then
moves to the other one... and the smart animation moves it in,
you're with me? If you're not with me, don't worry,
we'll get a few more of these to do... it is a little bit weird... especially if you're from
another kind of animation tool... where you've got a timeline,
and keyframes... Figma does it, but if you're thinking,
"This seems a little bit clunky"... it is, don't tell anyone... it is Figma trying its best to be
all things to all people. All right, so the rules are,
make sure that... the names of the things
you want to animate... like our arrow here are
the same on both frames... we have duplicates
of the same frame... don't move the stuff you don't want to,
move the stuff you do want to animate... you need to make sure
that the smart animate... is transitioning between the two,
that's what makes the magic happen... and the other big thing is that everything
needs to be within the frames... what I mean by that is,
remember our little arrow over here... can't be hanging out in no man's land,
it actually has to be on this frame... and this Frame,
even if it's out in the Artboard... it needs to be kind of grouped
together inside that frame... those are the rules of animation
in Figma... all right, that is it,
I will see you in the next video. It's class project time,
your first animation... so just get that arrow to move in, and if
you're kind of like new to animation... and you're like, "Man, this is going to be
tough," just do the arrow that we did... get it to work on yours,
change the arrow up a little bit... you know, get exciting, get a,
like a line arrow or reverse arrow... do something a little bit different... but do that and then
send me a screenshot... so just kind of like,
screenshot these two frames... or three frames,
if you end up doing more... but yeah, if you're new to it,
just do that, nice simple one... we'll get into more
animation later on... if you are like a little bit
keen and savvy, and brave... I'm happy for you to go
a little bit further. So in here it says, you might try
something, keep it simple still... don't get things to bounce in
and bounce off stuff... multiple keyframes like
that is tricky in Figma... but maybe it comes in from the top,
maybe using a ball, a square... a tick that comes in something different,
up to you... if you did want to do more than
one kind of animation... you can have multiple, friends,
that all kind of have delays... and lead into each other... but again that is for the people who,
I don't know... at this stage, I come from an
animation background-ish... so I'd be like tackling that... but if you're new just do the simple
arrow, and we'll do more later on. The other thing is,
is that we're just taking screenshots... and uploading them as assignments... I'd love to see your animations,
but in Figma, just so you know... there is no like built-in recording part,
when you get to here... be great if there's a button that says,
Record My Stuff... check it, might be there now,
but there's not at the moment... so I would love to see
what your animations are. If you do know how to like
record your screen, like I do... I'd love to see either a video, upload it
to something like YouTube or Vimeo... that would be great,
or an animated GIF... but it can get a little bit tricky
if you haven't done it before... so screenshot is totally fine... all right, that's the class project, do
your first little animation, be excited... even if it is just a boring
old arrow sliding in... all right, on to the next video. Hi everyone, in this video we are
going to be sharing our design... with our client or one
of our stakeholders... so we're going to share it,
first of all with Doug, who is Doug? Doug is fictional,
I'm using Doug as a representative... of a level of person you're
going to be sending it to... Doug is a simple creature, he hates
computers, and logging in, and passwords... but we still need to get-- he's our client,
I want to get him this prototype,... this wireframe at this stage,
just to see if I'm on the right track... keep him involved,
rather than surprising him at the end... so it's really easy to share
stuff in Figma. so we're going to use
the Share button along the top... click on that, and we're going
to start with a simple version... because what I'm going to do is
just send Doug a link via email... that's all I'm going to do, I'm going to
copy it, I'm going to close it down... I'm going to open up a browser,
and I'm going to pretend to be Doug. So this is Doug,
I emailed him a link... he clicked it in his email address,
and this is what he sees... the nice thing about it is that,
Doug doesn't have to sign up... or get passwords,
or go to free trial... or all of that jazz, it just works,
which is really cool... and he can kind of move around, he can't
do a whole lot without logging in... but he can look at it,
he can't comment at this stage... we'll do that in the next part... but he can look at it and go... "Oh yeah, that's cool, I like that,"
or, "Hey, what's this going on?"... and give me some feedback at this
early stage of my wireframe... just to make sure I'm on track. The other thing you can do is, this little
Play button still appears here... so we can click on this, you might have
to tell them exactly where it is... and he can go through and actually
prototype it without having to log in... he can see it,
he can click on Learn More... you can realize you can't get from
Learn More to the purchasing... so back to Home page... so he can see all of this, which is cool. One thing that might confuse Doug,
which it does for some of my clients... is it's opened up a separate tab, you can't
close this down and get back to it... you're like, you can click everything
but you actually... just, it's got a separate tab that opens up
when you hit this Play button... see along the top there... so yes, where this gets
even cooler, like... this might freak Doug out,
it might freak you out... so he's working on this... what you'll notice is,
I'm going to make Doug go over the side... so pretend this side is Doug,
and this side is my regular old Figma... so let's put a gap in between... so this is him on his computer,
at his house, and this is me on... you know, this is me working, like I
did before, and what you'll notice is... he can see my arrow. Figma is a really amazing
collaborative design tool... so it's probably, for Doug,
he's not going to appreciate that... he's going to be weirded out, that I'm
following him around with my little hand... I can even see Doug,
look, there is his hand... so if I move him over to,
and click on this... anyway, you can see each other,
that's the point... and let's say Doug's like, "Oh man,
it's good, but what is that green?" I'm like, "Oh my God, quick,
before Doug sees it, I can be..." select all same color, go, and he's like... "I hate green, man,
green's the worst color in the world"... I'm like, "Ha-ha, what about pink?,"
he's like, "I hate pink more"... what about red, or orange? So what's happening is,
this is live collaboration... so it is amazing when you're working,
with other designers and other creatives... because you're just doing something,
and you can all work on it together... but at this stage you're just
working with Doug, and yeah... he doesn't have to do anything else,
can just look... we don't have to be
updating it in front of him... but it's a cool little bonus extra. Now let's bring Doug back, come on, Doug... if Doug wants to use commenting , which is
probably one of the really nice features... he can sign up for free with either Google,
or sign up with his email address... and he'll be able to start commenting. So there's one thing that I might
convince Doug to do... so you can actually use a little pin,
and actually start commenting on it... let's show you a couple other things
before we do commenting... so I'm going to go back to Figma,
so forget about Doug, bye, Doug... a couple of things that
you can do as a designer... is you can go into here,
when you do go to share, you can say... I want to link to a specific frame,
so let's say that-- the Home page is wrapped up,
there's just problems... with the Product Details page,
because there's no clickable button... let's do this terribly, let's make that
clickable, we can go to the Checkout... so what is it doing? Instant, that'll do... so what I can do now is I can select
the frame first and then go to Share... and then that option will work,
it'll say, when I send this link it'll actually link to the specific frame,
this one here, it'll start there... if it's grayed out it means
you've got nothing selected... and I go to Share,
you can't tick anything... so that's one thing,
let me show you what commenting does. So let me upgrade Doug, wait there... so upgraded Doug, this is Doug now... before, he could only do
very limited stuff... now with his free login... he gets probably a little bit
too many details for-- oh, poor old Doug, he's like, "Why can't
I see the CSS code?"... but the difference now is
he's got commenting... so Doug over here is like,
"Okay, I like this"... can't see my comment... so Doug's going to write... "Why are we not using real images?"... signed Doug... Doug is a wireframe, that's why... so he posts on his one, on my side
I can see Doug now, there he is... and I can start seeing comments
coming through... and I can see it there,
and I can see it's pinned... and I can see it's going there,
and I can reply to Doug and, say... "Doug, I've told you a million times,
this is just a wireframe for testing"... send it off to Doug,
I should put a smiley face in there. You can see, we can have this
collaboration between my clients and me... they can pin stuff,
all the client needs is a free login... or they can just do it by email,
don't have to log in at all. So commenting is great,
there's a couple of things... and for me, on my side,
let's forget about Doug now, let's go-- can you see up here, the two Ds, should
have called them Fred or something... but there's two Dougs now,
so there he is there... he's the yellow guy, you can have
loads of them along the top here... of different people looking at it... lots of different clients,
lots of different testers... I'm going to go from my-- I don't
want to be on comments anymore... because I can add comments myself... I want to go back to my Tools,
that I know and love... and actually,
I can go back to comments... and I can say, actually, this one here,
I can click on it and I can say... see it here, resolved, so it's one of those
things that we are finished with now... I've kind of made the adjustments
based on it... or at least I've replied his,
and I'm kind of finished that... and I can work as a designer
through the different notes... from my client or tester,
or Product Manager... so commenting is pretty nice and fluid,
and in real time... all right, we'll wrap this video up,
we'll do in the next one... how to kind of share for editing... it's going to introduce a different
part of the Figma experience... which is Figma Teams, all right,
I'll see you over there... bye Doug, bye Dan, I'm Dan. All right, in this video we are going
to take it another step along... we send our file off to be shared with
our client, and that worked great... but let's say we're going to be
sharing this with other colleagues... working in a UX design team,
at a company... and there's more than one of
you working on documents... so I need to share
this with somebody... that can actually start working on the
project, and we kind of work together... to do that we need to introduce something
called Teams and Team Projects. So we got so far with just the drafts,
and using our sharing... so we look in here,
kind of gave us an indication, right? If I want to share, I can send it to,
say Doug... and I want him to be an editor,
but it says... hey, first, to be an editor you need
to move it to a team project... I'm going to click 'Close'... up here, it says it as well,
"Do you want to move this file?"... a lot of things that,
indicating needs to be in a team... so let's go and look at that
the manual way... we can move it,
and it will automatically happen, but... let's have a look the long way,
just so you can understand it better. So back at my little home house here... we've been working in drafts, you can have
unlimited drafts, a bazillion drafts... eventually though, if you want to
be sharing it with other people... and working on it... you need to move it into
one of your projects... you also be named differently,
depending on how you set up Figma... but this is called a Team,
think of a team as like a project... like Scott Headphones,
as a freelance UX designer... you probably have about 20 teams
or 30 teams, for different companies... some companies only need one team
with lots of projects inside of it... and the projects might be things like... hey, there's the mobile website,
the desktop website... it might be some social media stuff
we're working on... it might be some flyers that we've made... or the redesign of that web page... and then redesign again,
lots of different projects. So you share the kind of company-wide
team with the different people... so I can go to Members,
and say, I want to invite... you, you, you, and you to this team... and inside of this projects
we're going to have... Desktop, Mobile, January sale,
all that sort of stuff... anyway, those are what?
Those are the basic overview... of what teams and the projects are. So let's go back to this,
so we've been given-- yours will be different,
the name will be different... but you've been given, inside your
team there's already a team project... it's this thing here, you can view it that
way or this way, it's the same thing... we're going to delete it for the moment,
create our own, they've given you like a... pre-made team project with stuff in it,
we can open it, have a look... this is the default one
for Figma at the moment... and there's just a bunch of styles... lots of things going on in here,
different assets, it is... it's kind of useful, I find it's jumping in
probably way too much for a newbie... so we're going to close it down, and you
can keep it if you want, don't have to... back to Home, I'm going to... get rid of this project, right click it,
delete it, sorry, team project... I'm going to create my own,
'+', 'Create my Own Project'... and this one is going
to be the e-commerce... it has to be lowercase e for some reason,
e-commerce website... let's create it... now, all we need to do is, this draft in
here, the one we're working on, called... mine's called Scott Ecom 1,
I can just drag it into this project... and that will unlock the editing... and you're like, "Why, what's
the difference between drafts... and just kind of like,
team with a team project"... with a file inside that team project... this unlocks some of the features... so that I can actually
collaborate with that person... I've still got that file open,
nothing's really changed except... can you see, it's not in drafts anymore,
it's in that project... and now when I go into Share,
I can do more... I can allow people to edit,
so I can say... Doug, we don't really want to edit,
but let's say Victoria... Victoria is somebody I work with,
another UX designer... I can send her email address in here,
and she could start editing this thing... so why do I show you all of this,
because it pops up quite a bit... and it's one of those break points
where you go from free to paid... because, let's have a look,
let me show you, so back at Home... remember, drafts, you can have as many
files in your drafts as you like... but if you want to share it
with another collaborator... it has to be moved out to here,
and I've got a team... that team can only have one team project,
inside of that team project... you can only have three files,
so that's where they kind of... you know, that's where you move,
from going, "I need to pay for this"... because it's great having one project,
but I need two of them... e-commerce website, and this other app
that I'm building for them... or there's other kind of sub-section
that I want to break apart... rather than just jamming them
in the same project. Now in terms of the files, you're going
to need more than three pretty quickly... now this changes,
go to figma.com/pricing... and they will show you what you get,
actually, I'll bring it up here... this is what it looks like at the moment,
it will change... it says Free, you're allowed unlimited
drafts, but you're only allowed... one team project, and you're only
allowed three files within that project. There's a few other things as well... but this is where you might bump
up to a paid, the paid product... there are ways around it,
a lot of people do... you're weirdly allowed at the moment,
unlimited teams... so I could have a zillion different teams
with one project, and three files in it... and you can see how that works,
and you can see how... it might be a bit cumbersome as well... but it is pretty amazing,
what you get for free out of this Figma... again, these rules will change,
go and check figma.com/pricing... to see what is available and what's not. So to reiterate, I've got this,
I can share it when it's in drafts... I can move it back to drafts, I can say... you, actually, I'm finished with
this project now... and I'm going to be sneaky, move it back
to drafts, so they don't have to pay... the trouble with it though is, anybody
that was an editor can't see it anymore... it comes out of their Figma
and goes into drafts... and I have to kind of share it this way,
here we go... kind of like Doug, he can view it,
he can comment on it... but he can't be a co-collaborator on it,
so pros and cons. There are a few other things that,
you know, a paid version gives you... that we'll throw in throughout the course,
but that's one of the big ones... one team, one team project
and three files only. All right, that's it,
I hope that helped... that really confused me
at the beginning of... like the screen here,
confused the heck out of me, drafts... this thing, this thing, I can create
more teams, what goes in here... so I hope that helps, I'm going to leave
mine back in drafts for the moment... so if you have dragged it out
put it back into drafts... you can just drag it, click, hold,
drag it from one to the other... and we'll resume our regular scheduled
free version of Figma in the next video... all right, I'll see you there. All right, you made it to the end,
well done... if you enjoyed it,
like and subscribe, of course... and also remember that this is
a short part of my longer course... it's not so short, right... but this is the first 29 videos, of 111... so there's lots more to go here,
if you are interested... if you are, there'll be a link up
here in the cards, in the corner... link in the description, or just Google... "Daniel Scott Figma Essentials,"
and you will find me... join me for the full course,
lots more exciting stuff to go... yeah, that is it, I hope you're
feeling more confident in Figma... and maybe in UX in general... if I don't see you
in the full course... I'll see you around here on YouTube,
lots of pointing... that is the end, goodbye, everyone.