You make it look like effortless, the nice lesson I got from here is how you should put some structures and layouts before you are tempted to fix everything in the phone breakpoint. Thank you.
I am using framer for a long time and Only now understood all of this. wow when I think about it I should have watched this tutorial years ago. Thanks for the information dude it will help me alot 😁
If I've followed correctly, a good practice: *Breakpoint (Desktop)* Width: 1200 (Fixed) Height: Auto (Fit) *Wrapper* Width: 1fr Fill Height: Auto (Fit) And set a Max width.
Perhaps a good way to do tutorials like these is to ALSO share the remix template the video has. It would greatly benefit because we learn by doing. Not just by consuming this video. Just a suggestion.
Wow Thanks a lot!! I was doing it wrong all this time and it was taking forever to make changes on approximately 3 pages which had 3 breakpoints.. so I had to make the same change 9 times on a same damn thing 😅😂😂
Great video - One thing to note - i see a LOT of questions / errors in the support section of your website - but i see NO ONE replying to the majority of questions. Having an expert in there everyday to answer all questions would create a better user experience and framer reputation in the industry - just saying
Great video. One question. You said that breakpoints inherit from primary. I'm not sure if all breakpoints inherit from the primary or each breakpoint inherits from the larger one? Or from the one it was created from? If there is an inheritance chain, where can I see the hierarchy? Also, it seems that each page can have its own breakpoints. Is it possible to add/remove a breakpoint to all pages at once? Thanks
this seems very easy with text and stacks, but it's get harder when working with cards, as I am right now. Having a lot of trouble making cards and covers + text and tags responsive. could you make a tutorial on that? 🙏
would you also suggest creating the tablet and mobile designs on Figma and then just pasting them onto Framer? I'm still having a lot of trouble making my desktop design responsive on Framer
I still find it confusing because the component sections in Framer all seem to have relative positions. I don't see any Absolute, which is what this tutorial is based on. I've created my desktop, and now that I've created tablet and phone breakpoints, I can't follow the same principles laid out here because the initial setup is different (relative vs absolute). I tried changing the section I dragged from relative to absolute, but it all went skewy. I'm a beginner and this is tough
can I suggest you edit these videos to make the working space more visible? better than nothing, but it's often very difficult to visually track what you're changing as you do it. We don't need to see your entire desktop. Also, resolution = blurry.
Hi and thanks, How can I change the desktop design/padding without it changing and becoming messy on the other devices, phone & tablet. Then suddenly there are frames at an angle etc. I am in the process of adapting an AI-generated template. Incidentally, it would be helpful to enlarge the window in the video, it's much too small for a tutorial. Thanks
Hey. I'm not a web designer, but I designed my website in Framer so, maybe I can help you because the same thing kept happening to me. What I did was designing the whole version of the website on the desktop breakpoint only and, only after that, I created the other breakpoints. If I had to do a major change on the website after having created the tablet and phone breakpoints, I would just delete them, do the change on the desktop breakpoint and then create the others again. That's what I do until nowadays. When deleted and created again these breakpoints adapt quite well, much better than when you try to do the major change on all of the breakpoints. For small changes I do on each one. I suspect there might be a better way than mine, but it did solve my problem.
I am struggling with from Figma to Framer . Most of the page is not there when I preview it. Is there a video on this topic? I used the app to more the template. There is no option for stacks that I can find. Do you have to pay for a subscription to get the app to work right or get the stack option? Thank you for your help.
@@Framer Hello. I did watch that video but it did not help with my layout. When I do as instructed it makes the template layout go all out of wack. I don't have the stack choices, just "fit". It will not allow me to select any of the others. also when I preview the page half of the content is missing.
Easy to look at, hard to achieve! The main difficulty is to understand how all these settings work together and are interdependent. I'm still not there.
Not an easy to learn interface at all i would say, how do you get images from the desktop to resize down to the mobile version? My png image does not even appear on mobile but does on tablet, confused.
This tutorial is too dense and slow. I was specifically looking for how to deal with a 1920w breakpoint and I lost my patience trying to find the answer.
You make it look like effortless, the nice lesson I got from here is how you should put some structures and layouts before you are tempted to fix everything in the phone breakpoint. Thank you.
I am using framer for a long time and Only now understood all of this. wow when I think about it I should have watched this tutorial years ago. Thanks for the information dude it will help me alot 😁
You made it look easy 😅, I appreciate..
So the bottom line is work with stacks
oh man what a cool tool framer. its so fun to work with, thanks a lot
If I've followed correctly, a good practice:
*Breakpoint (Desktop)*
Width: 1200 (Fixed)
Height: Auto (Fit)
*Wrapper*
Width: 1fr Fill
Height: Auto (Fit)
And set a Max width.
But Desktop is 1920px??
This tutorial answered so many of my questions, thanks a lot for your amazing help!
Happy to hear!
Your tool looks so interesting! Diving into it rn!
Thank you for making breakpoints easier than Webflow
Perhaps a good way to do tutorials like these is to ALSO share the remix template the video has. It would greatly benefit because we learn by doing. Not just by consuming this video. Just a suggestion.
For sure. I try to share the remix link on most videos. I could share this one too. Noted.
The concept of stack is really similar with Figma, really excited to try it out!
Amazing video, thank you so much. This really helps to understand how Framer works. I was struggling with breakpoints last night. Much appreciated! 🙏
It helps me a lot! Thank you so much for this, I was struggling with that. Now it look so easy and fun.
Wow Thanks a lot!! I was doing it wrong all this time and it was taking forever to make changes on approximately 3 pages which had 3 breakpoints.. so I had to make the same change 9 times on a same damn thing 😅😂😂
Excellent tutorial!
i like your teaching style
Really Great tutorial...Thanx'
thanks for the video!
Love the knowledge and tutorial - thanks for the video! What's the track playing you have during the video? 🔥
Great video - One thing to note - i see a LOT of questions / errors in the support section of your website - but i see NO ONE replying to the majority of questions. Having an expert in there everyday to answer all questions would create a better user experience and framer reputation in the industry - just saying
Amazing tutorial, thanks!
Great video.
One question. You said that breakpoints inherit from primary. I'm not sure if all breakpoints inherit from the primary or each breakpoint inherits from the larger one? Or from the one it was created from?
If there is an inheritance chain, where can I see the hierarchy?
Also, it seems that each page can have its own breakpoints. Is it possible to add/remove a breakpoint to all pages at once?
Thanks
Why was the radius draggable icon removed, seems very convenient!
I think if u know figma then framer comes to u naturally 😊
this seems very easy with text and stacks, but it's get harder when working with cards, as I am right now. Having a lot of trouble making cards and covers + text and tags responsive. could you make a tutorial on that? 🙏
that video was really helpful, thank you
Awesome video
Thanks a lot
What if I want to use Add Stack feature to set an elements horizontally inside a rectangle?
is it possible to make the primary breakpoint mobile and go up in sizes from there? Makes sense when doing mobile first appoach
Hey Benjamin, Can you make a video on SVG animation, please!
would you also suggest creating the tablet and mobile designs on Figma and then just pasting them onto Framer? I'm still having a lot of trouble making my desktop design responsive on Framer
I still find it confusing because the component sections in Framer all seem to have relative positions. I don't see any Absolute, which is what this tutorial is based on. I've created my desktop, and now that I've created tablet and phone breakpoints, I can't follow the same principles laid out here because the initial setup is different (relative vs absolute). I tried changing the section I dragged from relative to absolute, but it all went skewy. I'm a beginner and this is tough
can I suggest you edit these videos to make the working space more visible? better than nothing, but it's often very difficult to visually track what you're changing as you do it. We don't need to see your entire desktop. Also, resolution = blurry.
Hi and thanks, How can I change the desktop design/padding without it changing and becoming messy on the other devices, phone & tablet. Then suddenly there are frames at an angle etc. I am in the process of adapting an AI-generated template.
Incidentally, it would be helpful to enlarge the window in the video, it's much too small for a tutorial.
Thanks
Hey. I'm not a web designer, but I designed my website in Framer so, maybe I can help you because the same thing kept happening to me. What I did was designing the whole version of the website on the desktop breakpoint only and, only after that, I created the other breakpoints. If I had to do a major change on the website after having created the tablet and phone breakpoints, I would just delete them, do the change on the desktop breakpoint and then create the others again. That's what I do until nowadays. When deleted and created again these breakpoints adapt quite well, much better than when you try to do the major change on all of the breakpoints. For small changes I do on each one.
I suspect there might be a better way than mine, but it did solve my problem.
Hello, how to make the navbar change to another variant while scale down or up viewport width? Thanks
Hi how can i remove the scroll bars in preview .. need help
Why can't you share screen in full view?
What about larger breakpoints for 2k, 4k display?
And how to set px unit to EM, REM.
Px isn’t a standard for web dev.
You can set a custom breakpoint of any size you want. The last option is "custom". As of may 2024, Framer doesn't have the option to use REM yet
stuck on the last part... even tho my page height is set to auto fit, it's not expanding with the wrapper contents. anyone know why?
For a no code tool you made it pretty complex adjusting breakpoints...
My website is covering only half of my mobile's screen. Tried so many ways, can you please help?
I am struggling with from Figma to Framer . Most of the page is not there when I preview it. Is there a video on this topic? I used the app to more the template. There is no option for stacks that I can find. Do you have to pay for a subscription to get the app to work right or get the stack option? Thank you for your help.
ruclips.net/video/HVndoTUI1JY/видео.htmlsi=rtqwakm73-ln5O5M
@@Framer Thank you. I will have a look.
@@Framer Hello. I did watch that video but it did not help with my layout. When I do as instructed it makes the template layout go all out of wack. I don't have the stack choices, just "fit". It will not allow me to select any of the others. also when I preview the page half of the content is missing.
what happens in asituation where you need negative margin and your already using a stack
Easy to look at, hard to achieve!
The main difficulty is to understand how all these settings work together and are interdependent.
I'm still not there.
Not an easy to learn interface at all i would say, how do you get images from the desktop to resize down to the mobile version? My png image does not even appear on mobile but does on tablet, confused.
the tutorials are amazing but you have to increase the size of framer frame otherwise we cant see sh+t
Getting difficulty in grid responsiveness
Btter to crop the video on the Framer window, no need for the desktop in the background... makes everything much smaller to follow...
WHY SO SMALL.
This tutorial is too dense and slow. I was specifically looking for how to deal with a 1920w breakpoint and I lost my patience trying to find the answer.
Same miss when l new the site on Desktop when though it's 1200px that text kar overlapped l have to make it 1920px 😢