Framer for Beginners: Avoid the #1 Rookie Mistake

Рет қаралды 22,203

Күн бұрын

🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
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:
page-structure.learnframer.site/
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:
X: x.com/learnframer
Instagram: / framer.university

Пікірлер: 67

@louisengyn 2 ай бұрын

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

@framer.university 2 ай бұрын

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

@mr.chinaski2613 2 ай бұрын

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 2 ай бұрын

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

@irzq_z 2 ай бұрын

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

@millidesignux 6 күн бұрын

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 4 күн бұрын

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 🫶

@musichead8569 Күн бұрын

Love the summary at the end 👍

@charlesajiboye4421 2 ай бұрын

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

@framer.university 2 ай бұрын

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

@RayoNathan Ай бұрын

Informative. Thanks a bunch man.

@framer.university Ай бұрын

Glad u found it useful :)

@mrblack3163 2 ай бұрын

This is a helpful guide. Thank you for your contribution

@framer.university 2 ай бұрын

You're very welcome!

@suzanne8637 2 ай бұрын

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

@framer.university 2 ай бұрын

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

@thaisolano 2 ай бұрын

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

@framer.university 2 ай бұрын

Happy to hear that :)

@EdgarBadalyan-df6fg 2 ай бұрын

bro you are a life saver. Thank YOU!

@framer.university 2 ай бұрын

Happy to help

@reginaldrobinson3787 2 ай бұрын

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

@framer.university 2 ай бұрын

I’m glad you found it helpful :)

@wajahatsheikh929 Ай бұрын

such an amazing thankyou so much

@framer.university Ай бұрын

You're so welcome!

@davidschwan 2 ай бұрын

Cant wait for your Course!

@framer.university 2 ай бұрын

This year! Stay tuned mate :)

@naeempersonal 16 күн бұрын

Best video about Framer!

@framer.university 14 күн бұрын

Thank you :))

@ydkim108 Ай бұрын

very good from beginner to intermediate

@framer.university Ай бұрын

Happy to hear it 🫶

@codinginflutter1234 Ай бұрын

thank you so much

@framer.university Ай бұрын

You’re welcome 🫡

@user-oh2yf5pu6d 2 ай бұрын

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

@framer.university 2 ай бұрын

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

@Artdirector741 2 ай бұрын

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

@framer.university 2 ай бұрын

I'm glad! :)

@Ryan-kr4bq 2 ай бұрын

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

@framer.university 2 ай бұрын

Thanks! For the feedback as well :)

@oussamachuiter586 Ай бұрын

Please make a playlist

@framer.university Ай бұрын

my whole channel is a playlist of Framer tutorials :P

@luvitio 16 күн бұрын

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 14 күн бұрын

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

@Reviewrly 25 күн бұрын

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

@framer.university 22 күн бұрын

Thanks! Using screen studio :)

@user-no5ey8iv6p 2 ай бұрын

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 2 ай бұрын

Check my Figma to Framer video: kzfaq.info/get/bejne/ecWYnqST26rNfY0.html

@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 ✌️

@kaldarges 2 ай бұрын

🎉

@maskedvillainai 2 ай бұрын

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.

@maskedvillainai 2 ай бұрын

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 2 ай бұрын

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

@ValentinBlary 2 ай бұрын

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 2 ай бұрын

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

@ahmetzorlu6735 2 ай бұрын

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

@framer.university 2 ай бұрын

Hey 👋 sometime this year

@henriquesantos9550 Ай бұрын

Amazing content! Congratulation!

@framer.university Ай бұрын

Appreciate ya man ✌️

@maskedvillainai 2 ай бұрын

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 2 ай бұрын

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.