Note: This blog post offers a very basic overview of the Sketch App, so if you are an intermediate user with experience using this software, then this blog is not for you.
Sketch App has quickly become the go-to app for UI and web designers over the very traditional Adobe Design Suite. This piece of software is created by designers, for designers, and is loved by many for good reasons -- it is easy to use and offers intuitive features like a simple interface, file autosave, infinite canvas -- to list a few. Most importantly for me, it is much less expensive compared to the monthly cost of $49.99 USD that Adobe asks for Illustrator, Photoshop & InDesign and a variety of other software combined.
If you are already using and loving Sketch like me, here are four tips, plugins, and resources I use that have vastly enabled me to have a much more efficient workflow, and also improved the way I communicate my designs to my developers.
1) Utilize Sketch Plugins!
Sketch plugins are one of the most helpful tools in Sketch. Like apps for your Macbook, or a hammer for your nails, Sketch plugins allow you to design much quickly and more effectively.
I won't go over all the ones that I use, but the first thing you should definitely do when you first purchase Sketch, is to download the Sketch Toolbox app, which allows you to browse through the many plugins available and easily install them into Sketch with just one click, which is a huge timesaver.
Here are three plugins that I personally use:
This plugin has saved me so much time, especially when I am creating a mockup for a client that involves a large amount of filler text, numbers, names and even pictures of users. Gone are the days of copy and pasting text from another website, or drag-and-dropping pictures downloaded off of Google.
This application is inspired by Illustrator's "Select Similar Objects" feature, and is especially important when you're working with a large design project and you need to select multiple fill colours, border colours, border thicknesses, and more.
This plugin has been amazingly helpful, especially when clients change their minds last second and requests to have all the colours on their website changed from blue, to green (which is frustrating, but with this plugin... just a little less frustrating).
Gone are the days of hopping in and out of the many sites that offer free stock photos. When I am creating artwork inside of Sketch, Zoommy is an invaluable application for dropping placeholder images inside of my design. I can easily browse through various sites using just the one application.
2) Utilize the Symbols feature
My prototypes often contain many recurring elements such as the same header, footer, etc. This will be especially apparent for designers who are creating multiple screens for app designs, website pages, etc.
Symbols are a feature that allows me to easily reuse elements across Artboards and Pages. So if I am using Symbols, when I inevitably have to make changes I only end up having to change them in one location. After that the Symbol will be automatically updated across all of my Artboards. Creating a Symbol is easy -- just go to Layer > Create Symbol. You can then easily add it to your design by pressing Insert.
3) Sketch Artboards, Pages & Layers
Artboards and layers can quickly create chaos but thankfully, Sketch allows for multiple Pages and quick organization by keeping all assets in one file.
Similar to the feature in Adobe Illustrator, Artboards allow you to separate your designs across the same page into different screen sizes, within the same Page (see below). This is especially important (for me personally) when I am creating a responsive web design and I need to create the Desktop, Tablet and Mobile version of a design.
Using Pages allow you to store multiple canvases in the same Sketch document, giving you the ability to store different iterations of designs. Personally, I use it to stock different iterations of my designs throughout major revisions, so that I can revisit my older designs when I need to.
4) Plug Into the Sketch Community
There are many helpful tutorials available to help you maximize your experience using Sketch, but there is nothing quite like learning from other people’s experiences. Learning from other designers who have experimented with Sketch and found what works best for them has been invaluable for me.
Sketch continues to be the go-to web design program for many people. Things like pre-made Artboard templates, Symbols and the simple exporting function which have improved and sped up the design process for many users.
The most important thing is to know is that not every plugin works for everyone, so try (and never give up!) until you find something that works best for you. If you are not happy with Adobe Illustrator (like I was), then Sketch might be a good fit for you to try out. And if you are already a Sketch convert, I hope these tips have helped you!
Got Any Tips & Tricks Yourself?
As Sketch constantly involves, so does my ability to design within the program. I am learning new tips and tricks everyday, and I want to learn from you too! Have you found any tips and tricks with Sketch that's worth mentioning to other Sketch devotees? Share your thoughts below!
I look forward to hearing from you -- until next time!