I have this weird issue when I’m building up prototype screens and it’s a real pain when I’m being hugely meticulous regarding responsiveness…

How do I prevent components that have auto-layout constraints from being cropped or ignoring these resizing constraints within my screen frames ?

Basically, my screen is divided into 2 main parts :

• The navigation side-bar on the left


• The main content frame on the right where every user action is centered. This frame is the largest part of my screen and is usually the area where I encounter these problems

In order to have a fully responsive prototype, I applied to every layers auto-layout constraints. When I edit or replace specific component, some located in an other frame right next to it suddenly ignores their auto-layout constraints and resize themselves in a really weird way.

The auto-layout setting is still turned on for each of them (fill or hug constraints) but these components (and the content within them) get resized in a completely random manner. Many elements / contents are cropped or exceed their container’s size limit.

I have encountered this problem as soon as I edit or replace a major component (such as the navigation sidebar) and I spend a lot of time trying to resize manually every impacted component (usually fixed by ‘cmd + click’ on each placeholder or text layer).

Does anyone already encountered this kind of issue ? Am I doing something wrong with my design approach ? What can I do to prevent or fix this issue ?

Thanks in advance for any feedback 😇