Figma 至 Webflow 应用程序

在本课中，你将学习：

1. 如何启动 Figma 至 Webflow 应用程序
2. 如何同步和导入变量和组件
3. 如何同步之前导入的组件
4. 如何审查有冲突的组件的更新
5. 如何同步先前导入的变量

如何启动 Figma 至 Webflow 应用程序

首先，打开您的 Webflow 网站，然后从 应用控制板。 然后：

1. 转到 Figma 插件
2. 前往 设计系统同步 标签
3. 确保在下拉菜单中选择了正确的站点（即，与 Figma 插件同步的站点） 

一旦插件显示已连接，您就可以同步变量和/或组件。

如何同步和导入变量和组件

为数字变量设置全局单位

如果您想全局更改数字变量使用的单位，您可以在 Figma 插件模式中进行更改。然后，所有变量在同步到 Webflow 时都将使用指定的单位。

1. 转到 Figma 到 Webflow 插件模式窗口
2. 前往 设计系统同步 标签
3. 点击右上角的图标，旁边是 设计系统同步‍
4. 点击 插件设置‍
5. 使用 变量数量 单位 下拉菜单用于设置数字变量的全局单位（即 px、em 或 rem）
6. 返回 设计系统同步 标签
7. 点击 同步至 Webflow

然后，您可以返回 Webflow，并通过单击在 App 模式窗口中同步新的数字变量单元 导入和更新变量。画布上当前正在使用的任何变量都将调整为新的数字变量单位。

笔记： Figma 仅以像素为单位显示变量，因此您导入的设计在 Webflow 中的外观可能与在 Figma 中的外观不同。

同步和导入变量

要选择要同步和导入的变量：

1. 前往 设计系统同步 标签
2. 点击 ”变量模式”图标
3. 选择要同步的变量
4. 点击 同步至 Webflow

然后，您可以返回 Webflow，在 App 模式窗口中导入变量。您可以选中或取消选中复选框来选择要导入的变量。然后点击 导入变量。导入变量后，它们将出现在 变量 标签。

同步和导入组件

要选择要同步的组件：

1. 前往 设计系统同步 标签
2. 点击 ”选择模式”图标
3. 使用以下方式在 Figma 画布上选择一个或多个组件 转移 + 点击
4. 点击 同步至 Webflow

一旦插件同步您的组件，您就可以转到您的 Webflow 网站并查看 Figma 到 Webflow 应用程序中的更新。 

1. 点击 导入新组件 查看新同步的组件
2. 选择要导入到 Webflow 站点的组件
3. 点击 导入组件

从 Figma 导入组件后，Webflow 便会与该组件建立连接。稍后，您可以从 Figma 重新导入相同的组件，并直接在 Webflow 中查看其设计更新。请注意，只有元素位置和样式会更新。如果您有属性或绑定，它们将保留在 Webflow 中。

笔记： 除非您在同步时取消选择组件变体，否则组件变体将作为重复组件导入到您的 Webflow 站点。

如何同步之前导入的组件

要同步您之前导入到 Webflow 站点的组件，请首先转到 Figma 并打开插件窗口。然后：

1. 确保在下拉菜单中选择了正确的站点（即您想要同步组件的站点） 
2. 点击 ”选择模式”图标
3. 选择 Figma 画布上的组件
4. 点击 继续 在插件模式窗口中
5. 点击 同步至 Webflow
6. 在您的 Webflow 网站中打开 Figma 至 Webflow 应用程序
7. 点击 组件更新 在应用程序模式窗口中

然后，您可以单击每个组件进行查看：

• 已发生改变的样式（例如颜色、字体等）
• 随组件添加或更新的变量
• 组件中添加的新元素

您可以点击 更新组件样式和变量 从预览中更新单个组件，或单击 更新所有组件 来自 查看组件更新 页面。组件的所有实例都将在您的 Webflow 站点上更新。

如何审查有冲突的组件的更新

当您从 Figma 中的组件中删除了一个或多个元素，而这些元素仍然存在于 Webflow 中时，先前导入的组件中就会发生冲突。要查看有冲突的组件的更新，请点击 存在冲突的组件更新 在应用程序模式窗口中。然后，您可以单击每个组件来查看其缺失的元素。 

从这里开始，你有三个选择：

• 删除缺失元素 — 照常更新 Webflow 中组件的所有实例（这将 消除 组件中的元素）
• 作为未同步的组件导入 — 将组件按原样导入到 Webflow。该组件将来无法从 Figma 同步到 Webflow。
• 在 Figma 中还原更改 — 您可以返回 Figma 并将删除的元素添加回组件，这将消除冲突

如何同步先前导入的变量

要更新您之前导入到 Webflow 站点的变量，请首先转到 Figma 并打开插件窗口。然后：

1. 点击 ”变量模式”图标
2. 点击 继续
3. 选择要同步的变量
4. 点击 将变量同步至 Webflow

任何已在 Figma 中更新并同步到 Webflow 的变量都将出现在 App 模态窗口中。窗口将显示变量的初始值和新值。您可以选择要导入的变量，然后单击 更新变量.