- 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)
