Must-Have Chrome Extensions for Designers 2021
Are you using Google Chrome as your main browser? Make sure you utilize Chrome extensions to speed up your design productivity and workflow. Below you'll find our top picks for Google Chrome extensions that are must have for designers!
They are especially useful for
- Detect colors and fonts from websites
- Capturing many images all at once
- Gathering inspiration for your design projects
All Google Chrome extensions are free and are available from the Chrome Web Store. Happy reading!
Image from ColorZilla
Do you wish to pick up a color code from any page without searching? ColorZilla is your tool! It includes a Color Picker, Eye Dropper, Gradient Generator, and many additional advanced color features.
With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can analyze the page and inspect a palette of its colors. You can create advanced multi-stop CSS gradients.
2. Dark Reader
Image from Dark Reader
Being a designer working with the screen is inevitable nowadays. Do you struggle with bright screens? This eye-care extension enables night mode creating dark themes for websites on the fly. Dark Reader inverts bright colors making them high contrast and easy to read and work at night. You can adjust brightness, contrast, sepia filter, dark mode and font settings to your needs.
3. SVG Grabber
Image from SVG Grabber
Do you just wish to have some of the logos on some cool website? The original way is to go to inspect -> grab code -> convert over and over again which costs you lots of time. Svg Grabber is a tool to quickly preview, download and copy the code of all SVG icons and illustrations on a website with just a single button click.
Image from Window Resizer
Resize the browser window to emulate various screen resolutions. This Resizer is particularly useful for web designers to test their layouts on different browser resolutions.
The resolutions list is completely customizable (add/delete/re-order). You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.
Image from ColorPicker
If you're looking for a quick and easy to use color eye dropper with a zoom drag-able preview for fine-tuning, ColorPicker might be something you are looking for. ColorPicker contains webpage region magnification/zoom loupe features. Its zoom feature may help you to see pixel-perfect alignment accuracy during any web design adjustments.
Image from Whatfont
Finding the exact font on a website is not as easy if you want to quickly identify the typeface on each page. Whatfont is the tool you are looking for! Just hover over the font you are curious about, you could inspect web fonts! It is that simple and elegant. It also detects the services used for serving the web fonts. Supports Typekit and Google Font API.
7. CSS Peeper
Image from CSS Peeper
Have you ever wonder whats the button size, font, style is on a web page? Are you still inspecting them from the element? CSS Peeper is a CSS viewer tailored for Designers. It gives you an instant view of the hidden CSS style of objects, colors, and assets on the web.
Video from Eagle
As a designer, we love saving beautiful pictures or finding inspirations online. However, are you tired of downloading images one by one? or sometimes you encountered a webpage that forbids you to save the images? Eagle provides remarkable features to help you easily save web page images all at once, you can also save screenshots, and on top of that organizing them while you save!
The greatest part is while you save the images Eagle also helps you save the URL, so when you feel like revisiting the webpage all of a sudden, you know where to go!
PS: You'll have to download the Eagle App software to use this extension function fully.
Image from Mobile Simulator
Are you a designer who needs to constantly figure out the mobile site resolution? Mobile simulator allows you to test easily in a realistic context to keep a mobile-first mindset. You can test all the different smartphones and tablets on this simulator. It is also possible to take a screenshot of the smartphone in transparent PNG to insert it in an email, presentation slides, etc. if you need to present your work with your team.
10. Page Ruler Redux
Image from Page Ruler Redux
Do you want to get the perfect pixel dimensions and positioning to measure elements on any web page? Page Ruler Redux is a perfect designer tool, that allows you to get pixel-perfect measurements of web elements instantly. It creates a ruler to help you measure, you can resize the ruler by dragging by mouse or arrow keys. It also provides designer guides from the ruler edges for perfect positioning.
11. Image Downloader
Image from Image Downloader
Want to download images from a webpage? Like Eagle, while you browse any inspirations and images you like online, just one click you may download them as you wish! Image downloader can also filter the image by width, height, or URL, and more!
12. Fonts Ninja
Image from Fonts Ninja
Fonts Ninja is another awesome tool to help to identify fonts, CSS properties and provide information about fonts by checking available styles, foundry, and price! It can help you speed up your design workflow! You can even bookmark the fonts that you found on the website right within the extension.
If you wish to try the font you discovered on the website, you can download their macOS/Windows app to sync and try them in any software like Illustrator, Photoshop, Figma. etc.
As designers, we’re always looking for new tips, tricks, and tools to be productive and improve our design workflow. Hope these awesome and intuitive chrome extension that we gathered is useful for you daily and can help you focus straight into the design to create something wonderful!