标注模式

设计师将设计稿分享给开发工程师后,开发工程师能够通过 MasterGo 原生的标注模式来获取设计稿中各图层的属性信息以及对应的代码片段,从而快速、高效地完成设计稿的开发工作。

进入标注模式

  1. 拥有编辑权限的用户,进入文件后点击上方标签页的“标注”即可进入标注模式。
  2. 没有文件编辑权限的用户(查看者),进入文件后默认开启标注模式。

img

查看图层信息

  1. 标注模式下,可在画布内快速查看图层的尺寸、边距等信息。img

  2. 标注模式下,可在画布左侧查看文件内所有页面,并在下方图层树中查看图层结构。img

查看图层属性

标注模式下,可在画布右侧的标注代码区域查看图层的各种属性,包括图层的位置、尺寸、填充、特效等,当图层引用了样式,或者本身为一个组件/实例,同样能在标注模块中快速识别

img

为提高开发工程师获取图层属性的效率,所有标注区域的属性均可通过点击实现一键复制

img

另外,标注区域支持切换多种色彩模式。

img

查看图层代码

标注模式下,可在画布右侧下方查看图层属性的代码,代码内容同标注区域的内容保持一致。

为提高代码获取效率,单击代码或者批量选中代码后会自动复制。

img

查看CSS、iOS、Android 代码

为满足不同项目的开发需求,MasterGo 支持 CSS、iOS 和 Android 代码的展示,查看者根据需要在画布页右上方选择相应的代码即可。

img

查看2倍图标注信息

有时候设计师会制作2倍图并交付给设计师,或者开发工程师需要2倍图的设计图来进行开发。

不同于蓝湖等产品会在设计师上传设计图时(交付时)让设计师选择相应倍率并进行转化;

MasterGo 在设计师侧没有设置倍率选择,即所有设计稿均默认为1倍 (1x)。

因此,当设计师交付的为2倍图或者开发需要看2倍图时,需要开发工程师选择对应的倍率。

  1. 当设计师交付的设计稿为2倍图,开发需要看1倍图时,在画布页右上方选择 0.5x 即可。img

  2. 当设计师交付的设计稿为1倍图,开发需要看2倍图时,在画布页右上方选择 2.0x 即可。img

其他

  1. 查看者点击画布内的图层时,默认为“穿透选中”。

    如希望选中父级图层或容器(常规选中),按住 ctrl / cmd 再选中即可img

  2. 多倍图模式下,画布内信息仍会保持1倍图的数值。

    画布中的位置、尺寸、边距等信息始终为1倍的实际数值,并不会跟随右侧倍率设置的更改而更改。img

  3. MasterGo 会持续优化标注模块信息的展示,以及展示代码的可用性。我们非常期待听取开发工程师用户的使用反馈,如果您有相关意见,可随时联系在线客服进行反馈。