Sketch guides: Smart Distribute


With Smart Distribute, it’s easier than ever
to create and edit complex layouts. Whether you’ve got a row of images, a grid
of cards, or a big ol’ bunch of avatars, Smart Distribute can help tidy things up and
set even spacing in a snap. But first, let’s go back to basics and see
how Smart Distribute works with a simple row of layers. To get started, we’ll add a shape, hold Option
and drag to copy it. Now because I’ve copied the first shape
and dragged it into position, I can hit Command-D to quickly create a few duplicates with even
spacing between them. If I select this row, and drag on any of these
handles, I can increase or decrease the spacing between each of these layers evenly. But what if my layers aren’t evenly spaced
in a neat row? Well, with Smart Distribute, you can use the
Tidy button to fix this. So, you’ll see here, we’ve got a bunch
of avatars that I’ve dropped onto the canvas. If I select them all, head over to the Inspector
and hit Tidy, they’ll snap into place and arrange themselves into a neat, even grid. Now we can take things one step further. Because when I select the whole grid, a new
set of Smart Distribute handles appear between each row. And by dragging on those, I can quickly adjust
the vertical spacing, too. So far we’ve kept things pretty simple,
but what’s cool about Smart Distribute is that it works with more complex layouts, like
masonary grids. So, if I select this layout here, I can quickly
adjust the spacing between all of its elements while making sure everything stays evenly
spaced. If you want to be super precise, you can set
Smart Distribute values in the Inspector, so if you know the exact pixel values for
your horizontal and vertical spacing, simply type them in and Smart Distribute will handle
the rest. In case you hadn’t already noticed, Smart
Distribute works with all types of layers, not just basic shapes. So let’s switch over to a more complicated
design with a column of Symbols. If I select these symbols, I can quickly tighten
up the spacing between them without worrying that anything’s going to end up uneven or
poorly distributed. With Smart Distribute you can even swap one
layer with another, like two of the songs in this track list, for example. Simply select your layers, hover over a symbol
you want to move, grab that handle right in the centre and drag it where you want it to
go. You’ll notice the layers that neighbour
it move around and snap into place automatically, which is pretty neat. And there’s one final Smart Distribute trick
to be aware of. Because it works for any type of layer on
your Canvas, Smart Distribute works for whole artboards, too. So, if I zoom out from this artboard, we can
see the whole flow for this app, give it a quick tidy, adjust the spacing, and swap a
few views around to get things just the way we want them. So, that’s Smart Distribute in Sketch. If you haven’t tried Sketch before, why not
take it for a spin? Head to sketch.com to start your free
trial today.

6 comments

  • Angel RG

    ¡Love this features! thank you Sketch!

    Reply
  • Alex G.

    Neat! 👌

    Reply
  • Manuel Espinoza

    excellent features!

    Reply
  • Scott Rod

    Because it's not that obvious… To swap the position of symbols, hover over the symbol you want to move and a white-filled circle should appear in the middle of the symbol. Drag it and position above or below the other symbols.

    Reply
  • Art Virtru

    Excellent, but I wish it updated the Layer list as well. Unfortunately that's still a disorganized mess.

    Reply
  • Michał Jarosz

    Great! Thank you for those updates

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *