Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Ready to elevate your forms? Learn step-by-step how to animate input fields in this video.
Join Treehouse's Discord Community to connect and collaborate with like-minded individuals.
Explore more!
Continue expanding your Figma skills by watching this course:
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
Welcome back.
0:00
In this final demo,
0:00
I'll show you how you can add a micro
interaction to your form input fields.
0:01
Let's go over to the left side here where
we've been creating our components.
0:05
Okay, we can start by
creating a new text layer.
0:08
So go and click the Text tool or
hit T on your keyboard.
0:11
This time, I'm going to type out email,
as this will be the input field for
0:14
the user to enter their email.
0:17
Next I'll I'll bump up
the text size a bit.
0:19
22 pixels works.
0:24
Now, I'll select the rectangle tool and
0:26
I'll just create a wide
rectangle covering our text.
0:28
Then I'll come over to
the properties panel and
0:34
delete this current gray fill we have.
0:36
And next I'll add a stroke and
I'll increase its width a bit.
0:38
Three pixels looks good, now I'll
select my text layer, and we're going
0:44
to change the fill from white to black
to match the stroke on the rectangle.
0:49
This makes it harder to
read at the moment, but
0:57
once we throw the finished component onto
our frame, this won't be an issue, okay?
0:59
With my text layer selected, I'm going
to hold option on Mac Alt on Windows and
1:03
drag this text layer to
the right to create a duplicate.
1:07
Then I'm going to change this text to
the pipe symbol or a vertical bar.
1:10
This symbol is normally located
above your Enter key, and
1:14
it shares the same key as the backslash.
1:17
This will act as a cursor icon when
a user clicks on the input field.
1:19
Now that I have my pipe symbol, I'm going
to go over here to the text properties and
1:22
change font width to semi-bold
to make it a little thicker.
1:27
Next I'll move the pipe symbol so that it
aligns with the start of the text here.
1:32
And once that's done,
1:40
I'll click this eye icon in the Fill
properties to hide the layer.
1:41
You know your layer is hidden when
the icon changes to a closed eye.
1:45
Next, we'll select our text layer and
1:48
hit Shift A to create a frame around
the text with auto layout applied.
1:50
This will come in handy for
maintaining the padding and
1:54
background fill when we change
our text in different instances.
1:56
And lastly,
let's select all of the elements and
1:59
hit Command G to group them together.
2:02
Now I'll select the group and
2:08
hold option while I drag
a duplicate of the entire group.
2:09
Okay, first thing I want to do now
is select the text layer for email.
2:12
Remember to double click as we have
the frame layer around our text.
2:16
Double clicking will
take us one layer deeper.
2:19
Now let's decrease the text size 16,
looks decent enough for this example.
2:21
Next, we'll wanna unselect the text and
select the frame layer, and
2:28
we'll add a fill.
2:31
This will be the background color for
our text.
2:33
Let's make it white to match
our main desktop frame.
2:35
If you were using this in a real design,
you would want this back background color
2:38
to match the background color of
the section where you're using the form,
2:42
just to keep the consistency.
2:45
Next, I'll move the entire frame up so
that the rectangle stroke is in the middle
2:47
of our text layer and
in the middle of the word email.
2:50
Now I'll head back to the Layers panel and
2:54
move my rectangle layer below
the frame with the text layer.
2:56
This puts the rectangle behind email and
its white background, but
3:01
now we need to select group one for
our original form input.
3:05
You see, since we moved the rectangle
layer to the bottom of the group for our
3:08
after state, we have to do the same thing
for our before state, because if I don't,
3:12
it will throw off figma smart animate,
and the animation won't look right.
3:16
Now, the last thing I need to do
is select our after state input,
3:20
head over to the Layers panel and
select the text layer for our pipe symbol.
3:23
We need to make it visible again by
clicking the closed eye icon under
3:28
the Fill section in the properties panel.
3:31
Okay, perfect.
3:34
Now I'll select both
groups of elements and
3:35
we'll go up to the menu to
create a component set.
3:37
Next, I'll hit Shift E to
toggle prototype mode on, and
3:43
I'll select the before
state of our input field,
3:46
then I'll click on the plus icon and
drag the arrow to our after state.
3:49
The trigger is set to on click.
3:53
The property will change to group two.
3:55
It'll animate using smart animate, and
it's set to ease out at 300 milliseconds.
3:57
Looks good.
4:00
Now let's select our after state and
do the same.
4:02
But I'll make sure to select the rectangle
instead of the entire group, so
4:04
the user has to click on the field
to go back to the before state.
4:08
And our settings look good.
4:12
I think we're ready.
4:14
Let's head back to our desktop frame.
4:15
Let me move these buttons out of the way.
4:20
There we go.
4:25
Now I'll head to the assets tab and
we'll drag in our new component.
4:27
I'll select our frame, then I'll hit shift
and space bar to enter preview mode, and
4:38
when I click into the email field,
our micro interaction works.
4:43
The field name animates by moving
to the top of the field, and
4:46
a cursor icon appears inside the field.
4:49
And if you notice the field
label in this case,
4:52
email has some nice
padding around the text.
4:54
Awesome.
4:57
But now I want to demonstrate
the flexibility I mentioned earlier of
4:57
creating a frame with auto
layout around the field label.
5:00
This essentially makes
the label responsive.
5:04
Let's check it out.
5:06
I'll hit Command D to
duplicate the component,
5:07
and I'll drag it down just a touch.
5:09
Then I'll hit Command D again, and
5:11
we'll get a third component
with consistent spacing, nice.
5:13
Now I can select the text in our first
component and change that to name.
5:16
Then I'll select the text in our third
component and change that to subject.
5:20
Now let's test it.
5:25
I'll select the frame,
go to preview mode, and it works.
5:27
All of the form labels animate and they
keep their consistent padding even with
5:32
a different number of
letters in each word.
5:35
Pretty cool, right?
5:38
This micro interaction was inspired
by the material design kit by Google,
5:39
as their forms include this type of micro
interaction, which I think can be really
5:43
helpful for accessibility, especially in
tight places like mobile designs, but
5:47
that will do it for
this workshop on micro interactions.
5:51
I hope you've learned a lot
throughout this workshop.
5:54
Be sure to experiment with various
settings and animation techniques.
5:56
Try hiding layers for a fading effect.
5:59
Resizing elements for
a shrinking animation and
6:02
exploring other creative methods.
6:04
And be sure to mess around with
the smart animate properties as well.
6:07
You'll be amazed at the innovative
solutions you can create.
6:11
Thank you for joining us today.
6:14
I look forward to seeing
you in our next session.
6:15
Take care of tree houses and
happy designing.
6:17
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