设置切图

设置切图

根据你使用的设计工具,查看各自的使用方法

Figma 设置切图

方法一:添加「导出」设置

适合导出切图的尺寸和元素尺寸相同时使用

操作方法

第一步:在 Figma 里选中「元素图层」或「组」;

第二步:右侧信息面板里添加「Export(导出)」,切图设置完成。

第三步:导出到本地,或者上传到 Moonvy 月维

切图添加成功之后打开 Moonvy 插件上传;月维会自动导出切图多倍数,不用自己再次手动设置。工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了

不想重复多次设置切图?了解一下继承切图

方法二:导出自定义区域

适合导出尺寸和元素尺寸不同时的情况

操作方法:

第一步:左上角菜单栏「Slice(切片)」; 快捷键 S

第二步:在要添加切图的元素上拖拽出一个区域,会增加一个名称为 「Slice」 的切片图层;

第三步:设置成功后在右侧面板预览一下切图效果,确认是否是理想尺寸和状态。

第四个:可以保存到本地或者上传到 Moonvy 月维

切图添加成功之后打开 Moonvy 插件上传;
月维会自动导出切图多倍数,不用自己再次手动设置。
工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了

隐藏切图范围

中文:Figma 菜单 > 查看 > 显示切片, 取消勾选即可隐藏切图范围

英文:Figma > View > Show slices

自动继承切图

为了避免多次重复的设置切图,使用「继承切图」更快更省力

继承的前提是 组件变体

操作方法:

第一步:在原始组件上,添加「Export 导出

第二步:设计图里使用「实例」

第三步:将设计图上传到「 Moonvy 月维」,月维会自动将实例里的切图设置保留并生成多倍数切图。

在原始组件上添加导出设置
在原始组件上添加导出设置
设计图上传到 Moonvy 月维,实例会自动继承原组件切图
设计图上传到 Moonvy 月维,实例会自动继承原组件切图

如果在原组件添加导出,实例没有自动同步属性的话,可以手动触发更新,在「原始组件」修改一下图层叠加模式,切换为其他的再切换回来就好了。

手动触发更新
手动触发更新

在图层名加前缀设置切图

可以手动给图层名称添加导出标记,这样可以在任何地方继承,不需要受到跨文件、跨团队等限制的影响。仅 Moonvy 月维支持这样的切图设置。

图层后缀 说明
.export 将当前图层作为切图导出
.导出 将当前图层作为切图导出
图层前缀 说明
-export- 将当前图层作为切图导出

忽略不需要标注的图层

设计图中一些图层不需要显示在标注中,你可以通过特殊的图层名称前缀来忽略他们:

文件名前缀 说明
-x- 忽略这个图层/组/ Frame 的参数信息,切图会上传
-bg- 忽略此图层的子图层,但显示此图层
✨在 Figma 中修改图层名即可
✨在 Figma 中修改图层名即可

切图如何做到「元素」和「投影数据」分开?

投影和切图分离,切图尺寸不受影响并且有投影参数

具体做法

图标上加个父级新建个 Group(组),投影设置加到图层 Group 上,切图标记加在独立的 Frame 上,然后上传到 Moonvy月维,链接给工程师就可以了。


Sketch 设置切图

方法一:添加「导出项」

适合导出切图的尺寸和元素尺寸相同时使用

操作方法

第一步:选中「元素图层」或「组」;

第二步:右侧信息面板里添加「制作导出项」,下面出现切图预览,则切图设置完成。

第三步:导出到本地,或者上传到 Moonvy 月维

切图添加成功之后打开 Moonvy 插件上传;月维会自动导出切图多倍数,不用自己再次手动设置。工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了

方法二:导出自定义区域

适合导出尺寸和元素尺寸不同时的情况

操作方法:

第一步:左上角「切片」;

第二步:在元素上单击或者拖拽出一个区域,会增加一个切片图层;

第三步:可以导出到本地或者上传到 Moonvy 月维

切图添加成功之后打开 Moonvy 插件上传;
月维会自动导出切图多倍数,不用自己再次手动设置。
工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了

自动继承切图

为了避免多次重复的设置切图,使用「继承切图」更快更省力

继承的前提是 组件

第一步:在原始组件上,添加「导出项

第二步:设计图里使用「实例」

第三步:将设计图上传到「 Moonvy 月维」,月维会自动将实例里的切图设置保留并生成多倍数切图。


即时设计 设置切图

方法一:添加「导出」

适合导出切图的尺寸和元素尺寸相同时使用

操作方法

第一步:选中「元素图层」或「组」;

第二步:右侧信息面板里添加「导出」,下面出现切图预览,则切图设置完成。

第三步:导出到本地,或者上传到 Moonvy 月维

切图添加成功之后打开 Moonvy 插件上传;月维会自动导出切图多倍数,不用自己再次手动设置。工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了

方法二:导出自定义区域

适合导出尺寸和元素尺寸不同时的情况

操作方法:

第一步:在左侧工具条打开「切片」;快捷键 S

第二步:在元素上拖拽出一个区域,目录上会增加一个切片图层;

第三步:可以导出到本地或者上传到 Moonvy 月维

切图添加成功之后打开 Moonvy 插件上传;
月维会自动导出切图多倍数,不用自己再次手动设置。
工程师打开就可以下载 iOS、Web 和 Android 的多倍数切图了

自动继承切图

为了避免多次重复的设置切图,使用「继承切图」更快更省力

继承的前提是 组件

第一步:在原始组件上,添加「导出项

第二步:设计图里使用「实例」

第三步:将设计图上传到「 Moonvy 月维」,月维会自动将实例里的切图设置保留并生成多倍数切图。