logo
帮助文档/研发模式/研发模式指南

研发模式指南

研发模式支持查看文件、导出切图、将设计内容转换为代码等功能。通过研发模式,设计和研发可以保持同步,确保在协作过程中不丢失重要细节。

使用研发模式可以:

  • 使用更丰富的标注功能查看设计内容。
  • 查看所有图层的 CSS、iOS、Android 样式代码。
  • 根据需要设置属性、代码中数值的倍率与单位。
  • 使用导出预设一键导出多种倍率的切图。

进入研发模式

研发模式提供了一套面向研发的独立操作界面。你可以在任何 Motiff 妙多文件中进入研发模式:

  1. 1.打开 Motiff 妙多文件。
  2. 2.点击工具栏右侧的 '16_Common_DevMode.svg' 或使用快捷键 ⇧ Shift + D

'Frame 16 (2).png'

研发模式下,复制的文件链接、页面链接、图层链接将带有研发模式的标识。

点击此类带有研发模式标识的链接打开 Motiff 妙多文件时,会自动进入研发模式。

左边栏

左边栏提供了快速查看图层的能力,包括查找功能、页面列表、图层列表。

点击了解「在研发模式下选中图层」相关功能。

工具栏

在研发模式下,你可以通过点击工具栏左上角的 '16_Panel_TextAlignJustified.svg' -「文件」-「查看历史版本」,查看和检查文件的任何版本。 'Frame 3 (3).png'

右边栏

查看标注

右边栏支持查看的图层属性包括:

  1. 1.基础信息:包含名称、类型、更新时间等。
  2. 2.组件信息:组件母版、变体组件、组件。
  3. 3.盒子模型。
  4. 4.「代码」或「属性」。
  5. 5.导出。

'Frame 24.png'

右边栏中的标注信息都可以点击进行复制或者选中进行复制。

代码、单位与倍率切换

点击画布空白区域,可以进行代码类型、单位、倍率的切换。 'Frame 5 (1).png'

导出

你可以在右边栏的下方将选中的图层导出为图片。也可以点击 '16_Panel_BatchExport.svg' 打开「批量导出」面板,查看并导出选中范围内的所有内容。

Motiff 妙多支持以下导出格式:PNG、JPG、SVG、WebP 和 PDF。点击了解「导出」相关功能'Frame 21 (2).png'