Framer Tutorial: Generate A Live Website With AI
Вставка
- Опубліковано 27 лип 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to use the new AI site generator in Framer. After watching this video, you’ll be able to create live and responsive websites, without any coding knowledge.
Prompt:
--------------------------
You are a professional web designer.
Design a [website type] website for [who]. Take into consideration their [context] and convey it with the design of the website.
Website type = [Insert here]
Who = [Insert here]
Context = [Insert here]
--------------------------
Chapters:
0:00 - Introduction
0:45 - Generating Text vs Websites
1:25 - Writing a perfect prompt
3:23 - Generating the website with AI
5:10 - Theming the website
7:03 - Making changes and fixes
8:09 - Adding new sections
8:49 - Publishing the website
9:31 - Conclusion & resources
Follow me on:
Twitter: / learnframer
Instagram: / framer.university
This was an awesome tutorial, and great prompt! I've already made a few generations with that prompt and played around with it and it's working well. I've created a video on my socials with the prompt - sharing the wealth! Thank you
Happy to hear that it works well! ✨ Amazing!
If we generate an AI we have to pay something to this website or not aor how we can earn with the help of this
Thank you for this!
Happy to help! 🤜🤛
Great 🔥
Can you do a complete guide from creating a Site in Figma (nav bar, Hero Section… and then the next steps in Framer (responsive…) That i can completely understand everything?
Thanks!
I already made that video. Check it here and let me know if it helps you: ua-cam.com/video/C_hkAbvDiMY/v-deo.html
Aint no wayyyy this is so crazyyyyyyyy!!! It did work out for me 🤯👏
Hi, what do I have to do to publish on my own website (startup, small business). I mean paste it on a specific domain or am I tied to Framer?
Hi, Nandi! Thank you for creating such helpful tutorials, I really enjoy watching every single one of them.
Could you please create a tutorial on how to apply "scroll variant"? It's usually used for navbar on top and I already know how to do that. My concern now is how to apply this in a section placed in the middle of a page. So as the user scrolls down, it's supposed to just stop while changing the variant of a component inside the section.
Thank you in advance, man! I owe you!
Thanks for the lovely feedback!
I already made a tutorial about this. Check out the video: ua-cam.com/video/zp14EJrJ0jc/v-deo.html
And let me know if this is what you were looking for!
@@framer.university Well, sort of, but that one tutorial demonstrates "sticky position" of a stack placed on top of the page, instead of the one in the middle.
However, after I tried opting this and that, I finally achieved my expectation. Haha.
Anyway, your tutorials are really helpful, though, and I'd like to thank you so much for that! Keep up the great work, man! 🙌🔥
@@adhingrha so happy that you could figure it out. That's the best of you find a workaround yourself! Good job!
This is the first Ai web designer I’ve seen that actually looks useable! Can Ai add dynamic content throughout the site (animations, parallax, on scroll easing effects etc)? GRT video brah!
Thanks a lot!
It can’t add effects yet!
Yo this this crazy!
I knoow right?! 🤯🤖
AWESOME !!!!
🫶
I several of these Framer tutorials but i never see anyone clicking on a button etc to actual see the functionality of it. Also i don't see where you can insert a video
Hi Nandi, thank you for your tutorials. They are really helpful. Were you using the paid or free version for this website creation? I have inserted the exact same prompt and it created a landing page that did not have any cool design elements. I am testing with the free version, however. Thank you.
Hi 👋
Being or not being on a paid plan shouldn’t impact the quality of the outputs! :)
Which service do you use to record the screen? Curious if it allows you to zoom in and out like you’re doing in the videos.
I’m using screen studio 💯
Great video! If I may ask, how do you get the screen to follow the mouse in a very smooth way? Thanks!
Thanks! I’m using screen studio
@@framer.university You're a life saver. This is so cool. Cheers!
@@framer.university Hey, I've downloaded it and tried to record a video but nothing happens when I click "end recording". It just sits on the page without actually ending, and no file goes to my folder. How do I fix this?
It's an incredible video. But why, when I try it, it only makes me one page of the website instead of more
How do you copy a theme from one page to another within a site? Or from section to section
That’s probably a feature they will add later down the line.
So how do I grab the html and CSS from this and incorporate for my backend logic?
Framer is a no-code tool. So you just generate the site, tweak it a bit, hit publish, and it's live.
That's my Buddy 😜
🤚🤚
hey nandi! how to make the pictures from black and white to coloured
You can use Photoshop or a similar tool like that for something like this. Search for “Image colorization”.
Hi! I am making a personal portfolio with framer ai. I want to make tabs let's say 'projects' which if I click will direct me to a new page where the descriptions will be written regarding my projects.
How do I do this with framer ai? I am a completely new to web designing. 😩
You link that element to the new page. Page can be created on the left panel. Link can be added to selected element on the right panel “link” section.
great
Thank you! :)
How can I take the code and start coding the functionality?
Framer is a no-code tool.
Omg 😱😱 thats amazing🎉🎉 but scary too 😅 we will lost our job soon 😂
Don't worry! This will just help us ;)
@@framer.university yeah I wish 🙏 just like the other ai tools with some playful mind 😏
You're so fast :))
Thank you 🙈
is it possible to host it ? so like somehow copy the code ?
On the enterprise plan there are options for that, but generally Framer was made to give people the ability to design and publish from a visual canvas without having to mess around with code. This also makes it super simple to maintain the site.
Are you able to use a personal domain?
Yes you can connect a domain you own if you subscribe to a paid plan starting from $5/month.
Nice video
Why does framer blurs uploaded images
Thanks!
I think they don't. Make sure to upload optimized images, that is not huge in size and also .webp format.
I didn't see start with AI in the site
press ⌘ + K and search for "Generate site" :)
I dont see the start with ai button when I start a new project
Hit CMD and K, then search generate site.
Framer with AI ? Yeah why not!!
cant see the "start with AI" button. how to access it
Press CMD and K and search for generate site.
I set up a Framer free account but don't have the option of start with AI
⌘ + K and search generate site
I sign up account with framer website. I was looking for ai icon to generate website but ai icon is dissappeared 😢
Hit ⌘ + K and search for "generate page".
@@framer.university I am not mac bro using windows laptop : is it hit + windows icon + k and search right?
I don't see no pricing on the website
framer.com/pricing
Thanks!
I try to learn wordpress elementor pro for 6 month now and it is a pain... can I use framer to sell websites?
Yes! There’s a huge demand for Framer websites. Check out www.framer.com/experts/
Make playback speed 1.5x for normal audio speed
life hack 🔥
Well there goes my job 🤣
Haha! This will not replace you anytime soon 🤚
@@framer.university Tell that to my employer and clients who think AI designs are "good enough", especially if it doesn't hurt their bottom line.
comment
thanks for the comment :)
Making fool