Pinning

Pinning controls where a layer stays “stuck” when the screen size changes. Instead of relying only on the layer’s X/Y position, pinning tells PLAY which area the layer should keep a consistent relationship to as the layout adjusts. By default, the pin of a layer is set to "Center".

You set pinning using the 3×3 grid in the Responsivity subsection.

How Pinning Works in PLAY

  • You can select one pin point at a time.

  • When a pin point is selected, the layer will stay a fixed distance from that point as the screen changes size.

  • If no pin point is selected, the layer will use its absolute Transform X/Y values when adjusting to different screen sizes.

The 3×3 grid includes these pin points:

  • Top Left / Top Center / Top Right

  • Center Left / Center / Center Right

  • Bottom Left / Bottom Center / Bottom Right

Change (or remove) a Pin Point

1

Select the layer.

Look at the layer's properties pannel.

2

Open the Responsivity subsection and find the 3×3 pin grid.

You'll find in the Transform section.

3

Click a new pin point to switch the layer’s pin (the previous one is automatically deselected).

To remove pinning entirely, click the selected pin point again to deselect it

Pinning Guide Lines

When you select a layer and choose a pin point, PLAY displays guide lines on the canvas to show what the layer is pinned to. These guides are a visual cue to help you confirm the layer’s responsive attachment point while you’re designing.

Last updated