Figma Interactions for Beginners

>> In this video, you will learn how to
create interactive components like a pro.

Make sure you stay until the end to see how
you can nest these interactive components,

and create even more realistic prototypes.

Now let's get into it.

Okay, so before we get into the tutorial, I just
want to suggest two videos for you to watch.

First, my video on Smart Animate, because
we'll be using Smart Animate in this tutorial.

Also, my video on component properties
will be very helpful for this video.

So go check those out, and
then come back to this video.

Yeah, now let's get started.

So first of all, why do we
use interactive components?

And the argument is pretty simple.

You'll be able to go from something
like this, to something like this.

So from this hot mess of, I don't know how
many artboards or frames, for, like, 16, 24,

bunch of frames, to just one frame.

And then what you can do is you create
things like buttons, accordions, drop-downs,

whatever you want in the form
of an interactive component.

Once you've created them in one
page, you can take those components,

so regardless if it's your
buttons, or tabs, or whatever it is,

you can take those and then reuse them all over.

So you can reuse them in your file, in
different pages, even within different files,

you can search in your assets panel, and find
the button, or the accordion, or the dropdown,

whatever it is, take it, drag it onto
the canvas and start making your magic.

First of all, let's start by creating a button.

I'll create a button.

I'll call it button.

I'll add auto layout to it.

And by the way, if you want to know how to use
auto layouts, I have a video on that as well.

I'll add a fill color, maybe
something like that.

Give it some rounding.

Even give it a stroke.

Maybe something like this.

All right, so we have a button.

I'll call it "button".

And for the sake of having
this tutorial short and sweet,

I will just have two different
states for this button.

So we have the default state, so that's what it
looks like when it's just in its original state,

and then we have the hover state, which
is just going to be maybe an opacity.

So I'll take these two, I'll
create a component set.

And I don't create a component out
of these, because if I do that,

and then I go to my assets panel, and I
search for component, because it's called

that right now, I will get both
of these when I drag it out.

We want just one instance, right?

So we're not going to have
this be one single component.

We're going to have it be a component set.

Right now, we have the two different
states, but we want interactivity.

When we hover this, it should become this.

So I'll go here.

I'll add an interaction while hovering.

Change to property default.

So now both of them are called "default".

So let's change that.

It's going to be state.

This one is default, and this one is hover.

So now if we look at the interaction again, it
says, "While hovering, change to state hover."

And we have Smart Animate, 150 milliseconds.

Sounds good.

And then while we're not hovering
it, we're going to go back to this.

So now on click, on mouse lead.

We're going to go back to default,
Smart Animate, 150 milliseconds.

Let's try it out.

Drag it out, the component.

I could also go up here, search for button.

Drag it out here.

I'll add a frame, and maybe we'll
add a fill color to that frame,

and we'll add prototype, flow starting point.

Click play.

Zoom in a bit, however, and it works.

Awesome! So this is our first
interactive component.

Now we're going to create a tab item component.

Once again, I'll add a text saying, "tab".

and then we'll have some sort of an underline.

I'll add an auto layout tab.

Set this to fill container, and this to white.

So we're going to have one state, where it's
hover, and one state where it's default,

obviously, and one state where it's active.

So actually this is the active state,
but we can duplicate this three times,

create a component set once again.

So this will be the default state, right?

So state default, and we have
state hover, and state inactive.

So the first state, default, I don't want this
to be visible, so I'll set that to zero opacity,

and I want this to be maybe a bit faded out.

And then we have the hover
state, which is going to be --

we see this underlying, but it's
not as evident as the active state,

and this is also still going to be faded out.

And then we have the active
state that looks correct.

All right.

So let's add some interactivity to that again.

So when we hover it, I want it to
go to this on -- while hovering.

Change to hover Smart Animate.

Then on click, I want it to go --

oh, sorry, this should be called
active, and this should be inactive.

So inactive, hover and active.

Let's go back to the prototyping settings.

So while hovering, change to hover for this one,

and here on click, change
to active Smart Animate.

That looks about right.

So if we drag this out here,
we can go to the assets again.

What is it called?

It is called "tab".

Search for it, drag it out,
and we'll add it to the frame.

Give it a full starting point.

Play it. All right.

So when we hover it, we get that
thing, when we click it, it's active.

So that works.

Awesome! This, by itself, will not be enough
for the example that I want to make here.

I want to be able to click one of
these tabs, and when I click that tab,

I want all other tabs to become inactive.

So how do we do that?

I'll actually take this tab component, but
we can go to the assets tab or assets panel.

I'll drag it out.

I'll duplicate this component three times.

I'll add an auto layout to
this, and call it tabs, plural.

This will be tab one, this will be
tab two, and this will be tab three.

I want one of these to be active, and
the other ones should be inactive.

When we click this, tab two,
this should be inactive.

When we click tab three, both
of these should be inactive.

So I need to create a flow for that.

So what I'll do is I'll create
a component out of this.

And in this component, I will add some variants.

So let's add a variant in here.

We have the variant where tab two is active.

Then tab one is inactive.

We'll also have the variant where tab three
is active, and all of the others are inactive.

So when we click tab two, prototype.

On click on this one, I wanted
to go to this variant.

So on click, change to variant two.

And to make it a bit simpler to
read this stuff, let's say state --

or not state, maybe, let's say variant, and
this is going to be tab one, tab two, tab three.

Once again, when we click tab
two, it's going to go to this one.

When we click tab three, it's
going to go to tab three.

Tab two from this one is going
to take us back to tab two.

Tab one from this one is going
to take us back to tab one.

Tab three from the first one -- you get it.

So we need to reconnect all of these
so that makes sense, and that it works.

Now, if we go to assets, search
for tabs, find the tabs one.

Create a frame, give it a color, play the flow,
we can see that works, which is pretty amazing.

Now let's go into our explorations file here,

which is a different page, and
actually use it in practice.

So we search for tabs.

We'll drag that in here,
and I'll search for button.

We'll drag that in here, place it outside here.

Let's take this frame, add
a flow starting point.

Let's play it, and just see how it works.

Like magic!

I am just astonished.

Like I mentioned before, you can
check out my videos on Smart Animate

and component properties over here.

If you want to help out,
subscribing, commenting, liking,

hitting the bell notification button,
all of these things really help, guys.

Now until the next one, have a great
freaking life, and we'll talk soon.

Ciao!