Figma & ProtoPie #

注意

此功能由 ProtoPie 开发，目前处于测试阶段。 有关 ProtoPie 或集成到 Figma 的任何问题，请联系 ProtoPie 团队 (opens new window)。

ProtoPie 帮助你为各种数字产品创建高保真原型，支持 macOS 和 Windows。

你可以使用 ProtoPie 的基础功能，也可以尝试高级功能，使用 ProtoPie，你可以：

  • 创建跨设备交互
  • 使用设备的传感器，例如陀螺仪，指南针，麦克风和距离传感器。

了解有关 ProtoPie 的更多信息 (opens new window)。

在本文中，我们将介绍如何：

  1. 连接 Figma 和 ProtoPie
  2. 从 Figma 中导入设计文件
  3. 断开 Figma 和 ProtoPie 的连接

1. 连接 Figma 和 ProtoPie #

你可以将设计文件从 Figma 导入到 ProtoPie。

在开始之前，ProtoPie 需要获得访问 Figma 文件的权限。

你只需要连接两个应用程序一次，首先打开 ProtoPie：

  1. 单击左上角的 Import 图标：

  2. 从选项中选择 Figma

  3. ProtoPie 将要求获得访问你的 Figma 文件的权限。单击 Proceed to browser 以在新的浏览器窗口中打开 Figma

  4. 如果你还没有登录，则需要先登录你的 Figma 帐户

  5. 登录后，单击 Allow Access 按钮以授予 ProtoPie 访问文件的权限：

  6. 完成后，你可以关闭浏览器窗口，或单击 Go to ProtoPie 打开 ProtoPie )

2. 从 Figma 中导入设计文件 #

你现在可以将 Figma 设计文件导入到 ProtoPie。

提示

你可以导入 recently used 文件中的框架。 recently used 是你在过去 12 小时内打开或编辑的文件。

从 Figma 导入时了解有关 ProtoPie 选项的 更多信息：

  1. 打开 ProtoPie
  2. 单击左上角的 Import 按钮
  3. 在 Frame 下拉列表中，选择要导入的框架
  4. 根据需要选择 Import Size
  5. 你可以选择 All layer structure（导入所有图层），或选择 Only layers marked for Export（标记为“导出”的图层）
  6. 单击 Import 开始导入
  7. ProtoPie 会下载渲染的图层到你当前的文件中，同时将保持与 Figma 中相同的图层顺序

重新导入设计文件 #

你还可以重复导入步骤来重新导入框架，这使你可以同步 Figma 中的更改到 ProtoPie 中。

当你完成导入时，你将看到一个名为 Re-import Options 的标题。 这允许你确定重新导入框架的方式。

重新导入时，你可以选择 是否：

  • 覆盖对图层位置的任何更改
  • 覆盖对图层大小的任何更改
  • 更新图层顺序和分组结构
  • 删除在 Figma 中删除或隐藏的图层

3. 断开 Figma 和 ProtoPie 的连接 #

如果你想更改与 ProtoPie 关联的 Figma 帐户，或者完全断开 Figma 和 ProtoPie 的连接，你可以在 Figma 帐户的账户设置页面执行此操作。

  1. 登录你的 Figma 帐户
  2. 单击左上角的姓名，然后选择 Account Settings
  3. 向下滚动到 Connected Apps 部分
  4. 单击 ProtoPie 旁边的 Revoke access：

注意

断开连接后，你可以将不同的 Figma 帐户连接到 ProtoPie。 请按照上文的说明连接 Figma 和 ProtoPie。

Figma & Slack