Sketch 39 Resizing: Cheat Sheet
How Symbol & Group Resizing works, in detail
Sketch just released version 39, adding the ability to assign responsive rules to layers inside a symbol or group. Although this doesn’t bring comprehensive responsive or adaptive design capabilities to Sketch, these 4 resizing options are remarkably powerful. And they can take some getting used to, especially because…
…some of these resizing rules contain hidden functionality.
While making Sketch’s release video for the new feature (below), I found it necessary to create a cheat sheet about exactly how each resizing feature worked. I referenced it constantly, so I’m making it available to you here.
Stretch
- This is the default option, and is the resizing behavior we’re all used to.
- Think of it as resizing all layers based on percentages. If a layer takes up 50% of the group’s width, it will continue to—at any size.
Pin to Corner
- Layers within the group remain the same size.
- Each layer maintains the distance to its closest corner on the group.
- When equally close to 2 corners, Pin to Corner changes to keep that layer centered. The layer will maintain the same distance from that shared edge between those corners.
Resize Object
- Layer changes size to maintain the same distances from each edge of the group.
- BUT, when a layer touches 3 of the 4 edges of a group, Resize Object changes its behavior—allowing the distance from the 4th edge to be flexible and the layer to remain the same size along that axis. This is only the case when the distance from the 4th edge is less than half of the group’s dimension in that direction (thanks for pointing this out, Raphael Schaad). The behavior is particularly useful for title bars, as shown in this comparison:
Float in Place
- No similarity to Float in CSS
- Layers within a group remain the same size
- Layers are repositioned based on percentages. For example, a layer might have an x-position of 25% within that group, and will maintain that relative position regardless of the group’s width.
- Layers positioned along the edges of a group will remain there
- Float in Place is more complex under the hood than just assigning percentage coordinates to the top-left corner or centerpoint of each layer, as evidenced by the edge-positioning capability. Aside from layers positioned at 0% (edge), 100% (other edge), and 50% (center), I have noticed that a slight shift can occur in the position of a layer after resizing the group. In other words, Float in Place repositions layers to approximately the correct place, but might be off by a percentage or two. When accuracy is paramount, double check Float in Place after resizing a group.
Tips & Tricks
- I highly suggest turning on “Pixel fit when resizing layers” in Sketch’s preferences. I occasionally turn this off when working with elements from a UI kit (which often use decimals on layer sizes or positions, to more perfectly replicate the original element).
- Both Pin to Corner and Float in Place will keep a layer centered. If you’re only centering along one axis, the difference is that Pin to Corner will maintain the same distance from the group’s nearest edge, whereas Float in Place will change this distance because the layer is positioned using percentages for coordinates. If you’re centering along both axes, use Float in Place for more reliable results.
- Note that resizing rules are considered to be part of a layer’s core attributes, not its styling attributes, and are therefore excluded from Shared Styles.
- The keyboard shortcuts ⌃1, ⌃2, ⌃3, and ⌃4 will assign each resizing rule to your selected layer.
- In their current form, I do not recommend using these resizing rules for layers that extend outside a masked group. This functionality would be amazing when working with masks and the layers within them, so let’s hope that it will be added in a future update.
Sign up for my newsletter to be the first to know when I publish new design articles and resources.
If you enjoyed this article, you’ll love Sketch Master — my online training courses for professionals learning Sketch. You’ll learn tons of tricks and practical workflows, by designing real-world UI/UX and app icon projects.
