暗色模式
导入与导出
本文介绍 MasterGo 支持的所有文件导入与导出方式。
支持的文件格式
| 类别 | 格式 | 说明 |
|---|---|---|
| 设计文件 | .fig / .sketch / .xd | Figma、Sketch、Adobe XD 文件导入 |
| 原型文件 | .zip（Axure HTML 包） | Axure 8/9/10 发布 HTML 后压缩导入 |
| HTML 转设计 | .html / .htm / .jsonl | 批量将网页转为设计稿 |
| 图片 | .png / .jpg(.jpeg) / .gif / .webp | 直接拖入或导入为图片图层 |
| MasterGo 原生 | .mg / .mxgp | 设计文件与原型文件的导入导出 |
导出资产与切图
导出功能支持多种图片和视频格式导出，包括 PNG、JPG、PDF、WebP、SVG 和源文件（mov、mp4、GIF）格式，可灵活满足不同场景下的导出需求。
基本操作流程
- 选中需要导出的图层
- 在属性栏下方，点击导出模块的「+」按钮，新建导出项
- 设置导出参数
- 查看预览，点击「导出」按钮进行下载
导出设置项
导出倍率
导出图片的尺寸为图层实际尺寸的倍数。例如选择 2x 时，导出图片的尺寸为图层的 2 倍。
文件名前缀/后缀
点击 ... 切换设置导出文件名的前缀或后缀，方便命名尺寸等信息，提高开发工程师查看效率。
导出格式说明
| 格式 | 说明 | 不适合 |
|---|---|---|
| PNG | 无损压缩的位图图片格式，一般用于 Java、网页等，压缩比高、生成文件体积小 | — |
| JPG | 常见位图图片格式，使用有损压缩 | 需要透明背景时 |
| SVG | 基于 XML 的矢量图形格式，支持无限缩放且不失真 | 照片、复杂渐变 |
| WebP | 常用于网页，同时提供有损压缩与无损压缩，让网页整体加载速度更快 | — |
| 常见电子文件格式 | 交互原型 | |
| 源文件 | 上传的图片、视频或 GIF 资源的原始文件，保持原始格式和尺寸 | — |
导出项顺序调整
将鼠标放到导出项最左侧，出现拖动 bar，按住拖拽 bar 可在多个导出项之间调整顺序。
预览
点击「预览」按钮查看导出效果。视频、GIF 可点击播放键预览。
导出预设
MasterGo 预置了三个常用导出设置，方便向开发工程师交付：
- iOS：苹果生态平台
- Android：安卓生态平台
- Flutter：适合 Flutter 平台开发的导出规格
选中导出图层后，点击 + 左侧的开关图标，选择需要的预置项即可。
切图工具
切图工具可以圈出画布中的任何区域，将切中区域变成"特殊的图层"，通过设置倍率、前缀和后缀生成和导出 PNG、JPG、WebP 和 PDF 等不同类型的资产。
相比直接导出，切图除尺寸自由外，更利于实际开发环境使用。
唤起切图工具：快捷键 S，或在工具栏中点击"容器"，选择下方的切图。
创建切图：同创建矩形操作相同，通过画框控制切取范围大小。画框可随时修改宽高及层级位置。
显示/隐藏画布中的切图：快捷键 Shift + S，或点击菜单栏，依次选择「视图」>「显示切图」。
批量导出技巧
导出所有切图：点击菜单栏，依次选择「文件」>「导出所有切图」（标注模式下直接点击右侧栏按钮即可）。快捷键：Mac Shift + Command + E，Win Shift + Ctrl + E。注意只导出设置了导出项的切图。
导出指定切图：打开切图列表，勾选需要导出的切图并点击导出。双击可定位切图位置。
导出整个页面为 PDF：点击菜单栏依次选择「文件」>「导出为 PDF」>「导出所有容器」。
其他导出说明
- 导出设置管理：选中图层后，可点击
+添加多个导出设置，每个设置对应一张图片，导出时一次性下载 - 批量导出图层：选中多个图层时，所有图层会一次性导出
- 导出整个容器：选中左侧栏中的画布，即可按上述方式将整个容器导出为图片
- 导出自定义 PDF：导出 PDF 时可选「自定义」选项，设置导出范围、内容和排序方式
- 切图标注模式：在标注模式下，设置了导出项的图层会有虚线标识。不想显示可在菜单栏「视图」>「显示切图」中取消勾选
导出常见问题
| 问题 | 解决方法 |
|---|---|
| 导出后颜色不一样 | 检查颜色配置文件 |
| SVG 导出后变形 | 检查是否使用了 SVG 不支持的混合模式 |
在设计工具间复制资源
如果你需要在不同设计工具之间复制资源，可以在 MasterGo 中选中目标图层，右键找到「复制 SVG 代码」，然后粘贴到其他工具中。
从其他工具导入
MasterGo 支持从多种设计工具导入文件：
- 从 Figma 迁移到 MasterGo：OAuth 授权批量导入、本地 .fig 文件导入
- 从 Sketch 导入文件：.sketch 文件直接拖入或上传导入
- 蓝湖用户迁移指南：通过蓝湖桥接功能平滑迁移
- Adobe XD 导入：见下方章节
- Axure 导入：见下方章节
- HTML 转设计导入：见下方章节
- 图片导入：见下方章节
从 Adobe XD 导入
MasterGo 支持导入 Adobe XD 格式的文件，导入操作简单，导入后可继续用 MasterGo 编辑。
操作方法
直接拖入：在 MasterGo 工作台的主页/草稿箱/团队项目页，将 XD 文件直接拖入即可开始导入。拖入的文件导入至当前页。
点击"导入文件"按钮：
- 在工作台点击「导入文件」按钮
- 默认导入位置为当前页面，如需修改可在弹框左下角选择
- 将文件直接拖入，或根据提示选择文件后，导入自动开始
- 导入结束后可直接打开文件，或点击「继续导入」
Adobe XD 导入常见问题
由于 MasterGo 和 XD 的创作工具和编辑属性存在差异，无法实现 100% 的导入还原度。目前已知暂不支持的内容：
- 组件集粘贴外观
- 选定某个图片以该图片为中心放大画面
- 辅助线
- 过低版本的 XD 文件导入后可能空白，需手动操作保存
大文件处理建议：体积较大或图层数较多的文件，导入时可能耗时较长或提示"当前页无响应"。建议关闭不用的标签页和应用程序后再操作，遇到提示时选择"继续等待"。
从 Axure 导入
MasterGo 支持 Axure 文件的导入，可在导入时选择导入为原型文件或设计文件，并继续之前的创作，包括元件、母版、交互的查看、编辑和修改。
操作流程
步骤一：在 Axure 中发布 HTML
- 点击上方菜单栏中的「发布」，选择「生成 HTML 文件」
- 在弹出的面板中，发布方式选择「Publish Locally」，然后点击左下角「Publish Locally」
注意：导出路径建议新建一个文件夹，不要选择"使用默认"，然后选择该文件夹作为导出路径。
步骤二：将导出文件压缩为 .zip
前往保存路径，全选所有本次导出的文件（包括 html 文件和文件夹），压缩为一个 .zip 文件。
注意：必须是
.zip后缀，.rar等其他压缩格式不支持。建议使用系统自带压缩工具。如果是新建的导入路径，可以直接压缩文件夹。
- Mac 系统：选中后右键 > 压缩
- Windows 系统：选中后右键 > 发送到 > 压缩
步骤三：将 .zip 文件导入 MasterGo
- 在工作台页面，点击导入文件，选择「Axure 导入」
- 在"导入至"中，选择目标位置
- 直接拖入文件或点击导入区域根据提示操作
- 在弹窗中选择「导入为 - 原型文件」，点击「确定」
Axure 导入注意事项
- 压缩文件时首选系统自带压缩工具，否则可能无法导入
- 目前支持 Axure 10、Axure 9 和 Axure 8 部分版本的文件导入
- 导入较大文件时可能出现卡顿/内存占用较多的现象，耐心等待即可
- 导入后，Axure 的"页面"会以"容器"方式展示在同一页面上。如页面较多，可根据"容器名称"搜索定位具体页面
HTML 转设计导入
MasterGo 支持将 HTML 网页批量转换为设计稿，方便将已有的网页设计快速导入为可编辑的设计文件。
支持的文件格式
.html/.htm：网页文件.jsonl：批量导入的索引文件
操作步骤
- 在工作台页面，点击「导入文件」或拖拽 HTML/.jsonl 文件到工作台
- 系统自动解析 HTML 结构并转换为设计图层
- 导入完成后，网页的布局、文本、图片等元素会转换为对应的设计图层
HTML 转设计适合已有网页需要重新设计或迭代的场景，可将现有页面快速转为可编辑的设计稿。
导入图片
MasterGo 支持直接导入常见图片格式作为图片图层，也可将图片拖入画布继续编辑。
支持的图片格式
| 格式 | 说明 |
|---|---|
| PNG | 无损位图，支持透明背景 |
| JPG / JPEG | 有损压缩位图，文件体积小 |
| GIF | 支持动图 |
| WebP | 同时支持有损和无损压缩，适合网页场景 |
操作方式
- 拖入工作台：将图片直接拖入工作台页面，自动创建新文件
- 拖入画布：在编辑器中，将图片拖入画布即可添加为图片图层
- 点击导入：点击「导入文件」按钮，选择图片文件
MasterGo 原生格式（.mg / .mxgp）
MasterGo 支持导入和导出原生格式文件：
- .mg：MasterGo 设计文件格式
- .mxgp：MasterGo 原型文件格式
通过文件菜单中的「导出」和「导入」即可操作。
团队文件迁移
团队文件迁移功能支持将 Sketch / Figma 文件批量导入到 MasterGo，并保留文件间的关联关系。
权限要求：需要有团队可编辑权限才能进行文件迁移。
迁移前准备
在进行文件迁移前，务必对文件资产进行梳理：
- 确认迁移范围：明确需要迁移的团队、项目和文件数量
- 分类文件：将文件分为"团队库文件"和"业务设计稿"两类
"团队库文件"导入后不能删除原有组件，只能修改组件，以保持组件与实例的关联关系。导入后需发布团队库并启用，才能在设计稿中调用组件。
迁移流程
在工作台首页，点击右上角的「团队文件迁移」按钮
选择需要导入的文件类型（Sketch 或 Figma）
选择需要导入的团队和项目
导入文件：
- 将"团队库文件"从组件库入口导入
- 将"业务设计稿"文件通过设计稿入口导入
请确保"团队库文件"从组件库入口导入，以保证"组件与实例"的引用关系不丢失。
- 完成导入后：
- 在"团队库文件"中进行「发布团队库」操作
- 在"业务设计稿"文件中「启用团队库」，以便在设计稿中调用组件
迁移过程受网络速度影响，建议在网络稳定的环境下进行。
导出 Sketch 格式
MasterGo 的文件可导出为 Sketch 格式，导出后可在 Sketch 中打开，便于本地备份或向其他团队展示。
操作步骤
- 打开需要导出的文件
- 菜单栏中依次选择「文件」>「导出为 Sketch」
目前仅开放整个文件的导出，分容器导出会在后续开放。
导出格式选择
由于 Sketch 对"实例覆盖"的实现逻辑与 MasterGo 有较大区别，我们设置了两种导出格式供选择：
默认格式
选择"默认格式"导出时，会保留组件实例的引用关联关系，但会丢失实例的覆盖（包括颜色、文字等）。当有较多实例具有覆盖时，会产生较明显的偏差。
保留实例覆盖
选择"保留实例覆盖"导出时，会将具有覆盖的实例变成组导出。虽然丢失了和组件的关联关系，但其覆盖可以完整保留，因此具有更高的还原度。
实例是组件的副本，修改组件属性时实例随其变化（"一处更改，多处生效"）。对实例的单独修改即为"覆盖"。
默认格式：保留了组件与实例的关系，但不能保留对实例的修改。 保留实例覆盖：保留了对实例的修改，但无法保留组件实例的关联关系。
选择建议
- 如果是为了备份本地文件，或者需要继续编辑且实例覆盖不多，选择默认格式
- 如果有大量实例覆盖且需要导出后保留实例的覆盖，选择保留实例覆盖
常见问题
- 因 MasterGo 的创作工具和编辑属性多于 Sketch，导出时 Sketch 不支持的创作属性将无法适配。不建议导出后继续用 Sketch 编辑创作后再导入 MasterGo，否则文件可能有较多还原度问题
- 体积较大或图层数较多的文件导出时间较长，建议关闭不用的标签页和应用程序后再操作
- 遇到浏览器提示"当前页无响应"时选择"继续等待"
- 若多次遇到页面崩溃，确保使用最新版本 Chrome 浏览器