Adjusting nested shape size with auto-layout

Share your knowledge Ask the community
1

Howdy,

Looking for some help with auto-layout. I have a simple layout which includes a logo at the top, a shape layer for image masking below, and a headline and disclaimer line below that. When additional text is added to the headline or disclaimer, I want the logo to stay in the same location while reducing the size of the shape layer. The entire size of the frame must remain the same and content must always stay out of red safe-zones.

Any help is appreciated.

Thanks!

SHL
SHL1080×1920 73.1 KB

2

Hey @masont!

Thanks for posting this, and welcome to the forum!

We’d love to help you with this specific request. Could you please:

  • Share a sample Document with us (We’d love to inspect the current setup you have and see if we can make it work with the same setup).
  • In the same Document, share what are you trying to accomplish (like a min and max versions of the Component itself.

You can share a DocumentURL with us (make sure it’s set to public) or just upload a Sketch Document right here on the forums and we’ll be right on that!

Thanks a ton once again!

1 Like
4

Howdy raulrincon,

Please find a sample document attached. I’ve included an artboard with minimum text inclusions and a second artboard with a maximum. Again, I only want the grey shape layer to change in height to accommodate the increase of text, with the brand logo and the space below remaining static.

Thanks for your help!
Untitled.sketch (3.0 MB)

1 Like
5

Got it!

I’ll review it and get back to you as soon as possible!

1 Like
6

Alright!

Thanks to my colleague @dfmedrano for the extra help into getting this to a place that might serve you well!

  • By default Smart Layout works to reposition your elements, rather than resize then (based on their content).
  • One of the things we also want to recommend is to work your way up. Define the smallest size first, and then make sure to let the app define the biggest/taller size of the Components (Using the SL smarts).
  • One thing we introduced with some recent updates to Smart Layout is the ability to Combine: Smart Layout with Resizing and not cause issues.

What we did

This solution might a bit unconventional but works 100% of the tests we did.

  • 1 line on each element (min)
  • 2 lines on each
  • 3 lines on each (max)
  • A combination of both.

Steps

  1. We created the minimum sized Component
  • We took the smallest Card size
  • We also took the smallest Text Override size
  • We made the Component that size, so Smart Layout works its way up.
  1. Change your Overrides (change the text to what you want).
  2. Since you’re working with a fixed Height, after you’re done adjusting the Text Overrides, make sure to set the height of the Component to 1255px (Which is the total height of the Component + Shape you want to resize.
  3. Voilá
  4. That’s it!

Check it out and let us know if it works :pray:
test-forum-resize.sketch (3.1 MB)

2 Likes
7

Hey @masont ,

We truly hope you find this solution useful. It’s really flexible and easy to use: just enter the text you need and then add the 1255 value for the height and the whole component will adjust neatly!

Welcome again and let us know how it goes :raised_hands:

1 Like