Sketch guides: Smart Layout


With Smart Layout, you can supercharge your Symbols and turn them into responsive components that automatically resize to fit their content. Let’s start with a basic example to see with
how it works. When you’re creating components — like this
button here — it makes sense to turn them into Symbols, so you can easily reuse them
and keep changes consistent across your designs. And at some point, you’ll probably want to
customise that button’s label using overrides. But what if the label copy you want to use
is longer than the button itself? Instead of resizing each Symbol instance manually,
you can let Smart Layout handle it. Simply head to the Symbol master, and choose
its Layout properties in the Inspector. We’ll give our button a horizontal layout,
resizing from left to right, as its content changes In other words, when this button resizes,
its left edge will stay fixed in place, but it will grow toward the right to fit its
new content. If you’re creating a new Symbol, you can also
choose Layout settings using this drop-down menu on the Create New Symbol sheet. But what about a more complex component, like
this card? Well, Smart Layout works with groups inside symbols. So you can set different Layout directions
for different elements. So, if we change the copy in this button,
the button itself resizes, and the button to the left moves over to to keep the spacing
between them consistent. That’s because we’ve not only set Layout
settings for each individual button, but also for both buttons as a group. And for the card symbol itself, we’ve given
it a vertical layout, so it resizes from the top down. That way, if we make this title a little longer,
or add a few more lines of copy here, everything moves down to keep the spacing consistent
between each element. And there’s one more Smart Layout trick you
need to know — that’s hiding symbols. Take this row of tags as an example, each
of them is an individual symbol that we can override with a hover state. And if we select one of these symbols and
choose None from its Override menu, that symbol hides, and the others automatically
shift up to fill its gap. That’s because we’ve grouped that set of symbols
and given the group a horizontal layout, so Smart Layout knows where to move each Symbol
to keep spacing between them consistent, even when you hide one. So, that’s a quick overview of how Smart Layout
works in Sketch. Be sure to check out our other Smart Layout
videos, or head to sketch.com to find out more.

18 Comments

Add a Comment

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