Create responsive designs with “Group resizing”

Photo of Christian Krammer

by Christian Krammer on

Shortcut: ctrl + 1 to ctrl + 4

Probably the most important addition to Sketch recently was the so called “Group resizing” feature. It allows you to define how elements react when their parent group (or symbol) is resized. This is a major step towards making Sketch more “dynamic”: we can finally define – or assess – how designs act in a responsive environment, and nowadays almost everything you design needs to be responsive in any form. But it also helps to go from one breakpoint, or device size, to another.

If you select a layer or group, you’ll notice the “Resizing” drop-down in the inspector. Basically, it can be broken down to how the dimensions (width and height) and the placement (X and Y position) adapt to changes: whether they are fluid, in that they change proportionally to the parent group or symbol, or fixed, which means that the original values are retained.

There are four values you can set at “Resizing” (the respective shortcut is mentioned in parentheses):

Screenshot, which shows how the different 'Resizing' settings of Sketch work
  1. Stretch, the default option, means that the element changes its width or height proportionally to the size of the group it is located in. This includes spacing. Both the dimensions and placement are fluid (ctrl + 1).
  2. Pin to corner fixes the layer at the current position – the closest corner, to be precise. It is not resized, nor is its spacing adapted. Both the dimensions and placement are fixed. This option can be used to keep an element centered if it has the same distance from both sides (ctrl + 2).
  3. Resize object is similar to Stretch in that it resizes the element proportionally, but the exact spacing is retained. The dimensions are fluid, and the placement is fixed. Please note that the behavior changes if the element touches three sides of the parent: In this case, the size is maintained on the axis where one side touches (but only if it is less than half the size of the parent); on the other axis, it takes on the size of the parent. (ctrl + 3).
  4. Float in place is the total opposite, in that the measurements of the element are maintained, but the spacing changes relative to its container. The dimensions are fixed, and the placement is fluid. It can also be used to center an element (ctrl + 4).

Let me visualize how these settings behave exactly (the animated GIF may take a while to load):

Animated screenshot of Sketch which shows how the different 'Resizing' settings work

As a bonus, Sketch is smart enough to memorize the “corner” where the element was before. So, if it was at the right edge of the parent, and you resize this parent container from the right, the element will stick to this side. This also goes for centered elements and is applied on the vertical axis alike. Unfortunately, there are some limitations: You can neither change the origin of this pinning nor set a different behavior for each axis.

oOo