Can wrap property in AutoLayout be used to create one design responsive for each screen size desktop to mobile?

Hi @Naeem_Ashraf , I’ve solved a similar problem for myself, perhaps this is something you could use too. Essentially, it’s an alias to another variable that controls the frame size.

I created 3 variants of a component to match different screen sizes/ breakpoints to change things like a horizontal layout to a vertical one, or reduce margins and padding on smaller devices. I called this property “component-size” and set the values of Large, Medium, Small.

I also use some sizing variables (i.e. min and max widths) which are applied to my design frame (with three modes: Desktop, Tablet, Mobile) which change the frames width / screensize across the three breakpoints allowing me to test responsiveness easily. One of these variables is called screen-size which, as above, holds the values Large (desktop mode), Medium (Tablet mode), Small (Mobile mode). This variable is applied to the frame.

when I drop my component instance onto the frame I want its size variant (component-size) to change in accordance with the frame size (screen-size variable).

When the component instance is in your layout, select the component-size property, and instead of using the drop-down to select one of its size variants (Small, Medium, Large), simply click and remap this to the screen-size variable that the frame uses.

As these share the same values (Large, Medium, Small) you will be able to change the frame size to say Mobile, and your component instances will now be displaying their mobile variant.

Hope that helps.