Sketch is basically a vector graphics application. It is a product design tool that is generally used by web designers for creating concept pages, icons, and other web elements. It is also incredibly popular among UI and UX designers, for which this article will provide resourceful insight.
Sketch is mainly made for casual artists and professionals alike, and it offers a comprehensive set of powerful vector editing tools and a host of operations. It has a native macOS app and Android users can use the web app. The original version was released in 2010 for macOS, and since then, it has undergone a variety of changes.
All Sketch designs are saved in their own file format, which is supported by popular tools like Photoshop and Illustrator, among many others. Of course, like all other good design tools, you can save your files in other formats too, including PNG, JPG, TIFF, WebP, and others.
6 Tips for Sketch
In this section, we will give you some of the best tips and practices for using Sketch.
1. Hide text within symbols with whitespace.
Here, we will talk about hiding stuff. Having a text layer inside of a symbol, you can turn it into a nested symbol, which means that you can hide it later as any other override. Nonetheless, there is a much easier way of doing that. Instead, you can override the layer’s contents with whitespace (that is a space). It is as simple as that.
2. Use prototyping to organize your Sketch files.
In version 49, Sketch finally introduced native prototyping. The thing is: Is it great or at least as good as the 3rd-party alternatives? Not really, to be honest. But there is at least one purpose it serves very well. Instead of using it to create clickable prototypes of your website or app, it can be extremely helpful with organizing and documenting your project. It could be worth a try if you have a large file with lots of artboards, components, and collaborators.
3. Customize your preferences
Now we know that using Cmd and the arrow keys lets you resize layers. And of course, you can hit an arrow key on its own to move a layer 1px, or hold Shift to move it 10px. Simple as that.
Nevertheless, you probably did not know that you can also customize these nudge distances by changing your nudging settings. you have to head to Sketch > Preferences, then choose the Canvas tab. There, you can adjust how far your layer moves when pressing the arrow key.
This can be especially helpful if you are working with a grid system, as you can set your distances to perfectly match your layout. No more constant nudging, just a single press, and your layers are exactly where you need them to be.
Here is another handy Preferences tip if you find yourself duplicating a lot of content. In the Layers tab, you can disable the option to offset duplicated layers, so they will appear directly over the original. You can also disable the automatic renaming of the layer, and that way your duplicate will be named the same as the original. This one will not apply to everyone, but it is handy to know, still.
4. Update opacity and gradients with the keyboard
We know that sometimes, you need more precision than you can get using your mouse. It can take a lot of fine movements to find precisely the setting you want for things like layer opacity. So we made it more straightforward to be precise.
Rather than clicking and dragging, and undoubtedly landing on some random percentage, you can simply select the layer, then type the percentage opacity you want. You do not need to click anywhere, you just have to type. Single numbers will set a rounded percentage value while typing two numbers gives you more precision. Hit 0 if you want to return to 100%.
The number keys are also convenient when you want to apply a gradient to an object. You can place gradient points at different intervals with the 0-9 keys to give you a more precise gradient layout. And if you want to add a gradient point exactly between two other points, you can just hit the equal button.
5. Keep masters of your layer styles and text styles together.
Layer styles and text styles are extremely useful as long as you use them in the right way. Two golden rules regarding styles are the following ones.
Every single text layer should have a text style and every single rectangle should have a layer style. All the text styles and layer styles should be synced across the document and should not have any local amendments. Sometimes, it is very tempting to apply a text style to a newly created layer and just change its text alignment or color. But if you do that, you can no longer update your style as your change would affect all the other layers with this style. So if your file is full of layers with amended styles, you are doing something wrong. In a few words, you should use styles consequently or not use them at all.
6. Keep your grid and layout aligned.
Layout Settings and Grid Settings in Sketch let you easily create custom grids and keep all your UI elements properly aligned. However, there is no such thing as a great grid as long as it is not regular and precise. You can make a 1120px grid with 12 columns and 30px gutters, but what would you get then? Just 8 gutters of 30px and 3 gutters of 31px. Not that good.
One of the layouts you should use is a 1152px layout with 32px gutters and 64px columns. It is not only regular but also aligns perfectly with the 8px grid as all its values are divisible by 8. Combine it with a plugin that lets you change your nudge distances and you are in the layout-grid heaven.
Conclusion
Now that you have read the tips, it is important that you try to follow them if you intend to use Sketch. Else, you could also try other design tools that also work finely.
