Designing with Smart Layouts in Sketch

4 min readOct 14, 2019

I had a couple more snags as I was trying to mimic the modal demo Sketch gave so I’m going to break it down step by step as simply as I can.

There’s a couple features that I would love to see come to fruition more and more in UI design tools and one of them is responsiveness. It is a huge part of the modern day landscape of UI design and a large time-waste for studios and companies whose development team lacks the capability or relationship with the designers. Many responsive design issues can be resolved with a quick conversation and minimal static design. However, with a bit of setup, Sketch has made it possible to speed up and test a responsive product much quicker. Its a step in the right direction and helpful (other UI features include animation which some are doing, and live forms…boy I wish Invision had live forms).

For those of you who are looking to convert some of your existing modals and templates to a “smart layout” its pretty simple actually and so I wont speak much more here and will just show you the steps I had to take.

Step 1: Make a “growth” element

This has the potentially to be the hardest step in the process and you futz around with the perfect element. I would say go grab one from an old working file and paste it elsewhere to have the opportunity to change it. It’s attributes should include the need for the content to “resize” or “stretch” its container depending on how much content sits within it.

Step 2: Make it a symbol

The feature works with the content override sytem that sketch uses with their symbols so it will need to be a symbol as well.

When creating a symbol you can select from a dropdown. If a symbol has already been created you can access the same options in the “layout” section on the right fly-out menu.

A new symbol allows you to choose the layout option from the very beginning. The layout option is important, I will explain next.

Step 3: Choose your layout

The layout option is the most important thing to get right. The options are pretty self explanatory but you can also change them on the fly and see how they impact your responsive element. I found myself jumping back and forth to see if things were really working the way I thought they would.

I knew that I wanted the modal/product card to grow and from the top down, meaning that I wanted the top of the card to always stay at the same location but the bottom could extend further down. Therefore a vertical layout made sense with a top to bottom rule applied to allow it to grow further down.

Here I have selected the appropriate layout parameters

Step 4: Pin your building blocks

Each design is made up of building blocks or legos or organisms whatever you want to call it. Your job right now is to set the rules for how each item behaves when the element “grows.” This is where the jumping back and forth helps because sometimes you don’t know how an object will be affected by the smart layout.

Photo — I pin to the top and fix its height
View case study — I pin to the bottom

Step 6: Make sure your text alignment is setup correctly

I spent so much time trying to figure out why this wouldn’t work for me that I had to pass this on as quickly as I could. I don’t know what the default is for text blocks but just in case you’ve decided to created specific text diameters you will need to select a “text alignment” that works with your layout. For example if you have the “Warp text to height and width of container” your design will never work. You have to choose “resize horizontally or resize vertically” for your text to impact your responsive element.

Notice the “alignment” section on the right. I have selected “resize vertically” for my textbox

Step 7: Add content!

Once this has all been setup you can start adding content to watch it resize live! Yes! Live!

Hopefully this helped a bit by breaking down the steps a a bit more. There really isn’t anything to it. I’d love to know if people are able to save a lot of time and process with this change.