超實用！設計師必備的 22 款 Chrome 瀏覽器插件，提升工作效率

Angel Wang・2021-09-08

身為設計師的你常用 Google Chrome 作為你的主要瀏覽器嗎？那你別忘了下載 Chrome 瀏覽器的插件小工具來幫助你提升設計的生產力及工作效率！以下我們整理了設計師愛用且必備的 Google Chrome 瀏覽器擴充插件，你可以透過它們：

查看網站字體、字型樣式、大小
在網站上自動檢測顏色色碼
一鍵下載網頁上所有的圖片
收集、擷取喜愛的瀏覽器頁面

以下推薦的所有 Google Chrome 瀏覽器擴充都是免費的，可從 Chrome 線上應用商店下載！祝瀏覽愉快！

1. ColorZilla

Image from ColorZilla

圖片來源：ColorZilla

想要輕鬆不查 code 的情況下知道網頁上顏色的色碼嗎？ ColorZilla 可以幫助你快速偵測網頁上所有的顏色，包括顏色擷取、顏色滴管、漸層等許多其他顏色功能。也可以快速調整顏色細節，並將色碼複製貼上到其他地方，還可以建立符合 CSS 漸層的語法。

2. Dark Reader

Image from Dark Reader

圖片來源：Dark Reader

身為設計師長期盯著電腦是一件無法避免的事情，你是否對於螢幕的亮度很困擾呢？這個 Dark Reader 的瀏覽器插件就是你必下載的護眼神器，它可以幫助你把網站自動調整成夜間模式，並反轉明亮的顏色，讓你在夜晚時更容易閱讀，不傷害眼睛。你也可以針對你自己的需求調整亮度、對比度、套用棕褐色濾鏡、深色模式、設定字體等功能。

3. SVG Grabber

Image from SVG Grabber

圖片來源：SVG Grabber

你希望擁有一些網站上很酷或是特別的 logo 嗎？原本取得 logo 的方法是到開發人員工具 → 檢查代碼 → 一條又一條地看 → 下載，這不僅花費很多時間，還超麻煩！有了 SVG Grabber，現在你只需要點擊一下按鈕，即可快速預覽、下載和複製網站上所有 SVG logo 和插圖的 code。

4. Window Resizer

Image from Window Resizer

圖片來源：Window Resizer

想要透過調整瀏覽器視窗的大小模擬各種螢幕的解析度嗎？這個 Windows Resizer 對於網頁設計師來說是一個超方便的工具，能夠在不同瀏覽器的解析度下測試設計圖。它的解析度的選項可以依照你的需求客製（增加／刪除／重新排序）。你可以設置瀏覽器視窗的寬度、高度、視窗的位置、圖示等，調整符合你的手機、平板電腦和電腦的設計圖。

5. ColorPicker

Image from ColorPicker

圖片來源：ColorPicker

如果你正在尋找一個快速且簡單上手的彩色滴管工具，那麼 ColorPicker 可能是你正在尋找的工具。它有將網頁區域放大、縮小的放大鏡功能，可以輕鬆顯示顏色的細節，還可拖動滑鼠進行微調，ColorPicker 可以滿足你在網頁設計工作上面對顏色像素細節的需求。

6. Whatfont

Image from Whatfont

圖片來源：Whatfont

如果你想要徒手不靠工具之下，就辨識的出網頁上的字體，要花上不少時間，若你沒有經驗，這個難度簡直是天方夜譚！Whatfont 可以幫助你輕鬆且優雅的辨識出字體，你只需將滑鼠停留在你感興趣的字體上，答案就一目了然。

7. CSS Peeper

Image from CSS Peeper

圖片來源：CSS Peeper

你有沒有想過網頁上的按鈕大小、字體、樣式是什麼？你還在用開發者工具一一檢查它們嗎？CSS Peeper 是為設計師量身打造的 CSS 檢測器。只要移動滑鼠，即可查看網頁上的物件、顏色和元素的 CSS 樣式。

8. Eagle

影片來源：Eagle

作為一名設計師，我們喜愛蒐藏及保存漂亮的圖片或任意的瀏覽網頁尋找靈感。然而，你是否厭倦了一張一張的下載圖片？或者有時你遇到了禁止右鍵下載的的網頁？ Eagle 可幫助你輕鬆地解決全部問題，它支援一鍵下載該網頁上所有的圖片，你還可以隨意的螢幕截圖不同大小，最重要的是幫助你在下載圖片的同時，一次整理它！

當儲存圖片時，Eagle 還會自動幫助你記下 URL，未來當你突然想重新訪問下載圖片的網頁時，你就不會無頭緒啦！

PS：你必須下載 Eagle App 才能充分使用瀏覽器擴充功能。

9. Mobile Simulator

Image from Mobile Simulator

圖片來源：Mobile Simulator

你的工作需要一直查看手機版網站解析度嗎？Mobile simulator 允許你在電腦版中輕鬆測試。您可以利用這個插件測試所有不同的手機和平板電腦型號。如果你需要與團隊討論工作成果，可以匯出 PNG 格式，將檔案插入電子郵件、PPT 裡輕鬆展示。

10. Page Ruler Redux （已被移除）

Image from Page Ruler Redux

圖片來源：Page Ruler Redux

你想知道網頁上的像素尺寸和元素大小嗎？ Page Ruler Redux 可以幫助你快速取得網頁像素和元素大小。它透過虛線的尺來幫助你測量，你可以用滑鼠調整尺的大小以符合你的需求。在邊緣也提供定位線，幫助設計師們輕鬆定位。

11. Image Downloader

Image from Image Downloader

圖片來源：Image Downloader

想從網頁下載圖片嗎？像 Eagle ，這款也是一個圖片下載工具，當你看到喜歡的任何靈感或圖片時，只需點擊一下即可隨心所欲地下載它們！若遇到太多想要下載的圖片時，透過 Image downloader 的篩選器，可以篩選出圖片的寬度、高度或 URL，找到你想要下載的目標圖片！

12. Fonts Ninja

Image from Fonts Ninja

圖片來源：Fonts Ninja

Fonts Ninja 是另一款很棒的字體辨識工具，可以直接告訴你網頁上所有字體的樣式、CSS 屬性並提供有關字體的資訊，甚至是價格！特別的是，你可以在插件中為網站上找到的字體增添書籤，未來如果要使用相同字體時，利用書籤就可以直接找到，幫助你加快設計的工作流程。

如果你想在繪圖軟體中使用在網站上發現的字體，你可以下載它們的 macOS／Windows 應用程式，幫助你同步使用新發現的字體。（支援：Illustrator、Photoshop、Figma）。

13. Loom

Image from Loom

圖片來源：Loom

俗話說「一畫勝千言」，那麼一個影片又傳遞了多少訊息呢？Loom 是一個免費的螢幕錄影擴充插件，你可以一鍵錄製動畫、用戶使用流程、產品實測、給予回覆、檢測 Bug 等，並立即分享給你的同事或朋友，加速你們的溝通效率！甚至還可以用於會議紀錄，讓你不用再打下一堆文字，是不是超方便！

身為一個設計師，你永遠不會對新的靈感說不！這裡我們推薦 Muzli Chrome 擴充插件，讓你每天打開瀏覽器就能看到最新、最潮流的設計作品集，內容包括攝影作品、平面設計、介面設計等等，輕鬆收集世界各地設計師的最酷創作！不僅如此，他還可以跟 Dribbble、Designer News、Sidebar、CSS Winner、The Next Web 等設計類媒體平台整合在一起，省下瀏覽各家網站的時間！