Skip to main content

​
Overview

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

​
Fill

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.

​
Auto

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

​
Scale

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.

​
3D Transform

Use the 3D Transform properties to adjust the perspective, rotation, scale, and position on the X, Y, and Z-axis. Oftentimes, you may adjust properties using 3D Transform when creating animations or transitions. All 3D Transform properties are automatically set to Default.

​
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.

​
User Interaction

The User Interaction property determines whether an object’s interactions will be ignored. This property is on by default, meaning that any interactions will occur as usual. When User Interaction is turned off, the interactions on the object and all of the object’s children will be ignored in the prototype. This property can be turned on and off using the Set User Interaction action.