Enhance your Sketch proficiency with this tutorial, covering important topics such as the use of recommended plugins, installation processes, accessibility contrast checking, colorblind simulation, and more.
This exercise is excerpted from Noble Desktop’s past web design training materials and is compatible with Sketch updates through 2021. Noble Desktop now teaches Figma as the primary tool for web and UX & UI design. To learn current skills in web design, check out our Figma Bootcamp and graphic design classes in NYC and live online.
Note: These materials are provided to give prospective students a sense of how we structure our class exercises and supplementary materials. During the course, you will get access to the accompanying class files, live instructor demonstrations, and hands-on instruction.
Topics covered in this Sketch tutorial:
How to Use Some Recommended Plugins
Exercise Preview
Exercise Overview
Sketch has a vibrant community of plugin developers which add functionality to Sketch. In this exercise, you’ll learn about some useful plugins.
Installing the Plugins for This Exercise
If you’re in a Noble Desktop classroom, we should already have the plugins installed, so skip ahead to the next section.
After you download a plugin (from whoever made it) just double–click on the plugin file (named something.sketchplugin) to install it. Download and install these 3 free plugins that we’ll use in this exercise:
- Cluse: https://cluse.cc
- Stark: www.getstark.co
- Sketch Measure: utom.design/measure
Cluse: Accessibility Contrast Checker
This plugin lets you make sure the text contrast levels are strong enough to be accessible to most people.
- In Sketch, go to File > Open Local Document.
- Navigate into Desktop > Class Files > Sketch Class > Pulse and double–click on Prototyping Done.sketch to open it.
- Select Sign up for emails and get 10% off! and its brown background.
- Go to Plugins > Cluse.
- Under WCAG Compliance Status notice this passes both contrast tests.
- Click OK.
- Select the footer text (About Us, Contact, etc.) and its light colored background.
- Go to Plugins > Cluse.
- Under WCAG Compliance Status notice this does not pass the stricter AAA test.
- Drag the Foreground Color slider slightly darker until it passes the AAA test. (Alternatively you could make the background lighter.)
-
Click OK.
Learn More About Accessibility & Color Contrast
Difference between AA and AAA compliance: tinyurl.com/aa-vs-aaa
Short guide to the accessibility standards: usecontrast.com/guide
Official Web Content Accessibility Guidelines: tinyurl.com/w3-contrast
Stark: Colorblind Simulation & Contrast Checker
This plugin lets see what your designs look like to colorblind people (and it checks color contrast similar to the Cluse plugin we just saw).
- Select Sign up for emails and get 10% off! and its brown background.
-
Go to Plugins > Stark > Check Contrast.
Notice this passes all the contrast tests. This is similar to the Cluse plugin, but Cluse lets you interactively change the color which is nicer.
- Click Done.
- Go to Plugins > Stark > Colorblind Simulation. (Cluse does not have this feature.)
- From the Artboard menu choose Autumn Collection.
- Set Zoom to 100%.
- Scroll down to the first row of product photos.
- At the bottom of the photo on the right, notice the red heart.
- From the Colorblind Type menu choose Protanopia.
-
Notice the red heart no longer stands out much.
Maybe adding something like a white outline could improve the contrast of the selected versus deselected states.
Click Done.
Sketch Measure
For privacy focused companies that can’t legally upload to services like Sketch Cloud, the Sketch Measure plugin can be a useful alternative.
Additionally, if you do not renew your Sketch license, you cannot upload to Sketch Cloud. Sketch Measure is a free alternative to Sketch Inspect.
- Go to Plugins > Sketch Measure > Spec Export.
- The default settings are fine, so click Save.
-
The interface is very dark and hard to read… they should have used Cluse!
As shown below, check on the box to the left of Screens to check on all artboards.
- Make sure Advanced mode is checked (Otherwise is artboard will be exported as its own webpage. That could be useful, but I think one webpage with all artboards is easier to navigate)
- Click Export.
-
In the dialog that opens:
- Export To: Name it Pulse Specs
- Navigate to the Desktop > Class Files > Sketch Class > Pulse.
- When done, click Export.
- When it’s done, the new Pulse Specs folder should open up. In it double–click on index.html to open it in a browser.
- On the left, click on the Home Page artboard.
- Try clicking on some things to see the info and code that is displayed on the right.
-
With something selected, hover over other elements to measure the distance between them.
NOTE: While this is a webpage that can be viewed by anyone that has the files, it has not been uploaded to a webserver so you can’t simply share it via a URL (a web link). To share this with someone else, you’ll have to send the entire folder somehow (Dropbox, zip it and email, etc.).
- Close the web browser window.
Return to Sketch and close the file. You don’t have to save changes.
More Recommended Plugins
Visit nobledesktop.com/sketch-links for more plugins you may be interested in.