Framer for Beginners: Avoid The #1 Rookie Mistake

[@louisengyn]

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

[@framer.university]

This is the best feedback I could've gotten for this video. Super happy to hear this :)

[@femis.6582]

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!!!

[@framer.university]

My pleasure! Super happy to hear that you found it valuable 🫶

[@leetakyee]

Finally, a great communicator about autolayouts/constraints/relative position. Thank you!

[@framer.university]

Glad it was helpful! :)

[@mr.chinaski2613]

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!

[@framer.university]

Good luck with Framer! I'll keep on bringing Framer education to help you. :)

[@irzq_z]

Yeah actually the course takes too long I can't wait to master the tool also 🙌🏼. Hope it’s lunch soon 🙃

[@AHewmun]

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

[@framer.university]

appreciate you so much

[@appstudioux]

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

[@framer.university]

Appreciate u! Thanks 🫶🫶

[@ridwanh11]

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

[@framer.university]

Thank you so much 🫶

[@shroots88]

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!

[@framer.university]

So happy to hear that my explanation helped :) Thanks for the feedback!

[@cloakedup]

there is something deeply unintuitive about it. watching this video again to try ...again to get it

[@charlesajiboye4421]

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

[@framer.university]

Thanks for the kind words! Props to McGuire Brannon for teaching me how to teach.

[@thaisolano]

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

[@framer.university]

Happy to hear that :)

[@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! 🙏🏼

[@framer.university]

so happy to hear this :)) I wanted to make this video super helpful so hearing feedback like this is the best thing that can happen 🫶

[@JonBanquer]

Agree.

[@Littlefootbigfoot]

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

[@framer.university]

So happy to hear that you find the videos helpful :) more to come! 🙌

[@Mateo_Bowie]

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

[@framer.university]

So happy to hear this :) glad my video helped ✌️

[@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.

[@framer.university]

glad it helped

[@TomsRockinGuitar]

@framer.university are you affiliated with Framer or do you teach your own courses? Just rewashed this video and was able to complete my site today. Couldn't have done it without your help!

[@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.

[@framer.university]

Wow, thank you! 🙏

[@shurt703]

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

[@framer.university]

Glad u learned from this 🫶

[@arpandas5861]

Your tutorial blew my mind. Please keep them coming.

[@framer.university]

Noted buddy! I’ll keep em coming :)

[@ValentinBlary]

As an advanced Framer user, I can tell that this video is really an incredible gem for beginners, you're really good for teaching, ggs Always fun to look back at the fundamentals !!

[@framer.university]

Appreciate you! I’m glad to hear that the video is actually helpful. I hope many beginners will learn from it :)

[@MuthuKumaran-u5j]

Thank you sir, for teaching for 2-3 months I was just searching in youtube and I didn't get even 1 proper video that explained like I thought why I was about to leave then I saw your video and you made me understand the basic concept very well I want you to post the video continuously like this. Thank you for teaching sir.

[@framer.university]

Happy to help

[@Tough_skin]

U know how long I have been waiting for this (gambit). You are absolutely the best tutor ever. Thank you sir

[@framer.university]

Thank you so much! Glad u found this helpful 🫶

[@rasta2da]

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

[@framer.university]

So happy to hear this! What was the hardest part for u?

[@suzanne8637]

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

[@framer.university]

I'm happy to hear this. :) excited to share more tutorials with you ✌️

[@SnigdhoMondal]

This is the first video I saw which made everything clear.... Subscribed bro... Loved the video

[@roieshalom7240]

A very clear and efficient guide, thank you.

[@framer.university]

My pleasure 💙

[@michaelroberts2832]

Great video, thank you very much. I have a quick question, on 10:14 how do you copy and insert the section with the 2 pictures onto the other one you are replacing? Could you explain what commands are you using? I don't seem to be able to do it with copy and paste.

[@framer.university]

Hey! I’m using ⌘ + ⇧ + V! You can see it btw on the bottom of the screen, it highlights all my shortcuts I press. It is used for pasting in place of another element. Hope this helps :)

[@Vivisedmori]

I'm finally starting to understand it after so many youtube videos, thank you! I'll watch 10-20 times more to really learn while doing it too😂

[@framer.university]

that's the spirit! keep it up - you got it! :)

[@Sefko1995]

Over the past five years, I've tried many things, but I often ended up failing or giving up. However, this time I'm fully committed to mastering Framer, and there's no turning back. Within 1-2 months, I plan to have the program fully memorized and be able to build a responsive website from the ground up. In the first month, I'll focus on following tutorials and applying them in my own Framer projects. In the second month, I'll create 5 websites to kickstart my portfolio. One of these websites will be launched as my own web design site, which I'll market to attract clients who want their websites designed by me. Your videos have been incredibly helpful, and I would greatly appreciate more content. Posting a video every day would really help me stay focused and motivated to keep pushing forward.

[@BogdanUXD]

Great video explaining how to create responsiveness in Framer. Highly recommended!

[@framer.university]

Glad it was helpful! 🙌

[@ruygranja]

Thank you very much! Super clear and easy to understand!

[@framer.university]

Glad it helped!🤝

[@shikher123yo]

BEST FRAMER VIDEO!

[@framer.university]

Thank u so much!! 💙

[@Vishalahir0057]

best explained of framer thank you so much bro .😇

[@framer.university]

Thank u so much for the kind words :) glad this video helped :)

[@tahysribau9479]

Thanks so much for this tutorial ! It was easy to follow for a beginner like me :)

[@framer.university]

Super happy to hear this mate 🙏

[@binodtamang9622]

Easy the best tutorial to get started in Framer, thank you!

[@framer.university]

Glad you think so! Thank u so much

[@sidarthg2477]

This video makes sense for a designer coming into framer. Not so much for a web developer coz we have seen first hand the pain of making absolute powitions work properly😂

[@framer.university]

Hehe 😛

[@Klayhamn]

this is awesome - very simple and straight to the point with the most important basics --- but can you explain what is the "breakpoint"?

[@eduardoluchtenberg]

Great video! Keep up the good work!

[@framer.university]

Thank u so much! :) glad it helped. More to come 🫶

[@thevisuallaboratory]

Thanks Nandi, been following you for a couple of months and really appreciate your generosity sharing this. Now, it might be a dumb question, but what's your process for creating the section with all the content prior to pasting them into the breakpoints?

[@framer.university]

Hey thanks for the kind words :) Those sections are created with the same techniques explained in the vid. Relative positioning and stacks:) Try recreating them for practice!

[@LenardthePatchworkdev]

An absolute gem!

[@framer.university]

Thank u so much! Im glad it helped:)

[@djqris11]

This is just like using Auto-Layout in Figma for responsiveness.....wow!! All these tools are related in one way or the other.

[@framer.university]

Exactly!

[@frameraddict]

This is just in time! This is like filling gaps. Oh maaan !!!!

[@framer.university]

I'm glad! :)

[@davidschwan]

Cant wait for your Course!

[@framer.university]

This year! Stay tuned mate :)

[@paulvartmusicdaily7784]

Great content ! Really helpful !

[@framer.university]

Glad to hear that! 🫡

[@ARKANIT]

**Wow!** 🤩 I am **truly grateful** for this **incredible video tutorial**! Your clear explanations and step-by-step guidance have been **immensely helpful**. Thank you for sharing your expertise! 🙌🎥

[@framer.university]

Happy to help mate 🫶 thanks for the comment:)

[@musichead8569]

Love the summary at the end 👍

[@framer.university]

💙

[@EdgarBadalyan-df6fg]

bro you are a life saver. Thank YOU!

[@framer.university]

Happy to help

[@LesGaminuscules]

Excellent, well presented! thank you

[@framer.university]

appreciate it!

[@revendeva5362]

Yo're amazing Nandi. Thank You and keep it up

[@framer.university]

Happy to help :)

[@reginaldrobinson3787]

FINALLY! Just what I've been needing. Thank you!

[@framer.university]

I’m glad you found it helpful :)

[@TYA-m3c]

i don't fully understand still but this is a good stop in my learning journey. Definitely recommend! good job

[@framer.university]

Great to hear! I think to fully understand it, you have to play around with it and practice. :)

[@ravichhetri4829]

Very informative, thanks for sharing

[@framer.university]

You’re welcome 🫶

[@lemicmelo7713]

Hey!! I would like to thank you for the time to make all this content, is very valuable. 👏🏽 Quick question as a new designer in framer, what is the deal about hosting, I know you can just publish and purchase the domain, but no one talks about the host for this web page. Thank you again and hope to have an answer, if I just need to have my domain and framer will take care of the rest, the security certificate and everything to protect your web page

[@arturgolanski4288]

Very good presentation and usefull. Thank you

[@framer.university]

thank you Artur! :)

[@MuchLove.12]

This was awesome thank you! 🙏

[@framer.university]

Glad you liked it! :)

[@naeempersonal]

Best video about Framer!

[@framer.university]

Thank you :))

[@Neortz]

Thank you so much for the tutorial! one small question how do you set the default background color in your viewport to black? mine is white and I can't change it even though I'm on dark mode.

[@framer.university]

Thansk! :) Hmm that's weird. You cant change it separately, it changes with light/dark mode. Did u try restarting the app or turning dark mode on and off?

[@mahdiehghaffar154]

thanks for this tutorial

[@framer.university]

You’re welcome 🫶

[@ydkim108]

very good from beginner to intermediate

[@framer.university]

Happy to hear it 🫶

[@wfwfwfwfwfwf]

So Framer doesn't have the downward screen hierarchy, where something that's setup in desktop will automatically drip down to lower screen sizes? At least that's what I'm getting out of the video, especially at 13:56 where you're changing the direction to vertical, which you'd already done at the tablet level. Great video btw, orienting on building my next site in Framer, so these videos are very helpful.

[@framer.university]

Everything you do on the primary breakpoint drips down to lower sizes (if that doesn’t already have an override on tablet or mobile). Changing something on mobile or tablet only overrides on that specific breakpoint. I hope this makes sense :)

[@wfwfwfwfwfwf]

@@framer.university ah yes that makes sense, and so in that case it's slightly different from Webflow, where tablet also drips down to mobile. Thanks for your quick answer ✌️

[@Jazzy-jj2cx]

dammn itt!! the video is worth every ounce.

[@framer.university]

So happy to hear this mate :)

[@Reviewrlyfd]

Sounds amazing! I have a question: What kind of software is he using for recording? Thanks!

[@framer.university]

Thanks! Using screen studio :)

[@georgemauricio507]

Just got a new subscriber!

[@framer.university]

Welcome onboard !🫡

[@JoeYong-b6k]

At 2.11, you selected multiple elements in your header frame. Can you explain how did you do that (without moving the main frame of your page ?) Was this done with a keyboard shortcut ? I'm using Windows. Sorry, this is probably a very basic question. It seems like most of these tutorials, people are using keyboard shortcuts and not explaining what they are.

[@framer.university]

Haha yeah sorry! In my latest videos I show every shortcut on the bottom of the screen. You can select multiple frames by holding down ⇧ (Shift) while you’re clicking the frames. Hope this helps 🫶

[@RayoNathan]

Informative. Thanks a bunch man.

[@framer.university]

Glad u found it useful :)

[@egirlwins8611]

Very helpful. But I wondered how do I make a desktop, tablet and mobile view?

[@framer.university]

When you have the desktop view only, there is a little plus button in the top right corner. You can click that and add tablet and mobile.

[@piemasta93]

Wow you sir are a godsend you getting a sub

[@framer.university]

Thank you so much! Glad it helped 🫶

[@KidsTV786abc]

one of gtreatest video ever in my life

[@framer.university]

🫶

[@mrblack3163]

This is a helpful guide. Thank you for your contribution

[@framer.university]

You're very welcome!

[@Ryan-kr4bq]

Love this. In the beginning the music is louder than your voice, just so you know. 🤓

[@framer.university]

Thanks! For the feedback as well :)

[@GCunu]

No one has explained this before. They all speak super fast, like someone's pointing a gun to them, and they assume we already know what they talk about.

[@framer.university]

I’m glad this video helped 🫶 more to come :)

[@Laurren_Pucci]

Literally! This video is so refreshing!!!! I've come across so many videos that are not explaining things slow enough and talking through all the steps. Super helpful!

[@framer.university]

Super happy to hear this, Laurren! 🫶

[@AtomicPixels]

To be honest, people need to stop trying to make something awesome as the product - but rather create individual sections AS components, which are individually and hyper focused on creating one extremely specific format of presenting one very specific type of information that’s meaningful and relevant to that data and format.

[@khanayan-v7z]

Hey Nandi, how do I make sure every section has a padding from right and left? To have every content in line throughout the page?

[@khanayan-v7z]

Do we need to give padding inside section stack?

[@khanayan-v7z]

or giving max width for container stack?

[@framer.university]

As you’ve written it on one of your comments here: i usually add max width. I’d recommend checking my site from scratch video :)

[@360avd7]

Hey Nandi... LOVE LOVE LOVE everything Framer and your vids. Chris here from SA. I used a free template in Market Place but the designer forgot to make it mobile-friendly and now I am stuck. What can I do?

[@framer.university]

appreciate it :) which template is it?

[@brucedesbravador]

Amazing content! Congratulation!

[@framer.university]

Appreciate ya man ✌️

[@gpadr]

This is heaven

[@framer.university]

Framer, or the video? 😛

[@Negiiprajwal]

Loved this video :)))

[@framer.university]

So good to hear this :)

[@mdrahat-lu9tn]

damn this is really cool !!

[@framer.university]

Thanks 🙏

[@mdrahat-lu9tn]

@framer.university 🥰

[@oussamachuiter586]

Please make a playlist

[@framer.university]

my whole channel is a playlist of Framer tutorials :P

[@OlokodanaMoses]

Great Video

[@framer.university]

thank you man!

[@wajahatsheikh929]

such an amazing thankyou so much

[@framer.university]

You're so welcome!

[@luvitio]

Hi! Thanks for the Video! I try to make a single word have a gradient in a text box exactly like on your thumbnail. Is this possible? Many thanks in advance

[@framer.university]

You can set a gradient fill color for the text :)

[@fadi.optimist]

I have so much respect for this man. Jesus!

[@framer.university]

yay, thanks! :)

[@NisthaMishra-h1t]

I am trying to add/ embed my Figma prototype in my Framer project. I found a video from a year back where we could also add interactions in the pages, buttons, etc very similar to Figma. Can you please help me understand how I can achieve the same in my current framer project?

[@framer.university]

Check my Figma to Framer video: kzbin.info/www/bejne/eZDLnHSYq6mcg7s

[@gauravyadava5256]

awesome content

[@framer.university]

Thank u so much 🫶

[@codinginflutter1234]

thank you so much

[@framer.university]

You’re welcome 🫡

[@lalithkumar2766]

dam🔥 smooth

[@framer.university]

💙

[@almighty.saumya]

This was so well taught that it was hot

[@framer.university]

Ahh thanks 🫶🫶

[@AtomicPixels]

Honestly people should prob understand the fill, fit and wrap. You can cut vid down to 30 secs once you get those things. It’s just very basic logic too once explained in its most basic form

[@framer.university]

This is made for those who don't get it just yet.

[@dutchashell]

🎉🎉🎉

[@framer.university]

🫶

[@TouYaeh]

Hey can you tell me when your course is launching 😅😂

[@framer.university]

Hey 👋 sometime this year

[@intervention_w_myself]

Damn that music is loud and overpowering

[@framer.university]

Where exactly? Intro? Everywhere? :)

[@kaldarges]

🎉

[@cloakedup]

framer is such a nightmare for mobile / desktop variants

[@framer.university]

If you don't know how to use Framer then maybe. What do u struggle with?

[@hqef616]

Why the sad music, it's depressing

[@framer.university]

which music exactly? :(

[@amanda.loulou]

You guys' support is really bad!! I'm trying to contact you for 2 days about changing domain and published website (simple & straightforward info) and the info is not available anywhere and you don't respond!!!!!!

[@framer.university]

Hey 👋 i’m not part of the Framer team, but happy to help! Send an email to [e-mail] and i’ll help ya out:)

[@AtomicPixels]

Framer isn’t figma. It’s not a brainstorming canvas. It’s an actual website. Just something people don’t seem to understand. Framer, is, NOT, a, design tool. It’s a website builder lol

[@framer.university]

You can definitely use Framer for brainstorming. I never really design sites in Figma anymore. Save time by just jumping straight into Framer. You can use the "canvas" section for experimentation and the "web" section for building the actual site. You can find these on the left panel.

[@Framer]

[@framer.university]

💙

[@pmanvish]

[@boxfox007]

first

[@uxdeya7660]

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

[@framer.university]

Thanks so much:)

[@tristanwhitehead6029]

Great explanation, thank you!

[@framer.university]

My pleasure 🫶