前端切圖是前端工程師們還原設(shè)計(jì)稿的過程中必不可缺的一環(huán)。不過，切圖工作究竟誰來做？這個(gè)問題我們在各大論壇也屢見不鮮：前端工程師認(rèn)為設(shè)計(jì)師出了設(shè)計(jì)稿，那么相應(yīng)的切圖也應(yīng)該一并交付；設(shè)計(jì)師則認(rèn)為前端工程師給的要求太多太雜，不如他們自己動(dòng)手來得專業(yè)。

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

摹客

前端工程師和設(shè)計(jì)師關(guān)于切圖的紛爭，往往是因?yàn)樵O(shè)計(jì)師無法根據(jù)前端工程師的需求完成切圖，比如圖片沒有壓縮或合并，命名不規(guī)范等，這樣前端拿到切圖仍然需要重新處理。有了摹客，設(shè)計(jì)師只需對需要切圖的位置進(jìn)行標(biāo)記，并不需要指定格式，大小或者壓縮率等信息。開發(fā)可以按照自己的需求快速完成切圖設(shè)置并下載。此外，切圖伴隨設(shè)計(jì)稿一起交付，也會(huì)減少前端出錯(cuò)的幾率。除了標(biāo)注切圖，摹客也為產(chǎn)品開發(fā)團(tuán)隊(duì)提供高保真設(shè)計(jì)、設(shè)計(jì)稿交付、全流程協(xié)作和設(shè)計(jì)規(guī)范管理等功能。

功能優(yōu)勢：

• 支持下載Figma，Adobe XD，Sketch和Photoshop設(shè)計(jì)稿的切圖；

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

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

• 支持下載PNG/SVG/WebP/JPG切圖；

• 支持同時(shí)下載多個(gè)頁面的切圖；

• 支持設(shè)置安卓切圖文件夾名稱；

• 支持自動(dòng)換算不同平臺尺寸。

推薦指數(shù)：★★★★★

Avocode

Avocode是本次介紹的五款工具中，唯一一款支持Adobe Illustrator設(shè)計(jì)稿標(biāo)注切圖的插件，除了Adobe Illustrator，Avocode也支持Figma、Adobe XD、Photoshop和Sketch設(shè)計(jì)稿的切圖下載。如果沒有設(shè)計(jì)工具，也可以直接將設(shè)計(jì)文件拖到網(wǎng)頁端打開，查看和復(fù)用相關(guān)代碼信息，下載切圖等。單從功能來看，Avocode一定是一款值得體驗(yàn)的好產(chǎn)品，不過昂貴的收費(fèi)也讓不少設(shè)計(jì)師望而卻步。首次注冊Avocode后，會(huì)有14天的試用期，所以如果你實(shí)在囊中羞澀，也可以通過注冊多個(gè)賬號來體驗(yàn)Avocode的強(qiáng)大功能。

功能特色：

• 支持在macOS，Windows和Linux上運(yùn)行；

• 支持iOS/Android/web三種類型；

• 無需下載設(shè)計(jì)工具，可直接在瀏覽器中打開設(shè)計(jì)文件。

推薦指數(shù)：★★★★★

Cutterman

Cutterman是前幾年比較熱門的一款切圖插件，可以切換iOS、Android、web平臺不同尺寸的切圖，支持Photoshop和Sketch。插件的界面比較“傻瓜”，平臺切換、尺寸設(shè)置、格式設(shè)置等都按鈕直接鋪設(shè)在首頁，不用你記住一堆設(shè)置方式或操作規(guī)則，新手也可以快速上手。不過隨著設(shè)計(jì)協(xié)同工具的興起，切圖已經(jīng)成為了設(shè)計(jì)協(xié)同過程中的一環(huán)，Cutterman單一的切圖導(dǎo)出功能顯然有點(diǎn)跟不上發(fā)展的腳步。

功能特色：

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

• 支持選中多個(gè)圖層批量輸出；

• 支持輸出固定尺寸的ICON；

• 自動(dòng)切換android和ios平臺；

推薦指數(shù)：★★★

Easy Cut

前段時(shí)間許多公眾號都在推薦一款插件，出于好奇，我便了解了一下這款號稱是“PS最強(qiáng)切圖神器”的插件——Easy Cut。這款插件最大的特色是可以自由繪制切割路徑或添加引導(dǎo)線，并快速將圖層準(zhǔn)確地分割成一個(gè)或者多個(gè)圖層。Easy Cut的功能相對來說比較單一，相比于其它可以切換iOS和Android平臺的插件來說，適用場景較少。

功能特色：

• 支持根據(jù)事件自動(dòng)剪切（繪制單點(diǎn)路徑等）

• 可在后臺運(yùn)行（在面板關(guān)閉時(shí)使用剪切功能）

• 支持保留圖層樣式和Shapeattributes

• 支持添加名稱附錄的選項(xiàng)

• 可編輯的形狀切割（關(guān)閉“合并路徑組件”）

• 切割前可以對智能對象進(jìn)行柵格化的選項(xiàng)

推薦指數(shù)：★★★

zeplin

Zeplin和摹客一樣，也是最近幾年比較熱門的一款設(shè)計(jì)協(xié)作工具，支持對Figma，Adobe XD，Sketch和Photoshop設(shè)計(jì)稿進(jìn)行切圖，可以一鍵下載不同平臺不同倍率的切圖。不只是切圖，Zeplin同樣也支持部分團(tuán)隊(duì)協(xié)作功能，適合中小型團(tuán)隊(duì)使用。Zeplin目前沒有中文界面，對于語言不通的設(shè)計(jì)師和開發(fā)來說體驗(yàn)并不太好，較高的費(fèi)用也成為了阻擋體驗(yàn)的一道門檻。

功能特色：

• 支持下載Figma，Adobe XD，Sketch和Photoshop設(shè)計(jì)稿的切圖；

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

• 支持設(shè)置切圖背景；

• 支持下載多個(gè)畫板的切圖；

• 支持下載PNG跟SVG兩種格式。

推薦指數(shù)：★★★★

小結(jié)

通過對上述五款切圖工具的分析可以看出，單機(jī)切圖導(dǎo)出的方案已經(jīng)逐漸被市場淘汰，使用協(xié)作平臺完成設(shè)計(jì)交付已經(jīng)成為沒有爭議的主流，因此建議產(chǎn)品設(shè)計(jì)研發(fā)團(tuán)隊(duì)的同學(xué)們可以盡量多去體驗(yàn)協(xié)作平臺的交付功能。如果不想在前期體驗(yàn)過程中投入費(fèi)用，也有摹客這樣的支持百人團(tuán)隊(duì)免費(fèi)使用的協(xié)作平臺可供選擇。易用的前端切圖功能搭載設(shè)計(jì)協(xié)作平臺，可以讓前端工程師在自行下載切圖的過程中，更好地理解設(shè)計(jì)稿和設(shè)計(jì)師的意圖，還原設(shè)計(jì)稿，從而實(shí)現(xiàn)效率最高化。