使用指南

开发标注面板

查看属性值

查看属性值操作界面

使用“标注”面板可以查看和复制您选择的图层的属性值。

1.属性包括对象尺寸和布局约束的值。

2.文本图层的内容。

3.查看文本图层的排版属性,包括字体、粗细、行高等。

4.使用填充面板查看Hex、RGB、CSS、HSL 和 HSB的颜色值。

5.查看和复制对象的阴影(内阴影和外阴影)和描边的值。

查看标注间距

在查看者模式下(或者切换到标注面板),选中图层A,鼠标移动至其他的地方便可以测量图层A与其的间距,再也不需要设计人员手动添加间距标注啦

查看标注间距操作界面

自动生成代码

Pixso为设计稿自动生成代码,您切换到标注面板下滑至代码模块即可查看到参考代码。点击下拉图标还可以切换 CSS 、 iOS和 android 参考代码;

自动生成代码操作界面

切换开发平台

研发需要根据不同的开发平台来选择对应的单位,目前Pixso提供了3种不同平台的单位

iOS、安卓、web:不同的平台对应不同的单位

切换开发平台操作界面

自定义按比例换算

如果对属性的单位换算有自定义的要求,那么您可以根据您的开发需求对属性值和单位进行换算;

如设计稿是750px的,开发小程序的需求是375dp,那么您可以将换算倍数设置为0.5,单位又px改为dp,确认后,选中的设计稿将会自动乘以自定义倍率;

自定义按比例换算操作界面

根据指定宽度换算

指定宽度可以支持用户更灵活的调整换算规则,如开发人员需要将设计师750px的设计稿换算成符合小程序规范的375宽度,除了自定义0.5倍,还可以直接选中画板,指定宽度为375,即可完成换算。

Pixso会根据您选中的画板和填入的数值计算并将该倍率应用在该设计稿的其他图层上。

根据指定宽度换算操作界面

⚠️ 此处的设置不会影响设计稿本身的尺寸哦~

设置选中偏好

设置选中偏好操作界面

研发同学在画布中查看设计稿时,难免会需要选择对象以查看属性或者进行切图,现在Pixso可以支持忽略组件和切图内部的图层,避免研发同学总是选择到一些细枝末节的元素颗粒;
查看者模式或研发模式下,通过页面的右上方的icon进行切换;

请注意:Pixso默认选中模式是穿透选择,也即您的每一次点击都会选中到最底层的元素。

您可以根据实际情况取消勾选【允许选中】的设置:

若您取消勾选【允许选中切图内部的元素】,那么当您选中切图区域时,Pixso仅会为您在画布上框选整个切图而不会再选中切图内部的图层。