Auto Layout for Sketch
Auto-Layout is a plugin for Sketch that enables designers to design fully responsive artboards.
installcommand and search for
Auto Layout. Runner allows you to manage plugins and do much more to speed up your workflow in Sketch. Download Runner here.
Simple pinning allows to pin a layer to its parent with the following:
When selecting a pin, Auto-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
rightpin constant value will be set to 20px.
Once a pin is set, Auto-Layout will enforce the pin value when the artboard is resized.
For 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.
Layeris always pinned to its
Pixelsvalues are in the left text boxes,
Percentvalues are in the right text boxes.
Togglebutton to select which type of pinning.
You can set a
heightby checking the
heightbox, Auto-Layout will set the current value as the constraint value. The taken value will be either by
percent, depending on the current toggle state.
You can set the
maximumvalue of the
Once set, the layer
heightwill never exceed the min/max values, no matter what the
To keep the layer pinned to the left rather from the right, set the width to % and uncheck
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.
Auto-Layout will automatically recognize artboards that do not have default screen sizes and will never decrease their height to less than their original height.
Layeris always centered to its
You can center a layer horizontally to its parent.
You can center a layer vertically to its parent.
A Stack is a special type of Group that defines the layout of its child Layers.
A Stack Group icon has a special Blue color and an indicator of its Direction.
To Stack layers or groups, select them and click the Stack button in Auto-Layout panel.
A Stack has 3 properties:
Defines if stacking of child Layers is Horizontal or Vertical.
Can be Top/Center/Bottom/Spread
Defines the spacing between each child Layer.
Stacks can be nested
Walkthrough Video (29:09) by Pablo Stanley
Walkthrough Video (7:36) by Chris Slowik
Dynamic Buttons Blog Post by Giusè
You can toggle all artboards by clicking the
Presets are pre-defined
Artboardsizes of real world screen sizes devices.
Artboardsizes to these presets.
| Device | Width | Height | Scale | |:---------:|:--------:|:---------:|:-----:| | iPhone 4 | 320 | 480 | 2 | | iPhone SE | 320 | 568 | 2 | | iPhone 7 | 375 | 667 | 2 | | iPhone 7+ | 414 | 736 | 3 | | iPad Air | 768 | 1024 | 2 | | iPad Pro | 1024 | 1366 | 2 |
**Scalemeans that the number of pixels is multiplied according to the scale value.** * For example in iPhone 7 the screen size is 375x667 points, but 750x1334 actual pixels since Scale is 2.
| Device | Width | Height | |:-----------------:|:--------:|:---------:| | Android Phone | 360 | 640 | | Android Tablet 7' | 600 | 960 | | Android Tablet 9' | 768 | 1024 | | Android Desktop | 1280 | 850 |
| Device | Width | Height | |:----------------:|:--------:|:---------:| | Desktop HD | 1440 | 1024 | | Desktop | 1024 | 1024 | | Tablet Portrait | 768 | 1024 | | Mobile Portrait | 320 | 1024 |
The Plugin comes with a default collection of presets mentioned above. However you can easily add, edit, import and export your own presets.
So you’ve made the effort to create a perfect collection of presets and now your colleagues are jealous. Lucky enough you can become the hero of the day by just exporting your collection and sharing it with them.
You can use the
Defaultshortcuts or assign your own.