Enter Sketch.<\/strong><\/p>\n Sketch is tailored to UI design and has a stellar feature-set that allows us to focus on designing beautiful interfaces, without all the bulk of Photoshop or Illustrator.<\/p>\n But Sketch isn\u2019t without its own difficulties and learning curve: It can still be an intimidating piece of software to a beginner.<\/p>\n That\u2019s why I\u2019m going to share my list of the 5 most common Sketch mistakes I come across. Avoiding these common mistakes will help you design more efficiently, which will save tons of time and frustration!<\/p>\n If you’d like to skip to one particular section, simply use the clickable menu:<\/p>\n Sketch has a ton of built-in features that allow you to get from A to B as quickly as possible. But what if you don\u2019t know about these features?<\/p>\n For example, maybe you\u2019ve seen the term \u201csymbol\u201d in Sketch and thought \u201cWhat the heck is a symbol and how do I use it?\u201d Symbols are actually one of the most powerful time-saving features of Sketch. If you\u2019re not using them, you\u2019re making your life considerably harder!<\/p>\n Symbols are simply layers that can be reused over and over again. If you make a change to a symbol, each instance of this symbol is updated. So no more making a tweak on one artboard only to have to make the same tweak on 10 others!<\/p>\n Once you start getting into a groove with a design, the last thing you want to worry about is the naming of your layers and artboards!<\/p>\n But many beginners underestimate how important it is to keep a logical and descriptive naming scheme.<\/p>\n First and foremost, a good naming scheme can make a document much easier to navigate. Imagine that you work on a file, then a month goes by before you open it again.<\/p>\n Without properly named layers and artboards, it can be nearly impossible to remember what was where. And forget searching for a particular layer!<\/p>\n Having a properly named file also means that other designers will be able to open it up and pick up right where you left off without having to waste time searching for things.<\/p>\n Trust me, the worst thing you can do to another designer is drop a poorly organized file on them. It reflects badly on you and doesn\u2019t make for a good working relationship!<\/p>\n A good naming scheme does more than just make a file easy to navigate, it makes the export process easier too! Did you know that if you name a layer, group, or artboard \u201cassets\/logo\u201d, then export that layer, it will actually create the \u201cassets\u201d folder and put the image file in it?<\/p>\n So next time you create a layer, artboard, page, or anything else in Sketch, take the time to give it a logical name that describes what it is. You\u2019ll thank yourself later, and others will thank you too.<\/p>\n Sketch comes with tons of tools to help you design UI quickly and efficiently. Among these are guides, grids and layouts, all of which work in different ways, but are here to help you keep your designs symmetrical and lined up.<\/p>\n Guides allow you to create a structure that design elements will snap to. Since guides won\u2019t be exported in your final design, they allow you to create guidelines that can be removed at any time.<\/p>\n You can create a guide by simply clicking and dragging one out from the rulers to the top and left side of your canvas. If you don\u2019t see any rulers, go to Canvas >> Show Rulers to enable them.<\/p>\n Sketch also has a feature called Smart Guides. These aren\u2019t guides you create yourself, instead Sketch tries to guess at measurements and alignments as you move objects around.<\/p>\n Try it yourself by creating two shapes, then moving one of them around. You\u2019ll see these red guides appear in order to help you align your shape.<\/p>\n Smart Guides are huge time savers but can sometimes get in the way or be a little bit annoying. If you\u2019re not a fan of them, you can disable them by clicking View >> Canvas >> Show Smart Guides.<\/p>\n A grid is comprised of lines that cover an entire artboard in order to give you a universal guide for keeping things aligned.<\/p>\n You can tweak the spacing and color of your grid by going to Layout >> Grid Settings.<\/p>\n Layouts work in a similar way to grids. Their purpose is to help you keep things aligned. But instead of classic grid lines, a layout provides vertical and horizontal columns that can be used to keep elements consistently aligned and sized correctly throughout your design.<\/p>\n Layouts are especially useful for web and mobile layouts where the viewport size may change depending on browser or device dimensions.<\/p>\n Another way to save tons of time and headaches down the road in Sketch is by using the premade artboard templates that ship with the software.<\/p>\n You can access these templates by simply clicking the artboard tool (Insert >> Artboard), then you\u2019ll see the available templates in the Inspector to the right.<\/p>\n Sketch offers useful starter templates for Desktop, iOS, Android, icons and other things, which helps take the guesswork out of knowing which artboard sizes to start with.<\/p>\n Sketch is certainly a powerful program for designing UI, but it can\u2019t do everything!<\/p>\n That\u2019s where plugins come in: Plugins extend the power of Sketch by adding extra functionality.<\/p>\n The first thing I recommend doing is downloading Sketch Toolbox<\/a>, which will help you search for and manage your Plugins.<\/p>\n Once you\u2019ve done that, spend some time browsing plugins and see what sort of functionality is out there!<\/p>\n I highly recommend the Icon Font plugin<\/a> for easily adding icons to your Sketch designs and the Magic Mirror plugin<\/a>, which creates beautiful UI presentations.<\/p>\n These are only a couple that I use every day, but check out\u00a0Sketch\u2019s plugin repository<\/a>\u00a0for some other essential Sketch plugins.<\/p>\n Sketch may seem like a simple program on the surface, but hiding under the hood are tons of powerful features that will save time and make your designs much more manageable as they grow larger.<\/p>\n\n
1. Not using symbols<\/h2>\n
![\"Diagram](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_1---x----1260-1258x---.png\" "\\"\\"")
<\/p>\n2. Improperly naming layers and artboards<\/h2>\n
![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_2---x----412-572x---.png\" "\\"\\"")
<\/p>\nThe Utility of Good Naming<\/h3>\n
![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_3---x----1196-554x---.png\" "\\"\\"")
<\/p>\n![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_3.1---x----698-150x---.png\" "\\"\\"")
<\/p>\n3. Not using Guides, Grids, and Layouts<\/h2>\n
Guides<\/h3>\n
![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_4---x----880-556x---.png\" "\\"\\"")
<\/p>\n![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_5---x----736-270x---.jpg\" "\\"\\"")
<\/p>\nGrids<\/h3>\n
![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_5---x----656-1162x---.png\" "\\"\\"")
<\/p>\n![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_6---x----666-444x---.png\" "\\"\\"")
<\/p>\nLayouts<\/h3>\n
![\"A](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_8---x----658-1164x---.png\" "\\"\\"")
<\/p>\n4. Not using Artboard templates<\/h2>\n
![\"Screenshot](\"\/en\/wp-content\/uploads\/old-blog-uploads\/versions\/sketch_9---x----890-976x---.png\" "\\"\\"")
<\/p>\n5. Not using plugins<\/h2>\n
Final thoughts<\/h2>\n