【小工具大用处】10个超实用的设计师专属Chrome小插件

如下内容由Mockplus团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

设计师平常设计过程当中， 免不了须要使用Chrome搜索各种最新设计案例或文章。善用各类专为Chrome打造的扩展小插件，能显著提高Chrome的效能，帮助设计师更快获取灵感、学习技巧。

因此，为方便你们挑选，下面小编将为你们介绍10款亲测且超实用的Chrome小插件。但愿能对你们有所帮助。

1.Windows Resizer

或许屏幕那边的你，恰好是一名设计师，而且用着一台27英寸的5K屏iMac阅读这篇文章。但对于绝大多数设计师而言，并不是都能有机会用到如此超大分辨率的屏幕电脑，来查看各种网页设计或文章。此时， 他们又该怎么办呢？

不用担忧！ 试试Windows Resizer的Chrome插件吧！当设计师们须要在不一样分辨率下查看网页设计时，此款插件绝对有用。设计师打开插件，预设或自定义好相关视口，便可轻松查看对应网页展现状况。操做简单易用，是一款不可多得的好工具。

2.Loom

设计师们常说：“好的图片赛过千言万语”。 那么要是直接在设计中添加视频呢？是否能赛过上千万甚至更多语言呢？答案显然是确定的。

而Loom就是这样一款可以帮助设计师轻松且免费录制视频的工具。使用该工具，任何网页动画、用户流程以及Bug运行状况均可以轻松录制成视频，并分享给其余同事。

事实上，在过去的几个月里，小编常用此工具，并清楚地认识到：当截屏已然没法准确传达设计相关需求或建议时，使用此工具录屏进行解说，准没错。

设计师安装好插件以后，简单点击“录制”按钮，便可开始内容录制。待录制完成后， 亦可轻松分享给其余同事或客户，及时收集设计相关建议和反馈， 很是好用。

3.Toybox

用iDoc写产品文档，拿摹客体验礼

网页设计过程当中，你是否还在为须要花费大量时间逐个检测页面元素、截屏并记录相关错误或Bug而苦恼？不用担忧！试试Toybox工具吧！做为一款可以帮助用户快速检查网页CSS代码， 并直接在网页上记录相关错误和反馈的工具，Toybox工具无疑可以帮你轻松解决这类问题。

更简单地说，你能够直接将Toybox看做相似InVision和Mockplus iDoc中包含的设计评论工具，以及Zeplin中的页面检查工具。惟一不一样的地方是：该工具支持直接在网页上接添加评论或反馈，而非在设计稿上。

此外，在添加相关设计评论或反馈时，此工具还支持自动截屏并记录相关Bug信息 (如浏览器信息、操做系统信息和视口大小信息等)，以方便后期处理这类问题时， 轻松重现相关问题。

总之，它是一款不容任何产品团队或设计工做室错过的Chrome扩展工具。

4.Muzli

做为设计师，是否但愿利用平常碎片时间，随时随地查看最新设计做品，获取设计灵感呢？不妨尝试安装一个Chrome的Muzli插件吧！如此，每次打开Chrome浏览器， 你就能够快速查看最新最优的设计了。为何呢？由于Mulzli工具会自动从众多最新网页设计资源中，选取其中最优且最具创意的部分进行展现，以便你们查看并获取灵感。

实际上，小编已经使用此款工具不少年了。真的强力推荐你们使用。

5.SVG Grabber

浏览网页时， 如若你只但愿截取页面中的某个Logo或图标进行设计时，SVG Grabber工具值得一试。简单点击开始按钮，该工具就会自动提取该页面的全部SVG图片。而后轻松查看，并选择须要的SVG图片下载便可。

诚然，此款Chrome插件并不是经常使用设计工具。 可是，在真正须要截取相似Logo或图标以优化设计时，它倒是必不可少的。因此，将它做为设计备用工具，储存起来也是极好的。

6.Page Ruler

如若你正在寻找一款可以准确测量网页元素大小的工具，不妨试试Page Ruler的Chrome插件。简单打开该插件，推拽框选须要的部件， 便可当即查看其长宽、边距等属性数据。无需过多操做， 简单易用， 值得尝试。

7.Dark Mode Dev Tool

现在，深色模式，已然成为设计师必备的网页设计和查看模式。因此，这里小编为你们分享一款名为“Dark Mode Dev Tools”的深色模式打造工具。尽管，严格意义上讲，Dev Tools只是Chrome的内置工具，并不是真正的插件工具。 但从实用性上来说，小编以为仍是有必要分享一下。

你们能够经过如下方式打开Chrome浏览器的Dev Tools工具：点击谷歌浏览器窗口右上角的三点图标 > 选择“设置”> 打开“外观”板块，而后切换到深色模式便可。如此，就能够在深色模式下查看网页 DOM了。

8.ColorZilla

当须要在Chrome浏览器下快速查看任意网页所用色彩或配色时，ColorZilla取色工具会是你的绝佳选择。安装好工具后，将鼠标悬停在任意网页元素上，便可快速查看相关HEX和RGB色值。必要的时候， 简单点击， 亦可复制粘贴相关色彩信息， 并直接应用到须要的设计项目或文档中。总之，此款专为Chrome打造的取色工具，简单、快速、高效， 很是值得设计师们下载使用。

此外，该工具还带有其它高效的色彩功能， 例如渐变色CSS代码生成功能和页面色彩分析功能等，你们能够本身下载尝试一下。

9.Fontface Ninja

接下来，小编将为你们介绍另外一款很是值得下载的Chrome插件工具 ——Fontface Ninja。它是一款十分美观实用的字体提取工具。安装成功后，用户将鼠标悬停于相关页面文本，便可查看对应的字体样式。总之，它是一款很是值得设计师收藏的工具。

10.Custom Cursor

Custom Cursor， 做为一款超实用的光标编辑工具，并不是专为设计师而打造。但倒是一款炫酷到使人尖叫的工具。它容许用户根据各自喜爱修改默认光标样式，甚至支持上传本地图片自定义界面光标。总之， 它是一款很是有趣、新颖的Chrome插件工具。

以上就是小编为你们收集的10个超实用的Chrome插件。但愿它们能为你们设计工做提供便利，并帮助你们产出更优的设计做品。

学习工具，但不受限于某种工具。摹客iDoc，高效协做，从产品到开发，只要一个文档，让你的团队高效协做！