The Rise of Smart Layout… Sketch Beta 58 review 💎

A feature that other design tools are lack of, and is crucial to have!

I’ve missed out to review Sketch Beta 57 because I’m on my vacation at that time. Sketch 57 brings us the long-awaited feature that is swap layers in Smart Distribute selections! The Sketch Cloud has also been updated with features like mention people, support Markdown, and exciting news about Sketch for Teams. I’m so glad Sketch team slowing fulfilling all the promises and I’ve forgotten how long I’ve waited for all of these features. 😍

And now… Sketch has dropped another big feature that going to be one of the historical moment for them and for all the designers, which is Smart Layout! You can use this feature to achieve similar expectation just like when you designing in the browser!

Also, this feature will shut all the people mouth who complaining Sketch for not innovating and copying other tools… Sketch team can now quote the same as Apple’s Phil Schiller famous quote back in WWDC 2013.

🚨 This is my review for the Sketch Beta 58 so that you don’t have to risk with your working files. But if you do, please proceed with caution and use it at your own risk as Sketch always warn us!

⭐️ Introducing Smart Layout

When you click on Create Symbol, you will see the Create Symbol modal with a new dropdown menu for the Smart Layout:

1. No Layout: Default option, not applying Smart Layout at all.
2. Left to Right Layout: Resize from left to right of the Symbol.
3. Horizontally Center Layout: Resize from the center.
4. Right to Left Layout: Resize from right to left.
5. Top to Bottom Layout: Resize and flow from top to bottom.
6. Vertically Center Layout: Resize and flow from the vertical center of the Symbol.
7. Bottom to Top Layout: Resize and flow from bottom to top.

At first, when looking at those menus, it’s kind of confusing for me. But if you follow this tutorial and use it several times, it is no brainer to use this feature!

⚠️ Smart Layout only works for Symbols and Groups in Symbols

And mostly works well with components that have a container/background like buttons, cards, lists, etc.

🛠 Demo Time!

I’m going to demo four of the Smart Layout with some components:

1. Left to Right Layout for Button, Tab, Tag, and Progress Indicator
2. Horizontally Center Layout for Button
3. Top to Bottom Layout for Tooltip, Toast, Accordion, Table, Modal, Card, and List Item
4. Bottom to Top Layout for Messaging Text Input

Let’s begin to demo these components that will benefit from Smart Layout. Read until bottom for the source file! 💪

Left to Right Layout

This Smart Layout feature will replace most of the Dynamic Button plugins. It works just like what you expect from Dynamic Button. Let’s start creating a dynamic button now.

1. Button

In the video below, you will notice that we need to keep the text alignment to Resize the text layer horizontally to fit text in order to make the dynamic button works well.

1. Dynamic Button

2. Tab

You can apply Smart Layout in Nested Symbols to flow to the right from one component to another component!

2. Tab and Nested Tabs

3. Tag

For this Tag component demo, you will notice that it has an arrow down icon which will make this a dropdown tag. Once we select to None for the icon, the background will fit the text which makes it just a basic tag component.

3. Tag with Icon

4. Progress Indicator

This component will be more complex since it involved icon, text, and line within the Nested Symbol. We need to set Fixed Size for the icon and line and pin to Top-Left for icon, text, and line altogether.

4. Progress Indicator

Horizontally Center Layout

Horizontally Center Layout basically work same as Left to Right Layout but is resize from the center of your component. For this option, I will just demo with the Button component for easy understanding.

Also, even if your text is set as left align, but the symbol is using Horizontally Center Layout, the symbol will still be resized horizontally from the center. Or if your text is set as center align but the symbol is set as Left to Right Layout when you override the text the symbol will still resize to the right instead of from the center…I think the demo will be better understanding. 😅

Top to Bottom Layout

Top to Bottom Layout is very useful for components like Card, List Item, Tooltip, etc. For this demo, I’m going to use a Sketch plugin called Lippy from Aby Nimbalkar which super helpful to generate lorem ipsum text interactively.

Lippy

1. Card

If you notice from the demo video below, after you have set the Card symbol as Top to Bottom Layout, your component width will be fixed by default.

If you want to make your component flexible (at least flexible width), then you need to pin the elements in the symbol properly. But there is a shortcoming when you resizing the width, the symbol won’t able to resize based on the content height. Again, watch the demo below to understand better. 😝

1. Card

🌟 Bonus(17 Sep 2019): One Symbol to Rule Them All

In the example above, we have two card symbols which one is the default, and another is with a button. We can just have one symbol which contains a button and hide it to become buttonless card component. Let’s follow what’s my first voiceover tutorial video below.

It’s a rough voiceover video but I still want to thanks Andy Flaster for the encouragement to make me do this. 🙌

🌟Bonus: Card component without Spacer

2. List Item

2. List Item

3. Accordion

I love how Top to Bottom Layout applies to Accordion component. It works so well now. 😭

3. Accordion

4. Table

There is a bug going on in this demo. When I try to expand the Table Content symbol height, the background just won’t let me achieve it. But after I double-click to go into Symbols page and then back to instance, it has been resized properly…Weird but this demo of the table still works well when using Top to Bottom Layout. 👍

4. Table

5. Modal

There is 2 Modal component in this demo, and 1 of it contain buttons that placed on the left. I will apply Right to Left Layout for these 2 buttons so that it can flow to the left.

Also, I’m going to test something here for Modal component. Instead of having 2 modal components which 1 without action buttons, and another with buttons, I’m going to make just 1 Modal component and able to turn off the button to none and the component still looks ok. With this, I’m going to use a Spacer, an empty component for the spacing. Check it out around 0:00 of the video which I testing with Spacer in the component.

5. Modal

6. Tooltip

Most of the tooltip will have a triangle arrow to indicate itself is from which icon. My demo here will make four positions of the arrow pointing top, right, bottom, and left. And then based on our need/context, we just turn off those arrows we don’t need.

But there is some bug too. For the arrow left and right, they can’t be position properly when the text is expanded. Not sure if this bugs or I’m missing some settings there. If you’re from Sketch team or have a solution for me, please leave your comment below. 🙏

6. Tooltip

7. Toast

For this Toast component, the Top to Bottom Layout works like charms! But not when I try to make a master Toast component, there’s a bug when I try to turn off the button in the toast, the height of the toast will be not maintained. I wish I can set to none for the button and then my texts will be resize all the way to the right with 16px of padding.

7. Toast

Bottom to Top Layout

A component like messaging input is very useful when applying this Bottom to Top Layout. Will will automatically flow to the top. Let’s see how this works!

Messaging

Conclusion

That’s all for the demo. Although this Smart Layout going to replace some of the 3rd party plugins, I still think there is something they still need to work on more.

For example, Smart Layout only works for Symbols only. Unlike Anima, which can work for normal group layers too, and also this makes the plugin more flexible when we creating the component with nested elements. So I will say Anima is still here to stay along with other feature that they provided.

Few key features they should have sooner are:

1. We can set minimum/maximum width for a Symbol. This helps us to limit how the component behaves properly.
2. Smart Layout work for normal Group layers.
3. Able to turn off some nested symbols and behave just like web components.

One thing I can confirm is that Smart Layout will become smarter. And other tools definitely will start copying this feature as soon as possible. 😅

I hope all these demo videos help you to understand better Smart Layout feature and then you can apply to your components once they launch it in the stable version of Sketch. And finally, download the Sketch file here that I did all the demo!

Applause 👏 and share this article if you’ve learned something. It’ll motivate me to write more in 2019! Thanks! ❤️

Hi! My name is Yap Kwang Yik but you can call me Pizza Yap 🍕. I’m a Senior Product Designer at Grab Singapore and I’m working on our new Design System. I post design, front-end, and any inspiration on Twitter, DM me if you want to have a conversation. You also can check out my portfolio website and LinkedIn. Cheers! 👋

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.