10個超實用的設計師專屬Chrome小插件

以下內容由摹客團隊翻譯整理，僅供學習交流，摹客iDoc是支持智能標註和切圖的產品協作設計神器。

設計師在日常設計過程中， 免不了需要使用Chrome搜索各類最新設計案例或文章。善用各種專為Chrome打造的擴展小插件，能顯著提升Chrome的效能，幫助設計師更快獲取靈感、學習技巧。

所以，為方便大家挑選，下面小編將為大家介紹10款親測且超實用的Chrome小插件。希望能對大家有所幫助。

或許屏幕那邊的你，剛好是一名設計師，並且用著一臺27英寸的5K屏iMac閱讀這篇文章。但對於絕大多數設計師而言，並非都能有機會用到如此超大解析度的屏幕電腦，來查看各類網頁設計或文章。此時， 他們又該怎麼辦呢？

不用擔心！試試Windows Resizer的Chrome插件吧！當設計師們需要在不同解析度下查看網頁設計時，此款插件絕對有用。設計師打開插件，預設或自定義好相關視口，即可輕鬆查看對應網頁展示情況。操作簡單易用，是一款不可多得的好工具。

連結：

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh  

設計師們常說：「好的圖片勝過千言萬語」。那麼要是直接在設計中添加視頻呢？是否能勝過上千萬甚至更多語言呢？答案顯然是肯定的。

而Loom就是這樣一款能夠幫助設計師輕鬆且免費錄製視頻的工具。使用該工具，任何網頁動畫、用戶流程以及Bug運行情況都可以輕鬆錄製成視頻，並分享給其他同事。

事實上，在過去的幾個月裡，小編經常使用此工具，並清楚地認識到：當截屏已然無法準確傳達設計相關需求或建議時，使用此工具錄屏進行解說，準沒錯。

設計師安裝好插件之後，簡單點擊「錄製」按鈕，即可開始內容錄製。待錄製完成後， 亦可輕鬆分享給其他同事或客戶，及時收集設計相關建議和反饋， 非常好用。

連結：

https://chrome.google.com/webstore/detail/loom-video-recorder-scree/liecbddmkiiihnedobmlmillhodjkdmb

網頁設計過程中，你是否還在為需要花費大量時間逐個檢測頁面元素、截屏並記錄相關錯誤或Bug而苦惱？不用擔心！試試Toybox工具吧！作為一款能夠幫助用戶快速檢查網頁CSS代碼， 並直接在網頁上記錄相關錯誤和反饋的工具，Toybox工具無疑能夠幫你輕鬆解決這類問題。

更簡單地說，你可以直接將Toybox看作類似InVision和摹客iDoc中包含的設計評論工具，以及Zeplin中的頁面檢查工具。唯一不同的地方是：該工具支持直接在網頁上接添加評論或反饋，而非在設計稿上。

此外，在添加相關設計評論或反饋時，此工具還支持自動截屏並記錄相關Bug信息 (如瀏覽器信息、作業系統信息和視口大小信息等)，以方便後期處理這類問題時， 輕鬆重現相關問題。

總之，它是一款不容任何產品團隊或設計工作室錯過的Chrome擴展工具。

連結：

https://www.toyboxsystems.com/  

作為設計師，是否希望利用日常碎片時間，隨時隨地查看最新設計作品，獲取設計靈感呢？不妨嘗試安裝一個Chrome的Muzli插件吧！如此，每次打開Chrome瀏覽器， 你就可以快速查看最新最優的設計了。為什麼呢？因為Mulzli工具會自動從眾多最新網頁設計資源中，選取其中最優且最具創意的部分進行展示，以便大家查看並獲取靈感。

實際上，小編已經使用此款工具很多年了。真的強力推薦大家使用。

連結：

https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc  

瀏覽網頁時， 如若你只希望截取頁面中的某個Logo或圖標進行設計時，SVG Grabber工具值得一試。簡單點擊開始按鈕，該工具就會自動提取該頁面的所有SVG圖片。然後輕鬆查看，並選擇需要的SVG圖片下載即可。

誠然，此款Chrome插件並非常用設計工具。但是，在真正需要截取類似Logo或圖標以優化設計時，它卻是必不可少的。所以，將它作為設計備用工具，儲存起來也是極好的。

連結：

https://chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg  

如若你正在尋找一款能夠準確測量網頁元素大小的工具，不妨試試Page Ruler的Chrome插件。簡單打開該插件，推拽框選需要的部件， 即可立即查看其長寬、邊距等屬性數據。無需過多操作， 簡單易用， 值得嘗試。

連結：

https://chrome.google.com/webstore/detail/page-ruler/emliamioobfffbgcfdchabfibonehkme  

如今，深色模式，已然成為設計師必備的網頁設計和查看模式。所以，這裡小編為大家分享一款名為「Dark Mode Dev Tools」的深色模式打造工具。儘管，嚴格意義上講，Dev Tools只是Chrome的內置工具，並非真正的插件工具。但從實用性上來講，小編覺得還是有必要分享一下。

大家可以通過以下方式打開Chrome瀏覽器的Dev Tools工具：點擊谷歌瀏覽器窗口右上角的三點圖標 > 選擇「設置」> 打開「外觀」板塊，然後切換到深色模式即可。如此，就可以在深色模式下查看網頁 DOM了。

連結：

https://developers.google.com/web/tools/chrome-devtools/customize/dark-theme  

當需要在Chrome瀏覽器下快速查看任意網頁所用色彩或配色時，ColorZilla取色工具會是你的絕佳選擇。安裝好工具後，將滑鼠懸停在任意網頁元素上，即可快速查看相關HEX和RGB色值。必要的時候， 簡單點擊， 亦可複製粘貼相關色彩信息， 並直接應用到需要的設計項目或文檔中。總之，此款專為Chrome打造的取色工具，簡單、快速、高效， 非常值得設計師們下載使用。

此外，該工具還帶有其它高效的色彩功能， 例如漸變色CSS代碼生成功能和頁面色彩分析功能等，大家可以自己下載嘗試一下。

連結：

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp  

接下來，小編將為大家介紹另一款非常值得下載的Chrome插件工具 ——Fontface Ninja。它是一款十分美觀實用的字體提取工具。安裝成功後，用戶將滑鼠懸停於相關頁面文本，即可查看對應的字體樣式。總之，它是一款非常值得設計師收藏的工具。

連結：

https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh  

Custom Cursor， 作為一款超實用的光標編輯工具，並非專為設計師而打造。但卻是一款炫酷到令人尖叫的工具。它允許用戶根據各自喜好修改默認光標樣式，甚至支持上傳本地圖片自定義界面光標。總之， 它是一款非常有趣、新穎的Chrome插件工具。

連結：

https://chrome.google.com/webstore/detail/custom-cursor-for-chrome/ogdlpmhglpejoiomcodnpjnfgcpmgale  

以上就是小編為大家收集的10個超實用的Chrome插件，希望它們能為大家設計工作提供便利，並幫助大家產出更優的設計作品。

戳「閱讀原文」，輸入venus，還有小摹準備的驚喜在等著你哦~

作者：Brendan Mahony

原文連結：https://uxdesign.cc/10-best-chrome-extensions-for-designers-a76540b93836