A designer’s secret weapons: plugins and tools of the trade

There was this one time I walked by my colleague’s desk, saw them taking screenshots of a section of a screen, scroll down, take another screenshot, and then slowly sew the screenshots together in an editing tool. I was like stopstopstop, let me change your life.

I consider myself a power user and if something takes me longer than 5 seconds to do, or is significantly delaying my workflow I instantly think there’s gotta be a better way. So I dig pretty deep and search for an addon, plugin, app, whatever, to do what I’m trying to do. Most of these plugins will be specific to designers using Sketch, but a lot will also still be useful to product/project managers who work closely with designers.

A big part of being a designer is staying up to date with trends and news. And the best thing you can do is really indulge yourself in as much new content as you can to stay relevant. I suck at reading the news so I’ll give you my secret weapons on how I keep myself in the know, which is mostly short summary email subscriptions.

We’ll go through chrome extensions, apps, mac settings, email subscriptions, and Sketch plugins to actualize the pro you always knew you were.

This extension lets you inspect any text on a page, and it will give you the full specs like the size, weight, line height, color, and even alternative fonts. Alternative fonts are coded as backups when the browser for whatever reason can’t render the preferred font. In the second screenshot, you can see that the preferred font is Proxima Nova and the alternative is Helvetica. This extension is extremely important for any designer whether you’re already a pro or just starting out. By frequently inspecting fonts you can start to familiarize yourself with different sizes and how that looks. Because I do this so often now, I can generally tell the difference between a 17px font and a 16px font. Be sure to also take note of line heights (the vertical spacing in paragraphs), as this is something not enough people think about.

Also familiarizing yourself with different fonts is good practice to increase your mental font library. Plus it’s just useful when you’re like “Wow, that’s a great font. I wonder what they’re using.”

I’ve changed many peoples’ lives with the discovery of this extension. Full Page Screen Capture creates a screenshot of an entire page with a click of a button, which you can download as a PNG or a PDF. No more sewing together pictures. Jeez how much time have you wasted doing that? You know what, don’t even answer that. You’re welcome.

It’s exactly what the title is, it’s an eye dropper for anything on the web page, and it’ll give you the hex value, RGB, or HSL (whatever that is).

I love this extension. I consider it part of my stash of secret weapons because I never fail to be inspired. When you open a new tab, you just have all these awesome resources and sites available. This is also great because it surfaces big news events like when companies create their own font, or go IPO, so it’s a two in one for design and news. If you create an account, you can also bookmark your favorite pieces of inspiration, and trust me you will want to. Should definitely get this if you don’t already have a plugin that does something when you open a new tab.

You’ll want one of these GIF screenshotting tools. You can drag around the area you want to capture, and then it’ll save as a shareable link that you message to coworkers. This is very handy when people are like, “How do you change the type style?” Instead of typing out a set of instructions, you can just capture a GIF and send it to them. Easier for you, easier for them. Also really handy when you want to show a hover interaction or a series of interactions to someone easily.

If you are on Windows OS, I recommend using ShareX. They have a lot of customization and you can choose where to upload things, with extremely finite settings. I like that I can customize a hotkey to trigger the GIF screenshot, and I can choose exactly where it’s being uploaded, and even for the URL to be automatically shortened. To be honest it’s a bit overwhelming because you have so many options, and their UI is a bit unclear. However, it’s a free, lightweight program, and there’s an official ShareX Discord to get live help. You can also do a static screenshot of a cropped area like how Macs do, too. Gyazo is available on PC as well, but GIFs are limited to 7 seconds whereas ShareX is unlimited. ShareX is only available on Windows.

On a Mac, so far I’ve been using Gyazo for my GIF snippets. It’s not perfect because I’m only limited to 7 seconds, and the upload speed can be slow at times. It also brings up the site where you can use to share your link every time you take a GIF, which to me is really annoying. I’d rather just take the GIF and then immediately paste the link the someone, but it does its job.

Are you a non-designer that needs to occasionally use more advanced tools than what Paint offers? And is your company on a budget and can’t provide more seats on your Sketch plan? I’m here to change your life. Download this. Invision Studio is freaking FREE for both PC and Mac users. It’s a vector tool, meaning it can read .EPS and .SVG files. And, it can even open Sketch files. So it can do basically anything that Sketch can, which is more than enough for whatever you want to comp out. This one is a no brainer.

If you’re a designer, I still recommend downloading it. I work my designs in Sketch and I use this as an animation prototyping tool. You can copy and paste your artboards directly into Invision Studio, and start making links and motions. I’d say there’s a learning curve, but Invision is doing their best to teach people via weekly live webinars that you can attend and ask questions. But the reason why I choose this over Principle, is because you can publish your work and send a link of the animated prototype to someone. When that someone opens the link, it’s a clickable, animated prototype so they can touch and feel all the interactions. Recently they’ve also updated their inspect tool so now you can even inspect the animations for a handoff process. With Principle only you can click through and make a gif of you clicking around.

It’s fully available to PC and Mac users now, but it’s still in beta sorta. They are constantly making fixes and improvements, yet I frequently run into some bugs or usability problems that make it hard to use. But I mean it’s still free so, whatever.

This nifty tool makes it so that the window you have selected pops into the largest screen size without going into presentation mode. No more clicking around and dragging shit all the time. I use Cmd+Control+Alt+M. I probably couldn’t live on a Mac without this, because if you click on the green dot on the programs it goes to full screen which is not what I want. With this tool, I just go Cmd+Control+Alt+M, then Cmd+. (period) in Sketch (toggles all the panels off). Bam. Instantly go from working mode to presentation mode. What a baller. You can also use hotkeys to put things to the left and right for a split screen mode.

Not an app but a website. This is a free 3D mockup tool for phones where you can upload your screen, and get a mockup of any angle that you want, with glare, without glare, with shadow, without shadow, etc. Then you can save your image as a .PNG. Oh my god, it’s too good. They’re trying to come out with more devices in the future so keep this bookmarked.

My go-to source for free clean mockups without any random people in it. They have a variety of mockups such as devices, apparel, packaging, products, stationery, and more.

Most people already know that screenshotting a cropped area is Cmd+Shift+4. This screenshots the area and saves it to your desktop. If you want to send the file to your friend, you still need to open Finder, and drag and drop that file. What a pain. What most people don’t know is Cmd+Shift+Alt+4 screenshots a cropped area and saves it to your clipboard without creating a file on your desktop. That means you can take the screenshot and immediately paste it in Slack without needing to open your Finder. Because I normally use screenshots to show somebody something and not for saving, I don’t want to later delete the useless screenshot from my desktop. Knowing that, you can rebind your keys such that Cmd+Shift+4 will just save to your clipboard and not create a file, and Cmd+Shift+Alt+4 will save to your desktop. Instant win.

How to do it: Go to System Preferences > Keyboard > Screen Shots > Change Shortcut.

There used to be a plugin called Sketch Keys where you could bind any function in Sketch to a hotkey, but it has been deprecated. The workaround for this is you can create app-specific shortcuts in Mac settings.

There also used to be this button in Sketch next to the pins that was “Resize to Fit Artboard.” Man, I thought it was so handy, that I used Sketch Keys to bind “Resize to Fit Artboard” to Cmd+Shift+R. It was a huge part of my workflow because I could just paste in a screenshot, put an artboard around it half-assedly, and use the shortcut to get a perfectly fitted screen. Now I’ve bound that in my preferences so I can still do the same thing, yay! I also got used to Illustrator commands for “move to front” and “move to back” and wanted to keep those, so I’ve rebound them to Cmd+Shift+] and Cmd+Shift+[ respectively.

You can bind anything that appears as a dropdown in the menu bar; If you see it you can do it.

Here’s how to do it: Go to System Preferences > Keyboard > Shortcuts > App Shortcuts > Click the + button > Add Sketch as an application > Type in the exact name of the menu command that you want to add > Give it your new shortcut.

This is the fastest way to get a placeholder font into your design. Even if your company has their own system of icons, there’s gonna be a few times where you’ll need an icon that you don’t have. For example, all you want is an info icon for a placeholder. You don’t actually care how it looks, as long as it’s somewhat decent and gets the meaning across. You already hate using The Noun Project because you have to actually look, type a meaningful keyword search, download it, remember to log in, agree that you’ll credit the designer, and then plop it into your design and scale so that it fits. Just download Material’s icon font, which is literally an opensource font made up of icons (think webdings for oldschoolies). Then you can copy an icon from this cheatsheet, paste it into your design, change the font to Material Icon, and you’re good to go. Like a font, you can change the color and the size.

I love TLDR because it’s literally that — a summary of the biggest pieces of news in less than a paragraph for each thing. There’s two news pieces in each of the 4 categories: Tech, science, programming, and miscellaneous. This one is great if you’re in tech or care about it, and just good in general to keep in the know of the big things happening.

I highly recommend this one because it’s an easy curation of just 5 UI movements, once a week. I like that Ramy Khuffash chooses a mix of both small micro-interactions as well as more experimental or inspirational movements. I think exposing yourself to more animations helps you think bigger about how you can elevate your own designs. After all, a web page isn’t a static PDF.

Alex Kukharenko sends out the best emails about the latest design tools and hints. He curates awesome articles in the wild regarding news, design tools and resources, and learning. I’ve been following Alex’s emails for quite some time now, and I genuinely get excited when I receive them because there’s such a good mix of news and tips and tricks. Because of his emails I’ve felt that I’ve become an even faster power user, and more informed as a designer as a whole. I’ve grown a lot over the years, thanks to his email digests.

Adam Silver is a god at the dreaded abyss of forms. As a developer gone designer, he sends monthly articles about good practices for designing forms. I first found him by reading his articles Floating labels are a bad idea and Inline validation is problematic. I enjoy his insight because he can explain his design points by grounding them with his coding background.

As I mentioned, being a good designer also means staying up to date with other things in the world too, because the more you know, the more you know. I know, it’s hard, ain’t nobody got time for that. That’s why the best types of emails are the ones that give you a short summary of a bunch of news headlines. I personally subscribe to top news in ScienceDaily, as well as the psychology section of ScienceDaily because that’s what I studied and is what I enjoy.

Robinhood Snacks is a new “3-minute daily newsletter with fresh takes on the financial news you need to start your day.” Love them, super sassy and casual. 10/10. I’d like to think their writing style is very much like mine…or mine is like theirs, I don’t know. You’ll have a blast reading about stocks and how tech companies are doing.

Anima does all sorts of godly things that I recommend everyone to look in to, but I use it mostly for their stacking feature. For a group of items you deem as a “stack”, let’s just say plain rectangle shapes, you can automate how many pixels of padding are between them, for example 20px. When you stretch your stack, the elements will grow but the 20px padding in between will always be the same. You can also shift the order of things in your stack just by dragging and dropping, and the items will automatically be aligned and the spacing will be in place. It’s basically flexbox but in Sketch. This has been a lifesaver when I work on list items, menu items, and designs that require constant reordering.

Sketch has a neat tool called Slice that lets you export an area of your file to save. This is useful when you have three artboards and want to show someone the different variations of a comp, so instead of taking a low-quality screenshot, you can draw a slice around the artboards and export it. The reason why some people would still rather do a screenshot is because Sketch doesn’t keep the artboard names in the slice, which generally has helpful information like the page name or the variation number. So that was an easy example. Sometimes you’ll want to slice up a flow of like 20 artboards, and in this case a screenshot can’t capture all the details. But if you used a slice, now you have 20 nameless artboards in your pdf. Problem. When you run the plugin, it will automatically generate a text layer name above the artboard, so that when you export your slice all the artboard names will show.

Here’s one for system designers and OCD users. When Symbol Organizer is run, your symbols all get rearranged neatly into place, with a label text, divided by folder names, and all done alphabetically. No more sweating looking for symbols in your symbols page.

Here’s a big one if you have a large library of symbols and you’re trying really hard to make sure the naming convention and folder placement is all perfect. This is probably how all Sketch designers wished the symbol folder management worked; You can simply drag and drop symbols or entire folders into another location, and also easily rename things. When you hit save all changes are applied. It’s $20 for a license. There’s also the same thing but for text styles called Text Style Manager, which is $10 for a license.

Systematically rename your artboards or layers to however you like. Nuff said.

I needed this plugin when I had a 30 screen flow and the PM was like, yo we’re changing “price” to “offer,” and I swear the look on my face was complete doom. This plugin finds text that matches your text and replaces it with whatever you want. It’s a lifesaver when your file is getting really big and for those moments of doom.

This is the same as Find and Replace except it’s for text inside symbol overrides. Find and Replace won’t be able to handle text inside overrides.

Well there you have it. Those are my secret weapons on how I get by as a designer, saving hours at a time. I didn’t include some other more obvious ones like Craft plugin, which is essential to designers who use Invision. In general I hope you found this article helpful, especially if you’re a non-designer just browsing around. If you’re a designer, share this around with some PMs or people interested in design, because I often see that they’re the ones who need these tools and tricks the most. There’s a lot of great tools out there to help one’s workflow, and I’m always looking for better, faster ways to do something. So if you learned something from this article and you also know something I don’t, comment below and let me know about it!

A designer’s secret weapons: plugins and tools of the trade

Research & References of A designer’s secret weapons: plugins and tools of the trade|A&C Accounting And Tax Services
Source

Share on Facebook

Tweet

Follow us