- Anima for Sketch
- Anima for Sketch
- Install Plugin
- Install Plugin
- Create a Project
- Create a Project
- Preview & Sync Project
- Preview & Sync Project
- Upgrade a Team
- Upgrade a Team
- Tutorial Files
- Tutorial Files
- Introduction
- Introduction
- Pins
- Pins
- Stacks (Flexbox)
- Stacks (Flexbox)
- Padding
- Padding
- Screen Presets
- Screen Presets
- Keyboard Shortcuts
- Keyboard Shortcuts
- Symbols
- Symbols
- Examples
- Examples
- Introduction
- Introduction
- Links
- Links
- Breakpoints
- Set Homepage
- Breakpoints
- Set Homepage
- Hover Effects
- Hover Effects
- Entrance Animation
- Entrance Animation
- Fixed Position
- Fixed Position
- Text Input & Forms
- Text Input & Forms
- Videos/GIFs/Lottie
- Videos/GIFs/Lottie
- Embed Code
- Embed Code
- Interaction & Animation
- Interaction & Animation
- Interactions Intro
- Interactions Intro
- Samples
- Samples
- Play
- Breakpoints Viewport
- Comments
- Code
- Share Prototype
- Manage Access Levels
- Publish Website
- Publish Website
- Custom Domains
- Custom Domains
- Analytics
- Analytics
- Project Settings
- Project Settings
Getting Started
Layout
Prototype
Collaborate
Prototype Link
Project Settings
Built with ❤️   in NYC & TLV
Pins
Use Sketch Native Pins
How Pins Work
Pins allow you to pin a Layer to its Parent with the following:
- Top
- Right
- Bottom
- Left
- Center Horizontally
- Center Vertically
For example:
When selecting a Pin, Layout will set the pin constant value as the current pixel value.
- For example if a layer is 20px from the right and you select Pin to Right, the Right Pin constant value will be set to 20px
Once a Pin is set, Layout will enforce the pin value when the artboard is resized.
- For example if you Pin 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 is always pinned to its Parent
- A Parent can be either an Artboard or a Group
- Pinning between siblings can be achieved using Stacks
Advanced Pins
- To reveal the Advanced pinning panel click Pins
- You can pin a layer either by Pixels or by Percent
- Pixels values are in the left text boxes, Percent values are in the right text boxes
- Use the Toggle Button to select the type of pinning
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.
Multiple Selection
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