Miggi: Hi friends, Miggi from
Figma here with another study hall.
Today we're gonna talk about
adding images and video to Figma.
So let's go.
First thing we're gonna talk about is
placing images into your Figma canvas.
We're gonna begin by using the
shortcut, key shift command K.
And what that's gonna do is pull up your
file browser so you can choose images
that can be added into the canvas.
So I'm gonna select about five
images here, 1, 2, 3, 4, 5.
I've selected them by
holding the shift key.
Let's press open.
I'm gonna scroll down here, and
the first thing that you'll notice
is that my cursor's changed.
I can see that there's the number five.
I can see a preview of the image
that I'm about to place up here.
I can see place all or discard all.
You'll see also that I
have some shapes here.
What I'm gonna do is I'm gonna click on a
few of those shapes and you'll see that I
am populating them with the images that I.
Another thing that I can do, I can click
to drag to place an image onto the canvas.
I can also just click directly onto the
canvas to drop that image in, and it's
gonna drop it in at its largest size.
So I can actually go ahead
and scale that down into that.
Great.
So now if you don't remember
that shortcut key, we can always
use the quick actions menu.
If you look over here in the top
left, you'll see quick actions.
That shortcut is gonna be command / and
I can type in place image or video.
If you're on an international keyboard,
it's gonna be Command P, or if you're
on Windows, it's gonna be control.
Or control slash There's a number of
different ways to trigger this shortcut.
So basically what it does is it
brings up this little search and
you you can type in any feature
in Figma that you want to trigger.
So I'm gonna type in place, image,
video, and that's gonna bring this up
so I can click on that image and if I
want to, I can draw it into space there.
That's great.
So the one thing that I do want to
impart on you all is that images
and video are fills on objects.
They are not their own
image objects in Figma.
What that means is when you have
shapes on the canvas, you can
fill them with an image fill.
So I'm gonna once again
use my place option.
I'm gonna select 1, 2, 3, 4 images,
and what I can do here is I can click.
And replace each of those.
And let's say even this text that
I have here, I can do another
place, I can select an image and I
can place it right into that text.
So even if that text were to get
larger, you can see that it is still
occupied by that image that fill there.
So, Even if I was to come over here and
to draw a star and adjust one of its
non-destructive properties here, so if I
give it more points and bring that out,
I can place an image directly onto it.
And once again, I'm using
command shift K, turn on windows.
It's gonna be control
shift K for that placement.
Now we can also copy and paste
images we can copy and paste
those fills between shapes.
So even if I bring over, let's
say one, let's say two of these
images, we want to transfer that.
The one way that we can do
this, we can copy this image.
Gonna come up here, copy paste,
copy properties, and then we can
right click and then choose paste
properties, and that will paste the
properties from this object to this one.
However, there are other ways to do this.
This is my favorite way of doing it.
When you select that image, you
will note that it has a fill over
here, so you can see that fill.
If you select just to the
left of that fill, I can.
Command C copy or ctrl
C if you're on windows.
And then I can command V
paste or control v paste.
So what that allows you to do is copy
that image fill and then paste it there.
Now, the one thing that you will
notice is that as I have been pasting
onto this shape, it's been layering
these up so I can actually hide
some of those fills, and you can see
that they've all been added there.
I can even reorganize.
Some of these fills and you
might be asking, well, what can
potentially be the purpose for this?
I can go to one of these fills.
I can click on this percentage value
over here, and as I reduce it, you
can see I've reduced the opacity
between both of those fills on this
shape even as I resize this shape.
Its going to resize and attempt to
fill both of those images, and I
can even reduce this down a little
bit so you can see that we are
applying it to the color underneath.
So that becomes an interesting way that
you can begin to composite some of those
photos or create complex fills that you
might want to reuse because once again,
I can copy all three of these layers.
I can copy them, select this
one over here and paste them.
All of those fills have now
been added to this shape here.
So that's a great way to have a
little bit more control over image
fills as you're working with them.
So next up we're gonna talk
about fill modes and cropping.
I'm gonna show you another way
to add images to your canvas.
I'm gonna bring over here my file
browser and I'm just gonna go ahead and
drop an image right onto the canvas.
Let's scale that down.
And what I'm gonna do here is as I'm
kind of cropping it, you see it's
adjusting it and it's attempting
to fill that area with that image.
So if instead you want to
have more control over how the
image is mapped to that shape.
We're gonna hold down the
option key and double click.
What that is gonna do is trigger the image
editing menu in that image fill layer.
Over here, we can see that
this is an image fill and we
can see that is now cropped.
When it's in this crop mode, we can
resize, reorder, reshuffle how this
image is composed within this shape.
I can also just make a few other edits.
So let's say exposure,
contrast, saturation.
So we are talking about
how it's cropped right now.
This is the crop mode.
Now, unfortunately, when you're in
crop mode and you resize, it's going
to stretch and squash that image.
So this is not your intention.
Once again, you can click on
that image fill, you can choose.
The type of fill you want,
you can choose it to fit.
So it'll try to fit the entire image
into that shape no matter what.
Or this is the default fill.
This is the one that we've
been working with all along.
Where that image is doing, its
best to fill up that space.
And then let's say I
want to go back to crop.
I can now readjust and rero.
I'm gonna hold down the shift key.
While I'm sizing that to keep those
dimensions, I can hold down the shift
and option key, alt key if you're
on windows, to scale that from the
center, and get that perfect crop
that I want when displaying my image.
So next, let's talk about
PNGs and animated GIFs.
So here I have a folder.
Let's see.
I have an animated GIF that I can
drop onto the stage and as a PNG.
You know, I have here this, this graphic.
So PNG is gonna allow for
really nice transparency.
So if you have images that are
transparent that you want to compose
inside of Figma, they're gonna work
just like those flat JPEGs that have
image filling up the entire space.
Animated GIFs can also have transparency,
but they can also have animation.
If you want to preview the
animation, click on its fill
and then you can hit play.
And this will allow you to
preview that animated GIF.
Now, one thing to consider about the
animated gifs is they won't play until you
are in prototyping or presentation mode.
So if I select this whole
frame and I click play, The
animated GIF will now play.
It takes a minute for the PNG
to populate, but there we go.
So now you can see how this can
be really cool when you're using a
presentation to have animated GIFs.
Another thing that is uniquely special
about both PNGs and animated GIFs
is that they can be used as masks.
So they both have transparent areas
you can use that as a way to mask
out colors, shapes, and objects.
So let's say here I have, let's
say this color red and let's bring
this color red over here as well.
Now I'm gonna select both of those
objects, so I'm selecting both this PNG.
You could see it's right
there, and this color red.
I'm gonna select both of these
objects, select them right
there, and choose use as mask.
So now what is happening is the
transparency of that PNG is being
used to mask out that color red.
We can do that here as well.
I'm gonna select both the image
underneath and the color red.
Right click and choose uses mask.
And what's cool and unique
about using that mask.
Let's uh, have a couple
little duplicates here.
I'm just gonna hold down the option,
key and duplicate is that when you
hit play, that will also animate.
So I'm using the transparency of the
animated gif to behave , as a, as a mask.
So the mask is basically using the
transparent areas of that gif as something
thats visual so I can even select the
color here and begin to adjust that.
So that's a, that's a fun little deep cut.
Next let's talk about video.
One of the cool things about registering
and verifying for education and
having an education team, so this
file here is in an education team,
is that I can upload and use video.
I'm gonna hit command shift K.
Let's go to my video folder.
You can use MP4s MOV files, WebM files.
As long as they're under 100
megabytes, you can add them.
So here in my file browser, I'm
gonna select a few videos, and as
long as those files are under a
hundred megabytes, they should work.
I can draw out each of those and I
can also use them to populate a shape.
So here we go.
I have a.
Another video that is populating a
shape, and you'll note that it looks
just like an image here on the canvas.
Here I have these four videos.
When I select the video fill
over here on the right, I can
get a preview of that video.
I can see what that video looks like.
So let's say right here, I can click
on the little cat and I can see what
that looks like as I am playing it.
So in order for that video to work,
we need to place it inside of a frame.
Let's take that onto our next section,
playing and controlling video.
So I'm gonna drop these
videos all onto my stage here.
And I place them inside of this frame,
this video 1 frame, and now when I select
them, I can change some properties.
Let's say I can round out those
corners, you know, I can even
throw in like a stroke value.
Of white.
Okay, so here I have these, these videos.
Let's say I want 'em to be part of my
presentation or part of a prototype.
When I select the video and
go to the prototype tab,
you'll notice some properties.
So we have autoplay, which means
the video will play immediately.
We have the mute.
And we have loop.
Right now, by default, all of
them are set to autoplay, uh,
to play sound and to, uh, loop.
So I'm just gonna turn off the sound
on all on all of them, just to check.
And I'm gonna select
this frame and hit play.
So as this gets ready to play,
we can see that those videos are
now playing in the prototype.
So they're all playing amongst each other.
Now while we're not gonna get too deep
into it, there's ways that you can
prototype with these videos, so here if
I select a video, you'll note that there
are a number of video interactions such
as when video hits or when video ends, you
can use that to navigate to another frame.
You could use it to pause the video, you
could use it to mute or unmute video.
You could set the video
to a specific time.
There's some really cool prototyping
interactions that can be had there.
So go to figma' s community
https://figma.com/@figma, and you can find
the video in prototypes Playground file.
There's a bunch of examples there
and there's a lot for you to learn
and you can really get into the
nuts and bolts of video prototyping.
So that's one of the benefits of
having an education team is the ability
to upload and use video in Figma.
Lastly, what we're gonna do is
talk about downloading the original
video that you may have, or
original image that you may have.
So I'm gonna zoom out just a little bit.
I'm gonna grab this image here and
I'm gonna grab this video here.
I'm gonna zoom in.
I'm gonna select this image
and go to the design panel.
In the design panel, you'll note that
the fill has the image right here.
But let's say you want
to download the original.
You know this one has been resized,
you're not quite sure how large it is.
You can go to the inspect panel and in
the inspect panel, go into this view right
here, this table view, and you will see
the file name and you can click on that
and that will pull up your original image.
So let's do that again for the video.
I can click here and it says, it has
the video fill and this will give
you access to that original video.
This is set up, so if you are working
with a developer and you're working on
either developing an app or a website and
they need to grab the source file, they
can go to that inspect panel and pull
up that file directly from its source.
So I think that that's great.
That's all for today.
Hopefully you found this hopeful.
Feel free to let me know if you
have any questions in the comments.
And as always, happy designing.