7 Super-Useful Chrome Extensions for Designers in 2017

7 Chrome extensions to improve web design efficiency

Core points:

• Chrome extensions simplify the design process and provide tools to check and edit web elements, link checks and generate complex CSS code without leaving the browser.
• Extensions such as Page Ruler, WhatFont, CSS3 Generator, Check My Links, Gravit Designer, ColorZilla and StyleBot are particularly useful to designers, providing features such as color sampling, font recognition and real-time website customization.
• Using these extensions can save time and reduce the need for other software, making it a valuable resource for designers and developers.

Each designer has his own unique way of working. Whether you are designing directly in your browser (using code) or testing web design in real time using only the browser, there are many Chrome extensions that can greatly simplify your workflow. What is the thing I hate the most? Had to open a huge desktop app to complete a relatively small task, so I've been looking for Chrome extensions that can quickly solve common design problems.

Here are my seven essential Chrome extensions, as well as six designer extensions for Firefox (if you are a web developer, you may need to cross-test in all your browsers!).

1. Page Ruler

Page Ruler is a useful Chrome extension for finding the location and/or size of any element in your browser—it's faster than using a Chrome code inspector, or worse, clumsy traversing CSS files . First, use the crosshairs to draw a selection box around the target element. The bar at the top of the browser will show the length and width of the element, as well as its distance from each side of the screen (it seems to have fixed/absolute positioning applied).

Tip: Use the arrow keys to fine-tune your selection for maximum accuracy.

2. WhatFont

Since I often need to check the fonts on web pages to see the font sizes, actual font names and their colors used in certain text blocks, the WhatFont Chrome extension is very useful to me.

Click any text section to find hexadecimal/RGBA values, thickness, line height, font style, and font series.

Sometimes adding a Chrome check window at the bottom of your browser can cause interference when you work, so being able to get all this information without opening the entire check window makes things easier!

3. CSS3 Generator

CSS3 Generator is a Chrome application that helps you generate some complex or difficult to remember CSS code snippets. For simple things you don't need it, but let's face it, some CSS values ​​are hard to write from scratch (such as creating cross-browser-compatible gradients or CSS conversions required). With just a few clicks, you can generate some very useful CSS, preview it in the extension preview, then copy the CSS and paste the code into your actual CSS file.

The following is a list of supported content:

• Multiple text shadows
• Hexadecimal/RGBA code
• CSS conversion
• Border Radius
• Multiple box shadows
• CSS column
• Arrow (for tooltips)
• Gradial (linear, radial…even stripes)

4. Check My Links

URL typing errors (or forgetting to include them altogether, but that's another thing) is quite easy, so whether your customers need help from an existing website or you're building a website from scratch, Check My Links for any It is essential for web designers.

Check My Links will scan the web page and look for broken links—it's that simple. It saves you from the hassle of manually checking them. The UI is very intuitive. Check My Links does not list invalid links, but simply turns the corrupt link on the actual web page into red, while the valid link will appear in green, so you can see at a glance what needs to be fixed. Simple!

5. Gravit Designer

If you need to design graphics but don't want to open a resource-intensive design app (or if you don't/don't want to buy one), download the free Gravit Designer extension for Chrome.

Surprisingly, it's very fast. It's very easy to start designing with common artboard sizes, including blog graphics, social media graphics, and presets for commonly used print sizes. Gravit is a vector design application, which makes it very easy to design scalable resolution-independent designs.

I was surprised by the many options and features-it's not much different from using advanced design applications like Sketch, although the visual UI feels more like Affinity Designer.

There are obvious elements expected, such as shapes, alignments, flips, rotations, blurs, projections, creation of composite shapes, and more. It is also capable of exporting to PNG, JPG, SVG and PDF, symbolic features such as Sketch and Adobe XD, complex SVG editing tools with Bezier and Bezier curves, and even filters, Gravit Designer actually for It is a very attractive option for professional designers, photographers and amateur designers who want to create marketing graphics.

I mean, imagine being able to create a design in Google Chrome without opening Photoshop, Illustrator, Sketch, or Adobe XD. Actually, you don't have to imagine that you can download Gravit Designer for free right now!

6. ColorZilla

ColorZilla is Google Chrome's straw tool - it enables you to sample any color from a webpage with a few clicks. First, click on the ColorZilla extension icon in Chrome and hover the cursor over the area you want to sample. You will get the HSL, hexadecimal, and RGBA values ​​for that color. Normally, you need to take a screenshot of your website and import it into Photoshop, but ColorZilla is faster. ColorZilla can also generate color palettes on demand based on any website and save your recently used colors using the color history feature, which makes it stand out among competitors like ColorPick Eyedropper.

7. StyleBot

StyleBot is a handy Chrome extension for those who want to quickly try out custom CSS on a live website. It allows you to try different fonts, different colors, different styles, etc. without switching back and forth between the code editor and Google Chrome. We found StyleBot to be very useful as a way to prototype small tweaks and changes on a real-time website before actually committing to the code base.

Conclusion

The tasks that use these time-saving extensions are usually tedious or require you to open/buy more software can be completed with a few clicks, and you don't even have to leave your web browser to complete. Designers and developers will find these Chrome extensions very useful.

The Chrome extension is certainly useful for those who develop websites, but designers who want to extract visual information from a live website to use it in Sketch, Adobe XD, or Photoshop will also see the obvious time-saving benefits very quickly. .

(The FAQs part has been omitted because it does not match the pseudo-original goal and is longer. The FAQs part can be generated separately as needed.)

The above is the detailed content of 7 Super-Useful Chrome Extensions for Designers in 2017. For more information, please follow other related articles on the PHP Chinese website!