ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

解决方案

Features

Resources

Pricing

Start for Free

Book a Demo

Book a Demo

Solutions

INDUSTRIES

Automotive

Aviation

Finance

Gaming

MedTech

IoT

Digital Products

USE CASES

For Enterprise

For Individuals

For Teams

For education

Features

KEY FEATURES

Hardware & System Integration

Multi-Device Prototyping

Interaction Logic

Developer Handoff

Beta

ProtoPie AI

Beta

User Testing

PLUGINS

Figma

Sketch

Adobe XD

Resources

INSIGHTS & INSPIRATION

Blog

eBooks

Clients Success Stories

Events & Webinars

ProtoPie Gallery

PRODUCT LEARNING & SUPPORT

ProtoPie School

Download ProtoPie

Product Documentation

Community

Pricing

Book a Demo

Solutions

INDUSTRIES

Automotive

Aviation

Finance

Gaming

MedTech

IoT

Digital Products

USE CASES

For Enterprise

For Individuals

For Teams

For education

Features

KEY FEATURES

Hardware & System Integration

Multi-Device Prototyping

Interaction Logic

Developer Handoff

Beta

ProtoPie AI

Beta

User Testing

PLUGINS

Figma

Sketch

Adobe XD

Resources

INSIGHTS & INSPIRATION

Blog

eBooks

Clients Success Stories

Events & Webinars

ProtoPie Gallery

PRODUCT LEARNING & SUPPORT

ProtoPie School

Download ProtoPie

Product Documentation

Community

Pricing

Get Started for Free

Book a Demo

菜单

从 Figma 导入设计

有两种方法可以将你的设计从 Figma 导入到 ProtoPie。

  • 通过插件（推荐）：安装适用于 Figma 的 ProtoPie 插件，并在 Figma 中打开该插件。

  • 传统导入：首先，打开你想要导入的 Figma 文件。然后，打开 ProtoPie Studio，并在“文件”菜单中选择导入。

插件导入与传统导入的主要区别

适用于 Figma 的 ProtoPie 插件可让你：

  • 导入一个或多个分区、画框和对象。

  • 将顶层画框作为场景导入。

  • 导入你所选中的内容。

  • 将矢量图层以 SVG 格式导入。

  • 将文本图层以 SVG 格式导入，并可转换为文本图层。

  • 导入约束设置。

  • 导入自动布局属性。

  • 将 Figma 组件导入为可复用、保持链接并支持变体的组件（组件模式）。

适用于 Figma 的 ProtoPie 插件


将你的设计从 Figma 导入到 ProtoPie，全部在本地完成——无延迟。

下载并安装适用于 Figma 的 ProtoPie 插件，要求 ProtoPie 版本为 9.5.0 或更高。

以下是一些提示：

  • 将设计导入 ProtoPie 时，为获得最佳性能，请在桌面上同时打开并可见 Figma 和 ProtoPie。

  • 导入时，使用顶层画框作为场景，并保持对象与 Figma 中相同的图层层级、位置和约束。

以下是导入体验的新变化：

项目现在会逐个导入，并在准备就绪后立即显示在 ProtoPie Studio 中。此前，所有项目会一次性处理，只有全部完成后才可见——此更新让导入更快、更流畅。

支持的属性

  • 可见性

  • 锁定

  • 位置

  • 大小

  • 旋转

  • 不透明度

  • 约束

  • 填充（纯色 & 图片）

  • 边框

  • 阴影

  • 自动布局（核心属性）

了解更多有关 ProtoPie 中图层属性的信息。

该插件还支持导入以下元素：

  • 分区

  • 主组件 - 启用组件模式时，主组件会直接导入到你的 ProtoPie Library 中，作为可复用组件

  • 组件实例 - 在画布上保持链接，作为 Library 组件的引用

  • 组件变体 - 作为独立组件导入，并支持变体

选项 1：导出

点击导出按钮时，其行为会根据你所选内容以及你选择的导出类型而不同——场景、对象或扁平化。

例如，如果你选择一个框架并选择场景导出类型，该部分的结构将被转换为 ProtoPie 场景。ProtoPie 无法完全支持的任何属性都会作为 SVG 图层导入。

注意：如果由于不受支持的属性导致导入后的设计与 Figma 中显示不同，请尝试使用导出为扁平化选项重新导入，以获得视觉上更准确的结果。

导入扁平化图层

你可以在导出到 ProtoPie 之前先在 Figma 中扁平化图层，以获得更好的视觉保真度。

选项 2：导出为扁平化

使用扁平化导出类型，可将你的设计作为简化的合并图像导入 ProtoPie。尤其当视觉保真度比图层级细节更重要时，这会非常有用。

你可以在导入前扁平化单个图层，或将多个图层合并为一个。这样更便于管理交互，并在 Studio 中保持视觉一致性。

扁平化图像的最终分辨率将遵循 ProtoPie 中的密度设置。


{'_type': 'localeString', 'en': 'importing flattened layers from figma'}
作为场景导入

可以在 ProtoPie 中同时将一个或多个顶层框架导入为场景，并保持相同名称。将顶层框架作为场景导入是基于 Figma 的图层层级结构。


{'_type': 'localeString', 'en': 'Importing as Scenes', 'ja': 'シーンとしてインポート', 'ko': 'Importing as Scenes', 'zh': '导入为场景'}
导入对象

在 Figma 中具有相同图层层级、定位和约束的对象，可以逐个或批量导入。任何非顶层框架的内容都会在场景中显示为图层或容器。

Figma 中的组件和组件实例会作为容器导入。将它们转换为组件，以便在 ProtoPie 中仍保持为组件。了解更多关于组件的信息。


{'_type': 'localeString', 'en': 'objects protopie plugin figma'}
组件模式

在插件中启用组件模式，可将 Figma 组件作为可复用、已链接的组件导入 ProtoPie。

组件模式开启

启用组件模式后：

  • 主组件会直接导出到你的 ProtoPie 本地资源库

  • 实例会保留在画布中，作为对资源库组件的链接引用

  • 变体会作为独立组件导入，并完整支持变体

  • 你所选内容中的所有嵌套组件都会自动导入，同时保留层级和链接关系

组件模式关闭

禁用组件模式后：

  • 所有图层都会作为场景或对象导入

  • 组件不会被保留——它们会被当作普通容器处理

  • 要在 ProtoPie 中使用 Figma 组件，你需要在导入后手动将容器转换为组件

注意：组件模式适用于场景和对象导出类型。不适用于扁平化导出。

导入为 SVG

将 Figma 中的矢量图层以 SVG（可缩放矢量图形）形式导入 ProtoPie。导入后将其转换为形状（对象 → 设为可编辑）即可编辑其属性。ProtoPie 尚未支持所有 SVG 属性。了解更多关于SVG 图层的信息。

导入文本图层

将 Figma 中的文本图层在 ProtoPie 中作为 SVG 导入。若要使其属性可编辑，请在导入后将其转换为文本图层。了解更多关于文本图层的信息。

导入交互

将原型中框架之间的交互从 Figma 轻松导入到 ProtoPie。

导入时，ProtoPie 会自动将 Figma 中框架之间的交互转换为 Jump 响应。你不再需要在 ProtoPie 中添加更复杂交互之前，先手动重建场景间的过渡。

如果你的框架包含任何 Smart Animate 过渡，ProtoPie 会将其作为带有 Smart 过渡的 Jump 响应导入。

了解更多关于 Jump 响应的信息。


{'_type': 'localeString', 'en': 'smart jump import from figma'}
导入自动布局

ProtoPie 支持从 Figma 导入基础的自动布局属性。高级设置也会一并导入以匹配原始设计。不过，在 ProtoPie Studio 中编辑这些设置可能会将其重置，从而影响布局。

对于旋转值不为 0 的对象，ProtoPie 会在导入期间将原点设置为 (50, 50) 以确保定位准确。

重新导入设计

从 Figma 重新导入框架或对象时，大多数图层会自动更新。不过，在 ProtoPie 内所做的更改会被保留，不会被覆盖。

重新导入时不会更新的内容：

  • 你在 ProtoPie 中修改过的对象（例如大小、位置、样式）。

  • 你在图层面板中移动过的图层（例如添加到滚动容器中）。

  • 已删除的图层——除非你再次从 Figma 选择并导入它们。

  • 在 ProtoPie 中所做的组件覆盖（使用组件模式时）。

其他提示：

  • 要创建场景或对象的副本，请先导入一次，然后在 ProtoPie 中进行复制。

  • 重新导入始终遵循最近一次的导出类型（场景、对象或扁平化）。

  • 如果设计显示不符合预期，请尝试使用扁平化选项重新导入。

组件模式下的重新导出行为：

  • 从 Figma 重新导出时，仅当图层未在 Studio 中编辑过，ProtoPie 才会更新组件的视觉属性（大小、位置、填充、描边、文本、图层顺序）。重新导入时，实例与资源库组件的链接会被保留。

ProtoPie 如何跟踪导入图层：

  • 每个从 Figma 导入的对象都有一个唯一的内部 ID。

  • 只有来自同一文件且属于原始导入的对象才能被重新导入并更新。

  • 切换导出类型（例如从场景切换为扁平化）会用新格式替换之前的导入内容。

选项 1：导出

点击导出按钮时，其行为会根据你所选内容以及你选择的导出类型而不同——场景、对象或扁平化。

例如，如果你选择一个框架并选择场景导出类型，该部分的结构将被转换为 ProtoPie 场景。ProtoPie 无法完全支持的任何属性都会作为 SVG 图层导入。

注意：如果由于不受支持的属性导致导入后的设计与 Figma 中显示不同，请尝试使用导出为扁平化选项重新导入，以获得视觉上更准确的结果。

导入扁平化图层

你可以在导出到 ProtoPie 之前先在 Figma 中扁平化图层，以获得更好的视觉保真度。

选项 2：导出为扁平化

使用扁平化导出类型，可将你的设计作为简化的合并图像导入 ProtoPie。尤其当视觉保真度比图层级细节更重要时，这会非常有用。

你可以在导入前扁平化单个图层，或将多个图层合并为一个。这样更便于管理交互，并在 Studio 中保持视觉一致性。

扁平化图像的最终分辨率将遵循 ProtoPie 中的密度设置。


{'_type': 'localeString', 'en': 'importing flattened layers from figma'}
作为场景导入

可以在 ProtoPie 中同时将一个或多个顶层框架导入为场景，并保持相同名称。将顶层框架作为场景导入是基于 Figma 的图层层级结构。


{'_type': 'localeString', 'en': 'Importing as Scenes', 'ja': 'シーンとしてインポート', 'ko': 'Importing as Scenes', 'zh': '导入为场景'}
导入对象

在 Figma 中具有相同图层层级、定位和约束的对象，可以逐个或批量导入。任何非顶层框架的内容都会在场景中显示为图层或容器。

Figma 中的组件和组件实例会作为容器导入。将它们转换为组件，以便在 ProtoPie 中仍保持为组件。了解更多关于组件的信息。


{'_type': 'localeString', 'en': 'objects protopie plugin figma'}
组件模式

在插件中启用组件模式，可将 Figma 组件作为可复用、已链接的组件导入 ProtoPie。

组件模式开启

启用组件模式后：

  • 主组件会直接导出到你的 ProtoPie 本地资源库

  • 实例会保留在画布中，作为对资源库组件的链接引用

  • 变体会作为独立组件导入，并完整支持变体

  • 你所选内容中的所有嵌套组件都会自动导入，同时保留层级和链接关系

组件模式关闭

禁用组件模式后：

  • 所有图层都会作为场景或对象导入

  • 组件不会被保留——它们会被当作普通容器处理

  • 要在 ProtoPie 中使用 Figma 组件，你需要在导入后手动将容器转换为组件

注意：组件模式适用于场景和对象导出类型。不适用于扁平化导出。

导入为 SVG

将 Figma 中的矢量图层以 SVG（可缩放矢量图形）形式导入 ProtoPie。导入后将其转换为形状（对象 → 设为可编辑）即可编辑其属性。ProtoPie 尚未支持所有 SVG 属性。了解更多关于SVG 图层的信息。

导入文本图层

将 Figma 中的文本图层在 ProtoPie 中作为 SVG 导入。若要使其属性可编辑，请在导入后将其转换为文本图层。了解更多关于文本图层的信息。

导入交互

将原型中框架之间的交互从 Figma 轻松导入到 ProtoPie。

导入时，ProtoPie 会自动将 Figma 中框架之间的交互转换为 Jump 响应。你不再需要在 ProtoPie 中添加更复杂交互之前，先手动重建场景间的过渡。

如果你的框架包含任何 Smart Animate 过渡，ProtoPie 会将其作为带有 Smart 过渡的 Jump 响应导入。

了解更多关于 Jump 响应的信息。


{'_type': 'localeString', 'en': 'smart jump import from figma'}
导入自动布局

ProtoPie 支持从 Figma 导入基础的自动布局属性。高级设置也会一并导入以匹配原始设计。不过，在 ProtoPie Studio 中编辑这些设置可能会将其重置，从而影响布局。

对于旋转值不为 0 的对象，ProtoPie 会在导入期间将原点设置为 (50, 50) 以确保定位准确。

重新导入设计

从 Figma 重新导入框架或对象时，大多数图层会自动更新。不过，在 ProtoPie 内所做的更改会被保留，不会被覆盖。

重新导入时不会更新的内容：

  • 你在 ProtoPie 中修改过的对象（例如大小、位置、样式）。

  • 你在图层面板中移动过的图层（例如添加到滚动容器中）。

  • 已删除的图层——除非你再次从 Figma 选择并导入它们。

  • 在 ProtoPie 中所做的组件覆盖（使用组件模式时）。

其他提示：

  • 要创建场景或对象的副本，请先导入一次，然后在 ProtoPie 中进行复制。

  • 重新导入始终遵循最近一次的导出类型（场景、对象或扁平化）。

  • 如果设计显示不符合预期，请尝试使用扁平化选项重新导入。

组件模式下的重新导出行为：

  • 从 Figma 重新导出时，仅当图层未在 Studio 中编辑过，ProtoPie 才会更新组件的视觉属性（大小、位置、填充、描边、文本、图层顺序）。重新导入时，实例与资源库组件的链接会被保留。

ProtoPie 如何跟踪导入图层：

  • 每个从 Figma 导入的对象都有一个唯一的内部 ID。

  • 只有来自同一文件且属于原始导入的对象才能被重新导入并更新。

  • 切换导出类型（例如从场景切换为扁平化）会用新格式替换之前的导入内容。

Figma 传统导入

传统导入允许你从 Figma 文件中导入所有图层，或仅导入标记为可导出的图层。由于 Figma 近期的结构变更，此功能要求 ProtoPie 9.1.0 或更高版本。 了解更多 关于在 Figma 中标记导出的信息。

画板

选择将从 Figma 导入的画板

导入尺寸

设置图层的缩放系数。可根据 Figma 中所选画板的大小进行调整

所有图层结构

画板中的所有图层都会按文件夹结构导入

仅导入标记为批量导出的图层

仅导入在 Figma 中标记了“export”的图层

覆盖图层位置

从 Figma 重新导入画板时，覆盖图层的位置值

覆盖图层尺寸

从 Figma 重新导入画板时，覆盖图层的尺寸值

更新图层顺序和分组结构

从 Figma 重新导入画板时，更新图层顺序和分组结构

移除在 Figma 中已删除的图层

从 Figma 重新导入画板时，移除在 Figma 中已删除的图层

画板

选择将从 Figma 导入的画板

导入尺寸

设置图层的缩放系数。可根据 Figma 中所选画板的大小进行调整

所有图层结构

画板中的所有图层都会按文件夹结构导入

仅导入标记为批量导出的图层

仅导入在 Figma 中标记了“export”的图层

覆盖图层位置

从 Figma 重新导入画板时，覆盖图层的位置值

覆盖图层尺寸

从 Figma 重新导入画板时，覆盖图层的尺寸值

更新图层顺序和分组结构

从 Figma 重新导入画板时，更新图层顺序和分组结构

移除在 Figma 中已删除的图层

从 Figma 重新导入画板时，移除在 Figma 中已删除的图层

想提升你在管理大规模项目和资源方面的能力吗？

学习如何仅从 Figma 或其他设计工具导入关键资源，优化原型性能，并通过我们最新的移动游戏原型设计大师课减少不必要的杂乱内容。

如果你想进一步探索，欢迎免费加入 ProtoPie 大师课，学习高级技巧与策略，将你的 ProtoPie 技能提升到新水平。我们的专家讲师将带你掌握创建成功项目的最佳实践。立即报名，成为 ProtoPie 高手！

常见问题

why-does-it-take-so-long-to-import-my-designs-from-figma

为什么从 Figma 导入我的设计需要这么长时间？

将您的设计导入 ProtoPie 时遇到问题了吗？以下是一些故障排查步骤：

  1. 请确保您已安装 Figma、Sketch 和 Adobe XD 的最新版本，以及它们各自的 ProtoPie 插件。

  2. 请确保您使用的是快速且稳定的互联网连接，并具有足够的带宽。

why-have-some-layers-been-imported-from-figma-incorrectly

为什么来自 Figma 的某些图层导入不正确？

如果您注意到某些图层未能正确导入，这可能是由于存在不受支持的属性。我们建议查看我们的导入文档，其中提供了从 Figma、Sketch 或 Adobe XD 导入设计时受支持属性的详细信息。

partially-supported-properties-import-from-figma

部分支持的属性会发生什么情况？

Figma 中的一些设计属性仅被 ProtoPie 部分支持。虽然它们不会阻止导出，但导入后可能无法按预期工作。以下是一些常见情况：

  1. 多个填充：这些会作为可编辑的 SVG 导出。如果你想要更多控制，建议将每个填充拆分到各自图层中，或仅保留最上层或最下层填充。

  2. 高级描边设置：这些也会作为 SVG 导出。为确保一致性，你可以在导出前将描边转换为矩形。

  3. 图层模糊或内阴影：这些效果在导出时会被忽略。如有需要，可将图层扁平化为 PNG——但请注意，此版本在 ProtoPie 中将不可编辑。

error-layers-not-supported-import-from-figma

我在导出设计时收到一条“ 不受支持 ”的提示。这是什么意思？

当所选图层包含 ProtoPie 在导出过程中无法完全支持的元素或属性时，会出现此消息。虽然你可以从 Figma 导入这些图层，但由于功能兼容性的限制，它们在 ProtoPie 中的渲染或运行效果可能不如预期。

error while exporting from figma

supported-layers-import-from-figma

支持哪些类型的图层？

框架、分区和大多数基础图层都可以顺利导出。不过，某些元素（如切片或 FigJam 连接线）不支持导出。如果你正在使用这些元素，请在导出前尝试将它们转换为框架或标准图层。