Framer for Beginners: Avoid the #1 Rookie Mistake

Подписаться 16 тыс.

Просмотров 23 тыс.

50% 1

🎓 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

Опубликовано:

5 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@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 :)

@roieshalom7240 2 дня назад

A very clear and efficient guide, thank you.

@framer.university 2 дня назад

My pleasure 💙

@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 🙃

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

@thaisolano 2 месяца назад

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

@framer.university 2 месяца назад

Happy to hear that :)

@millidesignux 11 дней назад

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 9 дней назад

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 🫶

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

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

@musichead8569 6 дней назад

Love the summary at the end 👍

@framer.university 4 дня назад

💙

@reginaldrobinson3787 2 месяца назад

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

@framer.university 2 месяца назад

I’m glad you found it helpful :)

@EdgarBadalyan-df6fg 2 месяца назад

bro you are a life saver. Thank YOU!

@framer.university 2 месяца назад

Happy to help

@davidschwan 2 месяца назад

Cant wait for your Course!

@framer.university 2 месяца назад

This year! Stay tuned mate :)

@wajahatsheikh929 Месяц назад

such an amazing thankyou so much

@framer.university Месяц назад

You're so 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. :)

@naeempersonal 21 день назад

Best video about Framer!

@framer.university 19 дней назад

Thank you :))

@ydkim108 Месяц назад

very good from beginner to intermediate

@framer.university Месяц назад

Happy to hear it 🫶

@Artdirector741 2 месяца назад

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

@framer.university 2 месяца назад

I'm glad! :)

@codinginflutter1234 Месяц назад

thank you so much

@framer.university Месяц назад

You’re welcome 🫡

@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 :)

@Reviewrly Месяц назад

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

@framer.university 27 дней назад

Thanks! Using screen studio :)

@luvitio 21 день назад

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 19 дней назад

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

@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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-C_hkAbvDiMY.html

@oussamachuiter586 Месяц назад

Please make a playlist

@framer.university Месяц назад

my whole channel is a playlist of Framer tutorials :P

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

@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 месяца назад

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.

@TouYaeh 2 месяца назад

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

@framer.university 2 месяца назад

Hey 👋 sometime this year

@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 :)

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