UX + Design

Sketch App Design: Set Up and Resources

Sketch App Design: Set Up and Resources

 

If you use Sketch you know about the abundance of tools and resources available to help improve your design. In this article, I'm going to show you how to set up your document and get it ready for the design hand off.

 

Plugins and Resources:

First things first, gather the necessary tools for your design. One of my favorite things about Sketch is the open source mentality when it comes to plugins and resources, designers and developers can share innovative ways to improve your design workflow.

 

CRAFT

This app comes from the awesome people at Invision. Here is what it does:

Freehand

It allows you to collaborate with your team in real time by grabbing your mockups right from Sketch, and throwing them on your browser. You can freehand sketch notes onto the screen, import images, and add text notes to the mockups.

When presenting work to clients, I think I'll stick with Invision since it’s a more organized way for the clients to add comments and view the mockups.

Sync

Just by clicking a button, it seamlessly connects your design to Invision. It also syncs all your exportable assets, which is great if you are using Invision Inspect. In case there are changes after the client review, it also makes it very easy to update your mockups in Invision, but that never happens ;-).

Data

This powerful little plugin can come in handy if you're working with dummy data. It pulls real content right from Sketch and you can add it directly to your design. It also gives you the option to pull from the web, your own files, and public APIs.

Library

For an easy way to create Style Guides, you click a button and it generates a new page in your Sketch file with all your colors and text styles. In this newly created page you can change any info to customize the Style Guide.

Another powerful feature from Library is the option to add assets to your team’s cloud. This is pretty neat but I do prefer sharing assets via Invision. However, I would give this a go if I were creating a complex app with a series of reusable elements that needed to be approved by the team.

Duplicate

It does what it say, it duplicates an element quickly and accurately. What makes it special is that you have total control. For instance, if I create a square that will eventually become cards for my layout, I can duplicate it vertically and or horizontally, then after I can go to Data and import images to all of those cards. That can be done within seconds, and everything is pixel perfect.

Craft Manager

It stays on top of your screen with all the other important stuff. Within it you can activate or deactivate any of the plugins within Craft. It’s also very handy when you have a new update.

Prototype

Speaking about updates, I can’t wait until the next one comes out. FINALLY, this will allow you to create interactions within Sketch! Which means if you want a button to connect to a different page in your mockup, now you can do that. You can also mirror your design to your mobile device, and preview all the interactions. Something I’m really excited about is the animations and transitions we will be able to create. I think this one will be a game changer.

Besides Craft, I use this a lot: Sketchappresources.com. It has a ton of great UI tools for you to use. If your team uses FontAwesome icons, they have the complete file with all of them as symbols, which makes it super easy to use and reuse.

 

Setting up your design within sketch

Best piece of advice I can give: NAME EVERYTHING. Name the pages, layers, groups... so pretty much everything. Make sure your naming conventions would be understood by someone that didn’t make your design. For example, if you name something “Cool_asset_for_here” no one will know what that means, in fact they may get upset and resent that asset. I suggest using simple but efficient and descriptive naming conventions. Group layers, so if you have 5 tabs, group them all together and call the “Header_tabs” within that group categorize each tab. If there are more elements inside those tabs, group each one, especially if they have to be exported. You want to make sure each element can be exported separately. Another way to do this is using prefixes, “ic_” for icons, “img_” for images. It’s best to work with the developers to come up with the proper naming conventions.

Use pages, this keeps your artboards in control. If you can categorize each page, it will make your designs more organized and your file will run faster since it won’t need to process 132 different artboards.

 

Here are some handy shortcuts:

Command+R - Name Layer

Command+G - Group Selected Layers

Press and hold Command - Select layers inside a group. No need for clicking forever inside a group to select that pesky text you're trying to change.


Exporting assets

Sketch makes it super easy to export assets: Select the layers you’d like to make exportable and click on the bottom left of the screen, which you can find the Export menu. Make sure to make your asset exported @1x and @2x. You can also add prefixes and suffixes to all your files. If you are using Invision Inspect, making assets exportable is key for a smooth design handoff to the dev team.

 

Preparing your designs for team and client review

Once you’re finished with your designs in Sketch, you can sync them to Invision using Craft Sync. This will throw all your artboards and assets into your Invision file. In Invision, I like to add comments explaining functionality, and changes that were made. By adding comments we can eliminate a guessing game and highlight the changes for the dev team.

Make sure all your artboards are named properly in Sketch, because Invision will use those names to organize your mockups. You can always change them in Invision but it makes it easier if you already did so in Sketch.

Invision has a handy tool called Workflow, which can be found in the main mockup nav. If you are used to an agile workflow you know how this works. It’s pretty simple, just drag the mockups that are up for review and already approved to the corresponding columns. This updates the mockups on the main page with a yellow or green dot, which represents what stage those mockups are in.

If you have several versions of a page that are up for review, you can organize them by adding a label above the main mockup view thumbnails. Once one version is approved, you can archive the other versions, keeping them out of the main view. You can access your archived screens by selecting the dropdown on the Screens tab in the main nav.

Design Handoff

Now to the design handoff... I think we should rename this stage, since you never really hand off the design, it’s more of a next step in the collaboration with the development team, but I digress.  Invision has this amazing tool called Inspect, which is fueled by using the source files synced from Craft Sync. Your Invision files are now super-powered with real data used to create your designs. Inside Inspect you can view the colors, text styles, measurements, and assets improving the design-to-development process for everyone. Another cool feature is the real code can also be found in inspect, the css is right there on the screen.

Accessing Inspect is super easy; in Invision you can click in the “</>” button found right next to the comment button. BOOM! Like magic, all your sketch layers are right there, and all your assets can be easily exported if made exportable before syncing with Invision.

From this point the development team should have access to all necessary information and assets. If you follow these steps, they won’t hate you for your poor naming conventions, but remember to keep your layers organized and clear.

In conclusion, what makes me go back to this workflow is that it covers all aspects of the process from creating a design, to team collaboration, client approval and handing the design off to development. These apps are constantly evolving and tuning up how they interact with each other.

 

Here are some other plug-ins for Sketch you may want to check out:

Social Media Preset Sizing

This is a plugin for Sketch App that adds artboard presets for the most common image dimensions of different social media platforms.

 

Dynamic button plugin for Sketch.app

Dynamic button plugin for Sketch.app allows to create buttons with fixed paddings no matter what text you add.

 

Sketch Icon Stamper Plugin

Takes full-sized art for an icon and creates multiple sizes of it so you don't have to.

 

Color Contrast Analyser for Sketch

A Sketch plugin that calculates the color contrast of two layers and evaluates it against the WCAG. If only a single layer is selected, than it will calculate with its artboard background color. The test may pass AAA, AA or fail because of a lack of contrast. And even when you do not need to meet those requirements, you can get a feeling for the contrast when you get used to the values. This might help you design accessible content.

 

Material Design Color Palette

Sketch app plugin for displaying Google Material Design color palette.

 

Clear Styles

Sketch.app plugin for clearing all layer style properties. Selected layers will reset to the default style properties defined by the user. Works with text and shape layers.

 

Up Next

Ready To Get Started?

Schedule a complimentary 30-minute strategy consultation with one of our Drupal experts as early as today. We promise...they don't bite!