如果问一个设计师，在设计稿交付过程中，最讨厌的一项工作是什么，答案一定是切图。
开发需要不同平台、不同尺寸的切图，因此设计师也需要交付多套切图。更可怕的是，每当设计稿发生任何变动，切图的流程又需要重来一遍！
然而，切图又是一项很重要且不得不做的工作。合适、精准的切图可以最大程度还原设计图，为之后的开发起到事半功倍的效果。
那么问题来了，如何更好更快地切图呢？
选择一款优秀的切图工具就行！作为一名资深设计师，在这里我为大家精心挑选了10款切图工具，它们大都操作简单方便上手，一起来看看吧~
一、摹客
摹客（www.mockplus.cn/）是一款全能的产品设计协作平台，不仅能进行快速原型设计、专业UI设计，还能进行高效协同工作。在切图上，摹客的切图功能十分全面，使用起来也很简单，只需上传设计稿，前端就可以根据需要自主下载不同平台尺寸、不同倍率、不同格式的图片。
1、主要功能及亮点：
1）一键切图：支持Sketch、Photoshop、Adobe XD、Figma自动切图，前端开发工程师可自主获取，高效交付。
2）切图可压缩，压缩后体积缩小50%以上
3）提供批量导出切图功能，支持同时下载多个页面的切图。
4）预设了iOS、 Android设备的尺寸、倍率、前后缀、格式等参数，无需设计师单独制作不同参数类型的切图。
5）市面上最全的标注方案，手动标注和自动标注自由切换，既解放了双手，又关照了细节。
**2、使用环境：**基于Web的平台，无设备和系统限制。
**3、推荐理由：**摹客不仅是一个切图工具，还是一个强大的设计协作平台。它让设计师和开发者一起高效协作，确保设计项目的一致性和准确性，是一个多功能、全方位的设计助手。
**4、推荐评级：**⭐⭐⭐⭐⭐
二、Sketch
Sketch（www.sketch.com/）是一款专业的UI/U...
1、主要功能及亮点：
-
1）切片工具：Sketch提供了直观的切片工具，让设计师能够轻松选择和定义需要切割的区域。
-
2）自动导出和批量导出：支持自动导出功能，设计师也可以批量选择多个切片进行同时导出，提高工作效率。
3）SVG导出和矢量支持：对于需要保留矢量信息的图形元素，Sketch支持将其导出为SVG格式，保持图像的矢量特性。
4）Sketch支持多种图片格式的导出，包括JPG、PNG、SVG、PDF等。
**2、使用环境：**macOS操作系统
3、推荐理由：
Sketch的切图功能设计得十分灵活，为设计师提供了丰富的工具和选项，使切图过程更加高效和精确。可惜的是，它只支持macOS系统，限制了部分用户使用。
**4、推荐评级：**⭐⭐⭐⭐
三、Figma
Figma是一款基于云的协作设计工具，支持团队协作并实时同步，能够无缝衔接产品、设计与研发。它不仅支持精细的界面设计，还提供强大的切图功能，深受广大UI/UX 设计师们的喜爱。
1、主要功能及亮点：
-
1）界面设计：提供全面的工具和功能来设计界面，包括矢量图形工具、网格和布局指导等。
-
2）多种切图方式：支持单个图标切图、切片工具切图、各种切图插件切图，同时研发模式支持一键复制 HTML 和 CSS 样式参数。
-
3）插件生态系统：Figma具有丰富的插件生态系统，可以通过插件扩展功能，增加额外的设计工具和集成，以满足特定需求。
2、**使用环境：**基于Web的平台，通过浏览器即可使用。
**3、推荐理由：**Figma不仅是一个界面设计工具，在切图方面也表现出色，还特别适用于多人协作设计。
**4、推荐评级：**⭐⭐⭐⭐
四、Zeplin
Zeplin（zeplin.io/）是一款专为加强设计师...
1、主要功能及亮点
-
1）设计稿导入：支持从设计工具（如Sketch、Figma、Adobe XD等）中导入设计稿，保留图层结构和样式信息。
-
2）标注和导出代码：不仅提供了切图功能，还可以生成标注和导出代码，方便开发人员理解和实现设计。
-
3）支持团队协作，可以实时共享和讨论设计稿。
**2、使用环境：**Windows和macOS均可使用
**3、推荐理由：**Zeplin让的设计到开发过渡十分平滑，特别适合团队中的设计师和开发者之间的协作，减少沟通成本和误差。
**4、推荐评级：**⭐⭐⭐⭐⭐
五、Adobe XD
Adobe XD（helpx.adobe.com/support/xd.... XD将设计稿快速切图，并生成所需的图像资源。
1、主要功能及亮点：
-
1）标注和切图： Adobe XD具有内置的标注和切图工具，使设计师能够轻松将设计稿中的元素标记并导出。
-
2）多平台导出： 设计师可以选择导出不同平台所需的多种尺寸和分辨率，以适应各种设备和屏幕。
-
3）设计师可以直接与开发人员共享设计稿，并提供实时的标注和切图信息。
**2、使用环境：**需要下载软件，支持Mac和Win系统。
3、推荐理由：
Adobe XD与Adobe Creative Cloud紧密集成，十分方便同时使用Adobe其他软件的用户。不过有个问题是，Adobe xd已经官宣停止更新，只向老用户提供服务了，如果是之前没有使用Adobe XD的用户，最好选择其他产品。
**4、推荐评级：**⭐⭐⭐
六、Flinto
Flinto（www.flinto.com/）是一款强大的原型设计...
1、主要功能及亮点：
-
1）动画原型：Flinto有强大的动画功能，包括过渡、弹性效果、旋转等效果。
-
2）手势导航：支持10多种手势，允许用户使用轻触、滑动、滚动甚至3D触摸进行原型导航。
-
3）屏幕切图：Flinto的切片工具能够自动检测标题栏、选项卡栏、工具栏和键盘，简化切图流程。
**2、使用环境：**macOS操作系统
**3、推荐理由：**Flinto是一款强大的交互式动画原型工具，可以用它切图，不过Flinto更侧重于原型和动效的展示，不是专门的切图工具。
4、推荐评级：⭐⭐⭐
**七、**Photoshop
Photoshop作为一个知名的图像编辑工具，在切图方面也表现很出色，可以满足用户从简单裁剪到复杂切图的所有需求。
1、主要功能及亮点：
-
1）复杂图像处理：Photoshop提供了各种图像编辑工具，包括选择工具、画笔、橡皮擦、修复工具等，使用户能够精确地编辑图像。
-
2）切片工具：内置切片工具，设计师能够手动创建、调整和定位切片，让图像切割更精准。
-
3）色彩调整：软件提供了强大的色彩调整工具，用户可以调整图像的亮度、对比度、饱和度等参数，以实现更好的视觉效果。
**2、使用环境：**支持Mac和Win系统
**3、推荐理由：**Photoshop支持像素级编辑，切图功能非常灵活，不愧是很多专业人士的最受青睐的专业切图软件之一。
4、推荐评级：⭐⭐⭐****⭐
八、Cutterman
Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。
1、主要功能及亮点：
1）一键切图：只需要点击一个按钮，就自动输出你需要的各种各样的图片
-
2）UI切图模式：输出支持IOS/Android/Web平台的双倍图，多倍图，自动为文件名添加比例后缀和添加文件夹。
-
3）支持各种各样的图片尺寸、格式、形态输出，可在pc、ios、Android等端上使用。
**2、使用环境：**仅支持ps切图，支持Mac和Win系统
**3、推荐理由：**Cutterman不需要记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
4、推荐评级：⭐⭐⭐⭐
九、PNG EXPRESS
PNG EXPRESS（www.pngexpress.com/）是一款Photosh... PNG、JPG 和 SVG 资源，方便设计师进行导出和交付，并生成匹配的设计规范。
1、主要功能及亮点：
1）通过自动化切割和导出功能，PNG EXPRESS 可以加快设计交付的速度，提高工作效率。
-
2）可生成与导出资源相匹配的设计规范，包括尺寸、距离、字体特性等信息，为开发人员提供清晰的参考。
-
3）不仅可以切图，还集成了图像压缩功能，可自动进行图像压缩，减小文件大小。
**2、使用环境：**支持Mac和Win系统
3、推荐理由：
PNG EXPRESS 对设计师来说简单灵活，同时还能为开发人员提供清晰一致的可交付成果，大大提高了提高工作效率和沟通效果。
4、推荐评级：⭐⭐⭐⭐
**十、**GIMP
GIMP（www.gimp.org/）是一款免费开源的图像...
1、主要功能及亮点：
1）丰富的图像编辑工具：包括选择、裁剪、调整色彩和对比度、添加滤镜效果等，GIMP支持多层图像编辑，可以对每个图层进行独立的编辑和调整。
-
2）图层功能：可将不同元素放置在不同的图层上，再根据需要进行切割和编辑，帮助你在切图过程中更好地管理图像的不同部分。
-
3）支持多种图像格式，包括BMP、GIF、JPG、PCX、PNG、PS、TIF、TGA、XPM等。
4）插件支持：GIMP 支持插件扩展，用户可以根据需要安装和使用各种插件。
**2、使用环境：**支持Windows、Mac和Linux
3、推荐理由：
GIMP是一款免费、功能丰富且十分容易上手的图像处理软件，无论是照片修复、图像编辑、创作数字艺术，还是切图导出，GIMP都能满足你的需求。
4、推荐评级：⭐****⭐
以上就是我为大家推荐的10款切图软件，相信其中一定有让你满意的款。
选择合适的切图工具至关重要，它可以极大地提高工作效率，确保设计和开发的顺畅衔接，好的切图工具甚至能让自己每天少加1小时班！不多说了，不妨现在就选择一款，开启高效切图吧~