Figma & Principle

将 Figma 连接到 Principle 帐户后，你可以轻松地在 Principle 中导入 Figma 设计文件。

使用 Figma 配合 Principle，这种感觉不能太妙。

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

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

1. 连接 Figma 和 Principle

当你第一次从 Figma 导入设计文件时，系统将提示你输入 Figma 帐户的详细信息以授权连接，这只会在你第一次导入时弹出。

1. 打开 Principle
2. 在菜单中找到 File，然后选择 Import from Figma：
3. 或者，单击 Import 按钮：
4. 从选项中选择 Figma：
5. 单击 Connect to Figma 按钮：
6. 然后会弹出一个浏览器窗口。如果你尚未登录，系统将提示你登录你的 Figma 帐户：
7. 单击 Allow access 以确认：
8. 对话框将提示你返回 Principle：

   提示

   如果未直接重定向到 Principle，则可以直接关闭授权窗口并返回 Principle ，你会发现已成功建立连接。

2. 从 Figma 中导入设计文件

现在两个应用程序已连接，你能够将你的设计文件直接导入到 Principle。

你可以导入一个页面中所有的框架或已选择的框架。

1. 打开 Principle
2. 在菜单中找到 File，然后选择 Import from Figma：
3. 或者，单击 Import 按钮：
4. 从选项中选择 Figma：
5. 然后，你可以从 Document 中选择想要导入的文件，这里将显示所有最近编辑的文件。

   提示

   任何正在多人协作的文件将在最近编辑的文件建议中被优先排序。

   
6. 单击 Import Page 以导入页面上的所有框架。
7. 或者，单击 Import Selected Frames 以导入当前在 Figma 中选择的任何框架。

   提示

   此时，你还可以跳到 Figma 并选择要导入的框架。 这将更新你在 Principle 中做的选择。

8. 进度条表示 Figma 当前正在渲染图层：
9. 然后，框架会被添加到你的画板中：
10. 每个对象将呈现为单独的图层，就像在 Figma 中一样。你可以在左侧的 Layers 面板中选择单个对象，也可以直接在画布中选择：

3. 断开 Figma 和 Principle 的连接

如果你想更改与 Principle 帐户关联的 Figma 帐户，或完全断开 Figma 和 Principle 的连接，你可以在 Principle 中：

1. 单击菜单栏中的 Principle。
2. 选择 Disconnect from Figma：
3. 然后，你可以再次启动导入过程，以重新连接或连接到其他帐户。

   在 Figma 和 Principle 中的阴影

   内阴影和外阴影在 Figma 和 Principle 中的表现会有所不同。Figma 根据对象在画布上的位置渲染阴影，而 Principle 将根据对象本身显示阴影。

   这意味着在 Principle 中旋转对象也将旋转对象阴影的位置。

在 Medium 中了解有关 Figma 和 Principle 的更多信息：Animate your Figma designs with our new Principle integration (opens new window)。