Published on | Prototyping: From UX to Front End — Medium Kyle Ashby

I can’t say enough about how awesome this plugin is. With the new update, they now support symbols and that has changed everything. The more I use this plugin, the more uses I find for it. Here are 4 things that I will now be using the plugin for:

Grids
Navigation
Table Headers
Buttons with Icons

1. Grid

Sketch already has a great tool for setting up a grid and columns. But I think the plugin can still be useful when designing grid layouts. Below is how I would normally set up a grid without auto-layout with a 10px gutter between each box.

Setting up a grid without auto-layout

That’s not too hard, but lets say I want to change the spacing of the gutter from 10px to 20px. I have to go and edit each of the squares.

Changing gutter without auto-layout

Now lets try it in auto layout. The setup is similar. I duplicate a square, create the 10px gutter. Then in the bottom right corner, there is a folder icon which creates the stack. I created the stacked layout from the plugin.

Then I just select one of the squares (cmd+click) and copy/paste it. It will automatically include another square with the correct spacing in the stack.

Creating a grid with auto layout

Now lets say we need to change the gutter from 10px to 20px. You simply select the stack, and open the stacked options on the bottom right and change the spacing.

Changing the spacing from

Note: This is easier for when you have a single column or row. Because you have to change the spacing for each of the stacks, when their are multiple. That being said, I think the benefits far outweigh the cons.

Another item to consider is to have stacks within stacks.

In the gif below, on the left you see the city and state are in a horizontal stack. since the city lengths vary, the plugin will automatically adjust the state accordingly.

I use one stack for all the items in the card (including a white text layer to give it more spacing below the date). I use another for all the cards as a whole.

Here you can see the state abbreviation will remain 10px from the city name.

2. Navigation

This is something that I found out recently, but haven’t had the opportunity to implement yet.

Lets say you have a header with a logo and some links to pages in your site. With auto layout you can select the spacing between each, without having to adjust every time you update the text.

Lets say you you no longer need a portfolio on your site, but will include a shop. The items will adjust to the correct spacing when you make the change.

Even if you decide to add another page on your site, you no longer have to adjust the spacing for each item. Just select one of the menu items, copy & paste it and then change the text.

Now lets imagine you need to move the “Portfolio” section. Think of all the noodling you normally do to get spacing just right. Now you just drag it over and watch the magic happen.

3. Table Headers

This is similar to the navigation. If you have a table on a page and need to adjust one of the column titles, but you don’t want to adjust everything because you want the entire table to remain a length.

All you have to do:
1. Make sure you select the right and left pin in the auto-layout tool on the entire stack.
2. Then select the column header you want to adjust
3. Adjust it to the size you want.

Note: You will have to do this for the rows in the table as well. But you could create another symbol for one of the rows and use the same principle above.

If you want to add another column, you simple copy and paste one of the symbols. Then adjust as needed.

4. Buttons with Icons

The first step is the create a horizontal stack with the icon and the text. This will help the icon always remain the same distance from the text.

Next you create the symbol and then pin the horizontal stack to the center (vertically and horizontally).

Finally, you can see it in action. As you put in new text, the icon will size with the text. The only thing you need to do is adjust the size of the symbol.

Another technique I learned from a video here. You create a buttons sides and middle with a stack, and then when you adjust the text, it will keep the padding on the left and right because they are separate objects.

Below is how that looks and works.

Adjusting Text within a stack

The only problem with that is you can’t update the color on multiple buttons, since it doesn’t work as a symbol.

Conclusion

This seems like the plugin that keeps giving and giving. Very excited to be apart of this and hope you find this useful.

Subscribe to my newsletter to receive updates about new articles.

4 Sketch + Auto-Layout Plugin Tips was originally published in Prototyping: From UX to Front End on Medium, where people are continuing the conversation by highlighting and responding to this story.

4 Sketch + Auto-Layout Plugin Tips

Cool stuff, every week

More Articles