Sketch guides: Smart Layout and complex components


With Smart Layout, you can supercharge your Symbols and turn them into responsive components that automatically resize to fit their content. In this video, we’ll walk through how you
can apply different Layout directions within the same Symbol. Let’s take this card component which we’ve
already turned into a Symbol. Once we add some real data, the description text and heading
here might run over more lines. Instead of resizing the card manually, we can let Smart
Layout handle it. We’ll start by heading to the Symbol master,
and under the Layout panel in inspector, tell Smart Layout to resize this card Vertically,
from top to bottom, to fit its content. Now, if we head back to the Symbol instance
and edit some of that text, you’ll see the card resizes automaticaly. Better still, the
spacing around those text layers stays consistent, even as they grow. Let’s head back to the Symbol master and add
a primary and secondary button. We’ll place them right next to each other, underneath this text. If we head back to the instance and cut some
of this copy, you’ll see those buttons are following our card’s layout and moving up
to keep the vertical spacing consistent. But what if we want to change the copy in
the button on the right here. What happens to the button on the left? We’ve already given each of the buttons Layout properties so they resize to fit their content, but now they’re overlapping. So let’s undo
that, head back to the symbol master and fix it with Smart Layout. Now, if we take those two buttons and group
them, we can give them a Layout that’s separate to the card. Let’s set the group to resize
horizontally, from right to left. With that all set up, we can head back to
the instance, edit the button’s copy and make it as long as we like. The button to the left
of it will simply move along to keep the spacing betwen them consistent. And of course, if you edit the main copy in
the card, those buttons move up and down as well. That’s how Smart Layout works a more complex
component. Be sure to check out our other Smart Layout videos, or head to sketch.com
to find out more.

4 Comments

Add a Comment

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