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: https://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!