xd导出标注html,Adobe XD免费交付神器 标记狮MarkLion 一键导出离线标注网页

开发是否能高质、高效的将设计稿变为最终产品，很大程度取决于设计师的标注工作是否做的细致。使用Adobe XD进行设计，它自带的功能就能一键生成标注链接，常用的蓝湖、PxCook、摹客、Zeplin也都支持Adobe XD。

目前几乎所有的标注工具主要功能都相同：一键生成、自动切图、代码片段生成等，但是，如果你想选择一款免费、支持离线、不用ke学上网也无需让开发安装任何软件的，「标记狮(MarkLion)」可能是目前唯一的选择。

使用「标记狮(MarkLion)」最终可以将设计稿生成一个具有自动标注和切图功能的网页压缩包，解压之后直接双击文件夹中的index.html文件就可以通过默认浏览器打开，左侧可切换画板或图层，画板有缩略图预览，点击画板区域中的任意元素可在右侧查看所选择的元素的标注信息，相关信息在右侧点击可直接复制到剪贴板。

「标记狮(MarkLion)」支持macOS和Windows，官方网址为www.marklion.net，需要同时安装独立客户端和插件，从官网下载客户端安装包安装之后打开无需登录，首次打开客户端点击“安装XD插件”按钮可快速安装相应的插件。

同时安装标记狮客户端和插件之后，在Adobe XD中打开设计文件，标记狮客户端即可看到相应数据，可以仅导出在Adobe XD中所选择的画板，也可以导出已打开文件的全部画板。

在下一步中可以选择图片规格(Web/Android/iOS)、导出包支持范围和重新选择要导出的画板，导出包支持范围分为“完整版功能(默认)”和“精简版(需要部署到HTTP服务，资源包体积缩小一半)”两种，二者区别可点击后方的问号图标查看开发者提供的详细说明。

点击开始导出选择一个要保存在的文件夹，即开始执行导出操作，该操作无需任何网络，可离线导出，“导出包支持范围”选择“完整版功能(默认)”导出的文件也是可以通过浏览器直接查看，无需任何网络。

如果需要使用自动切图功能，需要在Adobe XD中对需要切图的图层添加导出标记，已添加导出标记的图层在网页中可以看到，「标记狮(MarkLion)」可以单独切图，也支持批量切图，还可以修改切图的名称。

另外，根据「标记狮(MarkLion)」官网描述，开发者在之后的版本中也会提供私有云部署功能。