Sketch 62: Smart Layout Updates

Smart Layout has been updated with a min-width/height option. Let’s see what we can do with it with examples for buttons, toasts (notifications), cards, chat, tabs and forms.

File used in this video:
*Filename has been changed after uploading.

Playlist with all of the Sketch Series videos:

For updates and other tutorials, follow me on:

Thanks for watching! :)

#sketchtutorial #smartlayout #sketchapp

[styvech]

Thankyou so much! So helpful, God bless you

[CRAismyname]

Super well explained and helpful. I was struggling with some nav tabs layout stuff and this fixed it. Thank you!

[PapaG-]

I love your videos... Learning new things all the time. Thank you.. Can't wait for a sketch 64 video.

[athchoumgaming]

Maybe you should add timeframes cause before I get to the "how-to" part, I thought it's just a showcase of something already set up. anyway ... nice discovering your channel and thank you for the tutorial!

[vasilydomashev]

As usual. Only useful and quick tuts. Thank you Christopher!

[mbuit]

Thanks for the video, it really helped me with a project

[scottmakes]

Hey Christopher, super helpful but there was one thing that was really bugging me with making the symbols responsive.

The issue I was having was:
e.g. List line item symbol (smallest container width of 240px) included text that wrapped and increased the symbol height when multiple lines of were added in text override. BUT wouldn't decrease the symbol height when the width of the symbol instance was increased (text on one line not 2+) INSTEAD it maintained an empty gap equal to the additional lines required at the smaller symbol size. (apologies if it's not clear)

Solution:
Instead of using Symbol layout as horizontal with a min-width of 240px (did nothing for me). I used the symbol layout as vertical with min-height = symbol height. AND here's the kicker... any instance where the override text would normally take 2+ lines in the smaller container but one in the larger container hit the "Shrink instance to fit content".

[MaxWeir]

Nicely described, smart layout is pretty good

[nicalorber]

This is tremendously helpful. Thank you so much for sharing. And for sharing the files. There are some nuances in the files that I wasn't able to catch in the video, so that helps close the gap with being able to adopt these great new techniques. High fives coming your way!

Hey Christopher, thanks for the video it's very well explained and clear some doubts about the smart layout usage. I have a question regarding the toast usage. I have exactly that same module in hands and I was trying to come up with a single symbol for normal toast + cta & normal toast without ctas. I noticed that using only one symbol when hiding the cta's symbol, the toast symbol still keeps the height of the symbol and just hide it. Is there a way to solve it? Or you always need to create two variations? Thanks and keep up the good work!

[arnaldojimenez]

Thank you for the video. Im really struggling leaving Anima in the past. But i feel like i need to part ways ASAP.

[TheBClark]

At 6:17 what I would love to see is the ability to make all elements in a row like this snap to the largest size. For example, I have a card design for downloading documents, and the titles vary in length. As the cards appear in multiple places, it doesn't necessarily make sense to have them be a min-height, as this occasionally leaves a lot of extra space. However, if I have two or three next to each other it looks daft as they are all different sizes. I like to set up rows of threes as symbols themselves, but I cant figure out a way to have them all maintain the same height, based on the height of the tallest one. I have tried every variation I can think of in terms of nested groups and symbols, with pin to edge turned on and off, and I can't seem to make this work.

[mirkozoric]

Hey, any chance of uploading the tutorial file on sketch cloud again? Thx :)

[alexb]

Hei everyone. I'm the only one who can't access the file? I would really appreciate if you could take a look, Christopher. Thanks