Pins

How Pins Work

Basic Pins Panel

Pins allow you to pin a Layer to its Parent with the following:

For example:

When selecting a Pin, Layout will set the pin constant value as the current pixel value.

Once a Pin is set, Layout will enforce the pin value when the artboard is resized.

Pinned 20px to the Right

Pin to Parent

Layer Pinned to its parent (Artboard)
Layers Pinned to a Group

Advanced Pins

Advanced Pins Panel
Toggle Pixes to Percentage
Pinned by Pixels
Pinned by Percentage

Size

Width & Height

Anima Width and Height Values

Min & Max

Min and Max Width Demo

Tip:

To keep the layer pinned to the left rather from the right, set the width to % and uncheck Right Pin

Custom Height

In some cases you want to extend the Height of an artboard further than the default platform screen sizes, in order to show how the design looks when the user scrolls down.

Layout will automatically recognize artboards that do not have default screen sizes and will never decrease their height to less than their original height.

Center

Center Horizontal and Vertical

Center Horizontally

You can center a Layer horizontally to its Parent.

Center Horizontally

Center Vertically

You can center a Layer vertically to its Parent.

Center Vertically

Multiple Selection

Pins Multiple Selection