animated doodles and Figma, let's go.
I'm gonna show you all how to make little animated doodles
for your prototypes in Figma.
Let's start over and begin by deleting everything that we have there.
The first thing I'm gonna do is create a new frame.
Press the F key drag and hold.
Have this frame be approximately, 90 by 90 and I'm gonna create, six total frames.
Hold down the option key and drag this down while holding down the shift key.
Then press command.
D, D, d, D.
So we should have 1, 2, 3, 4, 5, 6.
We have six total frames.
Now I'm gonna press shift P and that's gonna bring up the pencil tool.
Right now it has a black stroke set at a three width, and what I'm gonna
do is, Into each one of these frames.
So let's just begin with a little squiggle.
Let me do another squiggle there.
Let me do another squiggle here.
Let's do another squiggle there, another squiggle there,
and another squiggle there.
And we're, we're, we're getting ready to go.
Select all of these frames.
I'm gonna come up here.
I'm gonna go to this little component icon, and I'm
gonna create a component set.
What that's gonna do is create all of these as their own individual components.
I'm gonna hop over into prototype mode, so press shift E.
That'll bring you in a prototype mode.
Now I am going to drag a noodle from each frame to the next,
so as I select the frame.
Select just near the edge, you'll see a little plus symbol there.
And I'll drag out a noodle and I'm gonna do this for each one of those frames.
And on the last frame, I'm gonna bring it back up to the top.
Now while I'm still in prototype mode, I'm gonna select all those
frames and you should see the interactions pop up right there.
So this is what it looks like.
I'm gonna click on that and you'll see the interaction details.
Has this on click event, I'm gonna go ahead and change that.
After delay, we're gonna set that value to be 100 milliseconds.
So 100 milliseconds would be about 10 frames per second.
We're gonna have that change too.
Each one of those are gonna change those properties.
We're gonna leave that as instant, and now what we can do
is move back over to design mode.
I'm gonna go ahead and copy one of those frames.
I'm gonna paste it over here with the design panel.
I'm gonna.
Hit the minus on that fill so you can see straight through it.
Now I'm gonna hold on the option key.
I'm gonna duplicate this six times on this frame.
You could duplicate it as many times as you wish.
And here I'm going to select, Let me just move that window size there.
I'm gonna select each one and just change its starting frame.
So that's gonna be frame three, that's gonna be frame four, that's gonna
be frame five, that's gonna be frame six, and that's gonna be frame seven.
So we have each of those starting frames, but it's still gonna
animate all the way through.
Let's select this frame.
I'm gonna go ahead and hit play.
Press the Z key three times.
So now we can see the little animation going, but that's not where it stops.
If we want to begin to animate this, in different ways, or
draw out different sketches.
I'm gonna select that whole component.
I'm gonna press the enter key, which is gonna select all of those components.
I'm gonna press the enter key again, and that's gonna select all of those
children inside and press delete.
And now what I can do is go ahead and draw new things in.
I'm gonna press shift P and let's draw out some little Halloween ghosts.
So there we go.
I have one Halloween ghost.
There we go.
I have another Halloween ghost.
All right, and let's just do this a few more times.
So, Halloween Ghost.
Ooh, spooky Halloween ghost.
Ooh, I'm liking that one.
Uh, Halloween Ghost.
Let's make this Halloween ghost a little bit happy.
There we go.
Adds a happy Halloween ghost.
And then let's do one more Ghost.
There we go.
So now we have all of these set and you can see they've
already been transferred here.
Let's go ahead and hit that play and see what our little animation looks like.
I'm gonna press the Z key three times and there we go.
There you have it.
Some very simple scribble animations that you can perform in Figma.
Thanks and leave any questions that you may have in the comments.