Post Image

10 Tips & Best Practices for SketchApp

by
Narek Khachatryan
Narek Khachatryan

If you’re a UI designer or product designer and you haven’t heard of Sketch yet, then you must not be on Twitter, or reading industry blogs much. In all seriousness, Sketch is fast becoming the go-to app for user interface design on Mac.

You can try Sketch for free before you buy it. Already using Sketch? Here are a few best practices that have helped make our designs better and more efficient, and we want to make sure you’re up to speed too.

1. Use good naming conventions.

When you set objects to export, they are exported into the folders you group them in with the layer names given. To prevent headache when exporting assets for development, stick to layer names that match your naming conventions, and use folders that will make sense to the developer.

1-sketchapp-use-good-naming-conventions

As discussed in the piece 7 Tips for Sketch users, it can be as simple as inserting a prefix “_ic” before all icons and using the prefix “img_” before all images. Whatever naming system you decide, make sure you discuss with the developers first so you can find what’s most intuitive for everyone. This will make for a more organized process of exporting the assets and importing them to Xcode.

2. Manipulating logotypes? Convert to outlines first.

If you’re manipulating or resizing logotypes, make sure you convert it to outlines first. In other words, Sketch stops treating this as a string of text, and treats it as a group of vectors. You can then tweak out specific letters, adjust spacing better, and resize without losing your proportions.

2-sketchapp-convert-to-outlines

3. Use text styles for headlines and other repeating text types

Sketch lets you create Text Styles that you can apply to any layer of text in any artboard or page. This is great if you’re creating a website UI, web app interface, or mobile UI.

3-sketchapp-use-text-styles

Here is an excellent step-by-step tutorial on how to create Text Styles, complete with plenty of screenshots and GIFs.

4. Create symbols for repeating patterns or UI elements.

Symbols are like text styles for groups of layers or non-text objects. You can turn any button, box, or entire UI frame into a symbol. This way you just need to modify your that element, let’s say your navigation, in one place and it will apply across all artboards and pages.

4-sketchapp-create-symbols

5. Architect your UI design by taking advantage of  multi-screen view

Zoom out at a bunch of artboards so you can quickly see your flows and product depth. Use this high-level view to design an onboarding flow or user journey. Then dive in and design screens one by one. Later, you can zoom out to get a high-level overview. As discussed in Web UI Best Practices, doing this from time-to-time will help you stay focused on the big picture.

5-sketchapp-multi-screen-view

6. Use layouts and your developer will love you

Seriously — design based on a web grid like Foundation, Bootstrap, or 960gs and your developer will be grateful. Turning design into code is a whole lot easier when you don’t have to build a bunch of custom layouts.  Of all of these front-end frameworks, Bootstrap is the most popular and versatile. Foundation is great too, especially with the new Foundation Mobile. 960gs used to be more popular but is beginning to be outdated (TutsPlus actually explains how to migrate from 960gs to Foundation). We invite you to check them all out and discuss with your developers before you pick one (Treehouse has a great piece comparing and contrasting Bootstrap and Foundation).

6-sketchapp-use-layouts

If you’re building in Bootstrap, it helps to set up your layout like this:

– Total Width: 1170px

– Number of Columns: 12

– Gutter on Outside is checked

– Gutter Width: 3px

       – col width: 95px

7. Export CSS Attributes

If you’re strapped for time, this is a lifesaver. Select any object or text layer, right click it and select Copy CSS Attributes. Fire up your text editor or notes and paste it in.

You can do this for all the complex layers in your mockup to make it dead simple for you or your developers to code. This is especially necessary when you’re dealing with gradient backgrounds or shadows.

7-sketchapp-export-css-attributes

8. Take advantage of Plugins and UI Kits

There are a bunch of great plugins that will speed up your design workflow.

As you might expect, we use the UXPin Export plugin (which also integrates with Sketch) to quickly turn high-fidelity mockups into an interactive prototype to get feedback from the team.

If integrating with UXPin will help simplify your workflow, check out this tutorial.

If you want to discover new plugins, we recommend you check out Sketch Toolbox. This little app lets you manage and install your Sketch plugins.

8-sketchapp-plugins-ui-kits

UI Kits will help you quickly mock up prototypes and early UI designs. You can customize them and add visual treatments later, but why reinvent the wheel? One of our favorite UI kits is the Bootstrap V3 GUI, which you can find on SketchAppSources here. If you’re designing for iOS 8, check out our free iOS 8 UI Design Kit (quite helpful since the 90 elements work with iPhone 5s, 6, 6+ and are compatible with Sketch and Photoshop).

ios8-sketch-photoshop-ui-kit

9. Engage with the Sketch community

While there’s tons of helpful tutorials, there’s no substitute for learning from those with experience. Paying it forward is a rule of thumb all of the best designers follow because they have been on the receiving end of it themselves. We’ve included some of our favorite Sketch resources and community sites.

Sketch Resources

Sketch Community

10. Make it work

The most important rule of all: if it works use it, if doesn’t, don’t. We discovered, then tested, then finally embraced Sketch through a series of tests on projects back in 2012. So far, it’s worked great for us. If these tips work for you, great! If not, don’t force it.

If for whatever reason you’re not satisfied with the other options available to you, Sketch might be worth checking out (here’s an interesting comparison between Sketch and Photoshop). If you’re already a Sketch convert, take these tips to heart when designing your next mockup.

Not all of these may apply to you, but it helps to know the landscape better. Got a tip or suggestion that belongs here? Let us know in the comments or on Twitter @uxpin. 

If you’d like to simplify your workflow, you can also check out UXPin’s integration with Sketch and Photoshop. Once the plugin is installed, just drag and drop your files and start adding animations and interactions to any layer for easy prototyping. If you’d like to start prototyping your Sketch files, go ahead and create a free trial below to get started.

Join the world's best designers who use UXPin.

Sign up for a free trial.
Narek Khachatryan

by Narek Khachatryan

Narek is a California-based product designer and user experience advocate. He’s currently building web and mobile apps used by some of the top Fortune 500 enterprise companies. When off the grid, you’ll find him reading, climbing rocks and exploring the great outdoors.

Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you