根据你使用的设计工具,查看各自的使用方法
Figma 设置切图
方法一:添加「导出」设置
适合导出切图的尺寸和元素尺寸相同时使用
![](/blog/_assets/f428757897adefa.png)
操作方法:
第一步:在 Figma 里选中「元素图层」或「组」;
第二步:右侧信息面板里添加「Export(导出)」,切图设置完成。
第三步:导出到本地,或者上传到 Moonvy 月维
切图添加成功之后打开 Moonvy 插件上传;月维会自动导出切图多倍数,不用自己再次手动设置。工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了
方法二:导出自定义区域
适合导出尺寸和元素尺寸不同时的情况
![](/blog/_assets/de69c2dac6f9551c.png)
操作方法:
第一步:左上角菜单栏「Slice(切片)」; 快捷键 S
第二步:在要添加切图的元素上拖拽出一个区域,会增加一个名称为 「Slice」 的切片图层;
第三步:设置成功后在右侧面板预览一下切图效果,确认是否是理想尺寸和状态。
第四个:可以保存到本地或者上传到 Moonvy 月维
切图添加成功之后打开 Moonvy 插件上传; 月维会自动导出切图多倍数,不用自己再次手动设置。 工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了
隐藏切图范围
中文:Figma 菜单 > 查看 > 显示切片
, 取消勾选即可隐藏切图范围
英文:Figma > View > Show slices
![](/blog/_assets/1400dfa97e881e9f.png)
自动继承切图
为了避免多次重复的设置切图,使用「继承切图」更快更省力
继承的前提是 组件 或 变体
操作方法:
第一步:在原始组件上,添加「Export 导出」
第二步:设计图里使用「实例」
第三步:将设计图上传到「 Moonvy 月维」,月维会自动将实例里的切图设置保留并生成多倍数切图。
![在原始组件上添加导出设置](/blog/_assets/95660faf1c36114d.png)
![设计图上传到 Moonvy 月维,实例会自动继承原组件切图](/blog/_assets/19e244247b61d079.png)
如果在原组件添加导出,实例没有自动同步属性的话,可以手动触发更新,在「原始组件」修改一下图层叠加模式,切换为其他的再切换回来就好了。
![手动触发更新](/blog/_assets/5a518d75cb58ba3.png)
切图如何做到「元素」和「投影数据」分开?
投影和切图分离,切图尺寸不受影响并且有投影参数
![](/blog/_assets/fa95844b821b5f02.jpg)
具体做法
图标上加个父级新建个 Group(组),投影设置加到图层 Group 上,切图标记加在独立的 Frame 上,然后上传到 Moonvy月维,链接给工程师就可以了。
![](/blog/_assets/1e0e0248f3072860.jpg)
Sketch 设置切图
方法一:添加「导出项」
适合导出切图的尺寸和元素尺寸相同时使用
![](/blog/_assets/5b3b4daecf2bc546.png)
操作方法:
第一步:选中「元素图层」或「组」;
第二步:右侧信息面板里添加「制作导出项」,下面出现切图预览,则切图设置完成。
第三步:导出到本地,或者上传到 Moonvy 月维
切图添加成功之后打开 Moonvy 插件上传;月维会自动导出切图多倍数,不用自己再次手动设置。工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了
方法二:导出自定义区域
适合导出尺寸和元素尺寸不同时的情况
![](/blog/_assets/d8ede6f36844bb74.png)
操作方法:
第一步:左上角「切片」;
第二步:在元素上单击或者拖拽出一个区域,会增加一个切片图层;
第三步:可以导出到本地或者上传到 Moonvy 月维
切图添加成功之后打开 Moonvy 插件上传; 月维会自动导出切图多倍数,不用自己再次手动设置。 工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了
自动继承切图
为了避免多次重复的设置切图,使用「继承切图」更快更省力
继承的前提是 组件
第一步:在原始组件上,添加「导出项」
第二步:设计图里使用「实例」
第三步:将设计图上传到「 Moonvy 月维」,月维会自动将实例里的切图设置保留并生成多倍数切图。
即时设计 设置切图
方法一:添加「导出」
适合导出切图的尺寸和元素尺寸相同时使用
![](/blog/_assets/f621fed3072214f5.png)
操作方法:
第一步:选中「元素图层」或「组」;
第二步:右侧信息面板里添加「导出」,下面出现切图预览,则切图设置完成。
第三步:导出到本地,或者上传到 Moonvy 月维
切图添加成功之后打开 Moonvy 插件上传;月维会自动导出切图多倍数,不用自己再次手动设置。工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了
方法二:导出自定义区域
适合导出尺寸和元素尺寸不同时的情况
![](/blog/_assets/220bfab641bd9181.png)
操作方法:
第一步:在左侧工具条打开「切片」;快捷键 S
第二步:在元素上拖拽出一个区域,目录上会增加一个切片图层;
第三步:可以导出到本地或者上传到 Moonvy 月维
切图添加成功之后打开 Moonvy 插件上传; 月维会自动导出切图多倍数,不用自己再次手动设置。 工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了
自动继承切图
为了避免多次重复的设置切图,使用「继承切图」更快更省力
继承的前提是 组件
第一步:在原始组件上,添加「导出项」
第二步:设计图里使用「实例」
第三步:将设计图上传到「 Moonvy 月维」,月维会自动将实例里的切图设置保留并生成多倍数切图。
![](/blog/_assets/d8da6a73ea19e333.png)