As UX/UI designers, we use Sketch on a rather regular basis.
Sketch is our bread and butter just like Photoshop is vital for photographers, so it’s important to know what plugins you can use to make your life using Sketch easier.
Lydia and I have been using Sketch for 5 years now. That’s why we wanted to share with you our favorite plugins that we just can’t live without.
Here are six UX, UI design Sketch plugins you should try.
If you know of InVision, then you’ve probably heard of Craft.
“Craft by InVision is a suite of plugins to let you design with real data in mind. Manage them via the new Craft Manager for incredibly easy updating.” – sketchapphub.com
The plugins that come with Craft include:
- Sync + Prototype: Probably the most important feature of Craft is that you can use it to upload your mockups directly from Sketch to InVision.
- Freehand: A fast way to collaborate on a mockup in real-time with others.
- Prototype: Create clickable prototypes for InVision within Sketch.
- Data: Add real data to your design with the click of a button. For example, you can replace text with an auto-generated name with one click.
- Library: Drag-and-drop assets/symbols that you and your team share from the cloud.
- Duplicate: Easily duplicate elements with this tool.
My company uses InVision, and having Craft has saved me tons of time.
If you’re considering accessibility in your design (which I hope you are), then Stark is a tool you absolutely must try.
“The suite of integrated accessibility compliance tools for product development teams.“ – getstark.co
Stark comes with a few plugins for accessibility:
- Contrast Checker: See if two elements meet AA or AAA contrast levels.
- Colorblind Simulation: Simulate the different forms of color blindness (yes, there is more than one) by previewing your designs as though you had that form of color blindness.
- (Coming Soon) Color Suggestions: Get suggestions for alternative, contrast friendly colors that are similar to your original non-AA or non-AAA colors.
- (Coming Soon) Seamless Export: Easily export your images in different file formats (e.g. .png or .jpg) with multiple sizing extensions.
Trust me, your company and your users will thank you for making accessible designs.
Runner Pro is for designers who want to quickly apply commands without having to manually find it.
“Perform Sketch actions quicker with your keyboard. Launch, search, and execute. Designing becomes a breeze.” – sketchrunner.com
Some of the commands you can do through Runner Pro’s “command bar” include:
- Changing an element without having to find it in the menu (e.g. transforming, re-sizing, masking).
- Searching for an artboard by name through a search bar and being taken to it immediately.
- Inserting a symbol by typing its name.
- Turning an element or group into a symbol.
- Mass applying a command to multiple elements (e.g. “Apply h2”).
- Installing Sketch plugins without leaving Sketch.
If you’re a Sketch pro, then give Runner Pro a try.
Batch Create Symbols is a very simple Sketch plugin that helps you convert a large number of elements into symbols more easily.
“This plug-in will create a symbol for every item that is currently selected.” – Paul Demers
There are two options for doing this through Batch Create Symbols:
- Select several elements and use the layers’ current names as the symbol names
- Select several elements and create a custom name for the symbols
It might be a simple tool, but it comes in handy with large and complex designs.
Just like Batch Create Symbols, Find and Replace is a simple tool that does exactly what its name implies.
“Finds text in selected layer(s) and all layers contained within – and replaces it with different text. Now updated to do partial, case sensitive and full-document matching.” – sketchapp.rock
I don’t think this one needs much explanation, but if you need to replace text in bulk, then Find and Replace is the plugin for you.
If you’re using Google’s Material Design in your mockups, then Sketch Material will make your life a lot easier.
“Sketch material is a sketch plugin that will help you generate complex material components like tables, chips, forms, etc” – websiddu.github.io
With Sketch Material, you can:
- Drag-and-drop Google Material icons into your artboards.
- Apply a Google Material pre-defined color to an element.
- Apply a Roboto font-family text style to a text element.
- Apply an elevation level (i.e. pre-defined shadow setting) to an element.
- Replace text with an auto-generated fake name or data.
Using Material Design can make your mockups look amazing, and Sketch Material can certainly help you do it more quickly.
When you need portfolio design inspiration, take a look at these 6 amazing UX design portfolios!
COVID has had unprecedented changes on the tech industry. Here are some changes that have occurred over the last few months.
Need inspiration? Check out these amazing examples of UX Design!