- Hey, friends, so as you might have heard
last week Figma announced a new feature
call Smart Animate that brings animation
and interactivity into the prototyping
that you can do within Figma.
It's very exciting for designers like me
and probably you, if you're watching this.
Instead of playing around with this new feature
just by myself in my office,
I decided that I might as well record
the process of me trying this feature out
for the first time.
I'm still alone in my office, I guess,
but you're kind of here, too, inside the camera, right?
So, this is gonna be my absolute first impressions
of this new feature, this new tool inside of Figma.
And it seems to be something similar
to Auto Animate inside Adobe XD.
So, let's dive in and test this out
and you can watch as I try to use this for the first time.
I may fail miserably
or maybe I will make something really cool.
(Introduction Music)
So, here we are on Figma, and all I've done so far
was open up a file and then I clicked
into the prototype section because I guessed
that's probably where I'd find this animation stuff,
and then this little window here popped up
introducing Smart Animate,
so I obviously guessed correctly.
I'm gonna try and animate this menu
that I've been designing.
It's a drop-down mega menu that is gonna be
across our site and it'll be cool
if I could mock it up and show the developer
that I work with, Corey, how exactly I want,
like how I want this little arrow to spin
and then this white block to appear
when you open the menu.
So, this is gonna be fun.
This is gonna be what I'm gonna try and animate.
I'm a stubborn designer and I wanna just try
and figure out if I can do this by myself first
before I look at tutorials and that sort of thing.
I also think that's kind of a good test
of how intuitive a product is, you know?
But before I close this window,
I'm gonna click on this learn more button
and just have that open in a little tab
in case I decide that I do need it
and I get stuck.
All right, let's get into it.
Okay, so we're gonna create a connection to the
frame object and use the circular node, yup,
to drag it towards.
I'm gonna assume that I should Group everything
inside this menu first because
I have not done that yet.
Um, yup. I'm a terribly messy when it come to
design files. The Secret is out.
Okay! We'll group that and I'm gonna call this Menu.
Okay and actually I'm just gonna
duplicate this frame before I
go ahead and mess up this file that I've
put together for Corey to build from.
Okay, so getting into prototyping.
Interactions, so I want a interaction on this
button here.
That when you click on it...
What's gonna happen,
okay, Open a Overlay, ooh we'll Swap with, okay.
Maybe I should be reading the instructions...
Let's go swap with and I guess I'll swap it
out for one that has the
features arrow turned the other way.
Ooh! Which reminds me it actually needs
to start this way around.
Okay, so when you click on this
you're gonna swap it with...
Mm...
Somethin' Else.
Gonna duplicate this and have this one be, be, open state.
Right?
And then this one be closed state. So this menu will be...
Do we have to shrink it up you think?
Or turn it off?
I don't know. Just gonna try that for now.
Okay so when you click on this
you're gonna swap it out with,
let's give this a name so I can recognize it...
I probably should've said at the start of this
video that I don't really have much experience
doing animated prototyping in any tool really,
I've played around with Adobe XD a little bit
at Adobe Max last year in a workshop but aside from that
my experience creating animations has been coding the
thing in java script, usually to be honest,
by copy and pasting, and like tweaking stuff,
I've, I don't know if I could code it from scratch.
But also using Webflow. Using webflow Interactions
is my main way that
I've been able to create my cool animated stuff
for the web so, uh, I'm probably not
coming at this with the best background.
I'm just give that disclaimer now
which I should've probably said at
the start of the video.
But, Okay. Were gonna swap this out
with animations test open...
I guess.
Do I have to play to see if that works?
Let's see
Okay, so if I click on it it just opens,
okay,
well...
That's not super exciting.
Let's try something else.
Ooh, okay! So I did not...
(Laughter)
use the animate to part.
let's click smart animate and we'll see what happens
when we do that.
What? Wait, can I go back and do that again?
That's pretty cool!
Cause' that is what I was imagining for the arrow,
that it would like spin around like that.
And I wonder if I had
shrunk the sky if
it would've automatically expanded?
Lets try that.
Just gonna try shrinking this
which doesn't fully do what I Expected,
and then turning it off. Let's just see how
that goes.
Boom!
Okay, let's think about this...
I wonder if I actually need to open a Overlay?
I kinda want it to do both,
I want when I click on this, I want it to swap
it out with this version of the features thing,
but also add a overlay thing bit. Let's just see
what that does...
Hmm!
Again, not what I expected.
I think why I'm struggling with this is cause' like I said
I'm bringing my Webflow interaction knowledge to this
and trying to do it with that,
where in Webflow I would build out a,
sort of like a timeline for the animation
I wanted to happen. It's just how my brain thinks
about animations now, um, and that's not
how this is working.
Um, Okay!
I can't figure it out myself, so it's time
to look at some tutorials!
(Upbeat, Happy Music plays)
Okay! So that video was really helpful,
I'm gonna leave a link to this in the description
because, it turns out, I probably should've
watched that first.
But like I said I do like to see how far
I can get with a tool before I have to look
for outside help on it.
Okay, so um, that video was really helpful, it showed
a few examples and I feel like I have a idea of what
I can do now to make this work for me, um,
let me see if I'm correct.
So, I think the problem is I'm using swap-with,
I think I need to use
um
Navigate-to, perhaps?
Apparently turning on this feature, smart-animate
matching layers, will mean everything that is the same
between these two files is gonna stay in the same place
and it's only the extra stuff or the stuff that's
changed will animate.
So I'm gonna expect to see this drop down.
I'm slightly concerned that the arrow might
drop down too, which is what I don't want,
but, lets see.
Lets test it.
That's pretty close to what I wanted! Click this,
this drops in, um, the one problem though,
is that it's coming in on top of the space
so I think I can solve that with some like,
rearranging of my layers. Let's see,
if I duplicate this rectangle and bring it
up to be about that big.
can you see what I'm doing here? I'm kind of aiming to have
a background on my navigation,
and then have the menu block
beneath it, so hopefully it should drop in behind that.
Let's see if that worked.
It did!
okay, now I should, I suppose, be able to take this
and have it go back
the other way, right?
Um, apparently I can just drag this, yup, great.
Uh, we're gonna go move-in and smart animate again.
Lets try this.
Ooh,
not so nice!
I wonder if my problem there was
my menu on this
one is hidden?
What if instead of having it turned off
I just completely lower the Opacity?
Then maybe it'll fade? I dunno.
Nope!
(Laughter)
let's put this guy back over here
and what if I just bring in,
oops, nope, we want him on the canvas still.
Like up there, lets see.
(Clapping)
Woo! That's pretty exciting I wonder if I can do,
also, how to show, um, the hover-state is gonna be like
on this menu? I have it sitting here as a separate thing.
So hovering on this, were gonna show hover.
And we can just dissolve in. That'll be fine.
Menu opens we hover,
we hover off,
we can mess with the timing of this, too
it's a bit slow.
That's better
(Upbeat Music Plays)
that's more like it! that seems more fun!
So it's happening pretty quickly but my gray box
is from zero to one-hundred percent opacity
and also it's expanding and filling the shape.
Okay, so I ended up being able to do what I hoped I could do
which was to mock up how this thing should work for Corey,
so I click this, the arrow spins around, this drops down,
now also when you're hovering over this gray background
will come over the area and make it clear it's all
clickable so, yeah, this is really fun!
I'm really excited about this feature in Figma although,
animate in XD kinda blew my mind at Adobe Max last year
but because like I said animation isn't a
huge part of my work flow I decided it wasn't really worth
switching tools and learning a whole new work flow and all
that just to get some animation in for a few pieces here
and there. But, having Figma now is pretty awesome
and I'm gonna definitely try to make use of it
and experiment some more with all these
other options for easing and all that
and, uh, get to know the tool a little better.
But! I hope you enjoyed watching me struggle my way
through getting to know this, um,
and if you're wanting to dive in and start
learning how to use animation features in
Figma as well then, I don't know,
maybe the things I learned during this
are things that will help you as well.
Thanks for watching, thanks for hanging out with me
while I learn how to use smart-animate hope
you have a good week and I'll see you in the next video.
Bye!
(Outro Music)