Transcripts
1. Intro - Cat in the night illustration: Hello friends and welcome. Today we're going to go
for a very fun class. Together. You and I will be designing
a simple illustration. Now, why would I
want to learn this? I hear you ask, well, first off, to get your
creative juices flowing. And secondly, to familiarize
yourself with a design tool. Here it will be Figma. And the Figma pen
tool in particular. Being able to handle
a design tool is a very useful skill to have if you work
in a tech company, we would like to
express yourself to different audiences to get
your ideas across to them. As a product manager, I use it when talking
to the tech team, the design team, the
commercial team, the marketing team, and
the customer support team. Hopefully this exercise
will help you in getting familiar in how
to use a design tool. And this skill will follow
you for all your carrier. My name is Olivia, Our for digital company down in
Melbourne, Australia. And I will see you in the
next class. See you soon.
2. Class Project: Welcome back. Let's talk
about the class project. In this class, we'll design a simple
illustration together. You'll start by signing up for a free tier account
on figma.com. Then you'll download the
hand-drawn template that I've put in the project
and resources that will then add the template
to our frame in Figma and we'll use it as a guide
to draw our illustration. You can also draw your
own template and I will show you how to do that
in the fourth video. We will then go through
drawing the illustration together using the
Figma pen tool. Please follow along. And lawyers at the same time, we'll then call
our illustration. You'll also find the color
palette that I use for the illustration in the
Project and Resources tab. And when you finish, please post your
illustration in the project and resources tab by hating on the Create Project
button and following the prompts and without further ado friends,
let's get to it. I'll see you in the next video.
3. Preparing your canvas: Hello friends. In this class we will
be designing what I'm calling the cat in the
night illustration. But before we get to that, let's prepare our
Canvas for designing. If you don't have Figma, please head off to figma.com and sign up for a free
tier account just here. After you've signed up, you can either use Figma in browser, which it will allow you to do, or you can download the app for your Mac OS or Windows machine. I'm using Mac and I've
downloaded the app. I will be using the
app for this tutorial. Once you've set up Figma, head off to the Project
and Resources tab in Skillshare and download
the two assets provided. Number one, the color palette, and number two, the
template for the drawing. Afterwards, head back to Figma. You will see this
plus sign up here. Click on it and
click Design file. We'll let it load.
After it's loaded. We will go ahead and call this
In the night illustration. And if you've
downloaded them from the Project and Resources tab, you should have cut in the
night palette on your machine, which you can just drag
and drop into Figma, as well as the gut in the night template which can
drag and drop into Figma. We will then zoom out and
we will resize those. So just hold Shift
as you resize it from the corner so that
we keep the aspect ratio. And we will also make the color
palette a little smaller. Alright, so now go ahead and press F on
your keyboard for frame. You will have different
options for frames. Let's select the
Instagram posts, which is a 1080 by 1080 frame. As you can see here. And what we're gonna do
is we're going to drag our image and we're going
to put it on the frame. We can resize that image
a bit because it's too big and make it fit the frame. Just like so. Then go
ahead and press two on your keyboard to decrease
the opacity of the image. That's because when we use
the pen tool in Figma, we want the picture itself to be barely enough so that
when we're tracing over it, we can actually see, right, let's highlight
this whole frame. And Sandra, Okay, we're now ready to
draw our illustration. So I will see you in the next class where we are
going to be using the Figma pencil to draw over our illustration
as well as chlorine it. See you guys soon.
4. Designing the illustration: All right friends, let us
draw this illustration. So go ahead and press P on
your keyboard for Penn. Alright, so you can zoom in with your trackpad with the
pen tool you want to click first and then
try to judge where the curve is going to
end on the template. So it's around here. So you click and then
you don't let go and drag to try and match
the shape, just like so. To change direction, just
click on the previous point. Click. Try to judge where this small curve
here is going to end. So about here, and drag. Click on the previous
point to change direction. Try to judge where this
curve here is going to end. Click there and drag and click on previous
point it change direction. Try to judge where
the curve is going to add, click and drag. You can see how the
outline is taking shape. Just keep going. Click
on previous point. Judge who has gone to the next. The curve is going
to end and drag. Click, click, drag, click, click, drag, click,
click, and drag. And you can see how easy it
is to just use the Pen tool. Click and drag. Click and drag. Matching the curve. Click, click and drag. Click. Click and drag. Click. Click, click, click, drag, click, drag, cleveland, drive. And final point,
click, click and drag. And you can already see this is our cat outline
with the pen tool. So let's make the inside
shape of the gut. Click. Click and drag. Click, drag, click and drag. So I just press Escape to break the path just to be
able to scroll down. And then you can
double-click again to get into vector mode, P for pen. Then you click, click, drag, click, and drag, and drag. Click and drag. Let's now do the tail. Design. Click, drag, click,
click and drag. Here, click and drag. Click. Alright, so now we want
to call it our cat. Just press B for paint bucket. And you will see this little
thing here showing up, which is the paint bucket tool. Or you can go up here
on the top left corner, which just here,
since paint bucket B. And if you click on there, it will fill in the
color, which is great. But we want maybe let's say
black for the cap color. I know what happened. So before we decrease the
opacity of the whole frame, here, we want to
bring that to 100%. What we want to do is actually decrease the opacity of
just the illustration. So on the left-hand side, you can go on the cut
illustration template. And we will put these two. 20%, just like so. And we don't want it to move. So we're just you
see the look here. We're just going
to put this up on. Okay, so now we have our
cat and it's painted black. Let's go ahead and
finish the painting. Double-click to get back in
vector mode before bucket. And we can finish
the stripes here. Then. To make the
illustration professional, let's go ahead and
remove the stroke. On the right-hand side, you can see the minus. Just click this minor stroke. And what we're gonna
do is we're going to pull this get outside. Oh, we forgot to
paint the white bits. So go ahead, press double-click
vector mode, press B. And this, we want to
fill it in as white. So if we go to our
color palette, just click on white. And this here B. And use the pivot wide,
aka color picker. And B. Use the color picker, white on the color
palette. And B. To do the final tail part. We have our word cat. Now we're going to
draw our flower vase. So let's go ahead and
zoom in a little bit. P for pen. Click C where the curve is
finishing, click, drag. Click back on the previous
point to change direction. Click and drag. Click. Click and drag. Click and drag. Click, click, click, click, drag, click. You'll see those red lines
that sometimes pop up. They're just saying that those two points are
on the same level. So you click and drag. Click, click and drag. Click, drag, click, drag, click, drag, and click. Click, drag. Cool. And we have our values. Alright, now let's go
ahead and paint the pot. Just double-click on
it to get back into vector mode before
Paint Bucket shared it. And let's fill it in. So for this one maybe we will go linear just to make
it a bit fancier. And you can see the grading
of the color just here. I want to change its direction a little bit so you can
click on this one, the top here, and rotate it. And click on the dot at
the bottom and rotate it. You can see the
shading direction changing notes from
there to there. And for the ways maybe we want a different color than gray. Let's go to our color palette
and pick this blue here. And this linear shading made
sit a little bit fancier. And you can play around with it. Make it more concentrated
on this side of the vase and less concentrated on that
side of the base. Alright. So that's our flower pot. Let's remove the stroke. And there you have it. Let's go ahead and
drag that out. Yeah, that's your
second vector shape. Let's now draw our flower. Let's start with the
stem. People ban. Always start a little more
within the next shape. The key is we will lay over those items and I will show you how to do
that in a second. So you want it a
little bit longer. Than it actually is. So click and drag, and click. Click again. Let's go longer here. Click and drag. Click, click, click, click, drag, and click. To complete the vector shape. Let's paint our stem. So double-click to get into vector mode before Paint bucket. It's blended, its fill it. And let's pick a color
from our palette. Let's be brown for stem. And here we have it. That's our flower
stem. Press Escape. That's our vector shape. Let's remove the stroke. And here we have it. That's our stem.
Alright, let's now draw the center of the flower
and the flower itself. But before that, let's drag
our stem out. Like so. Let's come back here.
Zoom in on the flower. P for pen, click, click, drag. And of course, the template
itself is just a guide. You guys, you just follow it. But you can also go out
of boundary if you want. Click, click and drag, and click. And drag. Before Ben bucket. Let's fill in the center. We have some nice yellowish
color, bright yellow here. And let's take out the stroke. And now let's draw our petals. Just press Escape first
because you want to start on a new vector shapes
so that they're not joined. Escape. And P for pen,
Let's draw battles. Click, click, drag, click, click and drag. Click. She did something wrong. Just command Z. Click on the previous point. Click and drag. And click and drag. For our first petal. Just come here, click and drag. It's like a song. Click, click and drag. Click, click and
drag. Click and drag. Click and drag. Click and drag. Click and drag. Drag. Drag. Dr. Dr. Alright, before Paint Bucket. And let's pick a nice
bright pink for this one. And b, fill it in. Alright, Now you see
that the yellow part is not displayed anymore because this shape here is at the front. So you can right-click
and you go send this layer to the back and the yellow
bar will appear. Or you can use your keyboard. Left and right square
bracket will bring them, bring their use up
or down is equally. So if we bring it back up with
the right square bracket, wants it a yellow, bring it back down with the
left square bracket. You will see the yellow is go ahead and
remove the stroke on the petals and you have it. That's the flower done. Now, since the yellow and the pink will
always be together, we want to group these two. So just select them both
and just go right-click. Group Selection or
press Command G. You want to get used to using keyboard shortcuts
because it's so much, so much faster going forward. Command G. And that's makes, whoops. And that makes it one shape. Strike it out. Same as before. We want this pink and yellow
to be on top of the brown. So we will bring it forward with the right square bracket.
And there we go. Now, let's go ahead
and make the leaf. You guys know the
song now P for pen. Click, click and drag. Click, click, drag,
click, click, drag, click, drag, click, drag, click, drag,
click, click, drag, click, drag, click,
drag, and click. Click and drag. Right. So we want a nice
green for the leaves, be to fill it in. And select maybe this one here. Alright. How about the veins of the leaf? I hear you are so P for
pen first press Escape. So you have a different vector
shape that you're drawing. So P for pen, click,
click and drag. So what we can do
is we can increase the stroke of this.
Maybe already five. Whoops, too big, maybe three. Alright, just keep going. Click, click and drag. Click, click and drag. Escape. Click, click and drag. Click and drag. And we can change that color. This one to maybe just use
the pivot again, dark green. And then just select
the other leaf. And let's remove the
stroke of the other one. And like before, we want
to group these two. So select this one
and press Shift. Select the leaf and command
G. That's our leaf, which we will check out here. And look at that. We have the flower
pot illustration. Alright, let's now
draw the wall. Let's zoom back in
onto our picture. P for pen. Starting from a
little bit out here, click, if you hold Shift, it will draw a straight line. Click. As mentioned before, we
want it a little bigger, the actual drawing
so that it fits snugly when we send this
to the back later on. Suing. So I can see click, click, click and click. You can change the
stroke back to one and change the color back to black and B. And let's color our wall. Let's make it a better gray. Maybe this one here, blue gray. And let's have it linear again, just to make it a little fancy. And maybe something like this. Now remove the stroke. And there we have it. That's our, Whoa. Let's go ahead and
make the table. So P for pen to escape
first, beat for Penn. Click Shift. Bring it to here. Let's close it. Be. And let's paint our brown. Let's make it linear as well, just to make it a bit fancy. And I think I will turn
this a bit like this. Here we go. Let's remove
the stroke of the table. And now we have our table.
Let's press Escape. So we start fresh. And let's now draw
our starry sky. So P for pen. Click, shift, click, shift for straight line. Click, click. And let's close it. And before Paint bucket, let's paint it. And let's pick a dark
color for our sky. Maybe we want to have
some cool sky as well. So let's make it linear. And let's speak a second color. Maybe let's make it purple. Like so. And that will be
our sky. Alright. Let's go ahead and
remove the stroke. And let's drag those
shapes out of the canvas. Escape. Drag out this one, which is drag this guy out. And again, we want to send
this one to the back. So left square bracket
and you got it. We'll just leave it here
for now and then we'll, we'll rearrange the shape. When we've finished
all the drawings. Alright, let's now
draw our moon. So let's zoom back
in on the picture. For the moon. Let's just go
ahead and press O for circle. We'll just draw a circle over. If you press Shift, it will give you
an exact circle. Drag it here, try to approximate the template as, as you can. And here we go. That's our moon. Maybe we can make it
a bit smaller if we want to. Like so. And press Shift X that will invert the stroke and the fill. Like this. Now you can see the
stroke is the outline. Can use black with black so far. And if you double-click on this, it turns into a vector shape, just like we had before. Alright, let's now
make the inner shapes. Press Escape. Before Ben. Click, click and drag. Dragging, click, click and drag. Click and drag. Click, click and drag. Click. Drag. And click. Click and drag. Click and drag. Click and drag. Click and drag. And click. Click, click and drag. Click, drag, click, zooming. So we can see click, click, drag, click, drag, click, click, click, click, click and drag. And click, click and drag. Driving. Click, drag. And last one. Click, click and
drag. Click and drag. Click. Control Z. Default pen, click, click and drag. And SK. Alright, let's paint our mood. Double-click on the
boundary of the circle, like before, before
Paint Bucket. And Let's do linear again. Let's select a bright yellow for the top and going too wide. And double-click on
the smaller craters, be equal paint bucket. Let's paint them. Let's make them darker. Sort of this kind of color. And let's see, maybe too green. Make it more yellow like so. You can also play around
with the colors here. You don't have to necessarily
follow the color palette. Just be creative with
it, play around with it. And let's fill those. I think it's a bit too
green steel can change this a little bit more. More like so. Here we go. This one. And the other ones. Double-click. Be click. Fill with this color. If you see only those three are selected is because I didn't press Escape enough when lifting the pen and drawing
the different shapes. So they got stuck together. So just why you need to press
Escape Just to make sure you're drawing vector shapes. So you can just
fill the warning, can see that it wouldn't work on the one that's not colored in. So you need to actually
click on the one that was drawn separately,
be Paint bucket. And then we filled it
in with the same color. And we have this one, the big moon itself. We can remove the stroke. And we can also go ahead and remove those
stroke if we like. Forgot to paint this one. We will fill in, just
use the color picker. And we will remove the stroke. There we have it, we have the moon. So what we're gonna do
is highlight all of it. And since the mood is
just the one thing, we're all command G
and we'll group it. And we will then
move the moon out of the canvas into here. For now. Let's not forget the stars
can just come up here. Top left corner. Click on this rectangle here, and you will see this
does done in the menu. Click on stars, can
draw a star here. And let's redraw that star. Star. Draw this but shift to
keep the aspect ratio. And we want the
star to be white. Let's fill it with white. Fill on the right-hand side, take the pivot, come to
white on the color palette. Then you can just press option, click on the star and
drive to make other stars. And just keep Option and drag. Option, Drag. Option drag. These will be our stars. Select all of them
and drag them out. Don't click on this, this just
redistribute to the space. So we want to grab them and
drag them here for now. And we'll rearrange later. And that is the
moon and the stars. Last but not least, let's
draw our picture frame. So let's zoom in on the
big toe frame. Before Ben. Click, click. Click. Just follow the airline like we did before. And again, does not
have to be 100%. On the template. Outline. Just a guide. Here. Click. Close this part. Let's draw our shape. Click, click, drag. Click, and drag. Here. Click, drag. Click, drag. To make our abstract shape. And B for paint bucket. Let's go ahead and
give this bottom here. Dark shade of brown
because it's down below, so it's shadow effect. And B, this one, we want it to be paler colored
people at this one here. B, let's call it that. In this part, we probably
wanted white color. White and our shape,
abstract shape. Let's go ahead and call it this. And we will take
the color picker and use this color here. Let's take all the strokes
and we have our canvas. Let's press Escape. And we'll drag it outside. And right square bracket
to bring it to the top. Right, that's it
for all the shapes. Now let's rearrange
everything on the Canvas. I just drag the cat back here. Put the table back here. Let's bring the wall. Just drag it down a little bit. And we want to send
it to the back. Same as before. Can just use left square
bracket if you want. And bring that picture
frame in. Here. Spring, the night sky in. Here. We'll send it to the back
left square bracket. We want it on top of the wall. So what I'm gonna do
is I'm going to go on the left-hand side here and bring a nice guy on
top of the wall. So yeah, you can see
that the extra piece of the wall is hidden behind it just to make
it a bit cleaner. And for the table, It's already up there,
so that's good. Let's bring our cat
forward in the frame. Bring the moon back in. We want the mind behind the cat. I just took it. So if you look at the left-hand
side, it wasn't Tupac. We wanted the gut on top. So we put, It's another vector. Let's bring in stars. Here. Shift to select them all. And drag. And let's
bring in our flowerpot. Drag down a little bit. And there we have it, folks. Our first illustration
in Figma, very simple. So what are we going to do now? We're going to go back
and look for the cat. In the illustration template. We're going to unlock it and
we're going to drag it out. Just press Shift with your
arrow keys to drag it out. Because otherwise you're going
to grab everything else on the canvas and you
can pull it out. Put it here. My Figma is
not rendering properly. Great. I'd hit Command X, Command V, and that fixed
it for some reason. And there we have it, folks. That is our first
illustration in Figma. Very simple, nice and easy. This does not look quite right, so maybe we bring the
color in a little bit. Keys, where is the stem? And you can see the
wall and table behind. So we can just bring that in, make it a bit more real. And there you go. If you want to try
other colors while you can do is just select
this frame here is click on Instagram
posts or option and just drag it
out to make a copy. Now you can start trying different colors with
your illustration. So if you click on this guy, maybe instead of purple
here, we want in blue. So you just change it to a blue. Maybe. Maybe we want the moon
to come out a bit more. Instead of this slide, you can have this
light yellow here. You really want a different
color for this one here. Different colored flower can
just play around with it. Paler. And you want to change the abstract shape, color of it. There you have it folks. First illustration with Figma. If you've been
following along and drawing at the same
time as I was, you should have come up
with something like this. Please post your end product in the project and
resources tab. I would be extremely
happy to see them, and I will see you
in the next class.
5. How the illustration template was drawn: Alright folks, so after I've taken a picture
of the template, I basically email
myself is the picture. And then I downloaded it onto
my computer by logging into my e-mail and then download
the picture of the template. And then what we do is we take the picture and drag
it into Figma like so. You can see that it's adding
the image and it's too big. You use your trackpad to
get a better zoom on it. And then what you do is
you go to Fill image. You click on that. You'll see the field here. You click on the drop-down and you will get
the crop option. So you click on
Crop and then you will see these blue
borders that appear. So what are we going to
do is we're going to crop the image to the
boundary that we've drawn before so that
it fits our frame. I'm going to crop it here. Crop the bottom. This side. Like so. Here we go. And then what we do is
we click on this image. We go export just here. And we will export this, can export it as PNG. So when we export
it also saving, it'll give you the
folder where you can save it afterwards. Just like so. And then
we can save this, we'll call it In the night illustration. Template, dot PNG, Save. And as you can see, we now have it here. And if we open it, it's basically the
template that we just created for our illustration. And then to start drawing
on top of it in Figma, or you'd need to do again
is you will drag it into Figma, like so. And there you have it. And just show you a
couple of steps more like we did in the previous video. So you click on F
to get a frame, will pick the
Instagram posts frame, which is 1080 by 1080. And now we have it here. We'll take our picture
and put it on there. And we can see it's much bigger. So we'll press Shift and we'll drag it in so
it keeps the size, I mean the aspect ratio. And we'll drag it
onto the frame. So then to allow you to see the outline
when you're drawing will just make decrease the
opacity of this image. If you hit three, it'll go to 30%, basically, to do 20 per cent. Now you can, again take
your band by pressing B and start to draw or a fox. See you in the next video.
6. Conclusion: Hello again, friends. So this is it. Today. We've learned how to
use the pen tool in Figma and draw a
simple illustration. I hope you enjoyed the class. Please post your end result in the project and resources
that by hitting the Create Project
button and following the prompt to upload
your finished product, it's okay to upload work
in progress if you like. If you do have any questions, please DME or put it in the discussion section
of this class. If you do have any
feedback on how I could improve the class or would like me to teach anything else, please feel free to
reach out as well. You can add your feedback and new class suggestion to
the discussion area. Or again, the MA. This was actually my
second class ever. So your feedback would
be very welcome. And until next time my friends keep learning as
much as you can. Let's continue to acquire
new skills to improve ourselves and take care and
see friends till next time.
Olivier
