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!
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 !!
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!
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
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! 🙏🏼
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.
**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! 🙌🎥
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
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😂
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?
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!
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.
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!
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.
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 :)
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.
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.
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?
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.
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.
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 🫶
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 ✌️
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?
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
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
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 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.
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 :)
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 🙃
Finally, a great communicator about autolayouts/constraints/relative position. Thank you!
Glad it was helpful! :)
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.
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!!!
My pleasure! Super happy to hear that you found it valuable 🫶
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 :)
This video is absolute gold. Thank you for doing what you do. You are amazing at breaking down concepts.
So happy to hear that you find the videos helpful :) more to come! 🙌
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!
So happy to hear that my explanation helped :) Thanks for the feedback!
there is something deeply unintuitive about it. watching this video again to try ...again to get it
Out of the many framer tutorials, your is by far the most useful. Thank you very much.
appreciate you so much
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
Thank you so much 🫶
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 ✌️
BEST video. After watching approx 50 videos someone finally explained this. THANK YOU!
So happy to hear this :) glad my video helped ✌️
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 🫶
Agree.
Fantastic tutorial! Thank you! You have a gift for teaching. Clearly everyone in the comments realizes just how good you are and is appreciative.
Wow, thank you! 🙏
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.
Happy to help
U know how long I have been waiting for this (gambit). You are absolutely the best tutor ever. Thank you sir
Thank you so much! Glad u found this helpful 🫶
Thank you so much for this video! This was the most clear way to understand my biggest struggle in Framer :))
So happy to hear this! What was the hardest part for u?
wow this is by far the simplest explanation of how to best use layouts. thank you!
Glad u learned from this 🫶
best explained of framer thank you so much bro .😇
Thank u so much for the kind words :) glad this video helped :)
This is the first video I saw which made everything clear.... Subscribed bro... Loved the video
A very clear and efficient guide, thank you.
My pleasure 💙
Thank you very much! Super clear and easy to understand!
Glad it helped!🤝
Great video explaining how to create responsiveness in Framer. Highly recommended!
Glad it was helpful! 🙌
Great video! Keep up the good work!
Thank u so much! :) glad it helped. More to come 🫶
Easy the best tutorial to get started in Framer, thank you!
Glad you think so! Thank u so much
Thanks so much for this tutorial ! It was easy to follow for a beginner like me :)
Super happy to hear this mate 🙏
An absolute gem!
Thank u so much! Im glad it helped:)
**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! 🙌🎥
Happy to help mate 🫶 thanks for the comment:)
BEST FRAMER VIDEO!
Thank u so much!! 💙
Great content ! Really helpful !
Glad to hear that! 🫡
this is awesome -
very simple and straight to the point with the most important basics ---
but can you explain what is the "breakpoint"?
Love the summary at the end 👍
💙
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
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😂
Hehe 😛
This was awesome thank you! 🙏
Glad you liked it! :)
bro you are a life saver. Thank YOU!
Happy to help
Yo're amazing Nandi. Thank You and keep it up
Happy to help :)
Best video about Framer!
Thank you :))
Great explanation, thank you!
My pleasure 🫶
Very informative, thanks for sharing
You’re welcome 🫶
This is just like using Auto-Layout in Figma for responsiveness.....wow!! All these tools are related in one way or the other.
Exactly!
FINALLY! Just what I've been needing. Thank you!
I’m glad you found it helpful :)
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?
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!
Cant wait for your Course!
This year! Stay tuned mate :)
dammn itt!! the video is worth every ounce.
So happy to hear this mate :)
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.
I’m glad this video helped 🫶 more to come :)
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!
Super happy to hear this, Laurren! 🫶
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. :)
thanks for this tutorial
You’re welcome 🫶
This is just in time! This is like filling gaps. Oh maaan !!!!
I'm glad! :)
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.
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 :)
Wow you sir are a godsend you getting a sub
Thank you so much! Glad it helped 🫶
Just got a new subscriber!
Welcome onboard !🫡
Very helpful. But I wondered how do I make a desktop, tablet and mobile view?
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.
Love this. In the beginning the music is louder than your voice, just so you know. 🤓
Thanks! For the feedback as well :)
very good from beginner to intermediate
Happy to hear it 🫶
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.
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.
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?
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.
Sounds amazing! I have a question: What kind of software is he using for recording? Thanks!
Thanks!
Using screen studio :)
Loved this video :)))
So good to hear this :)
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.
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 🫶
This is heaven
Framer, or the video? 😛
Informative. Thanks a bunch man.
Glad u found it useful :)
Please make a playlist
my whole channel is a playlist of Framer tutorials :P
awesome content
Thank u so much 🫶
such an amazing thankyou so much
You're so welcome!
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 ✌️
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: ruclips.net/video/C_hkAbvDiMY/видео.html
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 :)
thank you so much
You’re welcome 🫡
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.
dam🔥 smooth
💙
This was so well taught that it was hot
Ahh thanks 🫶🫶
Damn that music is loud and overpowering
Where exactly? Intro? Everywhere? :)
Hey can you tell me when your course is launching 😅😂
Hey 👋 sometime this year
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!!!!!!
Hey 👋 i’m not part of the Framer team, but happy to help!
Send an email to nandi@framer.university and i’ll help ya out:)
framer is such a nightmare for mobile / desktop variants
If you don't know how to use Framer then maybe.
What do u struggle with?
🎉
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:)
This is a helpful guide. Thank you for your contribution
You're very welcome!