The most common Framer mistake I see: putting the layout inside the component. Component internals do not respond to breakpoints. So the moment your grid, your column count, or your section padding lives inside a component, you have locked it. Then you build a second variant just to get one column on phone, and now you maintain two of everything. The fix is a boundary. The component owns the item. The page owns the layout. Card, accordion row, testimonial, logo tile: component. Grid, columns, gaps, alignment: page. Do that and responsive is just changing the column count per breakpoint. No variants, no detaching, no duplicate maintenance. 19 years in design and I still catch myself doing it the wrong way round when I am moving fast.

The most common Framer mistake I see: putting the layout inside the component. Component internals do not respond to breakpoints. So the moment your grid, your column count, or your section padding lives inside a component, you have locked it. Then you build a second variant just to get one column on phone, and now you maintain two of everything. The fix is a boundary. The component owns the item. The page owns the layout. Card, accordion row, testimonial, logo tile: component. Grid, columns, gaps, alignment: page. Do that and responsive is just changing the column count per breakpoint. No variants, no detaching, no duplicate maintenance. 19 years in design and I still catch myself doing it the wrong way round when I am moving fast.