2017年面向设计师的7个超有用的Chrome扩展程序

All designers have their own way of working. Whether you design directly in the browser (with code, I mean), or you only use web browsers for live-testing web designs in real-time (or otherwise), there are plenty of Chrome extensions for designers that will make your life exponentially easier. My biggest pet peeve? Having to open a huge desktop app to accomplish a relatively minor task, so I’m always looking for Chrome extensions that solve common design problems quickly.

所有设计师都有自己的工作方式。 无论您是直接在浏览器中进行设计(我的意思是使用代码)，还是仅使用网络浏览器实时(或以其他方式)对网络设计进行实时测试，都有大量的Chrome扩展程序可供设计师使用，从而使您的生活成倍增长更轻松。 我最大的烦恼？ 必须打开一个庞大的桌面应用程序才能完成相对较小的任务，因此，我一直在寻找能够快速解决常见设计问题的Chrome扩展程序。

Here are 7 super-useful Chrome extensions I can’t live without, and also, here’s 6 Great Firefox Extensions for Designers, in case you work in Firefox too (if you’re a web developer you probably cross-test in all browsers!).

这里有7个超级有用的Chrome扩展程序，我不能不忍受，还有6个适用于Designers的Firefox扩展程序 ，以防您也使用Firefox(如果您是Web开发人员，则可能在所有浏览器中进行交叉测试！ )。

1. 页面标尺
(1. Page Ruler)

Page Ruler is a useful Chrome extension for finding out the positioning and/or size of any element in the browser — it’s quicker than using the Chrome code inspector, or worse, awkwardly traipsing through CSS files. To start, use the crosshairs to draw a selection around the element in question. The bar at the top of the browser will tell you the length and width of that element, as well how far it is from the each edges of the screen (as if it had been applied fixed/absolute positioning).

Page Ruler是有用的Chrome扩展程序，可用于查找浏览器中任何元素的位置和/或大小-比使用Chrome代码检查器更快，或更糟糕的是，笨拙地遍历CSS文件。 首先，使用十字准线在相关元素周围绘制选择。 浏览器顶部的栏会告诉您该元素的长度和宽度，以及它与屏幕各边缘的距离(例如，已对其进行固定/绝对定位)。

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

提示：使用箭头键可以微调您的选择，从而获得最大的准确性。

2. WhatFont
(2. WhatFont)

As I constantly have to inspect fonts on webpages, to see what font-size is being used on certain blocks of text, what the actual font name is, and its color, the WhatFont Chrome extension is incredibly useful to me.

由于我经常要检查网页上的字体，以查看某些文本块上使用的字体大小，实际的字体名称及其颜色，因此，WhatFont Chrome扩展程序对我非常有用。

Click on any section of text to find out the Hex/RGBA value, weight, line-height, font style, and of course the font family.

单击文本的任何部分以查找十六进制/ RGBA值，粗细，行高，字体样式，当然还有字体系列。

Sometimes, adding the Chrome inspect window at the bottom of the browser throws things off while you’re working, so being able to obtain all of this information without bringing up the entire inspect window makes things much easier!

有时，在浏览器底部添加Chrome检查窗口会在您工作时抛出一些麻烦，因此能够在不调出整个检查窗口的情况下获取所有这些信息，使事情变得更加轻松！

3. CSS3生成器
(3. CSS3 Generator)

CSS3 Generator is a Chrome app that will help you generate somewhat complex or hard-to-remember snippets of CSS code. You won’t need it for simple things, but let’s face it, some CSS values are difficult to code from scratch (such as the CSS needed to create cross-browser compatible gradients, or CSS transformations). With a couple of clicks you can generate some pretty useful CSS, preview it in the extension preview, then copy the CSS and paste the code into your real CSS file.

CSS3 Generator是一个Chrome应用，可帮助您生成有些复杂或难以记忆CSS代码段。 对于简单的事情，您将不需要它，但让我们面对现实吧，有些CSS值很难从头开始编写(例如，创建跨浏览器兼容的渐变所需CSS或CSS转换)。 只需单击几下，您便可以生成一些非常有用CSS，在扩展预览中对其进行预览，然后复制CSS并将代码粘贴到您的真实CSS文件中。

Here’s a list of what’s supported:

以下是支持的列表：

• Multiple text shadows
  多个文字阴影
• Hex/RGBA codes
  十六进制/ RGBA代码
• CSS transforms
  CSS转换
• Border radii
  边界半径
• Multiple box shadows
  多个框阴影
• Css columns
  CSS列
• Arrows (for tooltips)
  箭头(用于工具提示)
• Gradients (linear, radial…even striped)
  渐变(线性，径向…均匀条纹)

4. 检查我的链接
(4. Check My Links)

It’s fairly easy to mistype URLs (or forget to include them entirely, but that’s another story), so whether your clients need help with existing websites, or if you’re building a website from scratch, Check My Links is a must-have for any web designer.

错误键入URL很容易(或者忘记完全包含它们，但这又是另一回事了)，因此，无论您的客户是否需要有关现有网站的帮助，或者如果您是从头开始构建网站，“检查我的链接”都是必不可少的任何网页设计师。

Check My Links will scan a webpage and look for broken links — simple as that. It saves you the hassle of having to manually check them yourself. The UI is pretty intuitive. Rather than presenting a list of dud links, Check My Links simply turns the broken links on the actual webpage red, while valid links will appear in green, so you can see what to fix at a glance. Simple!

“检查我的链接”将扫描网页并查找损坏的链接-如此简单。 它为您省去了手动检查它们的麻烦。 用户界面非常直观。 “检查我的链接”仅显示实际网页上的损坏链接，而不会显示无效链接的列表，而是将红色链接显示为实际，而有效链接将显示为绿色，因此您可以一目了然地解决问题。 简单！

5. Gravit设计器
(5. Gravit Designer)

If you need to design a graphic, but you don’t want to open a resource-heavy design app (or if you don’t have one/don’t want to pay for one), download the free Gravit Designer extension for Chrome.

如果您需要设计图形，但又不想打开大量资源的设计应用程序(或者如果您不想拥有一个/不想为之付费)，请下载免费的Chrome浏览器Gravit Designer扩展程序。

Surprisingly, it’s really fast. It’s super-easy to start a design with commonly-used artboard sizes, including presets for blog graphics, social media graphics and common print dimensions. Gravit is a vector design app, which makes designing scalable resolution-independent designs a total breeze.

令人惊讶的是，它的速度确实非常快。 以常用的画板尺寸开始设计非常容易，其中包括博客图形，社交媒体图形和常用打印尺寸的预设。 Gravit是矢量设计应用程序，它使设计与分辨率无关的可伸缩设计变得轻而易举。

I was surprised by a number of options and features—it wasn’t too different from using a premium design app like Sketch, although the visual UI feels more like Affinity Designer.

我对许多选项和功能感到惊讶-尽管视觉UI感觉更像Affinity Designer，但它与使用Sketch等高级设计应用程序并没有太大区别。

Expect the obvious stuff like shapes, alignments, flipping, rotating, blurring, drop shadows, the creation of compound shapes, and more. With the ability to also export to PNG, JPG, SVG and PDF, Symbol functionality (like with Sketch and Adobe XD), complex SVG-editing tools with beziers and bezigons, and even filters, Gravit Designer is actually a pretty compelling choice for serious designers, photographers and amateur designers wanting to create marketing graphics.

期望出现明显的东西，例如形状，对齐，翻转，旋转，模糊，阴影，创建复合形状等等。 Gravit Designer能够导出到PNG，JPG，SVG和PDF，Symbol功能(例如，使用Sketch和Adobe XD)，带有beziers和bezigon的复杂SVG编辑工具，甚至是过滤器，对于严肃的设计来说，Gravit Designer实际上是一个非常引人注目的选择设计师，摄影师和业余设计师想要创建营销图形。

I mean, imagine being able to create designs from within Google Chrome, without having to open Photoshop, Illustrator, Sketch or Adobe XD. Actually, you don’t have to imagine, you can download Gravit Designer right now, for free!

我的意思是，想象一下无需打开Photoshop，Illustrator，Sketch或Adobe XD就能在Google Chrome中创建设计。 实际上，您不必想象，可以立即免费下载Gravit Designer！

6. ColorZilla
(6. ColorZilla)

ColorZilla is the eyedropper tool for Google Chrome—it enables you to sample any color from a webpage with a couple of clicks. To start, click the ColorZilla extension icon in Chrome, and hover the cursor over the area you want to sample. You’ll be offered the HSL, Hex and RGBA value of that color. Ordinarily you’d need to screenshot the website and bring it into Photoshop, but ColorZilla is faster. ColorZilla also generates color palettes on-demand from any website, as well as saves your recent colors with the color history feature, which makes it stand out against competitors like ColorPick Eyedropper.

ColorZilla是Google Chrome浏览器的吸管工具，只需单击几下，您就可以从网页中采样任何颜色。 首先，点击Chrome中的ColorZilla扩展程序图标，然后将光标悬停在您要采样的区域上。 系统会为您提供该颜色的HSL，Hex和RGBA值。 通常，您需要截屏该网站并将其带入Photoshop，但是ColorZilla更快。 ColorZilla还可以从任何网站按需生成调色板，并使用颜色历史记录功能保存您最近的颜色，这使其在与ColorPick Eyedropper等竞争对手中脱颖而出。

7. StyleBot
(7. StyleBot)

Stylebot is a handy Chrome extension for those wanting to quickly try out custom CSS on a live website. It gives you the opportunity to try out different fonts, different colors, different styles, etc, without having to go back-and-forth between the code editor and Google Chrome. We’ve found Stylebot useful as a way of prototyping minor tweaks and changes on a live website, before actually committing them to the codebase.

Stylebot是一个方便的Chrome扩展程序，适用于希望在实时网站上快速尝试自定义CSS的用户。 它使您有机会尝试不同的字体，不同的颜色，不同的样式等，而不必在代码编辑器和Google Chrome之间来回切换。 我们发现Stylebot在实际将微小的调整和更改提交到代码库之前，可以用作对实时网站上的细微调整和更改进行原型制作的一种方法。

结论 (Conclusion)

With these time-saving extensions, tasks that are normally tedious, or require you to open/buy more software, can be done with a couple of clicks, and you don’t even have to leave the web browser to do it. Designers and developers alike will find these Chrome extensions super-useful.

使用这些省时的扩展程序，只需单击几下即可完成通常繁琐的任务或需要您打开/购买更多软件的任务，而您甚至不必离开网络浏览器即可完成此任务。 设计人员和开发人员都会发现这些Chrome扩展程序超级有用。

Chrome extensions are definitely useful to those that are developing websites, but designers looking to extract visual information from a live website, so that they can use it in Sketch, Adobe XD or Photoshop, will also see noticeable time-saving benefits pretty quickly.

Chrome扩展程序对于正在开发网站的开发人员绝对有用，但是希望从实时网站中提取视觉信息以便可以在Sketch，Adobe XD或Photoshop中使用的设计师也将很快看到明显的节省时间的好处。

翻译自: https://www.sitepoint.com/6-chrome-extensions-designers/