In this video we learn how to make your design adapt to multiple screen sizes in Framer, using breakpoints.
Here are two key tactics that a lot of people miss:
Text styles have different breakpoints. This means you can set different font sizes for your text styles at different breakpoints. You can have smaller H1s or bigger paragraph text on a phone, for instance.
Breakpoints are linked. Like variants, the desktop breakpoint is the primary breakpoint and any changes you make there will be inherited by other breakpoints. You can of course override this change.
If you need to change the layout of a component for a smaller breakpoint, you should make a variant. If you name your variants after the breakpoints (Phone, Tablet, Desktop) Framer will automatically select the right one.
Luckily, working with breakpoints in Framer is relatively easy but it does take practice to adapt your layout to different screen sizes.
