Framer for Beginners: Avoid The #1 Rookie Mistake

In this Framer tutorial, you'll learn how to avoid the biggest mistake every beginner makes in Framer. I'll teach you the basics of responsiveness and show you how to set up your page structure. This way, you can effortlessly optimize the website for multiple breakpoints later.

Project remix:

0:00 - Introduction
0:31 - The roadmap
0:43 - Absolute positioning
2:38 - Relative positioning
3:45 - Stacks
5:08 - Sizing options
6:57 - Page structure
12:13 - Breakpoint optimization
15:09 - Recap
16:30 - Your next step

Follow me on:

[louisengyn]

First time of my life i understand exactly what absolute et relative postions are.

[mr.chinaski]

Hope your Framer course will start ASAP - as an UX designer I started to use Framer for a while, but I'd like to master it :) Keep up the quality work and content creation!

[alexander]

This is the best tutorial/explanation I've seen on website structure & positioning.
I finally understand it now!
(And I have a 3.5 year bachelor's degree in Multimedia Design & Communication)

Amazing job!
Subscribed.

[femis.]

This is by far the easiest tutorial on this subject. I learned a whole lot in just 16 minutes without having a headache. Thank You!!!

[leetakyee]

Finally, a great communicator about position. Thank you!

[appstudioux]

Really like the pace and clarity of your presentation - great work!

[charlesajiboye]

You are a great teacher. You broke the concepts down into pieces that can be easily understood. Great Job👍

[shroots]

Thank you Nandi, even though I've used Auto Layout on Figma, was breaking my head trying to understand it on Framer. This was the clearest explanation so far - thanks so much!

[AHewmun]

Out of the many framer tutorials, your is by far the most useful. Thank you very much.

[Littlefootbigfoot]

This video is absolute gold. Thank you for doing what you do. You are amazing at breaking down concepts.

[thaisolano]

The way you teach makes everything seem easier. Very good!

[arpandas]

Your tutorial blew my mind. Please keep them coming.

[life_Of_Bowie]

BEST video. After watching approx 50 videos someone finally explained this. THANK YOU!

[TomsRockinGuitar]

Thank you for making this! Saved me HOURS of frustration.

Ive made my own websites before using other tools like Wix. Framer is a whole different animal. I spent 12 hours clicking around the side panel, trying to make a basic "About" page. Positioning is the answer to making it look right.

[ridwanh]

this is a very important fundamental thing that we are still very confused about. Sometimes we want to immediately learn other features without learning the basics. this video is very good

[JonBanquer]

Fantastic tutorial! Thank you! You have a gift for teaching. Clearly everyone in the comments realizes just how good you are and is appreciative.

[millileung]

Omg THANK YOU! Making my designs responsive has been the biggest challenge for me so far in learning Framer but I successfully followed your video and was able to do it and understand how to fix things where I went wrong! Every single person learning Framer should watch this honestly, so so helpful! 🙏🏼

[suzanne]

Great video! I love your way of teaching, it is so calm and structured and to the point. Thank you so much.

[rastada]

Thank you so much for this video! This was the most clear way to understand my biggest struggle in Framer :))

[shurt]

wow this is by far the simplest explanation of how to best use layouts. thank you!