前端切圖是前端工程師們還原設計稿的過程中必不可缺的一環。不過，切圖工作究竟誰來做？這個問題我們在各大論壇也屢見不鮮：前端工程師認爲設計師出了設計稿，那麼相應的切圖也應該一併交付；設計師則認爲前端工程師給的要求太多太雜，不如他們自己動手來得專業。
不過隨着專業切圖工具的發展，切圖工作從幾年前的“刀耕火種”，進化到了如今的“一鍵到位”，設計師和前端工程師之間的“紛爭”自然也逐漸消散。那麼近年來崛起的多款前端切圖工具中，又有哪些能稱得上是真正的“切圖神器”呢？我們一起來盤點一下。
摹客
前端工程師和設計師關於切圖的紛爭，往往是因爲設計師無法根據前端工程師的需求完成切圖，比如圖片沒有壓縮或合併，命名不規範等，這樣前端拿到切圖仍然需要重新處理。有了摹客，設計師只需對需要切圖的位置進行標記，並不需要指定格式，大小或者壓縮率等信息。開發可以按照自己的需求快速完成切圖設置並下載。此外，切圖伴隨設計稿一起交付，也會減少前端出錯的機率。除了標註切圖，摹客也爲產品開發團隊提供高保真設計、設計稿交付、全流程協作和設計規範管理等功能。
功能優勢：
支持下載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一定是一款值得體驗的好產品，不過昂貴的收費也讓不少設計師望而卻步。首次註冊Avocode後，會有14天的試用期，所以如果你實在囊中羞澀，也可以通過註冊多個賬號來體驗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同樣也支持部分團隊協作功能，適合中小型團隊使用。Zeplin目前沒有中文界面，對於語言不通的設計師和開發來說體驗並不太好，較高的費用也成爲了阻擋體驗的一道門檻。
功能特色：
支持下載Figma，Adobe XD，Sketch和Photoshop設計稿的切圖；
支持自由切換平臺（iOS、Android、Web）和選擇倍率；
支持設置切圖背景；
支持下載多個畫板的切圖；
支持下載PNG跟SVG兩種格式。
推薦指數：★★★★
小結
通過對上述五款切圖工具的分析可以看出，單機切圖導出的方案已經逐漸被市場淘汰，使用協作平臺完成設計交付已經成爲沒有爭議的主流，因此建議產品設計研發團隊的同學們可以儘量多去體驗協作平臺的交付功能。如果不想在前期體驗過程中投入費用，也有摹客這樣的支持百人團隊免費使用的協作平臺可供選擇。易用的前端切圖功能搭載設計協作平臺，可以讓前端工程師在自行下載切圖的過程中，更好地理解設計稿和設計師的意圖，還原設計稿，從而實現效率最高化。