微信加关注

Figma导出安卓标注

◇适用条件

figma实际上自带标注,但是在端开发时,安卓开发同学想要有调整成安卓宽度的功能,于是这个软件很好的解决了这个问题。


◇使用步骤

1.开启标记狮客户端,安装对应的软件插件

2.在软件中添加好切图导出标记

3.点击标记狮客户端中的导出到本地按钮

4.在标记狮客户端窗口中选择需要导出的规格和内容

5.点击开始导出

6.安卓开发同学在导出的标注中自定义宽度



1.安装插件

打开使用的设计软件安装对应的插件。

*Figma在文档中运行插件,并在使用过程中保持插件窗口开启。


2.在设计软件中标记切图

在Figma/ Adobe XD/Sketch中标记需要生成的切图。

在Figma中在导出一栏点击“➕”即可添加切图标记,添加一个任意倍数的标记即可。

Figma标记切图示例

—-

XD选中需导出切图的内容,在右侧面板勾选添加导出标记。

XD标记切图示例

—-

在Sketch中选择导出的切图内容点击右侧面板的制作导出项“➕”。

Sketch示例

(注:Sketch只需要添加一个任意切图倍数即可)


3.点击“导出到本地”按钮

在标记狮中点击提交到私有云,选择需要提交的内容

*Figma用户也可直接在插件中点击导出本地


4.在标记狮客户端窗口中选择需要导出的规格和内容

选择导出图片规格:

分三个平台:iOS、android、web

比如您的开发日常只需要使用2x的切图,您就只需要勾选相应的2x规格就可以了,这样导出的包资源会相对较小,开发也能在包内下载2x的切图。

如果您的开发需要选择到所有规格的图片,您就全选规格就可以了。

选择导出包支持范围:

选择完整版

完整版比精简版多了在导出的压缩包中增加了切图资源的base64编码资源,这使得完整版的包资源会比精简版的包资源大一倍.

为什么要增加这个切图资源的base64编码资源呢,

标记狮在本地HTML中提供了下载切图的功能,但因为浏览器的安全策略,使得在访问本地html文件时限制了JavaScript发起请求的行为,该限制影响了标记狮为您批量下载切图的功能,

增加base64编码资源能兼容浏览器安全策略使您在本地直接打开导出的html时能够下载/批量下载/重命名切图,保障您能使用下载切图这个功能.

而精简版的导出包中则不含base64资源的相关目录,所以它会比完整版在解压前后节省50%的空间,所以我们建议您在有条件的情况下选择精简版导出。

选择精简版的场景条件:

  1. 您的局域网中存在HTTP服务器;
  2. 您想统一管理,不打算直接将zip传递给其它人使用;
  3. 您打算将导出的标注包解压到HTTP服务器下,直接使用http网址在内部网络分享,而不是直接通过传递ZIP包的方式分享标注;

若您对标记包的使用场景符合上述场景,那么您可以选择精简版资源包,它将为您的HTTP服务器节省存储空间.

软件会记录您上一次的选择,所以如果您没有更改意向就无需修改。


5.点击开始导出

选择好导出的画板或全部画板,点击开始导出按钮,即可导出本地标注包。

——————————————————————————
版权声明:此文章来自标记狮社区,转载请附上原文出处链接。
原文链接:https://ui.marklion.cn/article/7e5/13/article-ea47bb2fea423fc7.shtml