When you resize an Artboard you can control how the layers on it will behave. You can choose to leave everything on the Artboard in place and at its original size — or resize all the content. You can further control a layer’s behavior by directly applying resizing constraints to it.
If you want a layer to resize relative to the Artboard it’s a part of, select the Artboard itself and check Adjust content on resize in the Inspector.
Enabling content resizing for an Artboard (v91 August 2022).
In the Inspector’s Details tab under Resizing, you can choose how to constrain any selected layer’s resizing behavior when the Artboard, group or Symbol they are a part of is resized.
To set constraints, select a layer within an Artboard, group or Symbol and apply a Resizing constraint:
- Pin to Edge: chooses which edges of a parent your layer will be pinned to on resize. Click the edges you want to enable
- Fix Size: sets whether your layer’s height and width should stretch or stay at a fixed size
Keep an eye on the Preview to see how the contraints will affect the selected layer’s behavior.
By default, we’ll resize layers within a group or Symbol relative to their parent, including any padding.
Resizing constraints in the Inspector (v91 August 2022)
Fix size
The Fix Size constraints keep a layer’s height or width (or overall dimensions) the same, no matter how its parent is resized.
The Fix Size resizing constraint being applied to a layer’s width (v91 August 2022)
As an example, Fix Size is especially useful when you have a menu bar that you want to keep the same height, no matter how wide the Artboard becomes.
In this example, the menu Symbol height is fixed, but not its width. It will resize horizontally for larger device sizes, but not stretch vertically
Pin to Edge
Pin to Edge fixes the distance between a layer and a particular set of edges or corners of its parent, no matter how the parent is resized.
Example of using the Pin to Edge resizing constraints, set to top and left (v91 August 2022)
This is useful, for example, if you have a floating action button within an interface. Pinning the button to the top and left edges will make sure it stays the same distance from the corner of an Artboard.
In this example, the button has a fixed height and width, and is pinned to the top-left edge. It won’t resize, and its position will stay fixed when its parent container resizes