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 video analysis...