Summary of Extensions for Designer on the browser

As a Designer, you definitely need tools to analyze images, colors, and find patterns. If doing it manually is quite time-consuming, you can ask for the help of experts Extension on the browser. In addition to web browsing, the browser also supports a number of extensions (Extensions) to help you manipulate your requests faster. For example, find the name of the font being displayed, resize the browser window, get the color code…. You can refer to the Extensions for Designer below:

MAI LAN IMAGE SEARCH – Extension to find and download stock photos online

Mai Lan Image Search is an Extension for Designer that helps to quickly search, download FREE and high quality images, stock from top websites… This is an Extension written by Vietnamese people. With features like:

• Quickly search for free stock images and stock from multiple websites.
• Easy quick search by selecting keywords on the web and accessing the context menu.
• Download all images (supported sites: Everypixel, Burst, Unsplash, Pexels, Picjumbo).

Links on Chrome: Download Mai Lan Image Search

WHATFONT – Find the font name of the website

This is an extension that assists designers in identifying and reusing fonts. This is the easiest way to identify fonts on web pages. With this extension, you can check web fonts by simply hovering your mouse over the font you are looking for. That is the simplest. The extension supports Typekit and Google Font API.

Download link on Chrome: download whatfont

WINDOW RESIZER – Adjust window size

WINDOW RESIZER is an extension that helps Designers resize windows so that they can review more accurately their designs. This extension resizes the browser’s window to emulate different resolutions. It is especially useful for web designers and developers by helping them test their layouts on different browser resolutions.

The resolution list is fully customizable (add/remove/readjust).

You can set the width/height of the window, the position of the window, the preset icons (phone, tablet, laptop, desktop) and even the option to apply the size new for the whole window or just for the view. The extension also has customizable global keyboard shortcuts, an option to export your settings and import them on another computer, and more!

Download link on Chrome: Download Windows Resizer

PAGE RULER – Displays the size ruler bar

Extension Page Ruler makes it possible to measure the size of elements anywhere on the page. Displays a ruler that outputs the width, height, and position you need to measure. Main feature:

• Draw ruler to any page and see width, height and top, bottom, left and right position
• Drag the edges of the ruler to resize
• Use arrow keys to move and resize
• Show guides extending from the ruler edges
• Manually update the ruler size and position from the toolbar to change the accuracy
• Activate “elements” to outline elements on the page as you move your mouse over them

Download link on Chrome: download Page Ruler

PERFECTPIXEL – pixel-by-pixel calculation

The PerfectPixel extension helps designers compare designs with pixel-by-pixel accuracy.

PerfectPixel allows markup developers and designers to place a semi-transparent image overlay on top of developed HTML and perform pixel-perfect comparisons between them.

Features and characteristics:

• Supports multiple overlays
• Support reverse and replicate
• Separate overlays for each site
• Overlays are saved between browsing sessions
• Minimalist easy-to-use user interface
• Drag-n-drop file upload support
• Paste from url and clipboard support
• Arrow keys and mouse support

Download link on Chrome: Download PerfectPixel

PICKMONKEY – Take and edit screenshots

This is a screen capture extension that edits screenshots. In addition, it also helps you to download all the screenshots of the web with one click. PicMonkey Chrome allows you to instantly grab images from any web page and open them in PicMonkey for editing. This is an Extension for Designers who often write annotations or post on the web.

Download link on Chrome: Download PicMonkey

SVG GRABBER – Download SVG images and code

SVG Grabber is a Designer Extension that helps you download logos or images on a web page quickly. SVG Grabber allows you to preview, download, and code copy all SVG icons and illustrations in a web page.

Download link on Chrome: Download SVG Grabber

NINJA FONTFACE – Display Font Name in Browser

With ninja fontface, just by dragging your mouse, you can also know what font the website you are visiting uses?

Links on Chrome: Download ninja fontface

CUSTOM CURSOR – Change the mouse pointer

Bored with the cursor style on Chrome, use the Custom Cursor extension to customize and design the mouse pointer to your liking. Create a large collection of free mouse pointers yourself.

To upload your own styled mouse pointer, it is recommended to use:

• Small images (optimal 16×16, 32×32 pixels, no more than 128×128);
• Image on a transparent background, such as .png format.

Links on Chrome: Download Custom Cursor

SITE PATELLE – Get the exact color code

This extension can help you get individual colors as well as get the entire color palette of a web page. If you want to know what color the banner or text on the website is using, the Site Palette will help you get that color code right away. This is an Extension for Designer frontend developers should install on the browser.

Links on Chrome: Download Site Palette

According to Nguyen Hoang (J2team)