Tips & tricks
- 10x
- Websites
Tips & tricks
- 10x
- Websites
Tips & tricks
- 10x
- Websites
6 Framer Tips That 10x Your Websites
After spending way too many hours inside Framer over the past few years (seriously, I might need a break), I’ve stumbled upon a handful of tips that’ve completely changed how I build websites. They’re not just cool tricks, they actually make your sites look better and feel smoother to work on. Let’s jump in. These six tips will 10x your Framer workflow and your final result.
Posted by
Nandi
Table of contents
1. The VH problem
We all love using 100vh for hero sections. It’s clean, it fills the screen, and it feels dynamic on any device. If you start changing the viewport height. You can see that the content within the hero will start cropping at a certain point. When this is cropped we can scroll but we will not be able to reveal that part anymore because it is just 100 VH.
1. The VH problem
We all love using 100vh for hero sections. It’s clean, it fills the screen, and it feels dynamic on any device. If you start changing the viewport height. You can see that the content within the hero will start cropping at a certain point. When this is cropped we can scroll but we will not be able to reveal that part anymore because it is just 100 VH.
1. The VH problem
We all love using 100vh for hero sections. It’s clean, it fills the screen, and it feels dynamic on any device. If you start changing the viewport height. You can see that the content within the hero will start cropping at a certain point. When this is cropped we can scroll but we will not be able to reveal that part anymore because it is just 100 VH.
Content getting cropped out.
Content getting cropped out.
Content getting cropped out.
The fix:
Instead of just setting the hero section’s height to 100vh, try this combo:
Set Height to Fit Content
Add Min Height as 100vh
Add Top/Bottom Padding (like 100px) to give it breathing room
This setup gives you the best of both worlds, it adapts to smaller screens but still keeps that full-screen feel. No more cropped content or unusable buttons.
2. Use this site structure every time
Structure is everything. If your Framer project turns into a spaghetti mess, you’ll waste so much time trying to fix padding, spacing, or responsiveness. Here’s a structure I always use now:
At the top: your Desktop Breakpoint. Inside that: a Navigation, Main, and Footer
Inside Main: break it up into Sections
Each section has:
A Section Frame: Set top/bottom padding here
A Content Frame inside: Set left/right padding and a max width so it doesn’t stretch on big screens
The fix:
Instead of just setting the hero section’s height to 100vh, try this combo:
Set Height to Fit Content
Add Min Height as 100vh
Add Top/Bottom Padding (like 100px) to give it breathing room
This setup gives you the best of both worlds, it adapts to smaller screens but still keeps that full-screen feel. No more cropped content or unusable buttons.
2. Use this site structure every time
Structure is everything. If your Framer project turns into a spaghetti mess, you’ll waste so much time trying to fix padding, spacing, or responsiveness. Here’s a structure I always use now:
At the top: your Desktop Breakpoint. Inside that: a Navigation, Main, and Footer
Inside Main: break it up into Sections
Each section has:
A Section Frame: Set top/bottom padding here
A Content Frame inside: Set left/right padding and a max width so it doesn’t stretch on big screens
The fix:
Instead of just setting the hero section’s height to 100vh, try this combo:
Set Height to Fit Content
Add Min Height as 100vh
Add Top/Bottom Padding (like 100px) to give it breathing room
This setup gives you the best of both worlds, it adapts to smaller screens but still keeps that full-screen feel. No more cropped content or unusable buttons.
2. Use this site structure every time
Structure is everything. If your Framer project turns into a spaghetti mess, you’ll waste so much time trying to fix padding, spacing, or responsiveness. Here’s a structure I always use now:
At the top: your Desktop Breakpoint. Inside that: a Navigation, Main, and Footer
Inside Main: break it up into Sections
Each section has:
A Section Frame: Set top/bottom padding here
A Content Frame inside: Set left/right padding and a max width so it doesn’t stretch on big screens
Basic site structure.
Basic site structure.
Basic site structure.
Bonus tip: don’t forget to set semantic tags under accessibility, use main for your main container, and section for each section. It helps with SEO and accessibility.
3. Match transitions in nested components
If your animations feel a little off or glitchy, this might be the reason: your transition settings don’t match across nested components.
Let’s say you’ve got a parent accordion set to animate over 0.5s, but a child element is using 0.3s. When things open or close, they feel out of sync. It creates a janky experience, especially when elements are repositioning or fading.
Bonus tip: don’t forget to set semantic tags under accessibility, use main for your main container, and section for each section. It helps with SEO and accessibility.
3. Match transitions in nested components
If your animations feel a little off or glitchy, this might be the reason: your transition settings don’t match across nested components.
Let’s say you’ve got a parent accordion set to animate over 0.5s, but a child element is using 0.3s. When things open or close, they feel out of sync. It creates a janky experience, especially when elements are repositioning or fading.
Bonus tip: don’t forget to set semantic tags under accessibility, use main for your main container, and section for each section. It helps with SEO and accessibility.
3. Match transitions in nested components
If your animations feel a little off or glitchy, this might be the reason: your transition settings don’t match across nested components.
Let’s say you’ve got a parent accordion set to animate over 0.5s, but a child element is using 0.3s. When things open or close, they feel out of sync. It creates a janky experience, especially when elements are repositioning or fading.
Janky accordion animation.
Janky accordion animation.
Janky accordion animation.
The fix:
Just match the transition durations between parent and child components. Simple, but game-changing.
4. Avoid layout jump in accordions
You know that annoying layout jump when you open an accordion and it instantly pushes everything below it without any animation?
Framer doesn’t animate that “push” by default, it only animates what’s inside the component. So, if your accordions aren’t wrapped together, you get jarring jumps instead of smooth transitions.
The solution:
Use the Layout Jump Preventor. Just paste it into the component that changes height (like your accordion). Don’t nest it too deep, place it directly inside your component, not inside an inner frame. Set the direction (usually vertical), and boom, no more layout jumps.
5. Use REM
Forget setting font sizes individually for every breakpoint, that’s the old way. Framer now supports rem units, and it’s a game-changer for responsive text.
The fix:
Just match the transition durations between parent and child components. Simple, but game-changing.
4. Avoid layout jump in accordions
You know that annoying layout jump when you open an accordion and it instantly pushes everything below it without any animation?
Framer doesn’t animate that “push” by default, it only animates what’s inside the component. So, if your accordions aren’t wrapped together, you get jarring jumps instead of smooth transitions.
The solution:
Use the Layout Jump Preventor. Just paste it into the component that changes height (like your accordion). Don’t nest it too deep, place it directly inside your component, not inside an inner frame. Set the direction (usually vertical), and boom, no more layout jumps.
5. Use REM
Forget setting font sizes individually for every breakpoint, that’s the old way. Framer now supports rem units, and it’s a game-changer for responsive text.
The fix:
Just match the transition durations between parent and child components. Simple, but game-changing.
4. Avoid layout jump in accordions
You know that annoying layout jump when you open an accordion and it instantly pushes everything below it without any animation?
Framer doesn’t animate that “push” by default, it only animates what’s inside the component. So, if your accordions aren’t wrapped together, you get jarring jumps instead of smooth transitions.
The solution:
Use the Layout Jump Preventor. Just paste it into the component that changes height (like your accordion). Don’t nest it too deep, place it directly inside your component, not inside an inner frame. Set the direction (usually vertical), and boom, no more layout jumps.
5. Use REM
Forget setting font sizes individually for every breakpoint, that’s the old way. Framer now supports rem units, and it’s a game-changer for responsive text.
Setting REM.
Setting REM.
Setting REM.
Here’s how it works: Instead of defining font sizes in pixels and adjusting them one by one across breakpoints, you set your text layers using rem. A rem unit is relative to the base font size defined at the root level, for example, if your base size is 16px, setting a heading to 3rem makes it 48px (3 × 16).
The real power? When you update the base size for a breakpoint, all your text layers using rem scale automatically. One change, and your entire type system adapts. It’s clean, efficient, and way less error-prone than manually managing breakpoints for every text style.
6. Section padding strategy
Last tip, but one that saves me headaches daily: be super intentional with where you add padding. Here’s what works best:
Add Top/Bottom Padding to the Section Frame
Add Left/Right Padding + Max Width to the Content Frame inside
This keeps your sections spacious and centered, without weird edge cases on giant screens. If your site feels off-balance, it’s usually a padding issue, fix it here first.
Final thoughts
These aren’t just little tricks, they’ve completely transformed how I build sites in Framer. They make things smoother, more consistent, and just feel more premium.
Here’s how it works: Instead of defining font sizes in pixels and adjusting them one by one across breakpoints, you set your text layers using rem. A rem unit is relative to the base font size defined at the root level, for example, if your base size is 16px, setting a heading to 3rem makes it 48px (3 × 16).
The real power? When you update the base size for a breakpoint, all your text layers using rem scale automatically. One change, and your entire type system adapts. It’s clean, efficient, and way less error-prone than manually managing breakpoints for every text style.
6. Section padding strategy
Last tip, but one that saves me headaches daily: be super intentional with where you add padding. Here’s what works best:
Add Top/Bottom Padding to the Section Frame
Add Left/Right Padding + Max Width to the Content Frame inside
This keeps your sections spacious and centered, without weird edge cases on giant screens. If your site feels off-balance, it’s usually a padding issue, fix it here first.
Final thoughts
These aren’t just little tricks, they’ve completely transformed how I build sites in Framer. They make things smoother, more consistent, and just feel more premium.
Here’s how it works: Instead of defining font sizes in pixels and adjusting them one by one across breakpoints, you set your text layers using rem. A rem unit is relative to the base font size defined at the root level, for example, if your base size is 16px, setting a heading to 3rem makes it 48px (3 × 16).
The real power? When you update the base size for a breakpoint, all your text layers using rem scale automatically. One change, and your entire type system adapts. It’s clean, efficient, and way less error-prone than manually managing breakpoints for every text style.
6. Section padding strategy
Last tip, but one that saves me headaches daily: be super intentional with where you add padding. Here’s what works best:
Add Top/Bottom Padding to the Section Frame
Add Left/Right Padding + Max Width to the Content Frame inside
This keeps your sections spacious and centered, without weird edge cases on giant screens. If your site feels off-balance, it’s usually a padding issue, fix it here first.
Final thoughts
These aren’t just little tricks, they’ve completely transformed how I build sites in Framer. They make things smoother, more consistent, and just feel more premium.
