[Download the corresponding Sketch project file here.]
With the recent arrival of Sketch 44, there’s a lot of excitement around significant improvements to one of Sketch’s most valuable features, group resizing.
The group resizing features of yesterday first appeared in Sketch 39 and gave us 4 modes in which a layer could behave within a group or symbol: stretch, pin to corner, resize object, and float in place. These verbose choices were essentially preset combinations of how a layer would handle scale and position if and when its parent group was resized.
The UI and nomenclature for making these decisions has changed entirely, giving us much more control. Let’s take a look at how each of the legacy resizing modes translates in this update.
For those who prefer reading to watching, get the step by step below.
1. Stretch
Stretch was previously the default mode for any layer within a group or symbol. If the parent group is scaled vertically or horizontally, the layers inside get stretched in proportion to the transformation.
While this behavior is still the default, it’s now paired with a new UI for group resizing on the Inspector. This finally allows us to choose how we want to handle the resizing of the layer both horizontally and vertically, as well choose whether or not we want to lock the margins between the selected layer and any of the 4 edges of its bounding group.
Stretch mode is reflected by having everything deselected, allowing the layer to be scaled in any direction without preservation of margins.
2. Pin to corner
In previous versions of Sketch, pin to corner was a mode used to leave the size of a layer alone and lock the margins between it and the nearest corner. Therefore Sketch decided which corner to pin the object to. Sketch would also be kind enough to keep a layer centered between 2 corners if it started off that way.
To recreate the behavior of pin to corner in Sketch 44, turn on fix width and fix height and choose the 2 edges that correspond with the desired corner.
What’s new here?
Two big things here. First is that you can now choose to pin a layer to a different corner than the one nearest to the layer. This can be handy when you have several objects in a small space that all need to stay pinned to the top left for example. Previously, if a layer was further to the right side of the group than center, it wouldn’t allow you to pin it to the left.
The other great news is that you can choose to pin a layer to an edge instead of a corner. This will preserve a single margin of spacing but allow the layer to float along the other axis.
3. Resize object
Resize object was an extremely useful but often misunderstood resizing mode when Sketch 39 launched. The primary behavior of this mode is preserving all of the margins around the layer but allowing it to resize. The effect was that the exact same transformation applied to the group would apply to the layer. For example, making the group 25px wider would make the layer 25px wider since none of the transformation would be absorbed by the margins.
To recreate the behavior of resize object in Sketch 44, make sure fix width and fix height are turned off. Then choose all 4 edges to lock margins to.
One of the unique behaviors of resize object was that if the layer touched 3 edges of the group, it wouldn’t scale toward the fourth edge (as long as the layer was smaller than 50% of the group). This was a great way to fix a header, for example—but it could go haywire when squishing the group, causing the behavior to change. Now that we can set it manually, we won’t have to wrestle with Sketch switching behaviors on us.
What’s new here?
The big new thing here is being able to independently choose to resize an object on one axis while stretching or floating on the opposite axis. Also, because we can now lock margins manually, an object doesn’t need to be touching 3 edges for us to make it behave as a full-width header. That affords us more creative freedom as well as predictability.
4. Float in place
The fourth and final resizing mode from the old days was called float in place. The purpose of this resizing mode was to avoid resizing altogether, flexing only the margins around the layer. To recreate the behavior offloat in place, simply turn on fix width and fix height, then be sure all 4 margins are deselected.
What’s new here?
Much like the new advantages to the other modes, we can now choose one axis or the other to float objects along. Now we can create crafty combinations of floating in one direction while we scale in another.
More Sketch tutorials
Video Producer at InVision, former UI/UX designer of international in-flight entertainment, and avid automotive enthusiast.
