Words by Tommy ParkerFebruary 2, 2017
The digital design tool from Bohemian has been around for a few years now, evolving to fit the needs of its users and the industry itself. In that time, multiple features have been added and have really enhanced how it works as a whole. This article will explore some of those features and how it can improve the way you interact with the app.
It’s great how you can save a colour to your document and global palette but what if you wanted to take that further? Layer styles – found in the inspector on the right side – can save shadows, multiple fills (including gradients), opacities and borders.
And what makes it even more powerful is the ability to do global changes on anything with the layer style applied. So if you wanted to tweak a colour of a gradient on an element for example, it would also allow you to change every other instance where it is used by simply clicking the update button.
Grouping objects together makes for great layer management but can sometimes be frustrating when you want to resize them. Sketch has a brilliant feature that allows you to select the individual element within the group and choose how it reacts when it’s parent is resized.
Stretch is the default setting for an element which is great for doing simple jobs but can often limit how much you can resize an object.
Pinning an object to the corner will allow it to retain its size but will float in accordance to the nearest corner and still maintain the padding you initially set.
Resize object is great, resizing only the layer when its parent group is resized. “This is optimal when you want the relationship between layers to stay the same, no matter the size, as in creating icons.”
And lastly, float in place. This will keep the object the same size but will retain it’s position’s percentage.
Probably by far the most powerful feature are symbols. By right-clicking a selection of objects and converting them to a symbol, you can create a reusable element.
Symbols have the same resizing properties as groups but why not go a step further and put symbols within symbols.
Taking this further, renaming your layer with a ‘ / ‘ between two words can categorise symbols. For example, naming a symbol ‘Desktop/Navigation’ will place your ‘Navigation’ element within the ‘Desktop’ symbol menu. You can go as many levels deep as you see fit for ultimate organisation.
Pro tip: Download the Symbol organiser plugin to keep your symbols tidy on your Symbols artboard – it can get out of hand pretty quickly!
In addition to these features, once a symbol is made, it can have it’s data changed without having to detach it from the original symbol. For example, if you’ve made a list block containing an image, title and small description, all three of those elements can be altered in the inspector by simply typing in the input field for text elements and uploading a new file for the image. You can even replace symbols within symbols with a different symbol. So meta…
In no time at all, you’ll have a website or app that pretty much designs itself.
Similar to layer styles, this will allow you to set your text styles ensuring consistency in your designs. You can also apply the same naming convention as the symbols to keep your styles organised.
Pro tip: Setting these up when producing a style tile will make the transition into design a lot smoother.
If there’s one thing you take away from this blog post, it’s Craft.
Created by the folks at InVision, it has multiple extras that really push the boundaries of what Sketch can do.
Firstly, data. By selecting either a basic shape or a text field, you can then add a variety of content. Images from Unsplash (categorised for your pleasure), random usernames, headlines, text, copy or images from a local or Dropbox folder, or even live content from an existing website, both imagery and text. If you wanted to get real fancy, you can pull true API content into your designs and assign specific JSON values.
Pro tip: If this is still not enough to satisfy your content generation needs, you could even download the Content generator plugin that has even more options.
Secondly, there’s the library function. This allows you to store and share assets to keep everyone up to date with the latest additions and maintain a single source of truth. Brilliant for design teams working on a single brand.
Third, the duplicate feature. Sometimes replacing the content within symbols can be very laborious so this aspect of the Craft plugin can ease your pain and free up a lot of time. If you create our example list block using the data feature mentioned earlier, it will remember the settings used and replace the images with others from the same category and the same applies to text. It also has the added bonus of giving you options of gutters between each duplicated object and of course how many you’d like.
And lastly, there’s sync. Currently in beta, this feature allows you to add your designs to the online digital design sharing platform InVision. Great for showing your work to clients and developers alike.
Pro tip: InVision has an inspect feature aimed at developers that allows users to look at the raw css of an object keeping both the designers and developers happy.
And there we have it. A selection of features that can really enhance how you use Sketch. Obviously there are a great many other features I haven’t mentioned so below you’ll find some further reading/watching links.
Let me know in the comments if there’s an element of Sketch you couldn’t live without.