Framer Breakpoints in 7 Minutes (Beginner Tutorial)
In this beginner tutorial you'll learn how to make any website responsive using Framer breakpoints (...and some other techniques).
🔴 Working File: timgabe.com/resources/fully-r...
Timecodes
0:00 - Introduction
0:28 - Adding stacks to text and image elements
0:43 - Adding a frame for overlaying text on video
1:03 - Adjusting widths from fixed to fill for responsiveness
1:36 - Explanation of how text scales with device size
2:15 - Adjusting settings for responsive design
2:45 - Adjusting fixed widths for responsive text container
3:11 - Adjusting image container settings for responsiveness
3:52 - Clarification on wrap functionality and fixed width
4:13 - Using fixed width on items for responsive design
4:47 - Creating tablet breakpoint and adjusting settings
5:15 - Changing individual element settings within breakpoints
5:57 - Adding max-width to images and adjusting padding
6:11 - Creating phone version and adjusting settings
6:41 - Reviewing responsive design across device sizes
7:16 - Fixing positioning issue
#framer #framertutorial
➡️ QUESTION - Have a question about UI, UX or Product Design? Designing in Framer? Or Anything Else? Post in the comments section of this video-I’m happy to answer!
Пікірлер: 55
your channel is better than the official Framer University. very easy to understand. official instructors are so fast and can't see the screen most of the time because they use dark themes. all the best hope your channel grows
@TimGabe
8 ай бұрын
really appreciate that, internet friend 🙏
Thank you for giving the alternative methods, it clears many of misundestandings
omgosh so useful. It's been so painful tinkering with the responsiveness aspect in framer.
@TimGabe
10 ай бұрын
happy you liked it, my friend!!
Hey Tim, your videos saved my life. Thanks my friend!
Great video with explicit explanation.You're the best
@TimGabe
6 ай бұрын
thanks a lot charles! 😃 happy it was helpful!!
Tim you are the best teacher
These videos are so useful, keep them coming. 😃
@TimGabe
9 ай бұрын
thank you for the comment, will definitely keep 'em coming!!
so good and clear
I needed this..good lesson and direct!
@TimGabe
6 ай бұрын
glad you liked it!! 😃
Excellent job Framer for the the win🎉
@TimGabe
10 ай бұрын
Framer for the win!!
Damn, i need this video like right now 😢
@TimGabe
11 ай бұрын
haha, soooon Giorgi!!
This was very helpful; thank you! I'd love to see a video on how to troubleshoot responsiveness issues! I'm currently trying to fix an issue with overlapping containers in bigger iPhone screens (haven't tried Android yet). My website looks as intended on desktop, tablet and my small iPhone 8 screen, but it has multiple overlapping containers that cut off sections when viewing on an iPhone 12 pro max. I've tried some things I've come across in the Framer community posts, but I haven't been able to fix it yet. I wish Framer had one-one-one support. Anyways, videos on an approach, steps, or framework how to go about fixing issues would be so helpful! Thank you for your videos!
@TimGabe
9 ай бұрын
great idea for content! thank you!!
@Digital-Unicorn
6 ай бұрын
@@TimGabe Maybe you can pick a random free template and edit it live. coz I've come across templates where people cramp so many unnecessary frames, spacer blocks etc. when you delete few of them it all goes crazy. I'm forcing my self to learn to use the layouts correct way.. still it's getting stuffed up at times.... :(:(:(. Keep up the good work
True legend🙌
@TimGabe
7 ай бұрын
you are, my friend!!
amazing , can u Make similar video for figma؟
hi, any way you know how to make the text BOX fit the text itself..i wanna put many words under each other like a meny but very close touching. not able to adjust for that.
Stacks are like auto layout in figma right ? Your videos have been really helpful
@TimGabe
8 ай бұрын
yes, exactly!! thanks for the support, my friend!
This did not work for me. Used the exact same settings as in the video, but the text will not resize. Any advice?
Hi Tim, i'm working on a project but every time i edit a breakpoint, the primary breakpoint gets affected. Your reply would mean a lot as I've tried everything i know
Coming from Webflow, this is so confusing 😂. Do you have to do the stacking for each element separately or is that also linked to a class?
@TimGabe
10 ай бұрын
in Framer you don't work with classes as you do in Webflow; it's much more closely related to Figma
Waiting.... Waiting.... Waiting....
@TimGabe
11 ай бұрын
iiiiit’s time!!
@internetceo
11 ай бұрын
@@TimGabe finally!!! ...Time for what? Buying Bitcoin? (:
Nice! but how this works with components? How can I choose the breakpoint? Thank you
@MigueeAlejandro
3 ай бұрын
Same question!
🙌✨
@TimGabe
9 ай бұрын
🌟
is there a way to limit the widht of the contend and it jsut expand the background on big screens?
@TimGabe
6 ай бұрын
yes, you'd need to use max-width on the content and have the background be pinned to the sides! 😃
@tonon_AI
6 ай бұрын
Thanks, will try that!
Hello Tim, I've been trying to build out the other breakpoints of my design. I'm have trouble resizing things easily. In figma you can just use the scale command and everything within the frame scales together proportionally but I seem unable to do that in Framer. I've locked the width and lock in the main frame and all child frame/elements but I cant ever get it to scale properly. Any help would be greatly appreciated!!!
@TimGabe
6 ай бұрын
it's hard to say without seeing it in front of me, sorry my friend!
bro i have a queastion. so what you did there in the video is that when you changed something in the desktop breakpoint stuff changed in the phone and tablet right, because desktop is the primary. but when you changed in phone or tablet breakpoint nothing changed in desktop. so only changed in desktop breakpoint can affect other breakpoint, is that right? my problem is that in my project in framer i have imported a 3d animation from spline and i have it good and working on desktop breakpoint. i made a phone breakpoint and wanted to resize the imported 3d from spline but when i resized it on phone the desktop changed too. Why is this. I want to work separately in phone so whatever i do i phone breakpoint doesnt affect the desktop breakpoint. For example, Right now i have imported the 3d project from spline with a 200% zoom because that fits the desktop breakpoint. But for the phone breakpoint i have to import the spline project with 120% zoom and slightly more vertical. its hard to explain but easy to show. either way. what i have in desktop and phone breakpoint is not the same. or thats what i want. But i cant do this. Always when i do something in phone everything gets changed in desktop. its so annoying. Please help me. its very hard to explain like this tbh.
@TimGabe
8 ай бұрын
i'm hoping to cover spline specific cases in the near future, my friend!
for tablet i have added 2 breakpoints unfortunately how to delete one
@TimGabe
8 ай бұрын
just click the whole breakpoint top bar and remove it!
Im unable to set the width of text to fill, i added the stack as well
@zhongkyle
9 ай бұрын
me too,did you work out?
@techieabhie7377
9 ай бұрын
@@zhongkyle I have designed in Figma and used Figma to html plugin, that created the issue. So I did it again and it's solved now.
@TimGabe
8 ай бұрын
should work when you have a stack as a parent and if the text is set to relative!
So I finished my website with all the breakpoints. However, when viewing on a larger screen, it didn't look very good. To try and fix this, all I did was create a version of the site set to 1920. Was this the correct thing to do or did I do something wrong?
@TimGabe
7 ай бұрын
that works! 😃
Yooooooh Give me that tutorial
@TimGabe
11 ай бұрын
haha!! coming!!