Framer for Beginners: Avoid the #1 Rookie Mistake
ฝัง
- เผยแพร่เมื่อ 12 มิ.ย. 2024
- 🎓 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
First time of my life i understand exactly what absolute et relative postions are.
This is the best feedback I could've gotten for this video. Super happy to hear this :)
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!!!
wow this is by far the simplest explanation of how to best use layouts. thank you!
Glad u learned from this 🫶
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!
Good luck with Framer!
I'll keep on bringing Framer education to help you. :)
Yeah actually the course takes too long I can't wait to master the tool also 🙌🏼.
Hope it’s lunch soon 🙃
You are a great teacher. You broke the concepts down into pieces that can be easily understood. Great Job👍
Thanks for the kind words!
Props to McGuire Brannon for teaching me how to teach.
The way you teach makes everything seem easier. Very good!
Happy to hear that :)
Great video! I love your way of teaching, it is so calm and structured and to the point. Thank you so much.
I'm happy to hear this. :) excited to share more tutorials with you ✌️
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! 🙏🏼
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 🫶
A very clear and efficient guide, thank you.
My pleasure 💙
Love the summary at the end 👍
💙
Great explanation, thank you!
My pleasure 🫶
This is a helpful guide. Thank you for your contribution
You're very welcome!
FINALLY! Just what I've been needing. Thank you!
I’m glad you found it helpful :)
Informative. Thanks a bunch man.
Glad u found it useful :)
bro you are a life saver. Thank YOU!
Happy to help
Best video about Framer!
Thank you :))
Cant wait for your Course!
This year! Stay tuned mate :)
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 !!
Appreciate you!
I’m glad to hear that the video is actually helpful. I hope many beginners will learn from it :)
such an amazing thankyou so much
You're so welcome!
i don't fully understand still but this is a good stop in my learning journey. Definitely recommend! good job
Great to hear!
I think to fully understand it, you have to play around with it and practice. :)
This is just in time! This is like filling gaps. Oh maaan !!!!
I'm glad! :)
very good from beginner to intermediate
Happy to hear it 🫶
Love this. In the beginning the music is louder than your voice, just so you know. 🤓
Thanks! For the feedback as well :)
thank you so much
You’re welcome 🫡
Sounds amazing! I have a question: What kind of software is he using for recording? Thanks!
Thanks!
Using screen studio :)
Please make a playlist
my whole channel is a playlist of Framer tutorials :P
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
You can set a gradient fill color for the text :)
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?
Check my Figma to Framer video: th-cam.com/video/C_hkAbvDiMY/w-d-xo.html
This was so well taught that it was hot
Ahh thanks 🫶🫶
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.
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 :)
@@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 ✌️
🎉
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.
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
This is made for those who don't get it just yet.
Hey can you tell me when your course is launching 😅😂
Hey 👋 sometime this year
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
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.
Amazing content! Congratulation!
Appreciate ya man ✌️
💙
first
The way you teach makes everything seem easier. Very good!
Thanks so much:)