Animated Websites Using Figma Make + Nano Banana Pro 2!

In this video, you will learn how you can build websites like this with Figma make. And there's nothing to be afraid

make. And there's nothing to be afraid about if you're not a designer. You

don't have to be just by typing words.

You can create designs like this with animations, with beautiful typography, with beautiful navigation. All of this was built inside of here just by me typing words without me creating any

designing stuff like that. Because I

know a lot of you are not designers. So,

I will show you the exact way you can build designs with Nano Banana. how you

can achieve this beautiful illustrations then how can you animate that and not only that how you can actually achieve designs like these with the typography and stuff like that and then I'll also

show you how you can sell those to your clients because obviously we're making a lot of you building this to make money from clients I'll explain to you how you can get clients from Twitter whether

some techniques that you can use to get that or from dribble if you're a designer you can get stuff clients from here as well but let's start by just

creating the design first so we can get our hands dirty. And the reason I'm building this in Figma because there's very very large community. If you go here, there's a lot of designs that

already have been created. So for

example, I want to type linear design landing page.

And if I just go here, you can see that there is a lot of different linear style websites that look really good. And I

can copy the layout and then apply my own styles. my own videos, my own

own styles. my own videos, my own images. Very easy to get started without

images. Very easy to get started without design skills. So, let's find something

design skills. So, let's find something that looks really good. Let's let's say linear landing page. And you can find here whatever you prefer. You can say

Apple landing page. Let's say Apple landing page.

And you'll see that a lot of different designs here have as well. So, Apple

design styles. So, just go through them, find whatever you like. And once I found I'll get back into the video.

So, I found this design. It looks pretty cool. Let's just build it out with Figma

cool. Let's just build it out with Figma make. And I'm just going to remove these

make. And I'm just going to remove these stuff since I just want it to have her section. And I'm going to align it, make

section. And I'm going to align it, make it more look like a hero section about this size. And all that I have to do is

this size. And all that I have to do is Ctrl C. Basically, copy this thing. Go

Ctrl C. Basically, copy this thing. Go

to Figma, open Figma make, and then I can just Ctrl + V. Let me try that again. So going to our design ctrl

that again. So going to our design ctrl + ctrl +v and it basically paste the whole thing here. You don't need to paste the code. You don't need to paste the images automatically. You just paste

it. I would suggest you select Gemini

it. I would suggest you select Gemini 3.0 and let's say build out this year section. So here is the result. As you

section. So here is the result. As you

can see it built out the exact design that we needed. Let's now find some design inspiration for our background.

So very simply I'm going to go to my browser and here let's go to website called landbook and basically this is website that has a lot of different inspirations that you can just take a

look at. Just scroll through and find

look at. Just scroll through and find design of the images that you like and once that I'm going to be back.

So I like this website. It has pretty clean design but the thing that I like is this background of image. So let's

just download that. I'm going to be using plugin called image downloader. So

just going here and clicking on image downloader and just selecting the image that I wanted to remix. Basically let's

start with something like like I see in this last section.

Let's get this one and also this one. And here you can go to chai gbpt or nanobanana directly.

I'll be using this website which I'm not affiliated with and I wouldn't suggest because this is pretty expensive compared to original chai GPT which you can use for free. Uh so now I can just

paste this image here. Let's drag it straight from our uh desktop manager just like this.

And there's a simple prompt. I can say I want you to build a 3D character in this style, but it has to have the same texture, the same uh design, but it has

to be like two characters, maybe in the middle, maybe more characters. Just make

it look good.

And let's just send it and see what it comes back with. I'm going to be using Nanobanana 2. And also, I'm going to

Nanobanana 2. And also, I'm going to create one option with Chpt image. So

you can compare whichever one you prefer and then you can do that on your own with the tool that you like more. So

let's wait and see what it comes back with. So here are a few example that AI

with. So here are a few example that AI created. I like this one because this

created. I like this one because this one has a character in the center. So

let's just try to see how it looks like.

And in the meantime I can just try to animate this. So for animation I will be

animate this. So for animation I will be using cling 3.0. And here you just say animate this under cinematic lens. And

also I'll try one version with croak.

Imagine I guess a lot of you have access to this if you're watching this on X. Um

let's just generate and see which one does the better result. But for now let's just download this image and try to place it into our design.

So the way that I can do that is just bring this over to Figma. Once I click on that I can just paste it here and try to edit our design. So, let but anyways,

we just have it here. So, let's just place that in there instead. I'm just

going to open this and I'm going to paste it here to see how it's going to look like. So, let's just make it

look like. So, let's just make it smaller. I think it looks pretty cool.

smaller. I think it looks pretty cool.

It doesn't interfere with the content that we have in the center and it would perfectly fit in our design. This is the result that we received. It have some

strange very strange elements that I don't really like, but whatever. Let's

let's see how it would look on the website.

If you wanted to make the video looped, you would also use cling 3.0 and just add end frame as same as the first frame. But for now, let's wait and see

frame. But for now, let's wait and see what it comes back with. So, we can update the link on our website and see how it's going to look like. Once the

video generated, you would just copy the link or upload it to any website hosting type stuff and just get the original link. The main thing with the video, you

link. The main thing with the video, you just wanted to make it as good-looking as possible since we're going to be posting this on Twitter. And then

through this, we're going to be getting clients. So, I'm going to say add this

clients. So, I'm going to say add this video to the background of the of the hero section.

Let's just send that. And once he's on Twitter, we're going to post it a link to our personal website. So, the

client's going to apply to that. I'm

also going to share with you this website that has a calculator form and has a scheduled one-on-one meeting that you'll receive uh and then you can share it with your clients on Twitter and then

when they get here, they apply to this.

So the design looks is a lead magnet and one they can apply to work with you on the website. So keep watching to get

the website. So keep watching to get this file as well. I will share that in the end of the video cuz this is usually a paid file. So now let's just upload it and wait to see how it's going to look

like. So this is what Figma created. I'm

like. So this is what Figma created. I'm

going to say let's actually first take a screenshot and see how we can improve this thing here. So I'm going to take a screenshot. I'm going to paste it in

screenshot. I'm going to paste it in Figma.

get rid of this. The background going to be this color.

So, we're going to prompt Figma to fix our video a little bit. And the way we're going to do that is we're going to say we're going to copy the background color first. Then we're going to go back to

first. Then we're going to go back to Figma and I'm going to say a simple prompt that is first of all, let's have our her section to be 100% VH. But the

video should not be 100% VH. The video

should fill the width and the height should be uh just standard average, not average, but whatever the video height it is. And then align the video by the

it is. And then align the video by the bottom of the page. So focal point should be the bottom of the page. Remove

all of the overlays from the video. Make

it 100% opacity. And change the background color to be this one.

So the background color would be this one. And let's just wait and see what it

one. And let's just wait and see what it comes back with.

So here is our beautiful hero section that we created with AI. By this logic, you can build the rest of the website with Figma. But now let's get into our

with Figma. But now let's get into our portfolio. So you can get the link down

portfolio. So you can get the link down in the description to this file for free. And here just go to studio, make

free. And here just go to studio, make the remix link, and now let's start editing it.

So this will be your new portfolio. So

first of all, let's change the name. I

want you to change the name of the agency from Strat to my name which is Victor OD all over the page or if you have the name of your agency you can do

that. So let's just send that and do

that. So let's just send that and do that. Second thing let's just update the

that. Second thing let's just update the project. So I'm going to say update the

project. So I'm going to say update the project based on my my portfolio. And

here you would just basically give a link to your current portfolio or give a link to your CV or any like that or upload a PDF and it would update basically all of the projects here. Uh

next let's see the pricing. So here I want to increase the pricing by about 50%. So I want to like for the five

50%. So I want to like for the five pages I want to have about 2,000 starting. So let's say in the pricing

starting. So let's say in the pricing let's update the pricing uh in the let's say in the pricing calculator let's update the pricing for the average

standard five page let's start not from 1299 but let's start from 2400 so update the old pricing update accordingly the logic as a whole should be updated

so let's say in the calculator and let's just send that and see what it comes back with all reference character have been replaced with Victoria.

Um not sure where did it updated it.

Maybe I should replace also let's say in the logo as well put my name which is Victor and I can send it as a queue here so I

don't have to wait as long. Let's also

go through the schedule oneonone meeting. So here I'm going to very

meeting. So here I'm going to very simply say add a add a uh lovable cloud

to the page and all of the submits should go to lovable cloud.

So basically now when someone's update your form you will receive the lovable cloud here you'll have the back end. So

you don't have to connect anything to this. You don't have to connect CRM. You

this. You don't have to connect CRM. You

don't have to connect any stuff like that. It will all be inside of lovable

that. It will all be inside of lovable here.

Let's [clears throat] let's let's also notify me via Slack when someone submits our form.

Solo has notific.

So let's wait and see what it creates.

We'll receive this Slack notification from submission. Let's approve it.

from submission. Let's approve it.

And then in settings, you just have to connect your Slack. And that would be it. You would connect it and you would

it. You would connect it and you would receive a notification from that, which is very simply and very easy to do. So

now we can actually publish this to our own domain. So as you can see that you

own domain. So as you can see that you can make it public or you can make it not public. You can set icon the title

not public. You can set icon the title and stuff like that. You can also change the URL and also you can obviously connect it to your own domain. So it is not just loable domain. It is on your

domain and a lot of people say that this doesn't really display on Google. Let me

show you that it does. So for example, design rocket is uh design rocket platform which is platform where you can learn the design and stuff where you can access training where you can access

exclusive tutorials. All of them are

exclusive tutorials. All of them are hosted here. the courses, all of the

hosted here. the courses, all of the templates and it is built with global and it is displaying perfectly. So you

will not have problem with this. So

let's wait while it publishes our website to uh internet. By the way, I'm not

uh internet. By the way, I'm not sponsored with global. So feel free to use any other service whether it's anti-gravity, whether it's uh bolt, whether it's Figma make, whatever you

prefer. You can build that and you can

prefer. You can build that and you can sell that sell those websites. We have

our published website. Now I can connect our own domain. So edit settings. I can

click change the URL. I can add a custom domain to my website which of course I need to have a paid plan of loable. But

now let's try and apply uh to our form submission. Try to see how the

submission. Try to see how the calculator works. So I can scroll down

calculator works. So I can scroll down here to see the price calculator. Here we

have 2400 starting point. If someone's

select I need a help with content they will receive plus 100 per page. If they

need it faster within 14 days they get 30 3500 and then if they need like a seven page which is around standard website they'll

pay 2400 4200 and if they want to connect let's say victor let's say testgmail.com

and name test test and get in touch. And

now let's open our lovable website. So

we're going to need cloud.

We're going to click database. And let's

refresh this whole thing.

And here we have our submission which is loading. Currently we have test as mail.

loading. Currently we have test as mail.

And if you would connect Slack notification, you would receive that on Slack. But now obviously you would need

Slack. But now obviously you would need traffic to this website. Without

traffic, it will not convert. So what

you need to do is grow your social accounts or do direct outreach on Upwork. There are only two ways to do

Upwork. There are only two ways to do that on Upwork. I'll have a video on Upwork in details, but for now you can go and view my previous video on how to sell websites on Upwork. But now let's talk about social media. How you can

grow your Twitter account. And the best way to do is to post this beautiful looking designs. This is what grows your

looking designs. This is what grows your Twitter account. Something that looks

Twitter account. Something that looks beautiful. Doesn't have to make too much

beautiful. Doesn't have to make too much sense. Just have to look beautiful. So

sense. Just have to look beautiful. So

now we can just take a screenshot of this and we can just post it and say we'll build it with AI and post that if you say you build it with AI say that you build it with AI this will

definitely get a lot of likes because that's what's trending right now. I

don't really want to yeah like everything that was built with AI get a lot of likes nowadays. So just say that and then you'll get a lot of yeah likes.

That's how you grow. You can post it here. you can record a video because

here. you can record a video because videos will always outperform um let's say Figma plus Gemini 3.1 and you can pause the video because

videos always outperform the designs and then in the description you can just paste if you want to have the design like this for your project just contact me via the website or I'll link a website in the description and that's

how you get clients that's how you sell your AI websites thank you for watching I'll see you in the next