large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

Published on <a href="http://ift.tt/2puji2f">| Prototyping: From UX to Front End &mdash; Medium</a> Isaac Minogue <img alt="" src="http://ift.tt/2pWZK9i">
<h4>Responsive grids people! Grids!</h4>
Sketch just released it’s Beta version of 44. In short, it’s amazing. Because now we’re less dependent on responsive plugins like <a href="http://ift.tt/2pu0Qqx">Auto-Layout</a>.
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.
<h4>So, what exactly has changed?</h4>
The main change is that they’ve replaced this confusing dropdown:
<img alt="" src="http://ift.tt/2pWH61q">
With this one, which is much more advanced:
<img alt="" src="http://ift.tt/2purCPa">
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:
<img alt="" src="http://ift.tt/2pWuS90">
Or if you want to pin to a corner, which is essentially two edges, select two:
<img alt="" src="http://ift.tt/2purDTe">
To create consistent margins around an element, simply select all edges:
<img alt="" src="http://ift.tt/2pWLhtK">
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:
<img alt="" src="http://ift.tt/2purEqg">
To see this behaviour in action, watch what happens with and without it selected:
<img alt="" src="http://ift.tt/2pWLi0M"><img alt="" src="http://ift.tt/2pu4rob">
<h4>Similarities with CSS</h4>
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 <a href="http://ift.tt/2q36hA6">react-sketchapp</a> to translate JSX into sketch far easier, and create much better responsive layouts.
For example, setting the parent in CSS to:
<pre>display: flex; justify-content: space-between;</pre>
And the child to:
<pre>flex: none;</pre>
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:
<img alt="" src="http://ift.tt/2pucwcH">
Or, if you change the main axis to be vertical:
<pre>flex-direction: column;</pre>
Sketch can handle this no problem:
<img alt="" src="http://ift.tt/2pWJ4if">
<h4>Creating gutters</h4>
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:
<img alt="" src="http://ift.tt/2pupLdf">
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:
<img alt="" src="http://ift.tt/2pWNoOe">
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:
<img alt="" src="http://ift.tt/2pupFlU">
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.
<img alt="" src="http://ift.tt/2pX1gbj">
If you want do do it in the vertical direction, simply change the edge the tiles are pinned to:
<img alt="" src="http://ift.tt/2pu4nor">
And, for the grand finale, an example of how to to do a grid of tiles with consistent spacing:
<img alt="" src="http://ift.tt/2pWLvkU">
<h4>To sum up</h4>
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 ✌️
<img src="http://ift.tt/2pupxmw" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pWM1z8">Sketch 44 Beta — in depth</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch 44 Beta — in depth

Sketch 44 Beta — in depth

Responsive grids people! Grids!

Top Stories