small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

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

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<a href="http://ift.tt/2q9Bl1J">UX Power Tools &#8211; Medium</a> | Jon Moore 
<h4>Sketch Tutorials</h4>
<h4>It’s new! It’s intuitive! It’s better! It’s extra-stretchy!</h4>
<img alt="" src="http://ift.tt/2pQhpOh">Stretch Armstrong™ seemed like an appropriate header image. If you didn’t grow up in the 70s in the USA, or have a grandma with really old toys, this reference probably went way over your head.
The folks over at <a href="http://ift.tt/28KyeFs">Sketch</a> have been hard at work polishing up the latest updates and features for Sketch version 44, and they’ve made a pretty big update to the way resizing works:
<blockquote>NEW IN SKETCH 44 Resizing options have been updated to give you more power and control over how your layers should behave when their parent is resized.</blockquote>
There are lots of other tweaks coming in Sketch 44, but I’m just going to cover the new Resizing Tool for now.
I’ve put together a quick freebie that will show you how all of the old resizing features translate into the new tool.
YOU MUST DOWNLOAD THE SKETCH 44 BETA, OR THE SKETCH 44 PUBLIC RELEASE FOR THIS FILE TO WORK.
<h4><a href="http://ift.tt/2mow0gB">Click to Download the Sketch 44 Beta</a></h4>
(it’s a separate app and won’t overwrite your current one)
<iframe src="http://ift.tt/2pQaepl" width="670" height="670" frameborder="0"><a href="http://ift.tt/2pQ14ej">http://ift.tt/2pQ14ej</a></iframe>
<h3>First, a refresher:</h3>
<img alt="" src="http://ift.tt/2pQd3qd">
These should look familiar. If they don’t, <a href="http://ift.tt/2hBn1HY">Peter Nowell</a> has an awesome cheatsheet for how these work in Sketch Versions 39–43. They were a massive game-changer in 39, and have been my favorite feature ever since.
<a href="http://ift.tt/2aaYqbR">Sketch 39 Resizing: Cheat Sheet</a>
These resizing options are ways to tell Sketch how you want layers and groups to behave within their parent. Pretty cool!
The problem with these is they’re not 100% intuitive as to how they work. I found myself guessing for a while. Peter’s cheatsheet really helped add some clarity, but it still took a lot of time to really get things under my fingers. With Sketch 44, things get a lot better!
<h3>Now, the updates!</h3>
Sketch has made resizing and pinning much more intuitive by giving you a visual for how things behave. Check out this handsome new tool:
<img alt="" src="http://ift.tt/2pPLW0H">
The new resizing options give us much more flexibility with regards to how things respond when we resize objects with child layers.
<h3>The Basics</h3>
Pinning is much more intuitive now, and you don’t have to guess which edge a layer will snap to. As long as you tell it which edge you want it to stick to, it’ll stay there like when you duct taped your brother to the wall.
In this screenshot, I’ve pinned the white block to the top and right edges. When you pin a layer, it maintains its distance from the edge of its parent container (in this case, the purple box).
That white box is 20px from the top and right edges, so now that it’s pinned, it will always stay 20px from the top and right:
<img alt="" src="http://ift.tt/2pQgcGu">This is the new way to “Pin to Corner”.
Here’s how it looks when I resize the group:
<img alt="" src="http://ift.tt/2pPUGDX">This is “Pin to Corner” with stretching, relative to the resizing of the parent.
So we have that white box pinned in the upper-right and it’s maintaining 20px of margin from the edge, but it seems to be resizing with the rest of the group. Sad! 😢
If you want that white box to maintain its size, you’ll have to check the “Fix Width” and “Fix Height” boxes. Makes sense!
<img alt="" src="http://ift.tt/2pQdot3">This is the new way to do “Pin to Corner”. Make sure you fix the height and width!
That looks better! And you can get creative with the way things pin and resize. Maybe you want to keep the width fixed, but you want the height to resize with the whole group? To do that, we can pin the top and bottom of the child layer (the white rectangle), and check the “Fix Width” box:
<img alt="" src="http://ift.tt/2pPO2h1">I don’t think this was possible in Sketch 39–43. Only with other plugins. Now it’s native functionality!
Let’s pretend we want our block to Float in Place right in the center of the box. Well we don’t want anything pinned, but we do want to keep the height and width fixed:
<img alt="" src="http://ift.tt/2pQf0mI">This is the new way to do “Float in Place”
Resize Object is much easier to understand now since you can choose which edges to pin. Here I have some text inside my box, and I want to maintain 20px of padding on the left/right/top:
<img alt="" src="http://ift.tt/2pPSBry">“Resize Object” is accomplished by pinning the left/right edges.
It’s important to note that if you don’t pin an edge, it will Stretch as you resize the parent container. Watch how the text moves vertically as resize the box up and down:
<img alt="" src="http://ift.tt/2pQcoFd">Probably not what we want to happen!
<h3>Symbols and Artboards</h3>
In Sketch 39–43, resizing features worked inside of groups and symbols but not artboards themselves.
Well with the new resizing tool, artboards gain this functionality as well. But you get a choice! There’s a new option called “Adjust content on resize”:
<img alt="" src="http://ift.tt/2pPL7F6">
Here’s how resizing an artboard looks without this box checked:
<img alt="" src="http://ift.tt/2pQ9K2z">This is basically what we’re used to without other plugins. It just kind of crops the artboard contents.
If you check “Adjust content on resize”, then things will behave just like they would in a group or symbol, but this time on the entire artboard:
<img alt="" src="http://ift.tt/2pPIraq">Native pinning right on the artboard itself!
Note: This box will get automatically checked if you pin ANY base layer on your artboard. So don’t let that confuse you:
<img alt="" src="http://ift.tt/2pQgahQ">That checkbox will be toggled on for you if you pin any base artboard layer.
<h3>That’s it!</h3>
I’m pretty stoked about this improved resizing tool! It adds a level of intuitiveness to that was really missing before. No more guesswork!
If you have any questions, put them in the comments! I’ll do my best to answer them, and when I can’t, I’ll let <a href="http://ift.tt/28KyeFs">Sketch</a> chime in 😅
<a href="http://ift.tt/2cz5Jet"><img alt="" src="http://ift.tt/2pQoEYk"></a>
I create design systems in Sketch called UX Power Tools. <a href="http://ift.tt/2cz5Jet">Learn more here.</a>
<iframe src="http://ift.tt/2pPNk3n" width="480" height="170" frameborder="0"><a href="http://ift.tt/2pQhq4N">http://ift.tt/2pQhq4N</a></iframe><img src="http://ift.tt/2pPOps5" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2pQ5Oyw">Sketch 44 Resizing: How does it work???</a> was originally published in <a href="http://ift.tt/2mDvnUK">UX Power Tools</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Sketch 44 Resizing: How does it work???

Sketch 44 Resizing: How does it work???

Sketch Tutorials

It’s new! It’s intuitive! It’s better! It’s extra-stretchy!

Top Stories