LongCut logo

FULL Al process for Landing page design with Figma Make

By Viktor Oddy

Summary

Topics Covered

  • Figma AI Democratizes Pro Design
  • Copy Community Designs for Precision
  • Prompt AI for Complex Animations
  • Hack Growth via Company Reposts

Full Transcript

build beautiful websites with AI. Then

post it on Twitter. Mention the company you build it in inside of your Twitter post. Once they've reposted and they

post. Once they've reposted and they most likely will because this is a free advertisement for them, you can grow your account and you can show your expertise. This way, this is what I'm

expertise. This way, this is what I'm going to be covering in this video from building the website to making this beautiful animation and to actually posting it. Gemini 3.0 you know, came

posting it. Gemini 3.0 you know, came out to Figma. And that means you can build beautiful sites just like this inside of Figma with just a few simple techniques that I'm going to show you.

So to turn it on, you want to go to make and you want to go to settings and turn it on. So I'm going to click settings

it on. So I'm going to click settings experimental model and just toggle this on and you'll be able to use that for your designs. So this means that this

your designs. So this means that this quality sites now can be built inside of Figma. You don't need to be a designer.

Figma. You don't need to be a designer.

You don't need to be a developer. You

can actually with just a few simple prompts that I'm going to explain to you build style that looks like this. It

doesn't have to be that complicated, but it will be like this in terms of design quality. I'm going to explain to you the

quality. I'm going to explain to you the process of why you should use Figma make instead of lovable instead of bold. How

to make sure that you get this quality of designs. For me, I've been designing

of designs. For me, I've been designing for the past 10 years and I know what kind of a website app and in general what design is a good design. I'm going

to show you how without a design experience, you're going to take this design and you're going to build something that looks like this with animations like this with interactions.

And no, you you don't need to know After Effect. You don't need to be a motion

Effect. You don't need to be a motion designer to build animations nowadays.

Everything can be done with AI. And I'm

not just saying that. I've built a full collection of websites using AI, uh using Lovable, which you can find at motions.ai, AI which you can literally

everything here was built with AI. So if

I click get the remix link I will just start editing it inside of Lable. I can

edit the colors. I can edit anything here. I can ask Loable to change the

here. I can ask Loable to change the content, ask Loable to update stuff to make it my own. And so I'm not just saying that I know how to build stuff

with AI. And yeah, in this video I'm

with AI. And yeah, in this video I'm going to be focusing not on Lovable but on Figma. And I'm going to tell you why

on Figma. And I'm going to tell you why I think Figma would be better in this case if you want to build something that looks really amazing. And for one simple reason is of the big community. So in

Figma, you can go to community here and you can just type whatever website you like. So let's say you really like

like. So let's say you really like linear style. I can just type that and I

linear style. I can just type that and I can find any design that I want and I can just go to that website. I can copy

and when in Figma make I can just click on comment V and I will paste everything from that Figma file into here including photos including all of

the animations that I wanted to make including all of the different styles fonts and stuff like that which would not be possible with Lovable to make with that accuracy. and you're going to

see how to make sure that there is that accuracy and how to make sure that it actually looks as great as you want it to be. So yeah, the first step would be

to be. So yeah, the first step would be to actually find a design. I would

prefer I would suggest you to just find a brand that you like which is really big. So for example, you can type Stripe

big. So for example, you can type Stripe or any kind of website that you the style of which you prefer or you can just type landing page and go through all of these that they have and see

whichever one you prefer. And this is this would be the first step to actually find something that you prefer. And in

terms of colors, you can just then edit everything in terms of content. You

don't even need to edit yourself. So for

example, let's take this Sena Solana's website. If you're not a good with

website. If you're not a good with Figma, if you're not a designer, probably you wouldn't be able to update like graphics. Like let's take this

like graphics. Like let's take this website for example. There are a few few graphics that if you're not a designer, you will not be able to edit. Like for

example, let's take this one. obviously

is just the text one. Let's take this one, the logo one. So, you can just update it everything here. But you see different tabs and it's it would be like

hard to just duplicate it, make sure that the other tab is selected and like show everything as you need.

It's not really necessary right now. But

let's take something more comp complicated. For example, um there is

complicated. For example, um there is this website which is pretty cool, but it has a lot of different elements that would be hard to update for you if you're not a designer. Like for example,

let's say if you wanted to make it not cryptoreated, but let's say social media related, you would need to change this icons, find similar icon styles, not just some random social media icon styles. You would need to manually

styles. You would need to manually update them. But now I'm going to show

update them. But now I'm going to show you how you can do that just by prompting and just by asking AI to do everything for you. So let's take this website as an example and let's start

editing it before we move on to actually asking mobile to build it for us. So

there are a few things that I'm seeing right now and I wanted to change like the background it is static. So if I preview it right now you will see that there is not much happening. There is no

animations. There's nothing like will

animations. There's nothing like will draw my attention here. It is it looks good but it's static. So there are a few things that I can do. First one, there

is a library of videos that I have. I

think I shared it somewhere on my channel. I think the previous video has

channel. I think the previous video has the link in the description to this gallery. It is free and you can

gallery. It is free and you can downloaded it or you can find it on my substack which will be also linked in the description. So, it has basically

the description. So, it has basically just a lot of different video animations that I can put on any of my websites that I'm building. And for that, let me actually

just bring that over here. So, as you can see, I already did that. What I did is just take the video. I'm uploading it here. I'm pasting it. And let me

here. I'm pasting it. And let me increase that size. And here I will just find a way to put it between the styles.

And now the video is here. So, I can preview it here. And you can see that this has already much better look in terms of how it feels, how I perceive

it, how everything is coming together with this animations. I can also change the text, but it's not really necessary because I will ask AI to do that for me.

The same with the logo. It is much easier to update it once you're like building it in Figma make or in lovable, whatever you prefer. In this case, I'm going to show you how to do that in

Figma make. Then actually going to here,

Figma make. Then actually going to here, making sure that this is is not a component. So, I'm going to detach the

component. So, I'm going to detach the instance, actually changing the text logo type it. It would be like harder for you. So, yeah, that's what I'm going

for you. So, yeah, that's what I'm going to show you how you can do that without learning all of this technical Figma skills. So the thing is to copy that you

skills. So the thing is to copy that you would just press command V or command C and command V on Mac and command control C on Windows. Anything you want to bring

to lovable or not lovable in our case Figma make you can just copy literally as you would copy the text. And now I can go to Figma make and I'm going to click recend. I'm going

to go to Figma make and I'm just going to press command V and I'm going to just say build this UI and while it builds let's try to come up

with some kind of animations because obviously animations like this very simple to add just by adding a background video but they will not do much if you need some kind of

interactivity on the website. So let's

take the other website that I just show you which is yeah this one. So this one has a sections a lot of different sections that would be very difficult for you to animate it by yourself like

using After Effect using some other tools but it has a lot of different cool stuff that would be very nice to animate. For example like hover effects

animate. For example like hover effects like I can just make animation when someone hovers over it the arrow would appear. I can make animation of stuff

appear. I can make animation of stuff flowing here of the smooth animation of a hover effect. I can make sure that this kind of slides in once I hover or

something like that in here as well. I

can show that like stuff just going up once I hover over it. But it is very difficult to do if you don't have any kind of technical experience with coding

and stuff like that. In our case, it will be extremely easy to do just by typing. And let's take this section for

typing. And let's take this section for example. If I wanted to make this

example. If I wanted to make this circles hover, if I wanted to maybe do this by hovering, it would increase a little bit. That would be hard as well.

little bit. That would be hard as well.

But I'm going to show you how you can actually animate that in just prompting.

So let's just start by copying it. And

before that again, any updates that you need to make to the icons to anything like that, you can make inside of make.

You don't need to worry about it this at Figma stage cuz Figma is not easy to learn and I understand that. So yeah,

once I copy this, I can just bring it over here.

And let's also bring it over here. And I

want to bring both of these sections to Figma make. I'm just going to align them

Figma make. I'm just going to align them under each other like this.

And let's just Ctrl C go to another Figma make file and type it again. build

out build uh this UI.

But in the second section, animate the circles to go around each other.

Go around the circle. If you know what I mean. I

the circle. If you know what I mean. I

like to add if you know what I mean because this is kind of gives it understanding that I'm not sure if I'm explaining this correctly. So it will do the better way that it knows but let's

just divide it in two prompts. The first

one would be build out this UI and let's just send it and see what it creates. So this is the result that

creates. So this is the result that we've got. As you can see it looks

we've got. As you can see it looks really really good and close to what we've created. And now we can actually

we've created. And now we can actually just select anything and just here we have a lot of different choices. It

actually more than Figma or than lovable allows you to customize stuff. It's

smart much easier I'd also say. So you

can ask for changes or you can just type by by just like changing stuff here. You

can get change the sizing and stuff like that. But yeah, let's keep everything as

that. But yeah, let's keep everything as it was before and let's ask Loable to actually animate the second. So I just I build out this section and make the circles to be animated rotating if you

know what I mean. And here we have this beautiful section with our animated circle which is actually live on the website. If I were to publish this, it

website. If I were to publish this, it will give me a live website that I can share with my friends that I can send to my colleagues that I can put my weight list. And this is actually very very

list. And this is actually very very fast way to build something and put it out there that looks great. That's not

just something that is. So let me actually zoom in a little bit here and yeah here we have very beautiful first section that doesn't look like anything that would be built by AI like have you

seen those purple website that lovable that bold any kind of those AI builder does it doesn't look like that at all and it is very good in terms of in terms

of readability in terms of stuff in terms of as you can see it has all of the animations and now I can actually ask gloable to also place the images and do other stuff with this. Let's do the

same thing here. I'm going to copy this section. I'm going to go to Figma make

section. I'm going to go to Figma make and I'm going to ask to build out this UI and let's paste it and see what it creates. This is the result that we've

creates. This is the result that we've got. As you can see, it is really close

got. As you can see, it is really close to what we need. Let me tell you quickly how you can market and how you can really get a lot of from what you're doing. So the best strategy that I found

doing. So the best strategy that I found is using Twitter, but not just posting on your profile, but actually posting in a way that your profile will be reposted by another big company. So let's say

it's Figma make in our in our case. In

my case, it was Lovable. Lovable did

repost my stuff a lot. And as you can see, some of my post here got just 400 views. And all that I did is basically

views. And all that I did is basically just record a quick video and then just use shots uh a website that allows me to create this kind of animations. I will

show you this in this video today. And

then I'll just basically get a lot of views if the company that you're targeting re re retweets it. So it can be bold, it can be any other create

anything like any other builder just if you target them. If you uh put them here on Twitter like for example like this, chances are the smaller the company, the bigger chance that they will repost your

tweet and it will get a lot of impressions. It will get a lot of views

impressions. It will get a lot of views just by you building this type of websites. Like AI builders will pay you

websites. Like AI builders will pay you a lot of money if you're going to promote them. Like I get probably few

promote them. Like I get probably few collaboration requests per day. I'm I'm

not accepting any one of them. That's

why I'm just explaining you about Figma, about Lovable, those two companies that I really like. But yeah, so just by doing stuff like this, they will repost your stuff. If you can show that you can

your stuff. If you can show that you can create beautiful stuff with AI. So like

if you can show that something like this can be done possible with AI, they will repost it and they will make sure to put it as on the front lines as possible if

you can do that. So yeah, once we wait for that, I'll show you how you can actually create that marketing post and how you can make sure that it actually gets the attention it needs. Figma had

some issues with animation. So let's

just do it like this. So to make it on post it on Twitter, you would usually just record your screen with whatever software you use. I'm going to use clean shot. I'm just going to make a quick

shot. I'm just going to make a quick video of this screen. And don't worry, I'm going to show you how to make sure that it looks actually great. So just do a few seconds. Maybe you can do some

effects like this. Just maybe you can scroll down a little bit and yeah, then you can save it. So the point here is to make it look better than it actually is.

Like this this all animations are pretty easy to make with one tool that I that I've been using for a while, which is shots. So not sponsored by them in any

shots. So not sponsored by them in any way as well, unfortunately, but they're a cool company. And here you can just basically uh choose a template for a

video. And they have a lot of not too

video. And they have a lot of not too many templates, but they have a lot of different background. So each one looks

different background. So each one looks unique. Um for for the videos, the best

unique. Um for for the videos, the best one I found to be this one. So I'm just going to click use this template. And

I'm going to put the video here. And

they have a lot of different background.

This these ones are automatically adjusted to your video. These one are pretty new. I didn't see them before.

pretty new. I didn't see them before.

Um, so yeah, now I can just choose any of these and let's find something that would be in similar colors. So something

bluish for example. And now we we can click static or parallax.

We can just par uh particles whatever we want. And let's just preview the video.

want. And let's just preview the video.

So as you can see we have this kind of animated look here. And I can now export this. Let's just let it preview.

this. Let's just let it preview.

export this. Go to

to X to threads Instagram whatever you use and just say Gemini 3.0 is is here something like that.

Let's put an icon of heart for fire anything like that. And then we can say

build this animated animated website with Figma make and Germany 3.0

and I can just paste it. Now I mentioned Figma. I can upload this here and most

Figma. I can upload this here and most likely they will read it and they will reply to it. They will repost to their project. Maybe if you're doing with with

project. Maybe if you're doing with with Figma, the chances are a little bit less. But if you're doing with like

less. But if you're doing with like thousands of other AI website builders, you can get really good really traction and really fast. So animated

and just post it once it loads up. And

yeah, so this is the process regarding the social media. As you can see from my profile, I done that a lot of times. And

yeah, just try to build it as many times as possible. And this is it. Let me know

as possible. And this is it. Let me know if you'd like this video and if you would like to learn more about this process. Thank you for watching.

process. Thank you for watching.

Loading...

Loading video analysis...