即时设计教程 • 标注

在开发拿到设计稿后,往往希望能够快速获取参数信息。设计师手动标注效率低,开发下载设计工具、学习如何查看各图层属性与间距又耗费学习成本。

而现在直接在设计工具中开发标注功能,设计时的参数直接产生为标注,一站式平台防止出现参数误差。
在线平台,开发通过一个链接打开就可以用,且无需手动更新设计稿,设计内容修改后中标注信息跟随实时更新。提升团队协作效率,让团队工作交接更简单。

 

标注功能入口

在编辑过程中,直接在右侧面板切换到「标注」下,并选中任意图层,即可查看图层的标注信息;
在「可下载」或「仅预览」权限下访问时,也可直接在右侧面板查看标注信息。


 

查看图层属性

未选中图层时,右侧显示画布背景色参数;
选中单个图层时,可以在右侧标注面板查看该图层所有属性;选中多个图层时,标注面板将展示图层的共同属性。

 

可以在「已选中」项中单独查看某个图层的标注信息。

查看图层间距

选中图层后,鼠标悬停至另一图层,可查看两个图层的间距。


 

穿透点击

根据不同设计稿的图层分层习惯,「穿透点击」提供给开发人员任意自由切换两种选中图层的方式,以更方便地适应自己的操作习惯与使用场景。
未开启「穿透点击」功能时,点击优先选中任意图层及分组父级;开启后,所有点击操作可直接选中最内层的图层。

 

复制参数

在标注面板点击对应属性值,即可直接复制标注参数。

导出图层

选中切片或图层后,在标注面板点击「导出」即可查看当前选中内容。
支持自定义导出倍率、格式。

 

参数的语言、单位

在标注面板右上角可以切换当前标注模式中的参数单位,包含代码、颜色、单位、倍率。

颜色: 默认为 RGBA ,可切换为 HEX 、 ARGB 。

代码类型: 默认为 CSS ,可点击切换 iOS 、Android 、wxss 、SCSS 、SASS 、LESS 、stylus

单位: 默认为 px ,可点击切换 dp 、 rem 、 pt 。

倍率: 倍率默认为 @1x ,可点击切换 @2x 、 @3x ,也可自定义设置倍率。