Figma for Edu: Prototyping 101, new basics

MIGGI: Today we're going to be
diving into prototyping 101.

Should be more like a tip
toe, a tip toe and a splash.

We're going to talk about these
concepts so that y'all can

better understand and work
with it and test your ideas.

So once again,
prototyping is going

to allow you to
take your designs

and to test the ideas that you
have, to share them with others.

If you are a designer
developer, or if you're

working with
developer, or if you're

working with stakeholders,
you need to show them

something that works.

You need to show
them something that

is much more than just a
static or a flat screen,

and that's why we have
prototyping capabilities.

In Figma, it helps
you bridge that gap

a little bit sooner if you
don't have development chops.

Sometimes you just need
to test something out.

So once again, my name is Miggi.

You can find me on
twitter.com as @miggi.

I'm also joined by
Alex, Alex_FigmaEdu.

We run these
workshops every month

to just support the education
community out there,

whether you're in a
higher ed, or a boot

camp, or any structured
learning that you may have.

We're going to be
covering prototyping 101.

I'm going to cover
basic prototypes,

then we're going to cover
scrolling prototypes,

and I'm going to throw in sticky
scrolling in there as well.

It's a relatively
new feature in Figma.

I know a lot of you are looking
for more dynamic scrolling.

We're going to show
you how to do that.

We're going to show you
previewing and sharing

prototypes.

We're going to cover
interactive components, as well

as motion and video.

So the motion is going to be
sprinkled throughout the lesson.

At the end, we're going to
talk a little bit about video

and then see where
we go from there.

All right, so this file
once again, you can copy,

you can duplicate
it, and you can

go through the
pages the same way

that I am going
through them as well.

I'm going to click on over
here on the left panel.

You can see I have my pages.

There's another page
called Basic Prototypes,

and this is where we're
going to begin our lesson.

All right, so once
again prototyping

is a way for you
to test your ideas.

All prototypes in Figma
begin with a frame.

To create a frame, you'll
notice on the upper left hand

toolbar there are region tools.

When you click on
the region tools,

you'll see three different types
of regions-- a frame, a section,

and a slice.

The ones that are most
essential to programming

are going to be
frames and sections.

Frames being the
quintessential thing

that you need to create
to use a prototype.

So when you do that,
you can also just press

the F key on your keyboard.

I'm going to draw
out a frame here.

So everything
begins with a frame.

Now, with that frame
selected on my Canvas,

I'm going to come over
here on the right,

and you can see in the
Properties toolbar.

So over here, we're
in the design panel.

You'll see that we
have this frame option.

That is a dropdown that
will give you the ability

to choose any number of devices
that you can be prototyping for.

You can set your own width
and height for that frame,

but if you want to use a
recommended viewport size,

you can choose it here.

All of these are using the true
viewport sizes of the devices,

and that's going to be important
for when you're designing

and for developer handoff.

Here I'm going to choose,
let's say an iPhone 14, 15 Pro,

and you see the second
that I create it,

I automatically have a
sense of scale on my Canvas.

I'm going to zoom in.

And for those of you
that are unfamiliar,

I'm just scrolling in.

So I'm going to hit Command or
Control if you're on Windows,

and use the scroll on my wheel.

If you have a laptop, you
can use your touch and pinch

gestures to zoom in,
and there you go.

I have my frame.

So creating a frame, this
is where prototypes begin.

Let's begin to talk
about creating prototypes

and what they are.

So typically, you're
going to navigate

and you're going to create an
interaction between two frames.

So here, I have a start frame
and I have an end frame.

And I'm going to create a very
basic shape in this start frame,

so I'm going to select it.

I'm going to come
over here to the left.

Over here, I have my shape
tools, I have a rectangle.

I'm going to draw out just
a very simple rectangle.

This is going to be a
placeholder for my button.

Oftentimes when I'm
prototyping, I use very basic

shapes just to start to
get a proof of concept

of my prototype.

It's like a prototype
of a prototype.

So here, I'm going to select
that object, come over

here to the right
where I have the fill,

I'm going to make it
red, and there it is.

So now, I'm going to select
this and I'm going to copy it.

And over here in
the end, I'm going

to make that just a
little bit bigger.

There we go.

It's bigger.

It's the same exact object.

What I've done is I've copied,
Command-C or Control-C and then

Command-V or
Control-V, copy, paste.

You all know that from Google.

You know how to do that.

I'm going to paste it over
here in this end frame.

And same thing here, I'm
going to change that color

just so you can see that
there's a difference.

So what I have here
is I have two frames

and I want to create a
relationship between them.

So here in this start frame,
I'm going to select it.

I'm going to select my object
inside of the start frame,

and now I want to
create a connection.

So when I click on that plus
button from that first frame,

I'm going to go to
the next frame over.

I'm going to select it, come
over here to the Prototype tab.

When I click on
that Prototype tab,

you'll see that the Canvas
changes a little bit.

So we went from being in
design mode to prototype mode,

and you'll see things change and
behave a little bit differently.

The keyboard shortcut to go
between design and prototype

mode is Shift and E. So when
I press Shift-E, think of it

just we're shifting over.

Shift-E, it's going
to swap between design

mode and prototype mode.

Now that I'm in prototype mode,
when I select this rectangle,

you'll notice a
little plus icon.

That plus icon is going to allow
me to create an interaction

from that first frame
to that next frame,

and then we're going
to talk about how

to control that interaction.

So the way that we
are creating this

is not that different than how
it might be created in code.

So you'll see here we
have an interaction.

We have an on tap.

When I click there, I can
change the type of interaction.

There's many different
types of interactions.

You can have on tap, on drag,
while hovering, while pressing.

You can even trigger
an interaction

with a keyboard or a gamepad.

You can pair Bluetooth, a
game controller such as a PS5,

or a switch controller,
and actually

use that to control
your prototypes.

Companies like
Amazon and Netflix

actually use this to mimic
remote control interactions.

There's also mouse enter, mouse
leave, touch down, and touch up.

So if you think about
the way that you interact

with your computer,
we're going to change

what's going to happen
based off of that.

So here, we're going
to on tap, so we're

going to make it
behave just as if you

were to tap on your phone.

So on tap, we're
going to navigate to,

and we're going to
go to this end frame.

So you see what it's doing is
it's looking for that frame.

And then we can choose
how it goes there.

So here I'll walk you
through that one more time,

so let's delete that and I'm
going to walk you through.

So we have an interaction,
we have the behavior event.

It's going to navigate
to another frame.

This is one of the most
common interactions

that you're going to work with
if you are designing something

like a website, or if you're
designing an app where

you have different screens and
you're navigating between them.

The transition is going
to be how is it going

to go from one to the other?

Oftentimes when you're in a
website, you click on a link

and you just see the next page.

That's an instant transition.

Sometimes when you're on an
app, you click on the button

and then you see the
whole screen move over,

and that can be a
move transition.

So we're going to
determine what that's

going to look like, what
that's going to feel like when

you test that prototype.

Here's the duration.

What is the distance of time?

How quickly is it going to move?

We generally want that
to be under a second

if it's going to be a
pretty quick transition.

We choose how it
accelerates or decelerates.

I'll show you all my
favorite type of ease,

and then you can see a
preview of that interaction

and the state management will
talk about that in a little bit.

So once again, I am
in prototype mode.

So here I have two frames.

I created the frames.

I put a shape into each one.

In prototype mode, I can create
this interaction, this noodle.

So you see I have
one on the Canvas.

I'm just going to delete that.

That's a fake one.

That's just to remind me to
show y'all how this works.

So I can drag this little arrow.

You see the arrow kind
of going, and it's

going to pick a destination.

It comes over here and it
snaps on that other frame,

so there you go.

It snaps onto that other frame
and you'll see, on tap navigate

to, and then we're going to end.

We're going to go
to that end frame.

That's the frame
that we decided.

If that frame was
named something else,

that name will show
up right there.

Right now, this is
going to be instant.

Let's see what that work looks
like, and we can try that out.

So when I click on
this blue rectangle,

we're just going to navigate
back and you'll see on tap,

navigate to.

We're going to go
to that start frame,

and we want it to be instant.

So we've just created
a relationship

between this object
inside this frame causing

it to go to the next one,
and then from this one

going back to the first one.

So I'm going to
preview this over here.

See my little example.

This is a starting point.

The starting point,
if it wasn't there--

let's see.

Let's delete the starting point.

Let's see.

Where's my starting point?

Is it going to allow me to
delete my starting point?

Oh, I think they moved it.

Here we go.

So I'm going to
select the frame.

Here's the flow starting point,
I'm going to remove that.

There's no flow starting point.

You can't preview it, so
I can select the frame.

Come over here in
the prototype panel,

and I want a flow
starting point.

So where are you
starting this off

from is really important, so I'm
going to just say example one.

Now, there's a Preview button.

I'm going to click on
that preview button,

and it's going to show me
right here in the editor,

and I can get a sense
of how this works.

When I click from that first
one, it goes to the next one.

You see how that happens.

That's wonderful.

Now, I'm going to click on
that first interaction again,

and I can change how it behaves.

Let's say instead of
an instant transition,

I want to instead
move in, and we

can see what that looks
like here in this preview.

So you've probably used
an app on a mobile phone

before where you click
on the menu and the menu

overlays the current screen.

That's what's happening
here, and we have an ease

out transition.

I'm going to leave
that ease out,

but you'll also notice here
I can choose how it moves in.

Let's have it move in from
the top, so here we go.

It's going to move
in from the top.

So we've clicked on that noodle.

That's where those
interaction details live.

So that noodle right there, yes,
we call them noodles at Figma.

We call pictures that
have all the noodles pasta

pictures as a matter of fact.

So I can preview this, and now
you could see that it fades in,

and it's instantly going back.

So let's change that
transition one more time,

so we're going to move in.

Let's try a slide in.

Let's see what the
slide in looks like,

and let's have it come in
from the right, so here we go.

Let's click.

The slide in is cool because you
see the previous screen darken

and also move to the left.

Now what we might want
to do is then have

that transition back also match.

And we need to think
about where this came in

and how it's moving,
so here we go.

So the shortcut for
preview is Shift-Spacebar.

So someone just asked what
is the shortcut for preview?

That is Shift-Spacebar.

So once again, Shift-Spacebar.

We can preview that.

I can even leave this open
and make some changes.

Let's say here instead of
that instant transition,

I want to move it out, and we're
going to have it move back out.

Actually, no.

We were using slide out, so
now it's going to slide out,

and now you'll see it
comes in and slides out.

Maybe you want to make
sure we're coming down.

So there we go.

We want to make
sure that there's

a good sense of
psychology at play here.

The brain wants to know
where the thing went

and where it's coming back from.

So that's how this
transition is playing out.

Now, I'm going to jump right
into some advanced stuff really

quick.

We're also going to preview
a smart animate transition.

I'm going to talk
about these as well.

So instead of a slide in,
we have smart animate.

And now what smart
animate is going to do,

it's going to look at the two
objects in both of those frames.

So here in this first
frame, I'm going to look.

It's called rectangle five, and
over here I have rectangle five.

Let's give it a more
meaningful name.

How about James?

OK, we're going to call
that rectangle James.

We've officially
named our layers.

So as long as James is
going to go to James

and the layers are
matching correctly,

then it should animate.

So let's select both
of those arrows.

I can change both of those
arrows at the same time,

so I'm clicking, dragging,
selecting both of those arrows,

and you can see
that there are now

dropdowns that are
demonstrating a mixed behavior.

And what that means is, one
is instant, one is move in,

one is smart animate,
and one is push.

So let's just have them
both be smart animate.

So what it's going
to do, it's going

to look at the difference
between those two shapes.

It's going to look at its
size, its position, its scale,

and its color, only
certain properties,

and it's going to cause a nice
little animation between them

too.

So now, instead of
doing all out transition

where the whole
screen moves, it's

attempting to tween
between the two objects

that it recognizes
as being the same.

So here one more time, I
click that plus button.

There we go.

We got a little transition.

Now, what I like to
do instead of using

and ease in or ease out, I
like to use a custom Bézier.

I like to make a nice
ease in, ease out.

It's what I refer
to as an S curve.

Sometimes I like to type in
the numbers specifically.

So here it'll be let's say
0.8 comma 0 comma 0.2 comma 1.

And what that means is
that dot is 80% over at 0,

and that dot is going to be--

oops.

Let me move that back.

Let's see 0.8 comma 0, 0.2 comma
1, so it's controlling that dot

and that dot to create
this nice little S. That's

my favorite motion
curve right there.

So it's a cheat
sheet for me, and you

get this nice snappy animation.

If I was to change
the timing of it.

Let's make it really slow.

Let's see what it
looks like really slow.

Let's do 1,200 milliseconds,
so it's about 1.2 seconds.

You'll actually see how slow 1.2
milliseconds really feels when

you see a transition happen.

So there we go.

So hopefully, you got a
good introduction to this.

Once again, you can duplicate
this file at Figma community.

Alex can share that link,
so then that way you

can see exactly what this file
is and use this as practice

to start this up and
to see how it works.

Oh, by the way, if I were to
go back into design mode and I

move the location of that
button and I preview this,

you'll see that
wherever that button is,

that's where the transition
is going to happen.

Even if I was to change
a property over here,

like rotate that on
the right, you'll

see that it's going
to do everything

that it can to try to
animate between those.

So smart animate is a fun way
to learn some of those basics

and to get a sense of how
you might eventually design

micro-interactions in Figma.

OK, so next up.

I have a little
example here, and I

want to showcase a newer feature
that we have here in Figma.

So I'm going to go
to prototype mode.

I'm going to show
you this example.

In this example, I'm taking
each number and so each number

when I click on it,
when I tap, it's

going to navigate
to the next screen.

It's going to go sequentially.

So when I click on 1,
it's going to go to 2.

When I click on 2,
it's going to go to 3.

When I click on 3,
it's going to go to 4.

And I highly recommend that
as you're beginning Figma,

you make these simple prototypes
to help you understand how

the navigation and
how the controls work.

I love making these types.

You'll see that I have a
little move in animation,

and it has a little S curve, so
we can preview that right here.

So I'm going to
click 1, 2, 3, and 4.

Now, prototypes can get large.

You're going to have
a lot of screens.

You're going to be
clicking around.

You're going to be
navigating them.

And one thing I
want to show you is

that here in this
inline preview,

there's this little
three dots menu.

It's an ellipsis menu.

It's called the overflow menu.

You're going to click there,
and there's this option.

It's called Follow Active Frame.

This is new as of last fall.

So when I click
on this, what it's

going to do is as
I navigate, it's

going to show me where on the
Canvas the current frame is.

So by demonstrating it this way,
if you have a larger prototype,

you'll have a much better sense
of where you are navigating to

and it'll help you
troubleshoot any issues

that you may be having.

So once again, you click
on the ellipsis tool,

and you're going to choose
follow active frame.

And so long as you're
in this preview pane,

you can see where
you are at all times.

So once again, these four
frames, they follow the basics

that we've already encountered.

And what I'm going
to do now is I'm

going to show you another
way to create a navigation

within your interface.

So down here, I've created a
component out of four circles.

Actually, let me delete it.

I'm going to create this
from scratch just so you all

can see how it's done.

I'm going to draw a rectangle.

I'm going to start
with rectangles.

I always start with rectangles.

It's a thing that designers do,
and I'm going to select a color.

Here we go.

I'm going to go to
my design panel,

because you want to make
sure in the design mode

when you're designing.

I'm going to add a
stroke value to this.

Let's make this stroke value 3,
and I'm going to come up here.

What designers typically do,
we don't start with circles,

we start with rectangles,
and then make them circles.

So here in the Properties bar,
with this rectangle selected,

I'm going to round that
corner all the way out.

Let's say it's going to
be bigger than its height,

so let's say an 80
corners and that's

going to make it
a little circle.

So I have one circle, I'm going
to duplicate that and make

another circle.

So I'm going to hold
down the Option key.

Hold down the Alt key
if you're on Windows.

I'm going to click and drag it
while holding down the Option

key.

So I have 1, 2, 3, and 4.

So we have four
of these circles.

Now I'm going to
select this circle.

I'm going to press
the Eyedropper tool.

I'm going to use
the Eyedropper tool.

It's the I key on your keyboard.

I'm going to press the I key.

It's going to give us this
little Eyedropper tool.

That second button I'm
going to make blue.

I'm going to select
that third one.

I'm going to press that I
key, the Eyedropper tool,

and you'll see it
kind of shows me up

here in the top right,
the current color

that I'm selecting with
a little bit of zoom.

And then this last item here,
I'm going to press that I key,

and we're going to
choose that purple.

So what I'm doing
here is I'm going

to make a non-linear
navigation, so

this way I'm going to
create a navigation that

can go to all of these
sections in a non-linear way,

much more dynamic.

I'm going to select them all,
so these are all now selected.

I'm going to come
up here and I'm

going to create what is
known as a component.

A component in
Figma is an element

that you're going to
reuse again and again.

So we're going to
create a main component,

and then we'll
create copies of it,

and those copies are
dependent on the main one.

So if you make changes
to the main one,

then it's reflected in
all of the copies that

exist on this page.

So we're going to create
this as a component.

You're going to see
it's called component 1.

I can name it by just
double clicking on the name.

There we go.

I double clicked on it.

Super easy to name.

You'll see that name reflected
and changed over here

in the Layers panel as well.

Let's name that.

I'm going to call this
navigation, navigation.

Now when you're building out
and designing a real app,

you're going to be using,
realistic buttons, things that

are going to be more
intuitive for the user.

But when you're testing
this out and you're

learning this for the first
time, these are wireframes.

I'm making a prototype
to test my idea.

So we have this
main component here.

It's called navigation.

I'm going to go ahead,
I'm going to copy it.

Command-C, Control-C
if you are on Windows,

and now I'm going to select
every one of the frames

that I have here.

I can click and drag
and select them all,

or I can select that first
frame, hold the Shift key,

select the next frame.

Keep holding that Shift key,
press the third and the fourth.

So that's going to
select all four frames.

There's many different
ways to do this.

I can even come over
here to the Layers panel,

hold the Shift key, and click
all four at the same time.

So the important thing is
that they are all selected.

Now that they're
all selected, I'm

going to paste Command-V.
I'm going to paste.

Command-V, paste, and you can
see that the navigation has now

been placed into every
single one of these frames.

If I look over here on the
left, there's my frame 4,

the navigation instance
has been placed there.

Number 3, the navigation
instance has been placed there,

so each one of those
instances, each of those frames

has a copy of that instance.

And if we look over here
on the left as well,

we'll see that four diamonds.

The four diamonds is
the main component.

The single open diamonds,
those are the copies.

So I'm going to
take this, I'm going

to move this all the way down.

And you'll see that as
long as they're selected,

we're moving them
all down together,

and they all remain
on their frames.

That's going to be key.

So you'll see that if
I make a change here,

if I change that to
dark blue, you see

it reflected in all of them.

But I'm going to hit
Command-Z. Let's undo that.

I just wanted to show you
how the main component then

works with its instances.

So what we're going to do is a
little bit of magic right now.

I'm going to select this
navigation component.

I'm going to go to
my prototype pane,

and instead of trying to wire up
all of these individually-- it

would take a lot of time because
I have to make this one go here,

this one go here,
this one go there.

I'd have to go three.

This one goes to three.

This one goes to three.

That could be a lot of work, but
because we have this component

instance relationship,
I only need

to wire up the main component
with all of those navigation

items and the rest is
going to be done by Figma.

So I'm going to
double click in, I'm

going to select that
first navigation item,

and I'm going to drag a noodle
to one, so there you go.

We see on tap.

We have our little navigation.

It's going to remember the
previous interaction that I just

performed.

So let's say we're
going to do our move in.

We have our move in
animation, and we

don't want that to be so long.

We want that to be
about 300 milliseconds.

We want quick snappy
transitions, so same thing here.

I'm going to drag
the second one.

And remember, you must
be in prototyping mode

to create these relationships,
these interactions,

so there we go.

On tap, navigate to two.

Let's go here on
tap, navigate three,

and let's choose number four.

On tap, navigate four,
so we have 1, 2, 3, 4.

So we click on this first
one, we have that interaction.

Now when I click on
this first frame,

you'll see that it's all
been wired up because these

are all references to here.

And if I were to test that
out, when I click on blue,

it goes to blue, and I click
on yellow, it goes to purple,

goes to red, goes to blue,
goes to red, goes to yellow,

so we have a much
more dynamic way.

So you can create a main
menu that is a component.

That main menu can
be a component,

and then that can drive
all of those interactions.

I like explaining in this
way because it's very visual,

and as you start thinking
about how you might make an app

or as you start believing
and thinking like,

OK, I can make it
this way, you start

realizing that these shortcuts
exist to speed up your workflow.

So once again, I'm using
the main component and also,

these different frames.

So I'm using this and just
a copy of each one is there.

Now, the one cool thing
that I can also do

is I can actually come
here and I can make

some changes to this property.

So let's say-- oh,
I'm sorry here.

Does the component need to
be on the same page or they

can be on separate pages?

That's a great question.

Heather, if I was
on a different page

and I want that component,
because I created it

in this file, if I go
to my Assets panel,

you'll see we have
my basic prototypes.

There's my component.

Boom.

There it is.

Now in order for it
to work correctly,

you will need it to be
like on that same page,

but the component
itself can be anywhere,

so you can wire
it up on this page

and then create copies of that
and that should also work.

However, in order for
this behavior to work,

yes it does need
that relationship.

Otherwise the instance
can be overridden,

and then you can copy and
duplicate those instances

if that makes sense.

All right, great question.

So we're going to move
on to the next section.

Here, I want to just hop
back and talk a little bit

about a very basic prototype.

I love using Figma
for presentations

because I can draw
out these frames

and I can design them all up.

So these are some
example frames that I

have as a template for myself
when making presentations.

Now, the way that I can
easily navigate between frames

while I'm editing, I
can press the N key

and it's going from
one frame to the next.

So I can see, OK,
here's a frame.

I press the N key and it's
going to the next frame, N key.

And if I press Shift-N,
it goes backwards.

So N, N, N, Shift-N,
Shift-N, Shift-N.

Also if at any point, if
I want to go to a frame,

I can just double click
and I can go to it.

Now the reason I'm
talking about this

is that if you want to create a
very rudimentary presentation,

and if the idea of
creating interactions

between every single
slide feels daunting,

I want to make this into
a nice presentation.

If you have no
interactions whatsoever,

when I go into
prototype mode-- we

haven't shown full
prototype mode yet.

Up here in the top right,
you'll see a little play button

for present.

So as long as you
organize slides

from top left to top to bottom,
so 1, 2, 3, 4, 5, 6, 7, 8, 9,

10.

As long as you
arrange them visually

on the Canvas in this way,
when we go to present mode,

I can present these slides.

I can navigate these slides
as if it were a presentation.

I even have options here
to hide the Figma UI.

Now you'll see the shortcut
here is Command-Backslash.

It might be
Control-Backslash for y'all.

If I hide that, I can
see that I can now

use this as a presentation
link, and I can even

copy that sharing link and
other people can see what I see.

So I can copy that sharing
link, and then people

can see me as I'm navigating
through this as well.

So I saw somebody ask how
to create these as PDF.

Let's say I have all
these slides here

and I want to generate
them as a PDF.

Now the PDF capabilities
out of Figma,

they create larger files because
there's some issues with fonts.

But if you just need
a quick and easy PDF,

you can go here
to the main menu.

You go to File,
Export Frames to PDF.

You do that and then it
creates this as a PDF.

I can open this up and you
can see this right here.

We have this now, this
entire slide deck as a PDF.

So that was a great question,
and hopefully, you'll use this.

You can find it helpful.

All right, so once again, N key.

We'll go forward.

We'll go back.

And I believe you can also
press Function key right

and left depending on the
keyboard that you're using.

I know I cover a lot of
keyboard shortcuts in Figma.

If you are at all just
kind of like keyboard lost,

you can always hit Command-/
or Control-P, or Command-P,

and that's going to bring
up this little menu.

It's called the
Quick Actions menu.

It's also located over here in
the top left, the Quick Actions

menu.

You can type in
keyboard shortcuts

and you'll get a whole listing
of different keyboard shortcuts

for zooming, for viewing,
for accessing the tools.

And I know many of you are
coming from locations that

are outside of the US,
so if you go to Layout,

you can actually change the way
that the shortcuts are mapped

to your keyboard-- so Chinese,
Danish, Finnish, Korean,

Norwegian, Spanish.

You can actually change
that so then that way

the keyboard shortcuts
are going to be

much more comfortable for your
fingers based on your keyboard.

All right, cool.

So next, we're going
to head on over

and we're going to talk about
an entirely different type

of prototype.

Let me bring my chat back.

Here we go.

How do you preview the
prototype with interactions?

To preview the prototype
with interactions,

here I can select this frame.

Same thing, I just hit Play, and
now I'm previewing the prototype

with interactions.

And here you can see I'm
clicking and I'm tapping.

And actually, this
is going to give me

an idea because I'm seeing
something that's happening here

that I might not want to
happen, and it's great

that you asked that question
and I can now remedy it.

So when I go to prototype mode,
you'll see that this frame,

I can actually
change the settings.

I can come into show
prototype settings,

and right now it's choosing the
default that I'm working with,

an iPhone Pro Max, but any
device that you're working with,

you can actually
change that device.

So you can see a frame of
it to get a sense of what

it might actually look like.

You can even change
the background,

so when you go into
that present mode,

you'll actually see the device
that you're working with.

Next, there's something
I forgot to talk about.

With these interactions,
there's this option

called animate matching layers.

What that means is when
the transition takes place,

if there is something like
that Global Navigation

that persists across
all of those frames.

So if I click that,
and even here on all

of these transitions,
so I can select

this one transition, this
two transition, this three

transition.

I can select them all and I can
choose animate matching layers.

Now, what that's going
to do is make sure

that when I'm testing
this, it's not

going to move the navigation.

Now, you might notice too
that it's like changing up

the background a little bit.

Let me go here to
Prototype Mode.

Let's go to Present, and
that's because the background

is matching.

So what you want
to do is you might

want to change up how you
create those backgrounds.

You can put in a
background color

to inform that and
change that there.

But I'm going to move on
to scrolling prototypes.

Let's head on over to
scrolling prototypes.

Simple scroll is probably
one of the easiest things

that you can do.

Well, let me bring
up my chat here

so I can see what
you all are saying.

All right, cool So simple
thing that you can do here.

The simplest thing that you
can do in making a prototype

is just make it scroll.

I guarantee you
it'll wow people.

Because we're designing for
devices that have such limited

real estate, demonstrating
a scroll in a prototype

is going to be really helpful.

So I'm going to select
this frame here,

and with this frame selected
and in Prototype Mode,

you'll notice there's
this option over here

in the right prototype panel
that says overflow and has

scrolling.

So when you click on that, you
can choose vertical scrolling.

And what that means is, if
there is any content that

extends outside of that frame.

So here, I can select the
frame, and right now it

has a property in the design
panel called Clip Content.

If I unclip it, you can see that
this frame has a lot more stuff

outside of it.

If I want to clean that up,
I just say clip content.

So you can see, even
when I select this,

that there's all of
these objects here.

And because they extend outside
of that frame in Prototype Mode,

it'll give me the option
to apply overflow vertical.

Now what that means is
when we preview this,

actually I can scroll this up.

So I can actually scroll
with my scroll wheel,

or if I click and
drag, you can see.

And there's even
a little snap back

if I drag this all the way down.

And you might also ask yourself,
well, Mig, wait, there's

this black bar at
the top, what's that?

If you want to have an
element not follow the scroll,

just select it and go
to the prototyping pane

and you can change
its scroll behavior.

So everything is going to be
scrolling with parent unless you

tell it to be fixed.

If I turn off that fixed
behavior, when I scroll this,

it's going to go
with the content.

If I want that to be a menu
or a persistent navigation

at the top, I can instead
choose for it to be fixed,

and when it's
fixed, it will stay.

So let's create a
very simple frame

and show you how to
make scrolling content.

I'm going to press the F key.

I'm going to draw the frame.

I am going to go over
here to my design panel

and choose a different
type of frame.

Or might as well
just stick with it.

We're already doing the
iPhone 15 Pro Maxes.

There we go.

And I'm going to
draw a rectangle.

So I have one rectangle.

Let's have two rectangles.

Can this scroll?

I don't know.

Let's see if it'll scroll.

When I select the frame, go
over to my Prototype panel.

Once again, scroll
behavior, no scrolling.

Oh, we want it to be vertical.

If I choose vertical
scrolling, and I

don't have overflow
content, content that

goes outside of the
frame, it's going

to give me a little warning
it tells me for that to work,

there needs to be content
that's bigger than the frame.

So here, I'm going to
follow suit with that.

Let's make these a color so
y'all could see them in the back

if you're sitting all
the way in the far back.

I'm going to duplicate
this, and I'm

going to hit Command-D.
Command-D is a duplicate, so you

see we have a bunch of
these rectangles here.

When I go back to the Design
panel and I select that frame,

I can unclip that content.

You can see it's all there.

Now in Prototype mode,
I want this to scroll

so I can choose Overflow.

Let's set it to
vertical, and now I

can add a flow starting point.

Now that I have a flow starting
point, I can preview that,

and I can see it scroll.

Now, if you want that
content, let's say

you want that content
to be horizontal

and you want it to
scroll horizontally.

I'm going to show you
a quick trick for that.

I'm going to select
all of these objects.

I'm holding down the Shift
key while I click them,

so I'm selecting all of them.

You can see them over here in
my Layers panel, rectangle 2

through 8.

I'm going to come over here to
the design panel once again,

and you'll see this little
option for auto layout.

I don't know if you're
familiar with auto layout.

It's great.

What it's going
to do, it's going

to put all of these
rectangles into a frame for me

and keep them arranged together.

So I'm going to
press auto layout.

You'll notice over
here it says frame 3,

and there's all my
rectangles, and I'm just going

to call this AL container.

And what's cool
about this is I'm

going to switch these from
being vertical to horizontal

in a snap.

So now that it's
auto layout, you

see that there's these options.

There's this whole little
pane of options here.

There's a lot more
to auto layout

than I'm going to be
covering today, so make sure

you check out our YouTube
for auto layout videos,

but I'm going to make
this horizontal layout.

There you go.

Make them vertical.

Make them horizontal.

Just saved a bunch of time.

So with my frame and in
my prototype settings,

you'll notice that there's
no vertical overflow,

but instead there's
horizontal, and so now

when I turn this on can see that
it'll be horizontal scrolling.

Cool.

So as you start to go
from wireframes and shapes

to actual UI, these are
components that I have here.

You can start to create
more interesting things,

and you can start to
realize your vision.

So start with simple
shapes, and then

gradually start to add
text and imagery and icons.

So here what I have, I
have a component not that

dissimilar to the navigation
component we made earlier,

and except this one I'm going
to set a horizontal overflow.

I'm going to show
you how it works,

and then we're
going to make one.

So when I place this here, I
have the horizontal overflow

for these cards, and I'm
going to have another.

I have another copy of that.

And here, you'll see
I have an overflow

for one and for another.

So a component is going to give
you the ability to just target

an area itself for scrolling.

So it's not just the
whole frame scrolling,

but we're going to have a
nice, little condensed area

for scrolling.

Even here I can select
on that whole frame.

I can set vertical.

And what's cool is I
can scroll up and down

and I can scroll
these horizontally.

I'm going to show
you how to make that.

So here in the file, I'm going
to go to my Assets panel,

and we're going to come down
to scrolling prototypes,

or where is it.

Do I not have this
component here?

I think I don't.

Oh, that's a bummer, so I'm
going to copy one out of here.

Let's grab that one.

And I mean, we could
do this with shapes.

Let's do this with shapes.

So I'm going to
draw a rectangle.

So this is my object
that I'm working with.

I'm going to duplicate a bunch.

Let's make rounded corners.

Let's go to the design panel.

Let's add a stroke.

We're trying to get a little
bit more higher fidelity,

so let's say we have a
bunch of these cards.

I'm going to duplicate that by
holding down the Option key.

You can also just press
Command-D or Control-D

to make a copy.

It'll put it right
on top of itself.

There we go.

And I can duplicate that
Command-D, Command-D, Command-D,

Command-D, Command-D,
or Control-D.

I'm going to select
them all, and we're

going to make a component
just like we did previously.

So we have these elements
there all the way across.

We're going to come up here to
the top, the four diamond icon,

and we're going to
create a component.

So this component,
we're going to call this

our horizontal scroller.

There we go.

We got our horizontal
scroller, and this is

going to be a main component.

And we're going to put
it into this frame,

and this frame is going to
be the container for this.

Now what we want
to do is we want

this to scroll left and right,
but notice the purple frame is

all the way around it, so we
need to define a smaller area.

So I'm going to hold
down the Command key,

and I'm going to drag this over.

It's the Control key
if you're on Windows.

And you'll see I could change
the scrollable visual area

for that component.

I'll show you that
one more time.

I select this frame, and you'll
see these four little squares

on the edges.

Those are the absolute
bounds of that frame.

Now, I'm going to
hold the Command key.

If you're on Windows,
it's a Control key.

And while I'm
holding it, I'm going

to drag this over to
the right so we just

have this little area.

What that's going
to be, this is going

to be our target
area for the scroll.

It's going to scroll left
and scroll right from here.

It's not dissimilar
to having that frame.

Even if I go here, I
can clip the content

and you can see
what's outside of it.

And if I clip it, and I hit
that Command key or Control key,

you see I can make more of
it visible and available.

So I'm going to drag this
all the way over to the left,

I'm going to unclip
that content,

and I'm going to go to
my Prototype Settings,

and you'll see for the component
I have overflow behavior.

And so you're
calling that a frame.

Is that a component?

This is a component.

This is a frame.

So here, I'm going to
choose Horizontal Scrolling

on this component.

I'm going to copy that,
and I'm going to paste it

into my example scroll.

Let's get a copy of it.

There we go into my
example scroll, Great,

so there it is,
and you see there's

a little bit of overlap here.

Now, I can even
have a copy of this.

Let's duplicate that down.

And when I preview this, you
see I can scroll them now

horizontally.

And based off of
that preview area--

let's see what that
preview area looks like.

Let's add a stroke to
the component you'll see.

There it is.

Once again, hit Command
key and you can control

the viewable area of it.

This way you'll
just see where it's

showing up here as this is
where my scrollable area is.

That's my viewable
window, and so as I

drag these left and right, you
can see, I can drag this up,

and then those will
drag left and right.

So those are the contents
inside of that component.

Now you want to have fun.

I can move this
one out of the way.

Whoops.

Let's move this
one out of the way.

There we go.

I'm going to select
my example scroll.

Let's unclip that content.

We can see them there.

If I wanted to populate
these rectangles with images,

let's say I want to
make a little gallery,

I'm going to come
over here and I'm

going to choose File,
Place Image Video.

You'll see that
the shortcut for me

is Shift-Command-K,
place image video.

And here, you're probably not
going to see this at home,

but I have my UI
show up and it's

going to ask me to
pick some images

and so I grabbed some images.

And now those images are going
to be charged up with my cursor,

so there we go.

There's my cursor, so click,
click, click, click, click,

click, click.

So now I've populated those
shapes with those images.

So if I was to clip
that once more,

I can now see the little
gallery of images that I have.

So in a previous
workshop, if you've

joined my workshops before, all
images are just fills on shapes.

I'll show you that
one more time.

Here we go.

So once again, let me
hide the stroke on this

to create more of the illusion.

So we have this example scroll.

And what I'm going
to be doing is

overriding the fill on
these component instances

with image fills.

So come up here, file,
place image video.

Actually another way to do
that Command-P or Control-P,

say place.

There you go image or video.

I'm going to select the
images from my file browser

on my operating system,
and then I'm back here,

and I can now place those
images into that gallery.

There we go.

And now when I preview
my example scroll,

I'm previewing it, I could
see it in the device.

Might take a second
for the images to load,

and there they are.

Those beautiful,
beautiful images

have a nice little gallery.

So just by scrolling, you can
get a really high fidelity

prototype that you can use.

OK, so I know we're
running short on time

and there's some other concepts
that I want to get into.

Here I'm just going to
demonstrate this concept.

There is a sticky
scrolling playground

file on Figma's community.

I'm just going to
show how this works.

Basically, inside of
this, there is a frame,

and this frame is set
to position sticky.

And so here there's
another frame

and it's nested
inside of a frame,

and then this one is
set to position sticky

and this one is also
set to position sticky.

Everything else is just
occupying this frame,

and what's cool is
when I preview that--

let me preview this better, but
I'm going to turn my device off.

There we go.

My device is set to none.

So here now when I
preview this, imagine this

as being like a website.

When I scroll, that
content will stay,

but other content will move.

So the key factor here being
that this element is nested

inside of this frame, and
then that's nested inside

of the larger frame.

So this frame here
give you a sense.

It clips right about there,
and then inside of that there's

an element, and
it's basically going

to follow its top point
down to its bottom point,

and it's using some padding
to determine whether

or it's going to stick.

Unfortunately, this is
a beginner workshop,

so I don't want to
go too much into it.

But if you head on over
to figma.com/@figma,

there is a file what is
referred to as a playground

file that will walk through
sticky scrolling prototypes.

Here it is.

I'm going to take a
copy of that link.

So if this interests you,
head on over to that link,

then you can check out
sticky scrolling prototypes

and go through all of the
steps to make that happen.

I'm going to move on to our next
topic, interactive components.

Once again,
interactive components

are going to be a little bit
different than your traditional

prototype.

So in your typical
prototypes, we're

going from frame,
to frame, to frame.

So it's frame to frame to frame.

Now what I'm going
to do here is,

I'm going to create
a prototype that's

going to be much more dynamic.

I'll show you an example here.

Let's imagine you have this
frame with a-- let's preview

this here, with little
draggers and you

could turn them on and off.

If you imagine and
prototyping this with frames,

you need so many different
permutations of these

that it would be
impossible to make.

So an interactive
component is going

to allow you to create an
embedded prototype so it's

like a prototype
within a prototype

and it's really
fun for animations.

So I like to make
these animations

here so what I have is I
have just a single frame,

but that single frame has
these little nested interactive

components that have their own
timelines, their own animations

that are taking place.

I'm going to show you
how to make one of those.

We're going to make
this switch, and I'm

going to show you how that
works, so let me delete that.

I'm going to delete this.

We're going to
start from scratch.

I'm going to draw a rectangle.

Here's my rectangle.

I'm going to come
over here, and I'm

going to round
out those corners.

So let's say it's a 120 by 120.

And if my corners are 120, it's
going to be perfectly round.

I tend to prefer using
rectangles as opposed

to outright ellipses.

Then I'm going to create
another rectangle,

and I'm going to send it
behind that first one.

I'm going to just drag it
down behind that first one.

So this up here,
this is like our dot.

We're going to change
the color of this one,

make it a little bit darker.

Here we go, and also just
round out those corners.

So if the height is
200, the rounded corner

it could be also
200, and there we go.

We have a little switch,
and Figma will automatically

snap it to the middle.

There we go, so we
have our start frame.

Now, I'm going to select this.

I'm going to right
click, and I'm

going to choose Frame Selection.

So this is going to make a
frame around this object.

Let's make this nice and even.

That's 4.99 wide.

Let's make that a good 400 wide.

There we go.

So I'm going to select
this whole thing.

I'm going to right click,
and choose Frame Selection,

and that's going to put a
frame around the artwork

that I created
directly on the Canvas.

Let's double click that.

Let's name this and
let's call this off.

Now I'm going to
select that frame

and press Command-D, Control-D
if you're on Windows, duplicate.

Now we have another frame.

It's cool.

Put it right where we want it.

Let me undo that I'll show
you, Command-D. There it is.

This one's going
to be on, and I'm

going to move this to the right.

There we go.

And I could change
some of its properties.

Let's make that green.

Let's make this extra green.

There you go.

We got on and we have
off, and it's just

a rectangle and a two rectangles
that have very rounded corners.

So what I'm going
to do I'm going

to create a quick prototype.

I'm going to drag this circle,
the little noodle over here,

so it's going to
go navigate to on.

We're going to
use smart animate.

There we go.

Let's make it very fast,
and say 250 milliseconds,

and instead of an on click
we're going to choose on drag.

We're going to use
a drag interaction.

And as long as the
object is going

in the direction of
where it needs to go,

that's how it knows
where to drag it to.

Same thing, I can
connect that one back,

and we're going
to choose on drag.

It keeps my settings from
the previous interaction,

so we're good.

So we have-- and I can
even move this around.

If I move this around you'll
see it keeps the noodles,

so we have on and off.

And I can preview this.

I have on and off, on
and off, but now we

want to make this reusable.

We want to encapsulate it
so it can be used again

and again in multiple frames.

I'm going to select them both.

I'm going to come up
here and I am going

to create a component set.

So I selected these two frames,
they're not components yet.

I'm going to come up here I'm
going to create component sets,

and now you'll see
they're all purple.

And what that means
is this is a component

and this is a
component, but there

are two main components
that have some differences,

that have some interactions.

So if I was to create a frame,
let's go to the design panel,

let's choose an iPhone 15.

Here we go.

And I was to copy
this little bean

that I have here-- by the
way, if it's too large

and I want to
scale it, the scale

tool is different
than just resizing it.

You can press the K
key for the scale tool,

and you'll see the scale
tool pop up over here.

If you're a person who likes to
click on things on the Canvas,

you'll see the scale tool
is over here under that.

I can make this smaller,
so I can say 0.5.

So you can make that
scale it smaller.

You don't want to just resize
it, you want to scale it,

so there you go.

We have one.

I'm going to hold
down the Option

key, the Alt key if you're on
Windows, let's drag that down.

We got two Command-D, D, D,
D, D. We got a bunch of these,

so here we go.

They're aligned, and now
when I preview this frame,

go to prototype, create
our starting point,

you'll see that we have more
of a dynamic approach to this.

So what's cool is that
these are interactions.

It's a prototype
that's encapsulated.

It's packaged up that can
then be used on a single frame

to create multiple states in
the same way that all of these,

if you look at
their interactions,

you see instead of
using a click or a drag,

we're using after delay,
and an after delay is going

to create these animations that
are going to allow the object

to rotate.

And I'm actually doing
some fun things here.

I'm only rotating this
point to this point,

this circle to that circle.

So I'm not truly rotating
it all the way around.

I'm only changing
it by 20 degrees,

and using a linear ease.

Let's see here.

You'll see a smart
animate linear,

and that provides for a
nice little animation.

And if I was to duplicate these,
if I was to put a bunch of these

on the Canvas, when I
preview that they're all

going to do their thing, it's
like this prepackaged animation.

I can press the K key and
scale it, make that bigger

and preview that.

Now look at that.

We have so many more, and
that's what's great about this.

So if you wanted to play around
with these, draw a frame,

copy one of those in,
copy one of those in.

And these are all
of prepackaged ones,

and so when I hit
that spacebar--

oops, I didn't do
this one right.

Let's copy the thing.

There we go, and you'll
see it kind of plays.

And if I press the K key
and scale it, it's bigger.

Let me move it and
it's going to play.

So a couple other things.

Yeah, here's a whole
set of interactions.

As an interactive component, I
can choose the starting point.

So when I select
it on the Canvas,

I could change it
to step 2, step 3.

I know we got to wrap
up pretty soon here,

so I'm just going to finally
out of here in just a bit,

but here we go, 1,
2, 3, and it starts.

Let's restart it.

It starts from this point
because we're selecting it.

We're coming over here
to the Properties panel,

and choosing its starting point.

So same thing, if this were
a frame-by-frame interaction,

it's just playing
through the frames.

If we make it an
interactive component,

then we can copy it and
add multiple to the Canvas.

I'm going to press the K
key to scale it, and then

even change the starting point.

So, in my intro
workshops, I like

to cover some advanced
topics as well.

What I want you to do is think
about the types of fun that

can actually be had with Figma,
and the types of aspirations.

When I work with
students, typically I

like to create these
more fun examples,

then walk our way back
to the more serious ones.

I know I mentioned we
were going to talk about

video today, video prototyping.

Basically, you can
just place a video

onto any shape the same way
that we place those images,

and you can pause
and play video.

When you select the video,
go to the prototype panel,

and you can choose Autoplay.

You can change
various properties.

I have an entire video
on video prototyping,

so I did want to call this out
because video prototyping is

free for education.

So if you have an
education team,

you have full access
to video prototyping,

and it's one of my favorites.

All right, so I know we
have a bunch of questions.

ALEX: Hey, Miggi, it's Alex.

You have a bunch of questions.

I tried to put a few
of the ones that I

think were the most
common at the top,

but we only have time for
about two to three questions,

so up to you on which
one you address live,

and then everything
else maybe we

can address on Twitter
or in a future video.

MIGGI: OK, awesome.

Thank you.

Thank you, everybody
again today.

So is on tap the
same as on click?

On tap or on click will
change whether or not

you're using a touch
device or a web device.

So if you're using
in your prototype,

you designate it as
laptop, it'll say click.

If you designate it as
iPhone, it'll change to tap.

So that is going to be the main
difference between those two,

so it's based off of what
you said is your preset.

So those are both of those.

All right, I recently had some
issues connecting my wireframes.

Sometimes the connections
don't work properly.

How do fix that issue?

It can be any number of things.

Usually, if I'm having
difficulty with my connections,

it's usually best to start over.

If you get this really big
mess and you just need to say,

hey, I call
connection bankruptcy,

I need to start over.

You can right click and you
can remove the interactions.

So here let's say I
select this frame.

Where's remove interactions?

There it is, Remove
Interactions.

So you can remove
interactions, and it'll

clear the interactions
from the selection

that you currently have.

And then what I would do
is just start simple again.

I know sometimes
it can be daunting,

but I highly recommend
is breaking up

your prototype into
smaller chunks,

so using these flows
to represent smaller

chunks for your
prototypes, I highly

recommend that over going
through very large prototypes.

How do I make--

ALEX: Hey, Mig, there's
a few at the top two

that you might want to address.

Yeah, those top two please.

MIGGI: Is there a
way to add padding

to the elements you're
wiring together?

For example, you're wiring
an interaction from an icon,

you want to add some space
around the icon for people

to click on.

So it's all in the way
that you create that icon.

So typically when
icons are created,

the icon might only
occupy that much area.

So the component that you
generate for that icon

can then be the hit state
as opposed to taking an icon

and then prototyping with that.

Wrap that icon in a larger
frame, and then that way

that frame can be and can
serve as the larger hit area

for your interaction.

What is the most
efficient way to make

an interaction on
basic prototype move

in either from left or right,
depending on their position?

So we try to create the
tools so then this way,

you can have as much
intention as possible.

I know sometimes you
just want to move fast,

and you need to think about
what it is that you're

trying to communicate.

So sometimes you don't
even need transitions

if you're working with someone
a bit more sophisticated,

but as you're trying to develop
complexity or communicate

an idea of your prototype
that requires more

of that sophistication,
then it's up to you

to add in the
details that you feel

are most necessary to
communicate what it is

you're trying to communicate.

What is the smoothest
transition between two screens

where the status bar seems, but
the tab bar will change section?

Once again, that is a matter of
basically coming in and choosing

the option to animate
matching layers.

You want to make sure
that you turn that on,

but that everything that is
going to be transitioning

is going to be named differently
or not transitioning,

be named differently.

So any layers that match
will be handled here.

But typically,
when you're working

with smart animate, such
as something like this,

you want to be very,
very specific about what

it is you're
animating and what it

is that you aren't,
things that don't match up

or aren't named correctly.

If I was to go in here and see,
we have James going to James.

If this was in James
and this was in

said Jane, when I
hit Play, you'll

see that it doesn't
smart animate anymore

because it doesn't recognize
those as the same thing.

But if I go back and I
change them both to match,

then we'll see it'll
provide that transition.

So understanding what it is that
you want to transition, what's

going where, curating that,
and being intentional about it

is going to be integral
for you to have

a successful animation or a
successfully smooth animation

or prototype.

That being said, I want to make
sure you all give us feedback.

Let us know how we're doing
and how we can additionally

support your learning journey.

Let us know in the
feedback form what

you would like to see next,
what you think was helpful,

and what you would
like to hear from more.

Make sure you check out
figma.com/events for future

monthly education workshops.

Really appreciate you
all being here today,

whatever time it
is where you are.

I know some of you are in time
zones where it's pretty late,

so once again, really
appreciate you.

By you coming and
attending these workshops,

you're supporting us to
produce more workshops,

so really appreciate you all.

Make sure you drop
that feedback,

and I hope you all have a
wonderful day, evening, morning.

And as always, happy designing.