A Designer’s Secret Weapons
This one time I walked by my colleague’s desk and saw them take a screenshot 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, “Stop stop stop — let me change your life.”
I consider myself a power user, and if something takes me longer than five 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 add-on, plug-in, app, whatever, to do what I’m trying to do faster.
In addition to mastering your craft and tools, a big part of being a designer is staying up to date with trends and news. One of the best things you can do to stay relevant is immersing yourself in as much new content as you can. I suck at staying on top of the news, so I’ll give you my secret weapons on how I keep myself in the know.
Most of the tools in this post will be specific to designers using Sketch, but a lot will still be useful to product/project managers who work closely with designers. We’ll go through Chrome extensions, apps, Mac settings, email subscriptions, and Sketch plug-ins that will help you actualize the pro you always knew you were.
This extension lets you inspect any text on a page, and it will give you its 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 they look. 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.
Familiarizing yourself with different fonts is good practice to increase your mental font library. Plus it’s 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, then allows you to download it 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.
Hover this eye-dropper over anything on a 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 by it. When you open a new tab in your browser, you see all these awesome resources and sites available, and it also surfaces big news events like when companies create their own font or have an initial public offering, 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.
These GIF screenshot tools are 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 by dragging around the area you want to capture and send it to them as a shareable link. Easier for you, easier for them. Also great for 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. It allows for a lot of customization, and you can choose where to upload things, with extremely fine settings. I like that I can customize a hotkey to trigger the GIF screenshot, specify exactly where it’s being uploaded, and even automatically shorten the URL. 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 on a Mac, and ShareX will capture GIFs of unlimited length. 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 seven seconds of recording time, and the upload speed can be slow. It also brings up the site 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 who needs to occasionally use more advanced tools than what Paint offers? Or maybe your company is on a budget and can’t provide more seats on your Sketch plan? I’m here to change your life. 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 then 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 definitely a learning curve, but Invision is doing their best to teach people via weekly live webinars that you can attend and ask questions. Why do I choose this over another app, like Principle, you ask? 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, whereas with Principle, only you are allowed to click around the interactions. Recently they’ve also updated their inspect tool, so now you can even inspect the animations in a handoff process.
It’s fully available to PC and Mac users now, but it’s still in beta at the time of this writing. They are constantly making fixes and improvements, so I frequently run into bugs or usability problems that can make it hard to use. But it’s still free, so...
This nifty tool makes it so that the window you have selected pops into the largest screen size without going into full presentation mode (which is what you get when you click the green dot on a window). No more clicking around and dragging shit all the time. With this tool, I just type Cmd+Control+Alt+M, then Cmd+. (period) in Sketch (which 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 — a free 3D mockup tool for phones where you can upload your screen and get a mockup of any angle you want, with or without glare, with or without shadow, etc. Then you can save your image as a .PNG. Oh my god, it’s too good. They’re trying to add more devices in the future, so keep this bookmarked.
My go-to source for free clean mockups without any random people in them. They have a variety of mockups such as devices, apparel, packaging, products, stationery, and more.
Rebind your screenshot settings in Preferences
Most people already know that Cmd+Shift+4 will allow you to select an area to screenshot and save 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 selected 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 or an email without needing to open your Finder. Because I normally use screenshots to show somebody something and not for saving, I don’t want to have to later delete the useless screenshot from my desktop. Knowing that, you can rebind your keys so 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.
Rebind your Sketch keys
There used to be a plug-in 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 a “Resize to Fit Artboard” button in Sketch. 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! 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 its own system of icons, there will be times when you’ll need an icon that you don’t have. Say all you want is an info icon as 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 type in a meaningful keyword to search, hunt through the results, click to download, remember to log in, agree that you’ll credit the designer, and then plop it into your design and scale it so that it fits. Instead, just download Material’s icon font, which is an open-source font made up of icons (think webdings for old schoolers). Then you can copy an icon from this cheat sheet, paste it into your design, change the font to Material Icon, and you’re good to go. And like with any font, you can easily change the color and the size.
I love TLDR because it’s literally that — short summaries of the biggest news stories in each of four categories: Tech, science, programming, and miscellaneous. This one is great if you’re in tech or care about it, and it’s good in general to stay aware of big things happening.
I highly recommend this one, because it’s an easy curation of just five UI animations, once a week. I like that Ramy Khuffash chooses a mix of small micro-interactions as well as more experimental or intricate animations. 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 regarding news, design tools and resources, and learning. I’ve been following Kukharenko’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 of 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.
Pick something else you’re into
Being a good designer means staying up to date with other things in the world, 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 the top news and psychology sections of ScienceDaily, because I studied and still enjoy learning about those subjects.
Robinhood Snacks is a new “three-minute daily newsletter with fresh takes on the financial news you need to start your day.” I love them — super sassy and casual. I’d like to think their writing style is very much like mine… or mine is like theirs. You’ll have a blast reading about stocks and how tech companies are doing.
Anima does all sorts of cool things that I recommend you investigate, but I use it mostly for their stacking feature. For a group of items you want to stack, 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 remain. 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, for instance; 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 that Sketch doesn’t keep the artboard names in the slice, which generally has helpful information like the page name or the variation number. But sometimes a screenshot won’t capture all the details, like if you want to slice up a flow of 20 artboards. If you used a slice, now you have 20 nameless artboards in your PDF. Problem. When you run the Name Artboards plugin, it will automatically generate a text layer name above the artboard, so that when you export your slice all the artboard names will be included.
Here’s one for system designers and organized users. When you run Symbol Organizer, your symbols all get rearranged neatly into place, with label text, divided by folder names, all 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 are 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, the changes are applied. It’s $20 for a license, and there’s also a similar tool for text styles called Text Style Manager, which is $10 for a license.
Systematically rename your artboards or layers however you like. ’Nuff said.
I needed this plug-in 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 one of complete doom. This plugin finds your text and replaces it with whatever you want. Simple, but it’s a lifesaver when your file is getting really big.
This is the same as Find and Replace except it’s for text inside symbol overrides, which Find and Replace won’t be able to handle.
I’ve shown you mine, now show me yours
Well, there you have it. Those are my secret weapons for saving hours of time. I didn’t include some obvious ones like the Craft plug-in, which is essential to designers who use Invision. If you’re a designer, share this with your PMs or with people interested in design, because they’re often the ones who need these tools and tricks the most. There are 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 know something I don’t, comment below and tell me about it!