Framer Tutorial: Make A Site From Scratch 

If you have any question about this video remember to join our Community! → www.framer.community/

Yo my name is Benjamin!

Excellent video. This is by far the best tutorial I have seen on Framer. Thank you and keep them coming.

Been waiting for something like this for you guys for a while, VERY helpful, thank you!

Big KUDOS to Framer team! Amazing job 🙌🏼 Keep it up!

This is really simple and best tutorial for beginners who wants to learn Framer Basics.🤩🙌

Love this! Thank you for this super clear tutorial!

very simple to follow step by step, thanks!

this is the best video I have come across so far. kudos

It was amazing, learning through this tutorial. love it!

Thak you for considering complete beginners, expecting more videos like this

Dropped at the perfect time, thanks

Amazing tutorial. Thank You

This is very easy to understand and follow. Thank you so much!

Really solid tutorial, well executed.

Your voice ❤ and great explanation.

Thank you, what a perfect guide

Hey guys, this is an excellent video tutorial. I got to learn a lot about creating components - icon animations, adding a video to the website and so on. I noticed that the video was created in framer itself, If its okay I would like to know more about creating the video used in this tutorial.

Well-explained tutorial 👍

thank you we need more tutorials or schools!:D

amazing i love this typoe of content! keep it up.

Great video. Thanks.

Awesome Videol! Thanks!!

As a designer who has been using webflow for a while, I feel framer is better for designers to translate their vision from a sketchbook to a website just the way they want it.

Loved this.

Very easy to follow. I understand minimalistic design is great and all, but would be nice to have more common and realistic website/landing page examples - there aren't many of those on RU-vid.

42:39 - I've been loving Martel and Martel Sans because of the many weight options, but there is no italic. Instrument and Instrument Serif are great options with italics!

Really simple to learn! :)

Question about the Component Interaction at 41:12. I can only choose "Tap", "Tap Enter", "Mouse Enter", "Mouse Leave" and I can't find the "Appear" button anywhere. Can someone help me out here...? I followed everything same so not sure how this happened.

Thank you so much, this video is great for beginners. Only major issue I ran into was that the "appear" animation didn't show up as an option for interactions... scratch that - you've covered it in another comment! Awesome, thank you!

As a designer who is a Squarespace Expert this is sooooooooooo much better than Squarespace

Awesome ❤

Hi Guys! Amazing video! Thank you so much! I just have one question. With what was made the video? Could tell the software you used or if there is any related video to the creation of it?

keep up the good work

Thank you

Best video!

Very clear explanation. Thank you. Is there a way to export the entire design and its elements which we create on the framer app, and then host it on a different hosting provider?

Thanks

🗣🗣🗣 yooooo my name is Benjamin 🗣🗣🗣

I have a slideshow component and a few grid components I want to auto scale up and down. You explain how to do so with the video but it isn't working on my website for my slideshow automatically, how come?

Great tutorial! the copy and paste effect its not working for me. I right click on the effect applied to the logo, and then select the text, hit paste effect and nothing happens.

Good ❤

22:00 min, If i resize my website, then Animator text changed its place. But Why? Could you please explain that for me?

I'm at 21:27 in and when I try to preview the page, the video doesn't play. How do I troubleshoot this? Thanks.

Yo whatsup Benjamin, my name is Max!

Hey! the tutorial is great! But i couldn’t "copy style" of text and paste to another text. why is that?

Does anyone know which browser is that?

Hello please he is recording with which software ?

What minute do you Talk about pages creation? :(

bummer that my "Material Symbols Rounded" font does not work. Thanks Framer!

I don't see the "Appear" trigger. Windows 11, Latest version. Downloaded from Framer website

For me some features in this video didnt work out: -I coudnt create components from an object but only an empty one. -when i wantetd to connect two variants of a component the "on appear" option didnt show up. Are these features not included in the free version or did I maybe made some mistakes?

Hello I have an issue with the components parts. When I want to link them with the "appear" option, "appear" doesnt show sometimes. Im confused. But thank you for the tutorial :)

I cant find the appear animation preset in the dropdown

@40:55 I do not see "Appear" as an option under interactions. Any alternative ways of adding it?

I don't see the "appear" under interactions, what am I doing wrong?

26:00 mine doesn´t convert to stack :(

why does it say rows hen you slect eleents and add stack, in my verison it says stack

40:53 Don't see an appear option. What might be the reason?

Learners if anyone writing notes or creating a detailed timestamps do post it in comment section.

Hello there, thank you for the tutorial! I'm New to Framer: when applying a colour style (Accent in the video) 17:43, it's reducing font size and doesn't allow me to increase or decrease it afterward. I have no clue why as it's a colour style only (not a text style). Anyone faced that issue?

alt + scroll wheel to zoom!

th buttons for lining up my text don't work

Is framer free of chrage?

Great bbb

in latest version where can i find FIX content?

Video not showing when previewing

Can i make a shopify E-Commerce Site with framer?

plase, how use in spanish

I am no expert or frontend developer and I have never made a website. I wish I could make one but it seems so difficult. This tutorial only touches the surface. It is just a landing page with minimal design. If you want to build a real website with multiple pages it would take months to do it. I wish there was a tutorial and integrations to use for example relume for wireframe then go directly to framer and automatically design all the pages with AI or use existing design from figma to framer plugin and add multiple pages. Or start completely with framer AI and build all the pages but using effects and other animations. So far framer AI has certain templates and you still need to do all the work to include effects and other nice stuff. I hope all this comes one day and you can build it easily with few clicks and not spent weeks. Of course if you spent months learning how designing works it will be way easier to build it from scratch.

Appear option in variants doesn't show.

anyone having trouble pasting effects?

i cant export file from framer why?

24:23 25:40 29:11 31:02

44:23

Far to small writing you should make it bigger so you can read what is going on

Adding the video does nothing...it doesn't function at all, doesn't show up...nothing...that includes trying to reload it and view it.

Sorry, but that hack with the empty frame in the navbar is too sloppy for you guys to teach. You can easily achieve this effect using "space between" in the stack, which is how a developer would do it using flexbox

bye bye webflow...migrating to framer in 1...2....3.....

Why the fuck did you create a spacer for the header when you could just made it a stack and set distribute to 'space-between'? Also you really had to made the header take an absolute position. You would not need it if you structure the elements differently. I'd avoid absolute positioning unless really necessary as it can get out of hand and cause issues

Nice. However, the sad background music is annoying and unnecessary.

this is hack!!!!!!!!!!!!!!!!!!!11111

I get it that y'all tryin to target Gen Z and alpha, but just don't say "Yo my name is Benjamin!" Very annoying. -- On behalf of millennium.

Great video, but pathetic audio... No concept of punctuations!!

wow