Published on | Prototyping: From UX to Front End — Medium Isaac Minogue

Responsive grids people! Grids!

Sketch just released it’s Beta version of 44. In short, it’s amazing. Because now we’re less dependent on responsive plugins like Auto-Layout.

However, as I’m about to show you, whilst they’ve solved some core use cases for responsive layouts, some features are still missing.

I still thought it would be worth showing exactly how to take advantage of these new features, as some take a little time to figure out. We’ll end by creating a nice responsive grid, complete with consistent gutters.

So, what exactly has changed?

The main change is that they’ve replaced this confusing dropdown:

With this one, which is much more advanced:

This gives you more granular control over which corners or edges you actually want to pin elements to. Previously, you had to shift elements 1px closer to the particular edge you wanted them to snap to, otherwise Sketch would guess, and margins would increase by percentage, which was a huge pain.

Now, you simply click the edge you want to pin to, and it will retain the margin, even on resize:

Or if you want to pin to a corner, which is essentially two edges, select two:

To create consistent margins around an element, simply select all edges:

You can apply these settings both to single elements (relative to the artboard) or nested within groups, relative to the group.

Within groups, Sketch assumes that things stretch, which makes sense, because this was the previous default behaviour. However, now you can tell the artboard to stretch as well — just make sure to check this option:

To see this behaviour in action, watch what happens with and without it selected:

Similarities with CSS

For web designers, an awesome thing Sketch has done with this release, is replicate a bunch of flex based responsive features. The correlation between what’s achievable in Sketch, and what’s doable in CSS, is becoming far greater. This is great, because it’s helping decrease the gap between graphic based interfaces and code, which is great for developers and designers. For example, this enables projects like AirBnb’s new react-sketchapp to translate JSX into sketch far easier, and create much better responsive layouts.

For example, setting the parent in CSS to:

display: flex;
justify-content: space-between;

And the child to:

flex: none;

Now has a direct translation to Sketch, if you group several elements and pin them to the edges, and use the ‘fixed’ properties on the children:

Or, if you change the main axis to be vertical:

flex-direction: column;

Sketch can handle this no problem:

Creating gutters

If children are nudged right up against each other, creating children that flex in all directions is easy. However, one of the main gotchas with this beta release is that if you want consistent margins (or gutters) between elements that flex in all directions, there’s no way to do this (yet🤞), unless you actually use transparent elements for the gutters.

I would have thought that setting the children inside a group to pin to their left and right edges, or if there were gaps, to respect them, would work:

Alas, this is not so. I’m not sure if this is a bug or not, but it looks really weird. I don’t know of any instances that I’d want this to happen. Hopefully this gets ironed out when this release goes public 👍.

For now, however, because Sketch doesn’t yet have an option to create explicit ‘gutters’ within a layout, this is where the part on the right of the new panel comes into play again:

The only way I figured out how to create consistent padding between elements inside a responsive group, was to set up my elements like in the image below. All the wrapper group is doing, is providing a wrapper for each tile and gutter, so they can have individual responsive properties. The key is to set the tiles to pin to their immediate sibling, and set the gutter elements to have a fixed width, as follows:

Make sure to include a gutter on the far end of the group. Otherwise, at small sizes, this happens, because their total combined width of the wrapper isn’t the same.

If you want do do it in the vertical direction, simply change the edge the tiles are pinned to:

And, for the grand finale, an example of how to to do a grid of tiles with consistent spacing:

To sum up

I’m sure there are loads of other examples of how these new settings can be used to create some kick-ass layouts, but I just thought I’d share what I found helpful. Let me know what you think down in the comments!

Peace ✌️

Sketch 44 Beta — in depth was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch 44 Beta — in depth

Cool stuff, every week

More Articles