7 Must-Have Chrome Extensions for Web Designers
Whatsapp Pinterest
Advertisement

As a web designer, what’s the software you absolutely must have on your computer? The chances are it’s Photoshop and Illustrator. And while those are the essentials of your design workflow, there are smaller tools you probably don’t know you need.

Unlock the "Google Chrome Keyboard Shortcuts" cheat sheet now!

This will sign you up to our newsletter

Enter your Email

The best thing is, you don’t even have to download them—just install these Chrome extensions and away you go. From identifying fonts on pages to measuring distances between web elements, these web design Chrome extensions will make your life easier.

1. Dropbox for Gmail

Dropbox for Gmail, a Chrome extension to preview Dropbox links

Dropbox started out as a file hosting service, but it soon discovered its major audience is designers, who use the service to share their work with colleagues. Because design files are often too big for email attachments, it’s easier to send a Dropbox link to the file.

Dropbox for Gmail makes the process even more convenient. When you link to your file using a Dropbox button at the bottom of the new email window, the recipient gets a sneak peek of what you’re sending. Links to image files will upload the images right to the email, and links to other types of files will generate a handy preview.

Install: Dropbox for Gmail

2. FontFace Ninja

FontFace Ninja, a Chrome extension that captures fonts on a web page

With thousands of fonts available, your typography possibilities are endless. Especially if you can identify a beautiful font you see somewhere and borrow it for your own project.

FontFace Ninja is a Chrome extension that helps you do just that. Much like the tools that find fonts from images WhatTheFont and 4 Alternatives to Find Fonts From Images WhatTheFont and 4 Alternatives to Find Fonts From Images Want to find fonts from images? There are online tools that can do it for you, including WhatTheFont and various alternatives. Read More it helps you identify the fonts you see online. The only difference is that FontFace Ninja reads the fonts coded into the page’s CSS, like the typeface of headings and body text.

When you launch FontFace Ninja, it will show you the information on the font you direct it to—and not only the typeface, but also the weight, size, height, width, and color. To bookmark that font, you’ll need an account at the sister service, FontFace Dojo.

Install: FontFace Ninja

3. ColorPick Eyedropper

ColorPick Eyedropper, a Chrome extension for capturing colors

No matter how good an eye for color you have, it’s hard to recreate a particular shade you saw online unless you know its RGB or HTML values. Luckily, you don’t have to guess if you have ColorPick Eyedropper.

Like the best color picker apps for Mac The 5 Best Color Picker Apps for Mac The 5 Best Color Picker Apps for Mac Need to find the perfect color on your Mac? Try these macOS color picker apps to identify, save, format, and copy colors easily. Read More , ColorPick Eyedropper will show you the values for any color you point at. The difference being that it’s always there in your browser and you don’t have to upload anything—just click on the icon and move the target to the right spot.

The extension reads colors from text, images, and pretty much anything you might see on a web page (even the ads). Once you capture a color, it shows you the HTML, RGB, and HSL values for it.

Install: ColorPick Eyedropper

4. Dimensions

Dimensions, a Chrome extension to measure objects on a web page

This open-source extension is a find for web designers, especially if you do one-time gigs for small businesses. When a client hands you down a website without any previous files or documentation and asks you to design “a page like this, but with different text and images,” figuring out the layout is a pain.

Dimensions lets you easily measure the height and width of any element on the page, as well as the margins between them. That makes it easy to recreate existing pages and double-check your own designs after they go into production.

Install: Dimensions

5. Visual Inspector

Visual Inspector, a Chrome extension to inspect web pages and provide feedback

Visual Inspector is a powerful feedback and collaboration tool for design teams, combining the features of the previous three extensions and adding even more.

In the Inspect tab, you can pick any element on the page to get full information about it, from dimensions to the file name. The Colors and Typography subtabs let you see the color palette and all fonts at a glance, while Assets gathers all images on the page in one place.

The Collaborate tab is where you can give feedback and have discussions with your team, and it’s easy to leave a comment by clicking on any element on the page.

Like most advanced tools, Visual Inspector comes with a price tag: you’ll need to pay from $9/user/month to add comments and sync changes. However, its basic features such as inspecting colors, fonts, and images, are free to use.

Install: Visual Inspector

6. Easy Screen Capture

Easy Screen Capture, a Chrome extension for taking screenshots

A screen capture extension may seem redundant, since taking a screenshot on Mac How to Take Screenshots on Mac: Tips, Tools, and Tricks to Know How to Take Screenshots on Mac: Tips, Tools, and Tricks to Know Need to take a screenshot on your mac? Here are the best shortcuts, tips, and apps for macOS screenshots. Read More is a breeze, and capturing your screen on Windows How to Take the Perfect Screenshot in Windows How to Take the Perfect Screenshot in Windows The best way to take a screenshot depends on the version of Windows you're on. We show you the subtle differences, give troubleshooting tips, and reveal the best keyboard shortcuts and tools. Read More is just a little more hassle. But Easy Screen Capture has quite a few selling points.

Most importantly, it lets you capture the entire web page, not just the area you see on your screen. That’s priceless when you need to report several issues on a long page, and capturing them all would take three to four screenshots.

Another neat trick is being able to copy the screenshot to clipboard and paste it right into a chat or an email, rather than hoard useless image files on your computer.

Install: Easy Screen Capture

7. Muzli 2

Muzli 2, a Chrome extension for design inspiration

Finally, there’s one crucial task you have to deal with every morning: shaking off the remains of sleep and getting into the groove. Muzli 2 by InVision will serve as your morning newspaper with curated articles on art, design, UX, and technology.

Muzli replaces your default Chrome tab and allows you to customize what you see there. Depending on your interests, Muzli will pick feeds for you, with websites ranging from Dribble and Behance to 99designs and Creative Bloq. Plenty of inspiration to scroll through while you’re sipping your first coffee!

If you think an entire browser tab packed with design content is too intense, Muzli also has a Lite version. It won’t override your default tab, and you’ll be able to access the feed whenever you like just by clicking the extension icon.

Install: Muzli 2

Get Chrome Extensions for All Your Design Tasks

The Chrome extensions on this list are no match for your design software, but they cover all the little things that come with being a designer—be it typography intel or collaborating with your colleagues.

Once you realize that the Chrome Web Store is brimming with tools, it can be hard to stop adding new ones. So learn how to manage your Chrome extensions How to Manage Your Chrome Extensions Without Any Bother How to Manage Your Chrome Extensions Without Any Bother Properly managing Chrome extensions can make your browser even more powerful. Here are some essential tips and tricks you should know. Read More before they get out of hand.

Explore more about: Browser Extensions, Google Chrome, Web Design.

Enjoyed this article? Stay informed by joining our newsletter!

Enter your Email

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Kavita Mevada
    March 15, 2019 at 11:36 am

    Thanks for providing such a nice information