The Layout Panel
Updated over a week ago

The Layout Panel is where you will adjust the size of objects on your page. In iOS, the Layout Panel is one tab in the bottom tab bar, whereas in macOS, it’s floating on the right side of the screen.

Width & Height

Use these attributes to easily adjust the width and height of your selected object.

By tapping/clicking the number on the right side of the property, you can enter a specific value and select the unit:

  • Points: the exact point value

  • Percentage: the percentage of the object's parent


You can also set the width and/or height to “Fill.” This feature comes in handy when creating a layout where you want a certain object inside of a container to grow to fill the dimensions of that container.

For example, if there is an H stack with two objects inside and one child has a 20% width, the other child would take up the other 80% if its width was set to "Fill." Play does all the calc for you.


You can also set an object's width and/or height to “Auto" which will size the object to hug its contents or children.


Using the Scale property, you can scale the object up to 200% of its size or down to 0% of its size.

Padding & Margin

Use these attributes to adjust the padding and margin of your selected object. The padding refers to the inside space between the container and the content, and the margin refers to the outside space between the container and the parent.

The Padding and Margin properties use your project’s Spacing styles. You can adjust the top, bottom, right, and left values for padding and/or margin together or separately. To edit the values individually, tap/click on the right side of the Padding or Margin property and a pop-up will appear.

In the Padding and/or Margin pop-ups, you’ll also see options to turn on the top and bottom Safe Area. A device's safe areas are the areas at the top and bottom of the screen that are blocked by the status bar or the bottom grabber. In Play, the safe area is automatically calculated based on the iOS device you are designing on/for.

Clip To Bounds

The Clip To Bounds property lets you clip an object’s content based on the container. For example, if the dimensions of an image inside a stack are bigger than the dimensions of the stack itself, turning on Clip to Bounds for the stack will crop the image at the bounds of the stack.

Did this answer your question?