Horizontal and vertical resizing

You can use horizontal and vertical resizing together with auto layout when you need to define how layers will behave when you resize their frames. There are three types of behaviors you can set for elements when you need to resize the frame horizontally or vertically: hug contents, fixed width, and fill container.

Let’s understand them in practice. Imagine you want to add cards with images and short text to your landing page with the cards automatically resizing when you type any text.

These are the steps you’ll need to follow:

• Create a frame, e.g., 280px x 200px, and add an image
• Add two text layers (a title and body text, for example) and apply auto layout. A frame will automatically be created — let’s call it a “text frame”
• Select the vertical direction for the text frame, set the spacing to 4px, and add some right and left padding to this auto layout — e.g., 16px
• Set the width similar to the frame with an image, e.g., 280px, with fixed horizontal resizing, meaning the frame will stay fixed no matter what. If you try to add elements with a larger width to the right or left, the elements will be out of the frame
• Set the horizontal resizing to “Fill container.” It means the text will take up the whole available horizontal space, except for the padding
• The vertical resizing of the text frame should be set to “Hug contents,” so if you add more text, the frame will increase its size
• Select the two frames and apply auto layout
• Click on the vertical direction and set some spacing — e.g., 16px
• Set the bottom padding of the parent frame to 16px
• Mark the "clip content" and if you need a card with rounded corners, set the radius to 16px
• Add color to the card — e.g., white^[1]