切图
切图是UI设计和前端开发领域的术语，指把设计稿里的按钮、图标、图片等界面元素单独拆出来，导出成开发能直接调用的图片或组件资源。
什么意思
3 个义项- 把设计稿中的界面元素拆出来，导出成开发可直接使用的图片或组件资源。这些元素通常是代码不便直接实现、需要独立调用的视觉部分，比如按钮、图标、插画、商品卡片。
- 按范围不同，切图可以只处理单个元素，也可以按功能模块成组导出，甚至整屏导出一张图。单元素切图是常见做法，整页切图多用于展示或快速验证效果。
- 在设计与开发的协作流程中，切图是设计稿输出之后、开发还原界面之前的交付环节。开发按切好的图填充对应位置，图切得规范能减少重复沟通和还原偏差。
什么语气
中性偏专业，是设计师和前端之间日常沟通用的工作词汇，不带褒贬色彩，也不会出现在休闲聊天的娱乐语境里。
用在哪儿
- 设计师完成界面设计稿后，导出按钮、图标等素材并命名打包，交付给开发。
- 开发拿到设计稿后，自行从设计文件里导出需要的图片资源，不一定等设计师交付。
- 团队讨论交付规范时，提到切图命名、分辨率倍率和导出格式等问题。
- 设计工具或协作平台的教程、功能介绍里，介绍自动切图、批量导出、多倍率生成等能力。
这样说
这版稿子改完了，我把几个图标切图发你，你先接一下。
这些图标你先别急着切图，等交互确认了我一起导。
切图记得带上@2x和@3x，不然开发那边要重新弄。
他把整个页面导成一张大图给我，我说这个不用切图，你直接标尺寸就行。
例句是编辑写的，只为演示怎么用，不是从谁的帖子里扒下来的。
从哪来的
切图是设计与开发协作流程中形成的行业说法，资料中未见关于这个词创造者、最早出处或确切开始流行时间的可信记录。它的工作方式从早期靠手工在Photoshop等软件中裁切、导出并打包，逐步转向设计软件和协作平台自动标记、批量导出、多倍率生成、开发按需下载，但人工处理在部分模块上仍然存在。
注意什么
切图和标注不是一回事：切图交付的是图片或组件资源，标注说明的是布局、尺寸、颜色、字体等实现信息，两者常一起出现但内容不同，混用容易让协作沟通出岔子。切图也不是把整个界面导成一张大图交付，通常只导出代码不便直接实现、需要独立调用的视觉元素。由谁切图没有统一规则，有的团队要求设计师切好交付，有的开发自行处理，用错假设去催对方容易被当成不懂流程。
还不确定
- 切图由谁负责没有统一规则：有资料把它视为UI设计的一部分，同时承认前端也可直接切图；也有资料记录有的开发要求设计师交付成品、有的开发自行处理，应以具体团队流程为准。
- 不同来源对切图范围表述有宽窄差异：有的仅指拆分并导出图片素材，有的还把模块、整页或可直接使用的组件纳入其中，具体所指需结合项目和工具判断。
- 未检得可靠的词源及最早使用证据，无法判断这个词的起源或最初流行时间。
常见疑问
切图是什么意思？
切图是UI设计和前端开发里的说法，指把设计稿中的按钮、图标、图片等元素单独拆出来，导出成开发可以直接调用的图片或组件资源，用在设计稿到开发实现的交付环节。
切图和标注有什么区别？
切图交付的是图片或组件资源本身，标注说的是布局、尺寸、颜色、字体这些实现信息，两者是设计与开发协作里相邻但不同的两件事，经常一起出现。
切图一般由谁来做？
没有统一规则。有的团队要求设计师切好、命名好再交给开发，有的开发直接拿设计文件自己导，具体看各团队的分工习惯，最好提前沟通清楚。
切图要切哪些东西？
通常是代码不便直接实现、需要独立调用的视觉元素，比如按钮、图标、插画、商品卡片。整页导出一张大图多用于展示或快速验证，不是常规交付方式。
切图要导出成什么格式和倍率？
常见格式有PNG、JPG、SVG，具体按元素类型选。iOS切图常在命名后加@2x、@3x后缀，安卓一般不需要加后缀，有的开发会另外要求带上尺寸。
切图命名有什么讲究？
命名要能表达元素含义和状态，比如按钮的默认、点击、按下、不可点击等状态要区分开。命名规范是为了让开发一眼看懂，减少来回确认。
切图可以自动完成吗？
不少设计工具和协作平台支持自动切图、批量导出和多倍率生成，能省掉大量重复操作。但有些模块用插件导不出程序需要的尺寸，仍然要靠人工处理。