切图标注

通过 CoDesign 插件上传的设计稿将自动生成标注信息,无需设计师一个个手动导出切图,开发工程师点击任意元素,可查看标注信息,快捷复制样式代码。

查看自动标注

在列表/画布模式下,单击设计稿进入画板详情页,默认进入标注模式。点击右侧折叠按钮,即可展开设计稿标注信息面板。

点击图层列表中的图层,即可查看该图层的元素位置、尺寸、不透明度、颜色、阴影、代码等信息。切换评论/原型/演示模式或点击折叠按钮后,即可关闭标注面板。

img

通过 CoDesign 插件上传的设计稿,还可通过鼠标左键进行图层穿透,或鼠标右键查看图层树的形式,查看不同图层的标注信息。

img

标注百分比

利用「标注百分比」进行开发,工程师只需按百分比适配页面,界面就能在不同尺寸的手机、电脑上避免布局紊乱、内容叠加等问题。

单选标注元素,按住 Alt 键,即可查看所选元素所占对应图层的百分比,也能查看占整张设计图所占的百分比。

img

切换标注像素

点击标注面板上方的「平台」,可展开设置界面,按需选择平台、单位、自定义倍率、自定义宽度和数字格式。该像素单位是指在设计图尺寸不改变的情况下更换不同的设备显示的设计尺寸。

提示

若原设计稿宽度为 1000,自定义倍率设置为 2 时,标注面板的宽度为 2000。

img

复制标注信息

在标注面板的设置界面完成设置 -> 单击元素 -> 点击标注面板中的「复制代码」即可复制。

img

切换颜色模式

可在标注面板上,可通过点击色块快速切换或点击颜色模式的下拉菜单,切换颜色模式:16 进制、RGB、RGBA。

img

下载切图

下载单张设计稿的切图,可点击标注面板中的「页面切图」 -> 全选或勾选切片 -> 选择图片格式&平台 -> 下载。

img

在画布视图中下载多张设计稿的切图,可在画布中 Shift + 鼠标左键框选/点选画板,或在左侧的画板列表中 Shift+鼠标单击,多选画板 -> 鼠标右键 ->「下载切图」 -> 选择图片格式&平台 -> 一键下载所有切图。

img

在列表视图中下载多张设计稿的切图时,可点选画板 -> 右上角的「下载切图」 -> 选择图片格式&平台 -> 一键下载所有切图。

img

目录