Click image to see video tutorial ☝️

Basic Pins 

Layers can be pinned using the following options:

  • Top
  • Right
  • Bottom
  • Left
  • Center Horizontally
  • Center Vertically

When selecting a pin, Layout will use the current pixel value to set the pin's constant value (except when using Center pins).

Example:

  • If a layer is 20px from the right and you select Pin to Right, the right pin's constant value will be set to 20px.

Once a pin is set, Layout will enforce the pin's constant value when the artboard is resized.

Example:

  • If you pinned a layer to the right by 20px, you can resize the artboard by dragging its right side and you’ll notice the layer always stays 20px from the right.

Pin to Parent

  • A layer always pins in relation to its parent
  • The parent can be an Artboard or a Group
  • Pinning between siblings can be achieved using Stacks

Layer within a parent Artboard

Layer within a parent Group

Customizing Your Pins (Advanced)  

  • Expand the Layout panel to reveal advanced pinning options
  • Pins can be set according to a constant pixel value or by percentage
  • Pixel values are located on the left and percent values are on the right
  • Use the Toggle button to switch between pixels and percentage

The Toggle button automatically converts a pin from pixel values to percentages or vice versa

Pinning by Pixels

Pinning by Percent

Size

Width & Height

  • You can set a Layer width and height by checking the Width and Height boxes
  • When you check the Width or Height box, Layout will set the current value as the constraint value
  • The taken value will be either by Pixels or by Percent, depending on the current toggle state

Min & Max

  • You can set the Miniumum or Maximum value of the Width or the Height of a Layer
  • Once set, the layer Width or Height will never exceed the min/max values, no matter what the Artboard size is

Tip: 

  • To keep the layer pinned to the left rather from the right, set the width to % and uncheck Right Pin
  • To keep min & max pinned to the center, set width to 100%, and set max & min in pixels. You can also enter -20px for example to have 10px on each side

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

  • A centered Layer is always centered to its Parent 
  • A parent can be either an Artboard or a Group
  • A Layer can be offset by entering different Center values

Center Horizontally

You can center a Layer horizontally to its Parent.

Center Vertically

You can center a Layer vertically to its Parent.

  • Sketch allows you to select multiple layers by holding ⇧ Shift key while selecting layers
  • To speed up your workflow, you can apply or remove Layout constraints on multiple layers at once by selecting multiple layers in Sketch and using the Layout panel

Learn More

Get started with these tutorials: 

We’re super excited to have you trying it out and hearing your feedback.

Did this answer your question?