Framer’s breakpoint system relies on inheritance, meaning changes made at a larger breakpoint automatically apply to smaller screens unless overridden. Understanding how to use inheritance effectively and when to override is key to a smooth workflow.

2.1 How Inheritance Works in Framer

In Framer, every new breakpoint starts by inheriting settings from the larger screen size. This prevents designers from manually adjusting every layout variation, saving time and ensuring consistency.

For example, if you change the primary button colour at 1200px, that update will carry over to the tablet and mobile views—unless explicitly modified. This hierarchical approach simplifies maintenance and reduces unnecessary overrides.

2.2 Using Overrides to Customise Layouts

While inheritance maintains consistency, sometimes you need breakpoint overrides to modify specific elements for smaller screens. Overrides allow you to tweak specific properties—such as typography, spacing, and element positioning—without affecting the desktop version.

When should you use overrides?

• Text scaling: Reduce heading sizes on smaller screens for readability.

• Spacing adjustments: Tighten margins and paddings for compact layouts.

• Component resizing: Ensure images and buttons remain proportionate.

However, excessive overrides can reduce performance and complicate debugging. One of the biggest mistakes designers make is overriding every breakpoint individually, leading to inconsistencies. Keeping overrides to a minimum ensures a faster, more reliable design.

 If you want to dive deeper into customising layouts efficiently, check out our guide on customising Framer templates.

2.3 Resetting and Updating Breakpoints

Occasionally, you may need to reset or update breakpoints to refine your layout structure. Here’s how you can do it efficiently:

1. Evaluate breakpoints regularly: Check if your existing breakpoints align with design needs and user behaviour.

2. Remove unnecessary overrides: Too many overrides slow down performance and make debugging harder.

3. Use consistent sizing variables: Ensuring uniform spacing and typography prevents layout inconsistencies across screen sizes.

By maintaining a well-structured inheritance system, you create a design that is both flexible and scalable, allowing seamless adjustments as new devices emerge.