为了让设计师和开发者能够快速获取到你的原型中的文本内容及组件信息，昨天xiaopiu全面上线了标注功能！

下面我就带领大家快速了解一下xiaopiu的标注功能吧。

标注功能入口

点击预览按钮进入预览页后，在顶部工具栏处点击【标注】，即可切换至标注模式。选中组件后就可以在右侧面板查看标注信息啦。

查看页面信息

在没有选中页面中的组件时，右侧面板中展示页面的基本参数：页面名称，宽高，字体。

查看组件信息

在页面中直接选中组件或在组件目录中选中组件，即可在右侧面板中查看组件的参数，包含了位置、样式和内容等所有组件信息。

其中，我们还给出了四个快捷小功能来提高你的效率。

查看相对父级位置

选中集合内部组件时，右侧位置信息下方会有【相对父级】的勾选项，勾选之后，X、Y的位置信息会显示相对父级集合的位置。

快速选择父级集合

选中集合内部组件时，右侧面板会显示【父级集合】，帮助你快速选中上一级集合。

快速选择子组件

选中集合时，右侧面板会显示【子元素】列表，可以快速定位到想要的子组件哟。

快速切换单个颜色模式

点击颜色色块，即可快速切换不同的颜色模式（HEX，RGBA，ARGB），仅对当前色块生效。

下载图标/图片

选中图片或图标后，在右侧面板点击【下载原图 / 图标，】即可下载使用。

TIPS：

1、下载的图标格式为SVG格式，若您的电脑没有装可以打开SVG格式的软件，下载的文件样式会是一个html的样式。不用担心，下载并没有出错，仍然可以正常使用。

2、点击下载图片，会新开一个标签页，您只需要鼠标右键选择“复制”或者“图片另存为”，即可下载图片。

查看组件与页面之间的位置

选中组件后，鼠标hover到任意空白位置（没有组件的地方）可直接查看组件到页面的距离。在右侧的面板可以查看并复制组件到页面X轴与Y轴的距离。

查看组件之间的相对位置

如果要查看组件之间的相对位置。选中组件后，将鼠标悬停到其他组件上，便会出现悬停组件蓝色的宽高延长线以及红色的距离标识。

切换参数单位

参数面板的顶部可以切换颜色模式，代码语言，尺寸单位以及倍率，对全局生效。

1、颜色模式支持切换HEX，RGBA，ARGB。

2、代码语言支持切换CSS，LESS，SASS，SCSS，Android，Swift，Stylus，wxss多种常见的代码语言。

3、尺寸单位与倍率支持切换px，px，pt，dp，rem。可以根据不同的需求切换尺寸单位，并且可在倍率选项中选择或用户自定义设置倍率。

以上就是关于标注功能的介绍说明啦。接下来的时间里我们也会继续迭代，开发sketch插件来导入设计图查看标注。如果您在使用的过程中发现bug，遇到问题或者有好的建议可以随时反馈给我们。

反馈通道如下：

1、想要最快速度的回复--用户交流群：296790947

2、想要深思熟虑的回复--讨论区发帖 或 填写意见反馈 http://cn.mikecrm.com/3laufqA

本次【标注】功能由我们的前端工程师 @维尼熊使了老大劲儿 开发上线！~✿✿ヽ(°▽°)ノ✿