前端切圖是前端工程師們還原設計稿的過程中必不可缺的一環。不過，切圖工作究竟誰來做？這個問題我們在各大論壇也屢見不鮮：前端工程師認為設計師出了設計稿，那麼相應的切圖也應該一併交付；設計師則認為前端工程師給的要求太多太雜，不如他們自己動手來得專業。

不過隨著專業切圖工具的發展，切圖工作從幾年前的“刀耕火種”，進化到了如今的“一鍵到位”，設計師和前端工程師之間的“紛爭”自然也逐漸消散。那麼近年來崛起的多款前端切圖工具中，又有哪些能稱得上是真正的“切圖神器”呢？我們一起來盤點一下。

摹客

摹客支援對Figma，Adobe XD，Sketch和Photoshop的設計稿進行標註切圖，可以一鍵切換下載web/Android/iOS不同倍率的切圖，還可以自定義切圖尺寸。切圖壓縮功能可以將切圖的體積壓縮50%以上，可以靈活滿足前端工程師對於切圖的各種需求。除了標註切圖，摹客也為產品開發團隊提供高保真設計、設計稿交付、全流程協作和設計規範管理等功能。

功能優勢：

支援下載Figma，Adobe XD，Sketch和Photoshop設計稿的切圖；

支援自由切換平臺（iOS、Android、Web）和選擇倍率；

支援將下載的切圖體積壓縮50%以上；

支援下載PNG/SVG/WebP/JPG切圖；

支援同時下載多個頁面的切圖；

支援設定安卓切圖資料夾名稱；

支援自動換算不同平臺尺寸。

推薦指數：★★★★★

Avocode

Avocode是本次介紹的五款工具中，唯一一款支援Adobe Illustrator設計稿標註切圖的外掛，除了Adobe Illustrator，Avocode也支援Figma、Adobe XD、Photoshop和Sketch設計稿的切圖下載。如果沒有設計工具，也可以直接將設計檔案拖到網頁端開啟，檢視和複用相關程式碼資訊，下載切圖等。不過Avocode的缺陷是訪問速度較慢，需要科學上網。

功能特色：

支援在macOS，Windows和Linux上執行；

支援iOS/Android/web三種類型；

無需下載設計工具，可直接在瀏覽器中開啟設計檔案。

推薦指數：★★★★

Cutterman

Cutterman是前幾年比較熱門的一款切圖外掛，可以切換iOS、Android、web平臺不同尺寸的切圖，支援Photoshop和Sketch。外掛的介面比較“傻瓜”，平臺切換、尺寸設定、格式設定等都按鈕直接鋪設在首頁，不用你記住一堆設定方式或操作規則，新手也可以快速上手。不過隨著其它切圖工具的興起，Cutterman無論是支援的設計稿型別，還是切圖相關功能，都有點跟不上發展的腳步。

功能特色：

支援輸出png/jgp/tiff/svg/pdf/eps多種格式；

支援選中多個圖層批次輸出；

支援輸出固定尺寸的ICON；

自動切換android和ios平臺；

推薦指數：★★★

Easy Cut

前段時間許多公眾號都在推薦一款外掛，出於好奇，我便了解了一下這款號稱是“PS最強切圖神器”的外掛——Easy Cut。這款外掛最大的特色是可以自由繪製切割路徑或新增引導線，並快速將圖層準確地分割成一個或者多個圖層。Easy Cut的功能相對來說比較單一，相比於其它可以切換iOS和Android平臺的外掛來說，適用場景較少。

功能特色：

支援剪下多種圖層型別（畫素圖層，形狀，文字，智慧物件等）

支援將圖層分成相等大小的部分

支援根據事件自動剪下（繪製單點路徑等）

可在後臺執行（在面板關閉時使用剪下功能）

切割結果可分為兩層或更多層

支援保留圖層樣式和Shapeattributes

支援新增名稱附錄的選項

可編輯的形狀切割（關閉“合併路徑元件”）

支援一鍵處理所有選定的圖層

可與任何活動的標尺單位一起使用

切割前可以對智慧物件進行柵格化的選項

推薦指數：★★★

zeplin

Zeplin和摹客一樣，也是最近幾年比較熱門的一款設計協作工具，支援對Figma，Adobe XD，Sketch和Photoshop設計稿進行切圖，可以一鍵下載不同平臺不同倍率的切圖。不只是切圖，Zeplin同樣也支援部分團隊協作功能，適合中小型團隊使用。除了境外伺服器的體驗速度有點小缺陷外，還是值得體驗的。

功能特色：

支援下載Figma，Adobe XD，Sketch和Photoshop設計稿的切圖；

支援自由切換平臺（iOS、Android、Web）和選擇倍率；

支援設定切圖背景；

支援下載多個畫板的切圖；

支援下載PNG跟SVG兩種格式。

推薦指數：★★★★

關於切圖工具，不同的設計師或前端工程師也有著不同的使用習慣。上述五款工具，在功能和操作上各具特色，有了好的切圖工具，前端工程師在自行下載切圖的過程中，就可以更好地理解設計稿和設計師的意圖，更好地還原設計稿，將效率最高化。