- Hey designers, I'm Charli, I'm a web designer
and in this video I wanna give you a basic,
one on one introduction to using Figma
for designing websites.
(upbeat music)
Figma is a tool that I use to do the majority
of my design work these days.
I think it's a great piece of software,
the team constantly working on improving it,
but I know it can be overwhelming
to either switch to a new tool
or just get started using a new piece of software.
So, that's what I'm here for.
Let's just jump right into it.
This is Figma.
The great thing about Figma is that
you can have either a free or a paid account.
With a free account, let me just pull up the pricing here
to show you, you can have up to three projects,
whereas with the paid account you can have unlimited
and it's also a few other benefits as well
that I'll come to later on in this video.
I have two teams, so one is a paid team
and that is the ConvertKit team, that's what I use for work.
And one is my Charli Marie team,
which is just me, myself, and I
and I use this for my personal projects
and my own website, that sort of thing.
So with a free account you can have up to three projects
but a project is not a file,
this was really confusing to me when I first got started,
so I wanted to point this out.
A project is kind of like a folder,
that files organized into.
So you can see here that I have two projects
in my free account with multiple files within them.
So get started with the free account
and it'll do you good for quite a while I think.
Let's start by me showing you one of my files.
And just by the way I'm using the Figma desktop app on Mac.
I prefer to do that than use it in the browser,
it just feels more like, I dunno, like it's a separate app
and I like having the icon in my dock, that sorta thing,
but it's pretty much the same as what's on the web,
so you know, whichever you wanna do.
My Figma file has unlimited canvas, which I love,
and you can also have multiple pages within the file.
So I see how I've arranged this particular design,
I've got the To Build page here,
which is what I hand over
to the developer I work with, Cory.
I have my design, which has my design projects in it
and I have the wireframe, which is where I got started,
so I like to just split up my project
into different pages this way.
And it's really easy to add another page,
just romp this plus button up here.
On the left hand side of Figma we have all our frames,
which kind of like an art board or a canvas,
and then all of your layers as well.
Please don't judge the fact that my layers are very messy
and mostly unnamed.
And then on the right hand side here
is where most of your editing takes place.
So, that's what we're working with.
Let's start a new file and I'll show you how to get started.
So the first thing that I wanna do when getting started
with a new design is add a frame to the canvas, obviously.
So to do that, I'm gonna click on frame up here in the tools
and you'll see that Figma has a few preset sizes
that you can just click on to add to the canvas.
So if I click on Desktop here,
now I've got a desktop like size screen.
Or if you'd like, you can also draw your own size frame
depending on what size graphic you are needing to create.
And you can change the values up here
to get something more exact if you would like.
Then the next thing I do when getting started with a design
is add a grid.
So if I come in here you can see
that I already have some grids setup.
Let me show you how to create something like that.
So say I want to create a grid
and I want it to actually be columns,
I want there to be let's say 10 columns
I definitely want to put this in the center of the page
and for them to take up maybe be like 70 pixels each.
Now what I can do is come in here to these four dots
and if I click this plus button,
I can save this grid that I've just set up as a style.
So let's just call it test style for now.
Create that and now you can see
it's added to these options here.
That means that I could then go
and apply it over on this other frame that I have as well,
although that frame wasn't quite
wide enough to fit the grid.
And if I wanna make sure I can use this grid
outside of this file, maybe I wanna use it across all
of the files that I have.
First I will save this.
So that saved the file in general.
And if I come over to Assets here,
click on this little book, don't worry about all this stuff
I'm gonna show you that in a sec.
Click on this little book, this is my library
and I can publish this test system to the library.
So let's go ahead and do that.
And now if I start a new file,
I can come in here again to the library
and as you can see, I can turn on this test system here.
This gives me access to use any of the styles
that are set up in this file in this new file here.
Let me show you how this is working.
I'm gonna add another desktop frame to this new blank file
and then we're gonna come into our grid,
click on the four dots and there is our test grid style,
so we can use it.
And as you can see I have set up grids
according to the bootstrap design system,
which is what we use on our marketing side.
If you wanna know what the settings are for that,
'cause people always ask,
I'm just gonna bring it up on screen here,
zoom on it nice and big so that you can copy them.
Sorry, hope you're still with me after that,
that was a lot of jumping around,
but you're starting to see some of the power of Figma
that you can save styles to be reused across different files
and it can just really help to speed up your design process.
And it's not just grids you can save,
you can also save colors, you can save type styles,
you can save effects, that sort of thing,
it's pretty powerful.
Let's show you how to create some of those things.
So to add a shape, start putting things onto your frame,
you use this menu here, there is a few different options
or you can draw a shape using the pen tool,
but we'll talk about that in a second.
Just gonna add a box in here
and do you see those red lines that are showing up
as I'm extending this box,
it's trying to help me align it to my grid,
which is really useful.
Coming in here to my fill settings,
I'll show you that I can have my ConvertKit colors
are all setup as a color library
for me to pick from, if I'd like.
With a fill on a shape, you can also add multiple,
so if I say I wanted to have a gradient on top
of this navy color here.
And this is also where you add images.
So let me come into image and let me add something.
Oh cool, how about this photo of me with my skateboard
that I bought myself for Christmas.
This is how photos are handled in Figma,
is that they are a fill on a shape.
So even if I had added a photo
by this place image setting here,
it's rather large, but we can see that this has come in
as a fill on a shape,
just like it's working on this one here.
So with an image, you can have it
fit the whole image in the frame,
you could crop it, so this way I could like,
zoom in on a certain part of the image if I wanted to.
Make this like a headshot or something.
Or you can also tile an image,
so you can have it repeat multiple times.
There's a few basic image control things here as well.
But usually personally I tend to open up Photoshop
for anything like heavy image editing,
but it's handy to be able to do a few quick alterations
right here in Figma.
On my shape up here I can edit the size
just by typing numbers in these boxes,
I can also add a radius to it,
so I can actually turn this square into a circle
by adding a big enough radius if I'd like.
And now it's kind of looking like an avatar isn't it?
I can add a stroke to my shape as well,
just by clicking on here.
And there's a few different options here,
if you're wanting to create like a dotted line
around the edge for some reason.
Let me just change the color.
I can add a drop shadow to my image if I'd like,
just by clicking on this effects button here
and there's a few other blur
and shadowing options if you'd like,
but let's just make this shadow a little bigger.
And if I wanna save this new drop shadow style
that I've created for use in other files
or to use again in this file,
just like we did for the grid, I click the four dots,
I click the plus button
and give it a name.
You'll see here there's a little dot up next to Assets
and then come in here,
there's a little blue dot on the book.
Every time you add something saved as a style
to a library that you've published,
remember we clicked publish on this library,
so I could show you the grid system in that other file,
it wants to update that library,
so that way it can bring in any new styles
that you've saved since the last time that you publish.
So I can click here to publish that change
and now this new shadow option that I just saved,
I'll create a shape real quickly to show you,
is available in my other file.
So we can kinda make this like a little, I dunno,
avatar thingy up here perhaps.
Maybe I wanna add my name next to it using the text icon.
Figma brings in Google fonts, so there is a big list here,
but you can also use ones from your own system
if you've got a font in your system on your Mac
then they should be showing up here too.
I can just click on option and drag something
to make a copy of it.
And just like we were saving styles before,
we could save a text style too,
again just by clicking in here.
So I have all of the type styling that I use
on the ConvertKit site set up in my shared system
for any new file that I open.
Let me show you how vectors work in Figma
'cause this is another really cool way that this works
that was quite different to any other design software
I'd used before I'd used this.
So I'm gonna use the pen tool to draw a shape,
pretty regular, right?
Like Probo it's pretty much the same.
This is where it gets cool.
Where Figma has what's called vector networks.
So if I wanted to add another little triangle
at the top here to make a sort of cool geometric shape.
Instead of drawing a brand new shape
and then like grouping them together or you know combining
I can actually just keep on drawing
within the same shape here by clicking on this point
and adding in the next triangle that I want to make.
And then we're gonna click Done or you can also click Escape
to get out of that editing mode.
And now this is just one whole shape
that I can edit together, adding a fill, adding a stroke,
whatever I wanna do.
And at any time I can double click on it
and come in to edit points if I'd like to.
It can take a bit to get used to
how this whole vector networks thing works,
but I'm gonna leave a link down below
to a really great post on the Figma site about this
that really helped me get my head around it.
So I think it'll help you too.
So another thing that we can do as well as saving styles,
is we can save elements that we've created to be reused
in other files as well.
Now this is a feature that right now
is only available on paid accounts,
but I'm gonna show you how it works anyway
in case this is interesting to you.
So we're gonna call this, let's just pretend this is a logo
of some sort, I dunno what kind of business this is for.
Now if I right click on this shape
and go to Create Component
you'll see that it's changed
to have these four little diamonds up here.
This means that I can make a copy of this shape,
I can duplicate it and if I wanna make an edit to it,
like say I decided I want to bring this side in a little,
you can see as I edit this one,
it also automatically updates on any copy
that I have of that shape in my frame as well.
So that's what all of these things are here
that you're seeing in my Assets panel,
'cause I have a design system
for the ConvertKit marketing site set up
so that I can easily just drag in a button
and add it to my design, whenever I'm needing to add one.
And if I update this button in my design system,
it'll update across all of the files
that I've used that button in.
So that's a pretty powerful feature,
that is one of the reasons why we have a paid Figma account
for our ConverKit team
is so that we can make use of things like this
because it just makes my design process a whole lot faster.
I have done a whole separate video
about how I set up this design system in Figma
for our marketing website,
so if you'd like to get a little more advanced
and watch that, I will link to it on a card
and also in the description for you.
I'm gonna bring in something from this design system
just to quickly show you another editing feature in Figma.
See I've go this element here
and as I shrink it in, just this text changes,
none of this stuff is like squishing in
or anything like that
and that is because of the way I've set up
the constraints on this.
I'm gonna detach this,
so this is what you can do if you ever want to edit
a component you've placed and remove it from being attached
to the master one.
And you can tell which is a master
because a master will have the four diamonds
versus the child component will have an empty diamond,
if that makes sense.
So this is now no longer a component.
So I've detached it, if I make changes
in my design system they will no longer update right here.
Just 'cause it's something I want to show you.
So if I had set this to scale,
which is how a lot of things by default,
when I shrink this in, my icon is going to get very deformed
which is not what I want.
So I have this setup to be constrained to the left
and to the top,
so that way when I shrink in this canvas
the only thing that's changing in size is my text,
which is set to scale.
And this title at the top here is set to left and right
so it'll always stay relative to the same position
that it's in right now on the left and the right.
And that means that this happens,
when I shrink in the box of my component.
That might be getting a little advanced,
but just if you find yourself confused
about why some things are responding in one way
and differently to others,
you're not sure what's going on there,
constraints is usually the answer.
I found that when I imported my old files from Sketch,
and I would change the canvas,
just by pulling up or down on the bottom of it here,
most of the things when they were imported
were set to scale so all of the pieces of my design
were distorting.
But a cool trick if you want to resize something
without it paying attention to constraints
is to hold down the command key as you expand
and then it will leave your design untouched.
So that's just a little tip there
if you're moving from Sketch
'cause I found that an issue when I was getting started.
Let me show you how to export something from Figma.
So let's say I want export just this image here
with its shadow behind it.
I can click on the plus icon next to Export
then I can choose which scale I want that exported as,
whether I want it PNG, JPG, SVG, PDF
add a suffix to it if I'd like
and when I click Export I can save it
anywhere that I'd like.
You can also export the CSS of elements.
I sometimes export vector shapes
by right clicking and copying as SVG
and then just like pasting it into the code
wherever I need it.
And speaking of code, you can also access
some of the CSS styling of elements in Figma
through the Code tab.
So you see here this shows you
all of the CSS you need to add
to get the font like styling the same
as this piece of text here.
Figma is design software, it's not a website building tool.
Some people get confused about that,
so you cannot just directly export all of the HTML and CSS
of your design, you will need to go and build it,
either with code or in Webflow or whatever it is
that you're doing.
So Figma is design software
that's for getting your ideas out
and figuring out what you want it to look like
it's not for building a website.
What you can do though is build prototypes.
So to show you that let me bring up
an example I prepared earlier.
This is a file where I was designing some new navigation
for our marketing site.
So in the Prototyping tab you can see
that there's curvy lines all over the place.
So if I click this play button up here,
this goes into presentation mode,
and now I can interact with the things
that I've set up in my design.
So like this dropdown here animates the menu down.
I can show the hover state.
So this is a way that you could use Figma
to share your designs with stakeholders
and get their feedback on it.
'Cause they could also click here
and click anywhere on the screen to leave a comment
about your design as well.
You can also just share the whole file if you'd like
by clicking the share button here.
'Cause what's great about Figma is that it's collaborative.
So myself and Dylan, the product designer that I work with,
we could both be in a file at the same time
and when someone else is in a file
you can see where their mouse is on the screen
and it updates real time with what they're working on.
So it's a great tool for collaborating with other designers
or like I said, I share all these files
with Cory the developer that I work with as well.
So he can see the latest version
of the designs that I'm creating, that he needs to build.
In that prototype you saw
where the dropdown menu animated in and out.
I used a feature called Smart Animate for that.
Figma does have some animation prototyping features,
but I would say they're a little more advanced
so I won't go into them in this video,
but if you'd like to see me playing around with this tool
'cause I filmed my first reactions
as I tried it out for the first time,
I will have a link to that in the card as well.
Hopefully you've seen that Figma
can be a really powerful tool for design,
but it can also be really simple if you want it to be.
And don't feel overwhelmed by all these components
and animation tools and things like that
when you're getting started,
just start adding things onto your canvas,
building out your design
and you can add in all those little more advanced features
as you go and as you learn.
I hope this video gave you a good introduction
to the tool though
and maybe makes you feel a little more confident to go
and start designing with it.
If you've got any questions,
then you can ask me in the comments,
but honestly, Figma themselves have a really great,
resources and learning section of their site.
That's where I've learned how to do most things,
so I will leave a link there in the description,
you should go and check that out,
watch a couple of tutorials and things like that
and I know you'll be up and running with Figma in no time.
Thanks for watching, pleas give the video a thumbs up
if you enjoyed it or if you found it useful
and I will see you in my next one, bye.
(upbeat music)