small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

Published on <a href="http://ift.tt/2nKjf4M">| Prototyping: From UX to Front End &mdash; Medium</a> Kyle Ashby <img alt="" src="http://ift.tt/2mXw5rL">
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:
<ol>
<li>Grids</li>
<li>Navigation</li>
<li>Table Headers</li>
<li>Buttons with Icons</li>
</ol>
<h3>1. Grid</h3>
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.
<img alt="" src="http://ift.tt/2nKo65D">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.
<img alt="" src="http://ift.tt/2mXCtiD">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.
<img alt="" src="http://ift.tt/2nKAHG9">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.
<img alt="" src="http://ift.tt/2mXCUcF">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.
<img alt="" src="http://ift.tt/2nKjhJW">Here you can see the state abbreviation will remain 10px from the city name.
<h3>2. Navigation</h3>
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.
<img alt="" src="http://ift.tt/2mXHJCR">
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 &amp; paste it and then change the text.
<img alt="" src="http://ift.tt/2nKIung">
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.
<img alt="" src="http://ift.tt/2mXztD0">
<h3>3. Table Headers</h3>
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.
<img alt="" src="http://ift.tt/2nKo4L6">
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.
<img alt="" src="http://ift.tt/2mXCsLB">
<h3>4. Buttons with Icons</h3>
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.
<img alt="" src="http://ift.tt/2nKsJg9">
Next you create the symbol and then pin the horizontal stack to the center (vertically and horizontally).
<img alt="" src="http://ift.tt/2mXDmaW">
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.
<img alt="" src="http://ift.tt/2nKs2Uj">
Another technique I learned from a video <a href="https://www.youtube.com/watch?v=DiCXg17CwIY">here</a>. 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.
<img alt="" src="http://ift.tt/2mXhRqW">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.
<h4>Conclusion</h4>
This seems like the plugin that keeps giving and giving. Very excited to be apart of this and hope you find this useful.
<img alt="" src="http://ift.tt/2nKvZrU">
<a href="http://ift.tt/2mXiPU5">Subscribe to my newsletter</a> to receive updates about new articles.
<img src="http://ift.tt/2nKvxKn" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2mXHLKZ">4 Sketch + Auto-Layout Plugin Tips</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

4 Sketch + Auto-Layout Plugin Tips

4 Sketch + Auto-Layout Plugin Tips

Top Stories