研发模式

开发人员和设计往往有着不同的使用习惯，为了方便研发在查看设计稿时有着更好体验，Pixso 上线了研发模式。

进入研发模式

当查看者拿到设计稿时，可以通过顶部栏右侧的【研发模式】按钮切换，进入研发模式后，画板中默认会展示所有的顶层画板，右侧会展示当前页面所有的切图信息，您可以批量下载设计师切好的图片。

⚠️为了更好地组织画布内容，此处只会显示顶层画板，普通的文本图层、矢量图形、画布上组件等会被过滤，如果您需要他们也展示在研发模式画布里，可以为其 创建父级画板。

快捷键    macOS: Command + Option + G    Win : Ctrl + Shift + G

切图导出

切图为设计师将完成的设计稿切分成便于制作页面的多张小图，以方便开发后续的页面具体架构以及产品界面布局，提高效率。研发模式支持快速查看当前页面的全部切图并切换选择切图倍数和格式进行导出。

新建切图

切图面板如果没有切图，说明当前页面未选中具有切图属性的图层，需要先选中切图对象再选择 [导出] 点击添加切图属性或者在选中切图对象后，使用快捷键或者切片工具以新建切图。

快捷键    macOS : ⇧ + S     Win : Shift + S

查看当前页面全部切图

设计师切好的图可以通过Pixso设计稿在线同步给研发，研发人员可以使用快捷键或点击右侧面板 [切图] 一键查看设计稿所有的切图根据设计师设置好的导出参数下载，或者自行选中元素切图。

快捷键     macOS : ⌘ + ⇧ + E    Win : Ctrl + Shift + E

导出

在查看当前页面切图时，可选择全部导出或者勾选部分切图点击 [导出] 进行导出。

HTML 盒模型

为了方便开发了解不同图层之间的边距、边框、填充细节等信息，在新版研发模式下我们提供了 HTML 盒模型，研发可以直接通过该模型了解选中图层的信息。

在研发模式中选中盒模型之后，在右侧面板展示的内容和在 Google Chrome 开发工具中看到的一样。选中某一图层，通过盒模型可以看到其图层信息(宽高、描边和圆角等)以及与其他图层间的位置关系信息。

分享研发模式

Pixso支持您直接分享研发模式画布的内容给您的好友，点击上方【分享】按钮即可复制链接，权限是和设计文件保持一致。打开分享链接默认进入研发模式画布；