提升設計效率？網頁UI設計師必裝的7個Chrome擴充插件

作為網頁UI設計師，我們常常都在尋找新的方式、技巧或工具來幫助我們改進和提升設計工作的效率。所以下面是我整理了7個好用Chrome擴充插件的列表。

Window Resizer

設計師因為工作關係，所以我們常常都使用大的螢幕來進行作業，但事實上一般多數人可能都不會接觸到這麼大尺寸的螢幕，或者又以筆記型電腦使用者居多

因此使用Window Resizer，在查看我們網站在不同螢幕尺寸的呈現時，這工具可以快速節省時間，只需打開擴展插件，然後點選預設視窗尺寸或輸入自定義螢幕數值，就可以看到不同螢幕尺寸的大小了。

Loom

現在很多遠端模式的工作，但如何有效的溝通一直以來都是一門學問，因此Loom是一款真正令人驚嘆的免費擴充插件

它主要透過螢幕錄影的方式，可以幫助我們記錄操作流程、錯誤發生的原因，並直接分享給團隊進行觀看。

若你常常試圖通過屏幕截圖來傳達無法捕捉的東西時，這工具就能帶給你很大的幫助。只需安裝擴展程序並按記錄即可。完成後就可以分享你的影片並獲取有瀏覽看過的人的訊息統計等。

Toybox

在與工程師溝通畫面的時候，常常是否花費大量時間檢查網頁元素，抓取屏幕截圖後再記錄網站上的錯誤？

或許你可以試試使用Toybox chrome擴充插件。他可以在網站上擷取畫面後直接留下反饋，可以省去非常多的畫面轉換步驟

你可以將其視為InVision評論和Zeplin，但是在你的網站上，而不是設計文件中。不僅如此，當您發表評論時，它會自動截取屏幕截圖，記錄瀏覽器數據、操作系統訊息、視窗大小等等，讓複製問題變得輕而易舉。

Muzli

這應該是堪稱所有設計師都必裝的擴充插件第一名無誤！

它主要是以瀏覽器起始頁作為呈現，每當您打開一個新的瀏覽器窗口時，您都會看到很多令人驚艷的設計最新資訊。你常常可以從Muzli眾多設計資源中汲取靈感，為您提供新穎，時尚和酷炫的產品。

這幾年我一直都使用這個擴充插件，每當打開瀏覽器時，常常都是為之震驚，真的讓你的靈不缺失，真的很棒。

CSSViewer

常常有時候想要快速確認一下網頁上的元素樣式設定，但又懶得開啟開發人員工具時，你不訪可以試試CSSViewer

它可以隨著你的滑鼠移動選擇到網頁各個區塊元素，並且直接顯示這區塊元素的相關設定，非常的方便快速。

延伸閱讀：
如何查看網頁HTML、CSS？網頁設計必懂，外掛工具、語法懶人包分享

Dark Mode Dev Tools

繼許多服務都提供的黑暗版模式，那Chrome開發工具當然也要來暗黑版一下吧。實際上這是內置於Chrome開發工具中，並非是擴充插件。

你只需打開開發工具>單擊右上角的3點橢圓>單擊設置>在外觀下，就可以切換為暗黑模式。就這麼簡單eazy

Fontface Ninja

常常看到很厲害的網站都善用著特殊的字體，但每當要去查看是用的什麼字體時候，都會遇到要不斷去翻開和挖掘CSS樣式的過程

厲害的地方就是，當你滑鼠直接滑到網頁上的文字時，就會顯示該文字使用的字體、顏色、行高等相關資訊，更重要的是還會顯示下載點方便你去下載，是十分便利的工具。

以上的分享希望能夠提升設計師們的工作效率。

延伸閱讀：
如何查看網頁HTML、CSS？網頁設計必懂，外掛工具、語法懶人包分享
【課程評價】從入門到業界實戰 – UI / UX 前端網頁設計

若你喜歡我的這篇文章，麻煩拍5次下面小手給予我支持與鼓勵喔！