The UX Designer’s Best Companions For Sketch 🔑
A toolbox full of efficiency
By now, I think that we can all agree that Sketch is best design tool on the market. Aside from offering one of the simplest interaction models I’ve ever experienced (I switched from Fireworks to Sketch literally overnight when I got my first MacBook in 2014…it was a dark time in my Windows days, but it sure built character).
Part of Sketch’s adoption is also due to it’s ease-of-integration with other 3rd-party applications and its open-arms approach to plugins.
There’s a sea of tools and plugins. This won’t be an exhaustive list (you can use google.com for that). Instead, it’s what I consider a fantastic mix of tools for UX Designers (that is, designers focused more on scalability, process, communication, and less on visual experimentation and animation).
Sketch Faster and More Efficiently
That’s the magic of plugins. Some plugins come nicely integrated with hot keys, and others have full-fledged interfaces inside of Sketch.
Sketch Runner by Roy van Rooijen (and team!)
It’s like Spotlight for Sketch. It’s for more advanced users partly because most command-line style interfaces are for people who know what they’re doing, but also because the plugins and symbol functionality it streamlines is more geared toward experts. That said, at the most basic level it makes navigating styles and symbols a hell of a lot faster than the clunky Sketch dropdowns.
Rename Layers by Rodrigo Soares
I use this all the time. Bulk rename layers, or do find and replace. For the endlessly organized designer, it’s a must-use.
Craft by InVision
I mainly use Craft Data to pull sample data, and Craft Sync to push mockups to InVision so they can be viewed using Inspect (more on that later).
Nudg.it by Anthony Collurafici
If you’re using an 8-px grid for you interface (which you should), then you absolutely need this tool. It lets you change what the small and large increments are for nudging in Sketch (defaults are 1px and 10px, respectively). Gone are the days where I would SHIFT-Arrow Right, then Arrow Left+Arrow Left to move an object to the right by 8px. I can’t think of a more simple tool that has saved me so many annoying clicks in Sketch than this one.
Auto-Layout by Anima App
When Sketch released new behaviors for grouping, it was a lifesaver for those needing to mockup responsiveness. The biggest downside is that the behaviors of this control are a bit obscure. Auto-Layout fixes that with an easy-to-use plugin that helps you create responsive layouts
Share With Stakeholders
Marvel by Marvel
This is quickly becoming our new favorite. Everyone knows InVision at this point so we’ll focus on this app. Some key distinctions here is that you can make your designs public in a showcase or look at other designers’ work. It also has an AppleTV app for showing tvOS apps. Many designers still aren’t designing in this medium but it’s changing rapidly.
Faster Development Handoff
This has come a long way in the past 18 months. You now have two viable options, with one being far more mature than the other. You also have the option to code your own designs, which allows you to write condescending articles telling all of us designers how stupid we are 🙂
Zeplin by Zeplin
Love the team and the support this app has. In a nutshell, it killed the UI spec. Export artboards from Sketch that you want to make available to developers, and it syncs to a shareable URL. Developers can click on any graphical element and get almost any property (border, color, font, etc.) with corresponding CSS. Zeplin smartly stays out of HTML which is way too difficult to extrapolate from a UI design.
InVision Inspect by InVision
This has almost identical functionality of Zeplin but works as an extension of the InVision prototyping product. It’s nice that it fits in the suite but I warn you that it shares your source Sketch file as well via the download assets button in the upper right which is probably a deal-breaker for those who consider source files private.
Animate your UI
The key decision to make is how complex you want your animation. I’m listing two options here for the simple and more advanced. Also, note that I’m leaving off full-fledged animation software like After Effects and Flash (lol jk) which are not well-integrated into the product design workflow.
Principle by Daniel Hooper
Principle is a very Sketch-like interface for adding simple animations and transitions to your design. It requires that your layers are grouped and named well because they get imported into Principle with those names and controlling the objects is a lot easier with good names…HINT HINT.
FramerJS by Framer Team
I haven’t played with this a lot since I don’t do much animation, but it’s much more powerful than Principle. It’s harder because you have to write actual code. But it’s great because you have to write actual code.
Manage Resources
IconJar
There are some other alternatives on the market like Lingo by Noun Project, but this one is cheaper and works like a charm ✨. IconJar lets you easily manage icons, and as a bonus, you can drop in fonts and it will create SVG’s for every glyph. This means you can drop in an icon font and get all it’s characters as individual symbols rather than having to use painful cheatsheets. More and more icon designers are making their icons compatible with IconJar out of the box, which means your massive icon sets will be organized with no effort.
Simply Your Resources
As we’ve stated in the past regarding application design, most UX designers build apps without the luxury of custom visual assets. This list will help pare down the sea of resources into a small set that you can use for free.
Icons
- Google Material Icons — for MD projects, this is the main set.
- Nova Icons — a great extension set of icons with an MD-feel.
- Nucleo — diverse and growing set of icons that comes as a native app which gives you control over radius, color and size.
- Magicons — a smaller set but great as a base for most apps.
Fonts
Picking fonts for UI Design isn’t exactly rocket surgery because you just have to pick a legible sans-serif that is versatile and legible, which has to work on buttons, labels, headers, etc. I’ll avoid listing TypeKit Fonts here because, frankly, there are too many subtle variations of fonts that fit the bill. The free Google fonts below will typically work for most of your projects.
- Roboto — this is a great font but very tied to Material Design, so it can be hard to use outside of MD-based projects.
- Open Sans — Most versatile font of the bunch. This has been in fashion for years and shows no signs of slowing down. It has plenty of weights for all your UI needs.
- Lato — I don’t use this for every kind of design because it has some thin strokes that don’t always render well. It is elegant though and can be great for headers with a different font used for UI controls.
- Cabin — Almost as versatile as Open Sans and not nearly as ubiquitous.
- Montserrat — not as versatile but I often use it for wireframes. It’s a perfect fit for concepts or apps with a softer feel.
- Nunito — a new font from Google that feels like a free version of Proxima Nova Soft at first glance
- Jaldi — just enough style to give your UI some flair. It also renders well at small sizes.
Fin. Hopefully it’s obvious that this is not exhaustive. These are just our favorite companion apps for Sketch while we work on UX Power Tools. If you want us to add more, we will try your plugin or app for $65K, or however much a new Tesla costs 🚗
When I’m not on Medium, I’m working on Sketch tools at UX Power Tools to make you a better, more efficient designer. Follow us on Twitter @uxpowertools. Follow me too if the spirit moves you!
