Design This Animated Website Using Figma and AI!

In today's video, we are going to be designing and animating this 404 page for a website using Figma and AI. This

will be an easy to follow along tutorial. So, let's get to it. So, first

tutorial. So, let's get to it. So, first

things first, let's generate our AI asset, our character for the 404 page.

So, I've already actually generated this. So, I will just show you how I got

this. So, I will just show you how I got to creating this character. So, within

Figma, let's just create a frame, any size here, and we'll give it a fill of black. Now, if we go to our text tool,

black. Now, if we go to our text tool, let's just type in 404. Now, what I had in mind for this was I was going to actually have like a fluffy 404 instead of a character. Kind of just this big

balloon font. And then we'll just play

balloon font. And then we'll just play with the letter spacing a little bit.

And then let's give each of these a different color. So, let's just go like

different color. So, let's just go like red. Let's just go, I don't know, blue.

red. Let's just go, I don't know, blue.

And then yellow. This is going to give the AI an indication of these numbers overlap each other. And then we'll export this out just as an image. So

this was actually the original image I was working from, but if you make your own, you'll get to the same place with this, trust me. So we're going to be using Google Gemini and I think it's the

Nano Banana Pro, which is their new image generator, which is really good.

So I sent this to Google Gemini with the prompt, transform simple flat vector icon of this 404 text into soft 3D fluffy object. Use exact colors. We get

fluffy object. Use exact colors. We get

this back, which is actually really cool. Now, originally I played around

cool. Now, originally I played around with using this into the 404 page, which you can do. If at this point you want to do that, go ahead and do that. But I

thought, you know what might be cooler?

If we use this same sort of style, but we turn it into a kind of animated character mascot. So, I said in the same

character mascot. So, I said in the same fluffy style, I need a big blue monster similar to the cookie monster, but he has a tail, full body image. He's

looking confused. Now, I got this back, which I think is really unique, actually. It reminds me of something,

actually. It reminds me of something, but I don't quite know. We'll download

this by clicking up here, download full size. Now, as an optional step, the

size. Now, as an optional step, the images you get from Gemini, they're not super high- res. So, this is the image we've got. Now, I've recently been using

we've got. Now, I've recently been using Upscale, which is a free AI image upscaler. You can download it, and we

upscaler. You can download it, and we can just go upscale, which will make it four times as big. and we'll just press that and it'll do it magically. This

will make this into a massive image. But

what it's actually going to do as well is it's going to make it sharper and it means that when we cut it out cuz we're going to have to remove the background on this, it's just going to be a little bit sharper. And this is our result

bit sharper. And this is our result here. You can see the before and after.

here. You can see the before and after.

Now, the after is just a little bit sharper, which I think when you have all this detail with the fur, it does make a bit of a difference. So, it's an optional step, but if you want to, you should get upscaler. Upscale your

images. It'll just come out a little bit nicer. Now, once you've got the image,

nicer. Now, once you've got the image, it's time to remove the background for it. Now, I just use Photoshop for this.

it. Now, I just use Photoshop for this.

You can use any any tool that'll remove the background, but the way I'll do it, I'll go select, and then I'll go subject, and hopefully it'll just select our subject, more or less. Now, if we go up

here to select, we can go select and mask. Now, we can refine it a little

mask. Now, we can refine it a little bit. And now, if we click this button up

bit. And now, if we click this button up here, refine hair, look what it does around the edges. It's pretty smart. And

then we'll go okay. And then we'll click down here to mask it. And there is our image. And then we'll just save this as

image. And then we'll just save this as a PNG. Now we've got our AI asset. We

a PNG. Now we've got our AI asset. We

can start heading into Figma and putting it together. Okay. So in Figma, we'll

it together. Okay. So in Figma, we'll create a frame and we'll go up here to desktop and we're going to choose MacBook Pro 14. Let's drag in our image and we'll just get it positioned

somewhere in the center for now. Just

kind of scale it down. Now, for the background, we're going to actually give it a gradient background.

And these are the colors we're going to choose. These two colors here. So, it's

choose. These two colors here. So, it's

going from this sort of darker blue to this lighter blue. And already that kind of adds this kind of studio sort of background for him. You know, with that being the lighter bit, it kind of gives him like a base to sort of stand on.

What we can do as well is let's just make an ellipse here. We'll drag this out. We'll make this black. And then

out. We'll make this black. And then

we'll go effects. And then let's go layer blur. Boost this up a little bit.

layer blur. Boost this up a little bit.

Like this. Now look what happens when we kind of put it behind him. And we'll

just drag this behind him in the layers panel. And now that kind of just puts

panel. And now that kind of just puts him in the scene a little bit more. And

then let's just reduce the opacity down because you don't want to see it too much. Little things like this can make a

much. Little things like this can make a big difference. So there's it without.

big difference. So there's it without.

There's it with, without, with, optional. Now, next up, let's go to our

optional. Now, next up, let's go to our text tool and let's add in a giant 404 text. So, I'm using this font here,

text. So, I'm using this font here, manroppe, uh, extra bold. And let's put this behind our character. Something

like that. Now, I really like how the O kind of frames around him. And the fill of this, let's actually give it a gradient. So, this will be subtle, but

gradient. So, this will be subtle, but we'll do something like this. So, it's

going from white, but it's kind of running into that, which is our sort of background thing there. Let's make a logo for this. So, we'll use our text

tool, and then let's call this sculpt.

Now, let's zoom in. Now, we can do this.

We'll go down here to the star tool, and let's just make a star. So, we just click, we can make a star there. But,

let's go to the count and let's do four.

And then, let's add a little bit of corner radius to this. Now, let's drag that down. And then we'll position that

that down. And then we'll position that beside our text. Now, if we do shift and A, it's going to make it an auto layout.

And then you can use this to adjust the gap between them. And then we'll just make sure that they're both white. And

really, you can just play around with it however you want. Let's take the text from this and we'll drag that over. And

then let's go log in. And we'll change the font size of that to 20. And then

we'll go shift and A on that to make it an auto layout. And now we're going to turn this into a button. So we'll go fill. We're going to give it this

fill. We're going to give it this gradient background here, which is just very subtle. So it's going from this

very subtle. So it's going from this color to this color. It's just almost white, but not quite. Corner radius of like 16. And then, you know, for a bit

like 16. And then, you know, for a bit of fun, let's actually go here to the tools and let's add a bit of corner smoothing to it as well. And then we'll make the text this here. We'll adjust

the padding. So let's just go 16. And

then we'll go 16 again. Now, with this button, I'm going to add some effects, but I'll go through and show you what each thing is doing. A lot of this is just using drop shadows. So, I'm using

drop shadow here, which works as a kind of um outer stroke. Little touches like that. You guys can copy these settings

that. You guys can copy these settings if you want, or you can just make your own button. You can make it simple if

own button. You can make it simple if you want as well. We'll take this button. We'll get this positioned

button. We'll get this positioned somewhere up here. And then we'll drag this down and we'll make a new button.

and we'll say back to home. And to make this one stand out a little bit more, we'll go like that and we'll make it this text color. Let's actually add an icon into that button. So, we're going

to use this little arrow here. Now, this

is just from cool icons. You can access this for free. We'll go with this one here. We'll just copy that. And then

here. We'll just copy that. And then

we'll come over here to our button.

Paste that in. And we'll drag that to the left. And then we'll make sure

the left. And then we'll make sure that's the same color as our text.

Now, we still have our text to add in.

So, let's add in that now. We'll go

something like this. Oops. I think we're lost. And we'll make this 64 pixels.

lost. And we'll make this 64 pixels.

And we will also make sure that that is the color that we did down here.

We'll get everything positioned just up a little bit. Give us a bit of space.

And we'll duplicate this down cuz we want a little subtitle. And then we'll change this to let's get you back to somewhere.

And then let's select that gray color that we had up here.

And then we'll just get everything spaced out correctly. You can play around with it. You could tweak it for ages, but something like this is looking good. Now, there's one final little

good. Now, there's one final little thing I want to add to this. Now, this

is just a little secret thing that I've been adding to too many of my designs recently, but I do think it just looks cool. If you go to Google and you just

cool. If you go to Google and you just search clouds PNG. Now, let's just grab something here. So, let's say this image

something here. So, let's say this image here, it's going to give us a massive PNG of these clouds. We'll just copy that and we will paste this into our design. And you'll see what it'll kind

design. And you'll see what it'll kind of do here.

And then we'll put it behind our character, but in front of the 404. And

then let's reduce the opacity of that a little bit. What I think that does quite

little bit. What I think that does quite well is it turns the background from a kind of gradient into like it kind of does something with blending this to the

the sky. Now it looks like a sky looks

the sky. Now it looks like a sky looks like this guy's in the clouds or something. It's a subtle thing that you

something. It's a subtle thing that you can add if you want to, but I think for this it actually looks quite cool. And

we could also animate it so the clouds move along like that, which we are going to do in the next step cuz we're going to animate this right now. So once

you've got your design looking like something you're happy with, it's now time to animate it. And to do that, we're going to use a tool called Jitter.

And there's a plugin to go from Figma straight into Jitter. And I'll show you how we do that. So in Figma, we go down here to plugins. Now, let's just type in Jitter. And it'll come up with this

Jitter. And it'll come up with this plugin here. So we can click on our

plugin here. So we can click on our frame. And we can see here we go copy.

frame. And we can see here we go copy.

It's going to take all of our layers.

And then we can do this open in Jitter.

And it's going to bring everything over into jitter. Now, it's actually messed

into jitter. Now, it's actually messed this up slightly, but we'll just drag this down. Now, what we can do is we can

this down. Now, what we can do is we can start animating different parts of this.

So, let's select our header here. We'll

go over here to animate, new animation, and we could do something like this.

Mask reveal. Uh, the 404, I think. Let's

see.

Maybe we could have it appear like that.

We'll do something. We'll click on our text here, and we'll do something like appear like that. You don't want to go over the top here. I mean, have fun with it. Make it make it whatever you want,

it. Make it make it whatever you want, but you can go over the top with animations. You don't want it to be too

animations. You don't want it to be too crazy when you come to the page. You

don't want users to have to wait either.

And it is just a 404 page. So, for our clouds, so this is our cloud layer here.

We said we were going to animate them.

So, if we click on them here, we can go new animation. We can go custom and then

new animation. We can go custom and then move. And let's go initial value. We'll

move. And let's go initial value. We'll

go zero and zero. And then we will move them this way. Like so. Just like that. And

this way. Like so. Just like that. And

if we make that the duration here.

Now you can see the clouds are moving in the background. Now there is actual one

the background. Now there is actual one final final step which is purely optional, but I think this really helps bring it to life. We're going to animate our character using Google Gemini. So, I

took the image of our character and I put it into Google Gemini and I said, "I need this character to scratch his head, turn his head left to right in confusion. He should look around as if

confusion. He should look around as if he's lost." Now, Google's VEO generated

he's lost." Now, Google's VEO generated this video of this character. It even

has sound, which is insane.

The quality of it wasn't quite good enough. So then I actually used Astra,

enough. So then I actually used Astra, which is a paid AI tool to upres it, which turned it into a higher quality sharper video like this. And this video I was able to pull back into jitter and

I was able to go up here, replace media, change the layer mode of it to darken, get it positioned well, and this is the final result. Hopefully this video was

final result. Hopefully this video was useful for you guys. We covered a lot of different techniques here. I'd love to see what you guys create with this if you followed along at home. If you like

this sort of video, subscribe. And I'll

catch you guys soon with another video.