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

  • @Digital-Unicorn
    @Digital-Unicorn8 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    really appreciate that, internet friend 🙏

  • @NMismyLolli
    @NMismyLolli5 ай бұрын

    Thank you for giving the alternative methods, it clears many of misundestandings

  • @friedricey
    @friedricey11 ай бұрын

    omgosh so useful. It's been so painful tinkering with the responsiveness aspect in framer.

  • @TimGabe

    @TimGabe

    10 ай бұрын

    happy you liked it, my friend!!

  • @ranyeliMR
    @ranyeliMR2 ай бұрын

    Hey Tim, your videos saved my life. Thanks my friend!

  • @charlesajiboye4421
    @charlesajiboye44216 ай бұрын

    Great video with explicit explanation.You're the best

  • @TimGabe

    @TimGabe

    6 ай бұрын

    thanks a lot charles! 😃 happy it was helpful!!

  • @shadesigns8304
    @shadesigns83043 ай бұрын

    Tim you are the best teacher

  • @cryptostu
    @cryptostu9 ай бұрын

    These videos are so useful, keep them coming. 😃

  • @TimGabe

    @TimGabe

    9 ай бұрын

    thank you for the comment, will definitely keep 'em coming!!

  • @karanbisht1798
    @karanbisht17984 ай бұрын

    so good and clear

  • @georgezorbas9036
    @georgezorbas90366 ай бұрын

    I needed this..good lesson and direct!

  • @TimGabe

    @TimGabe

    6 ай бұрын

    glad you liked it!! 😃

  • @SouthGlobal
    @SouthGlobal11 ай бұрын

    Excellent job Framer for the the win🎉

  • @TimGabe

    @TimGabe

    10 ай бұрын

    Framer for the win!!

  • @GiorgiGenki
    @GiorgiGenki11 ай бұрын

    Damn, i need this video like right now 😢

  • @TimGabe

    @TimGabe

    11 ай бұрын

    haha, soooon Giorgi!!

  • @creatoratplay
    @creatoratplay9 ай бұрын

    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

    @TimGabe

    9 ай бұрын

    great idea for content! thank you!!

  • @Digital-Unicorn

    @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

  • @motresku
    @motresku7 ай бұрын

    True legend🙌

  • @TimGabe

    @TimGabe

    7 ай бұрын

    you are, my friend!!

  • @alihasan5114
    @alihasan511411 ай бұрын

    amazing , can u Make similar video for figma؟

  • @rumorscameras
    @rumorscamerasАй бұрын

    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.

  • @emmanueluzuku7800
    @emmanueluzuku78008 ай бұрын

    Stacks are like auto layout in figma right ? Your videos have been really helpful

  • @TimGabe

    @TimGabe

    8 ай бұрын

    yes, exactly!! thanks for the support, my friend!

  • @cgreenaway7446
    @cgreenaway74464 ай бұрын

    This did not work for me. Used the exact same settings as in the video, but the text will not resize. Any advice?

  • @samuelayodeleadeoye933
    @samuelayodeleadeoye9332 ай бұрын

    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

  • @jonasarleth
    @jonasarleth11 ай бұрын

    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

    @TimGabe

    10 ай бұрын

    in Framer you don't work with classes as you do in Webflow; it's much more closely related to Figma

  • @internetceo
    @internetceo11 ай бұрын

    Waiting.... Waiting.... Waiting....

  • @TimGabe

    @TimGabe

    11 ай бұрын

    iiiiit’s time!!

  • @internetceo

    @internetceo

    11 ай бұрын

    @@TimGabe finally!!! ...Time for what? Buying Bitcoin? (:

  • @martacondedesigner
    @martacondedesigner3 ай бұрын

    Nice! but how this works with components? How can I choose the breakpoint? Thank you

  • @MigueeAlejandro

    @MigueeAlejandro

    3 ай бұрын

    Same question!

  • @creatoratplay
    @creatoratplay9 ай бұрын

    🙌✨

  • @TimGabe

    @TimGabe

    9 ай бұрын

    🌟

  • @tonon_AI
    @tonon_AI6 ай бұрын

    is there a way to limit the widht of the contend and it jsut expand the background on big screens?

  • @TimGabe

    @TimGabe

    6 ай бұрын

    yes, you'd need to use max-width on the content and have the background be pinned to the sides! 😃

  • @tonon_AI

    @tonon_AI

    6 ай бұрын

    Thanks, will try that!

  • @wmdavis9101
    @wmdavis91017 ай бұрын

    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

    @TimGabe

    6 ай бұрын

    it's hard to say without seeing it in front of me, sorry my friend!

  • @Fitrecc
    @Fitrecc8 ай бұрын

    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

    @TimGabe

    8 ай бұрын

    i'm hoping to cover spline specific cases in the near future, my friend!

  • @Mohan_smr
    @Mohan_smr8 ай бұрын

    for tablet i have added 2 breakpoints unfortunately how to delete one

  • @TimGabe

    @TimGabe

    8 ай бұрын

    just click the whole breakpoint top bar and remove it!

  • @techieabhie7377
    @techieabhie73779 ай бұрын

    Im unable to set the width of text to fill, i added the stack as well

  • @zhongkyle

    @zhongkyle

    9 ай бұрын

    me too,did you work out?

  • @techieabhie7377

    @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

    @TimGabe

    8 ай бұрын

    should work when you have a stack as a parent and if the text is set to relative!

  • @iklxsss
    @iklxsss7 ай бұрын

    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

    @TimGabe

    7 ай бұрын

    that works! 😃

  • @normalguy6884
    @normalguy688411 ай бұрын

    Yooooooh Give me that tutorial

  • @TimGabe

    @TimGabe

    11 ай бұрын

    haha!! coming!!