【小工具大用處】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，高效協做，從產品到開發，只要一個文檔，讓你的團隊高效協做！