Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Creating Micro-Interactions in Figma!
You have completed Creating Micro-Interactions in Figma!
Preview
In this video, we’ll walk through creating two eye-catching button animations to elevate your UI.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hey, there in this video,
0:00
we're going to make a couple of different
micro interactions for a button.
0:01
Let's hop right into
creating our first version.
0:05
I'll start by coming over to the side
where I've been building the rest of my
0:07
components, and we'll build our
button component under our toggle and
0:10
hamburger menu.
0:13
I'll hit T to select the Text Tool.
0:14
Then I'll write out the word download.
0:16
Since this will be a download button,
next, I'll highlight my text and
0:18
go over to the Properties panel
under the text section and
0:22
bump up the size of my text to 18 Pixels.
0:25
Then I'll zoom in so
we can better see everything.
0:28
There we go.
0:30
Now there's a few ways you
could create a button.
0:32
Like I could create a rectangle to put
behind our text and group them together.
0:34
However, if I add an auto
layout frame to the text.
0:38
We can add a background fill that
accomplishes the same look of a button,
0:40
but this offers more flexibility
when creating custom instances.
0:44
Don't worry, I will show you exactly
what I mean in the next video.
0:47
But for now, with our text layer
selected hit, Shift+a together,
0:51
this instantly will add a frame around
our text and apply auto layout.
0:55
Now auto layout is meant to To mimic
the function of Flexbox and CSS.
0:59
So we'll have the ability to adjust
many of the same properties,
1:02
like flex direction justify align and
padding.
1:06
I'll head to the Auto Layout
section of the Properties panel and
1:09
adjust the horizontal padding.
1:12
This value will put the same amount
of padding on both the left and
1:14
right sides of our element.
1:17
Next, I'll increase our vertical padding.
1:19
Then I'll come down to fill and
click on this plus icon to add a fill.
1:25
Let's make the background of this
button a light gray for this example.
1:30
Then I'll go back to the frame properties
at the top of the Properties panel, and
1:33
I'll increase the value here to
round the corners of our button.
1:36
I think.
1:39
I think five pixels looks great.
1:40
Perfect.
1:41
Next, I'll select my button
by selecting frame one.
1:44
Now I'll hit Ctrl+D to duplicate my button
and I'll drag it below my original button.
1:48
It doesn't have to be underneath, but
1:52
that's just how I like to organize my
before and after component states.
1:54
Okay, now that I got those lined up,
I'll select my second.
1:57
Second button and go to fill.
2:00
I wanna make this a darker gray.
2:02
This can work with any color, though.
2:03
Simply start with a lighter color for
your before state and
2:05
a darker shade of the same color for
your after state.
2:08
Now to really sell this effect, I'm
gonna select our after state button and
2:12
go up top to the main menu, select this
icon for components, plugins, and widgets,
2:15
and go to the.
2:19
The plugins tab next, I'll search for
a plugin called beautiful shadows and
2:20
click it once it shows up
in the list of plugins.
2:24
This plugin, as the name suggests,
helps you create beautiful shadows for
2:26
any element.
2:30
Alright, when the plugin first opens,
you'll notice these two shapes,
2:31
a circle and a rectangle.
2:34
The rectangle is meant to represent
whatever layer you're adding a shadow to,
2:36
and the circle.
2:39
Circle is the light source.
2:40
So moving the circle up and
down or closer or
2:41
further away to our layer affects
the harshness of the shadows.
2:44
When the light is closer to
the layer shadows are darker and
2:47
clearer with a strong difference
between bright areas and shadows.
2:50
The edges of the shadows are sharp and
well-defined but
2:54
when the light is farther away
shadows become lighter and less.
2:57
noticeable.
3:00
The transition from light
to shadow is smoother,
3:01
making the shadow edges soft and blurry.
3:04
But I think that looks good for
this example, so I'll click Apply.
3:07
Next, I'll make sure I have
both frames selected, and
3:10
we'll make this a component set,
just like before.
3:12
We'll go up to the Component icon in
the menu, click on the icon dropdown, and
3:15
select the last option,
Create Component set.
3:19
Awesome.
3:21
Now I'll type shift plus e to
toggle between the Design tab and
3:22
prototype tab in the properties panel.
3:25
Once in prototype mode, I'll select the
first button, click on the plus icon, and
3:28
drag the arrow to the second button.
3:32
This time, we'll have to make some
adjustments to our properties.
3:34
For this example, I want the interaction
to happen while hovering over the.
3:37
Button not once the user
has clicked the button.
3:40
So let's click on this trigger
property to change it.
3:42
Here you can see the full list of
interaction triggers you have on.
3:45
Click on drag while hovering
while pressing the button,
3:48
then key in gamepad for
when a key on a keyboard.
3:52
O a button on a gamepad is pressed,
a few mouse triggers and after delay,
3:55
which is used to create.
3:58
Time-based triggers.
4:00
For this example, we'll select while
hovering for the rest of the properties,
4:01
we have changed to frame two.
4:04
Smart, animate,
ease out at 300 milliseconds.
4:06
Looks good.
4:09
We're almost ready to test our button.
4:12
Let me rename the component to button one.
4:14
All right, now let me zoom out a bit.
4:18
And then I'll go over to the Assets tab.
4:20
Now, let's drag a new instance
of button one onto the frame,
4:23
Then I'll select my frame and hit Shift
plus space to enter preview mode.
4:29
And now when we hover over the button,
it gets darker and it creates a shadow,
4:32
making the button appear to
pop out after being flat.
4:36
Pretty neat Right?
4:40
But let's try a more advanced
micro interaction for a button.
4:43
I'll start by hitting T to select the text
tool, and I'll type out download again.
4:46
I'm going to start off exactly as before,
by selecting the text and
4:50
hitting shift a to apply create a frame
around the text with auto layout applied.
4:54
And just like before, I'm going to adjust
my horizontal and vertical padding.
4:58
That looks good enough.
5:09
Next I'll add a fill and
give my button a yellowish background.
5:10
That's a little bright,
making the text hard to read, so
5:17
I'll make it darker Worker for
more contrast.
5:19
Perfect, then I'll round the corner of the
frame, and I think six pixels looks good.
5:24
Now, I'll hit O to select the circle tool,
5:32
and I'll draw a circle next to
my text that reads download.
5:34
Since this auto layout has been applied,
you'll notice it makes space for
5:37
The circle to sit next to
our text on the same line.
5:40
Again, this behavior should be familiar
if you've worked with Flexbox.
5:43
Once I'm happy with my circle,
I'll select my frame again,
5:47
then go over the frame properties and
click this toggle for clip content on.
5:49
This will clip any content that's
sitting outside of the frame.
5:53
Next, I'll select the circle again and
head over to the properties panel.
5:56
Closer to the The top, we have this
+ icon with corner borders around it.
6:00
Click that.
6:03
That will give our circle
a property of absolute positioning,
6:04
allowing it to not take up
space in the auto layout.
6:07
Next, we need to position it outside
of the frame so we don't see it.
6:10
If you move your circle so far that it
reappears on the outside of the frame,
6:13
that means it is no longer a part
of this frame, which we don't want.
6:17
So I'll hit command Z and
6:21
before I move it out of frame I'll
add a more exciting fill color.
6:22
I think I'll use a teal like bluish green.
6:27
Yeah that works.
6:31
Then I'll move my circle right outside of
the frame to where the markers appear to
6:32
show me it's aligned right next to
the button on the outside of the frame.
6:35
Now let me go back to the layers panel so
I can.
6:39
I can move my circle layer on top of
the text layer in the layers panel.
6:40
Since the circle has
the absolute position value,
6:44
it has to be on top to show
up underneath the text.
6:47
Kind of weird, I know, but
6:50
just watch see we can read the text
with the circle layer on top, but
6:51
if I move it underneath the text layer,
we can no longer read the text.
6:55
So just trust me and trust the process but
7:00
let's move our circle back
to the outside of the frame.
7:02
Perfect.
7:07
Now let's select our frame so it selects
everything inside, and we'll hit Command D
7:08
to duplicate our button, and I'll move
this second button underneath my first.
7:13
Next I'll select the layer for my circle
aka Ellipse 2 in the Layers panel.
7:18
This will allow me to see the outline
of my circle, select the circle and
7:23
drag it back into the frame for
the button.
7:26
We can start by leaving
it in the corner and
7:29
then dragging the corner to
increase the size of the circle.
7:30
Then we can adjust it as needed.
7:33
The goal is to have the circle
completely cover the frame so
7:35
we no longer see the yellow background.
7:38
Now let's select both frames and
make this a component set.
7:41
You should be pretty familiar
with this step by now.
7:43
Then I'll hit Shift + E to
enter prototype mode and
7:49
create the interaction trigger for
the before state.
7:51
Let's change the interaction trigger
from on click to while hovering, and
7:55
I'll scroll down and Yep,
everything else looks good.
7:58
Change to frame 2, smart animate,
and ease out 300 milliseconds.
8:03
Next I'll zoom out a bit and
8:07
drag the second version of
my button into the frame.
8:09
Oops, I just noticed I didn't name
this component, so let me go back.
8:15
Real quick and rename it to button two.
8:19
Okay, cool.
8:21
Now I'll line up my buttons a bit more.
8:22
All right, awesome.
8:28
Now I'll select the frame by clicking
on its name, then hit Shift and
8:30
Spacebar to enter preview mode first.
8:33
I'll test out our first button again.
8:35
It's working and
what about our second button?
8:38
It also works but this button has more of
a liquid or blob animation bringing in
8:41
the second background color
from the left to the right.
8:45
And when you stop
hovering over the button,
8:48
the new background color slides
away from the same side it entered.
8:50
By messing around with the placement
of your elements and layers, as well as
8:54
adjusting your smart animate settings
there's no telling what you can create.
8:57
Try messing around with these settings to
see how it affects the animation of your
9:01
interaction.
9:04
But that will do it for this demo.
9:06
Join me in the next video where
we'll create micro interactions for
9:07
our form inputs.
9:11
I'll see you there.
9:11
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up