Designers are those people who are in constant search of something new: interesting sources of inspiration, specialized online services, offline programs like CSS editors, as well as all kinds of tricks/scripts to help speed up and improve the workflow. It is about them that will be discussed in today’s article – we will consider the best extensions and plugins for Google Chrome.
JUST COLOR PICKER
The perfect extension for quickly identifying colors on a page, saving and editing beautiful color combinations.
Features of Just Color Picker include:
Various formats: HEX, RGB, HSV.
Detection of the most commonly used colors on the page.
A palette of newly selected color combinations.
How to use?
- Download Just Color Picker from the Extension Store.
- Click on the extension icon on the toolbar.
- Click on the “Select color” button.
- Select a piece of color on the page.
WINDOW RESIZER
The Window Resizer extension resizes the browser window to simulate desktop, tablet, and mobile screens. This is especially useful for web designers and developers working behind large monitors when it comes to testing responsive versions of a site.
To start using the application, just install it, click on the window icon in the upper right corner, select the desired resolution – the browser adapts to the specified value. It is faster than using separate web services.
LOOM
There are situations when one image can be more understandable than a thousand words, and the value of a video in this case is even greater. The Loom plugin will definitely come in handy when you work in a team – it allows you to quickly and easily record a video from your screen, and then share a link to that video. Compared to static screenshots, this format is definitely more descriptive.
To start using the module, install it and click “Record”. Once you’re done, you can share your video with colleagues or customers, and then get data about who viewed it.
TOYBOX
One of the inherent responsibilities of a web designer is fixing edits and bugs. In order to quickly communicate with the client on this issue, we recommend using the Toybox plugin. It allows you to view CSS styles on a web page and leave feedback/assignments on certain objects on it. The video below the description below will help you better understand what is happening.
The extension is similar in functionality to InVision and Zeplin, only it works right on your site. In addition, when you create a comment for a performer through Toybox, the application automatically takes a screenshot, saves information about the browser, operating system, screen size, and much more. there is no need to ask again how and where exactly the error occurred.
MUZLI
It is often difficult for a designer to start a workday without getting a daily dose of inspiration – the Muzli extension is perfect for this task. Every time you open a new tab in Google Chrome, you are presented with trending design illustrations or the work of the best artists, photographers, and so on. All this information is read from dozens of sources – you will definitely have something to look at before work (to get inspired and get a lot of creative ideas for yourself).
PAGE RULER
Sometimes a web designer has to measure the size of objects on a website. The optimal solution for such situations is the Page Ruler plugin, which will reduce the measurement time to a couple of seconds. To get the pixel dimensions and positioning of an object on any web page, you just need to install the module, go to the web resource you are interested in and click on the blue window in the upper right corner of the browser.
DARK MODE DEV TOOLS
Although not an extension, Dark mode is still a useful tool for web developers. To switch to night mode, you need to go to DevTools, then click on the icon with three dots, then go to the settings and select Dark Mode in the Appearance section. There is also an opportunity to change the mode back today (Light mode). This will serve as good eye relief, especially when working at night.
COLORZILLA
Many web designers use traditional methods of finding the right color, which can take a long time. Using ColorZilla aims to save you effort and make your work easier. Just download the plugin, click on the eyedropper in the upper right corner of the browser, and hover over the element with the color you are interested in. After that, the application will show the RGB color code, which can be copied to the clipboard. There are other chips there, but they are not particularly used.
FONTFACE NINJA
Fontface Ninja is a handy extension for fast online font recognition. Just install it, click on the ninja icon in the upper right corner and move the cursor over the object of interest. On hover, the module shows the name of the web font, its size, and style. You can also click on the font and go to the page where you can actually download or buy it.