This is the most important feature since Symbol Overrides. Finally, you can make Symbols that behave in the same way as its final implementation — everything thanks to Smart Layout.

In this story, you will learn what Smart Layout is and what kind of more granular features it includes. I will also show you how to use it in practice.

But first…. let’s see what’s new or improved in Sketch 58:

• Smart Layout — Feature that makes Symbols even more powerful. You can now set a direction of Symbols or nested symbols and groups within those symbols. Thanks to this, when you change the overrides (modify text content, etc.), the Symbol’s instance will resize and adapt automatically (no manual resizing!). Smart Layout moves your workflow to the next level!
• Updated Welcome Window — It is now bigger, cleaner and better adjusted to the cloud documents and its projects (available in the sidebar on the left).
• New Cloud Documents saved in Projects — You can pick a project when you save a new cloud document for the first time…

🔥 Smart Layout

Now when you create a Symbol, you will notice that you can set Layout of this Symbol — it is the menu for the Smart Layout Feature. This feature is also available in the Inspector Panel of the Symbol (on the right side of main Sketch Window).

It is worth to remember:

⚠️ Smart Layout options are available for: Symbols, Groups inside symbols, and nested Symbols. ⚠️

Let’s see what specific options means:

• No Layout — This is the default option. You Symbol will not include Layout and will work as in previous versions of Sketch.

Horizontal Layout

• Left to Right Layout — Resize elements from the left to the right side of the Symbol.
• Horizontally Center Layout — Resize elements from the center of the Symbol.
• Right to Left Layout — Resize elements from the right to the left side of the Symbol.

Vertical Layout

• Top to Bottom Layout — Resize elements from the top to the bottom of the Symbol.
• Vertically Center Layout — Resize elements from the vertical center of the Symbol.
• Bottom to Top Layout — Resize elements from the bottom to the top of the Symbol.

How to use Smart Layout

If the above options look a bit confusing to you, it’s ok. We all have to play around with our symbols to discover its full possibilities. However, I have prepared a tiny sample demo so you can get it and learn a sample usage of the Smart Layout.

Below you can see how simple Symbol (Button) and more complex one (Modal) may be created with Smart Layout.

Grab the sample.

Button

Let’s start with a simple button symbol. This one adjusts to the text content:

And this is how Symbol Instances work:

Simply awesome!

Modal

Ok, you have seen how basic element resizes with Smart Layout. Now it is time for a more complex one. Let’s see how to make Modal that automatically adjusts to the content.

Here are specific elements of the Symbol selected to show the specific setup:

Let’s see how the instance behaves:

🤩 Insanely great! No more manual resizing all is done in Sketch automagically!

Summing up.

Smart Layout is one of the huge things Sketch Team introduced to us this year (others are Smart Distribute and Sketch for Teams). It is undoubtedly the most important new feature since Symbol overrides.

It changes the way we work with Symbols. It gives them superpowers to our workflow will be even more efficient. I am thrilled to see what advanced Symbols you can prepare now!

By the way…

If you plan to start a new project soon or to organize your UI Library — do not waste your time creating everything from scratch. Feel free to use the Prime — Design System Kit. See Prime in action.

To make it easier there is a gift 🎁 Use MEDIUM10 offer code to get 10% Off.

You can also Create User Flows faster in Sketch — With SQUID you can create User Flows directly in Sketch the sketch file with your artboards. Everything may be done within a couple of clicks. See how it works.

If you would like to read more stories like this feel free to follow me on one of more social media platforms:

Thanks for reading!