用于 Figma 集成的 Webflow 插件

探索我们的 Figma 文件 详细了解英雄和导航栏结构。

至关重要的： 我们的客户支持团队无法提供该插件的直接帮助。任何疑问或建议都应直接发送至 Webflow 实验室社区 整个 Webflow 社区（包括员工）可以提供额外的援助和资源。

您是否更愿意在 Figma 中创建初始站点蓝图，然后将其用作 Webflow 站点构建的路线图？现在，您可以将 Figma 设计无缝粘贴到 Webflow 中，而无需费力地重新创建每个元素。此外，您还可以使用 Figma 到 Webflow 应用程序将您的 Figma 组件和变量与您的 Webflow 站点同步，只需单击一下即可立即更新它们。

笔记： Figma 到 Webflow 插件由内部创意团队 Webflow Labs 开发和发布。Webflow Labs 推出的产品通过我们的标准渠道提供有限支持，并且旨在用于实验，这意味着它们的功能可能会不断发展。该插件也可能随时被删除 - 请自行决定是否使用它。我们热切期待您的 在此处提出想法、评论和反馈.

在本教程中，您将获得以下方面的见解：

1. 了解 Figma 到 Webflow 插件
2. Figma 到 Webflow 插件的安装和授权流程
3. 如何利用 Figma 到 Webflow 插件
4. 了解插件的功能
5. 卸载 Figma 到 Webflow 插件
6. 插件故障排除指南
7. 分享有关插件的反馈

Figma 到 Webflow 插件有什么作用？

该插件将 Figma 图层转换为其相应的 HTML 和 CSS 代码，这是 Webflow 在您可视化设计网站时生成的代码。

该插件目前支持的翻译包括：

• 自动布局
• 排版样式
• 边框样式
• 阴影样式
• 背景图像和线性渐变
• 将矢量和形状转换为 SVG
• 图片
• 不透明度
• 绝对定位

笔记： 由于 Figma 不是专用的网页制作工具，因此不支持某些翻译。

笔记： Figma 到 Webflow 插件目前与 Safari 浏览器上的 Figma 不兼容。我们建议使用 Chrome 或 Figma 桌面应用程序。

如何安装并授权 Figma 至 Webflow 插件

要使用 Figma 到 Webflow 插件，你必须先 注册 Figma 账户。完成后，按照以下步骤安装插件：

1. 访问 Figma 至 Webflow 插件页面
2. 点击 打开… 访问新的 Figma 设计文件并打开插件模式窗口
3. 选择 跑步 在插件模式窗口中
4. 点击 连接帐户

如果您尚未登录 Webflow，将打开一个新的浏览器选项卡，提示您使用 Webflow 凭据登录。然后，您将被引导至应用程序授权页面，使用您的 Webflow 帐户授权该插件并访问其功能。

选择您希望授权插件的所有站点和工作区（即您打算粘贴 Figma 设计的所有站点）。最后，点击 授权应用程序 在App授权页面。

至关重要的： 确保选择正确的网站，以确保将设计从 Figma 准确传输到 Webflow。如果您忘记为特定网站授权该插件，请按照说明为新网站授权。

请记住，如果您授权插件用于特定网站，则您只能从该特定网站的设置中删除该插件。另一方面，授权插件用于工作区会将其从您的 工作区设置。可以找到有关删除插件的更多详细信息。

笔记： 通过授权此应用程序，您同意 Webflow 实验室服务条款 和 隐私政策.

从插件授权中添加或删除站点

要将插件授权添加到新站点或从现有站点撤销插件授权，请按照以下步骤操作：

1. 在插件模式窗口中访问“汉堡菜单”
2. 选择 登出
3. 按照插件模式的说明进行操作
4. 点击 连接帐户
5. 选择要添加或删除插件授权的站点

笔记： 退出插件将取消之前授权的所有站点和工作区的插件使用权限。重新授权您的站点或工作区即可恢复使用该插件。

利用 Figma 到 Webflow 插件

要开始使用插件，请返回 Figma 并单击 开始吧 在模式窗口中。从那里，您可以：

• 在 Figma 中从头开始设计
• 使用 Figma 来制作 Webflow 插件布局
• 将 Figma 用于 Webflow 插件结构
• 使用复制粘贴传输文本和颜色样式

在 Figma 中从头开始设计

在 Figma 中，你可以从头开始设计（即，无需使用插件的预建布局或结构）——确保你利用了自动布局。对于响应式设计，请设置 裹 和 最小/最大宽度 在父框架上。可以找到有关创建响应式 Figma 设计的更多见解 这里.

确保所有框架（包括嵌套框架）都使用自动布局。此外，如有必要，单独的组件实例 以确保您可以在 Webflow 中修改设计。您可以通过按 选项 + 命令 + 乙 （在 Mac 上）或 控制 + 乙 （在 Windows 上）。

给专家的提示： 您可以利用 选项 + 命令 + C （在 Mac 上）或 控制 + Alt + C （在 Windows 上）复制图层的属性，然后应用 选项 + 命令 + 五 （在 Mac 上）或 控制 + Alt + 五 （在 Windows 上）将其传输到另一个选定的图层。此快捷方式对于复制填充、描边和文本属性很有用。

使用自动布局进行设计后，您可以使用插件将其传输到 Webflow：

1. 选择 Figma 画布上的设计（包括其所有图层）
2. 从中选择您想要插入设计的 Webflow 站点 选择Webflow站点 插件模式窗口中的下拉菜单
3. 点击 复制到 Webflow 在 Figma 到 Webflow 插件模态窗口中
4. 如果插件提示，确认复制到 Webflow
5. 在单独的窗口中启动 Webflow Designer
6. 将设计粘贴到 Webflow Designer 画布上

提醒： 您只需从 选择Webflow站点 下拉菜单。之后，您可以将 Figma 文件中的各种设计复制并粘贴到 Webflow。

利用 Figma 实现 Webflow 插件布局

该插件提供预先设计的响应式布局，以加速导航、英雄部分、表单、页脚和其他各种常见设计元素的设计过程。

重要的： 该插件通过将自动布局框架转换为 Webflow 设计师可以解释的格式来运行。由于 Webflow 面向 Web 开发，因此我们可以专门支持 框架 使用自动布局。

要将布局从 Figma 复制到 Webflow：

1. 导航至 复制粘贴 在插件模式窗口中选择 布局 从下拉菜单中
2. 选择一个 布局
3. 选择 Figma 画布上的布局
4. 从中选择要插入布局的 Webflow 站点 选择Webflow站点 插件模式窗口中的下拉菜单
5. 点击 复制到 Webflow 在插件模式窗口中
6. 如果插件提示，确认复制到 Webflow
7. 在单独的窗口中启动 Webflow Designer
8. 将布局粘贴到 Webflow Designer 画布上

您只需从中选择一次 Webflow 站点即可 选择Webflow站点 下拉菜单。之后，您可以将 Figma 文件中的多个布局复制并粘贴到 Webflow。

提醒： 确保选择整个布局，而不是其中的某些元素。未选择完整布局可能会导致复制问题，并阻止您将其粘贴到 Webflow Designer 中。

使用 Figma 来构建 Webflow 插件结构

该插件还包括预先设计的结构，为您的设计提供框架。虽然这些结构在 Figma 中是空的，但它们在 Webflow 中保持响应性 - 允许您将它们用作内容容器。将它们及其内容粘贴到 Webflow 中时，结构将跨断点保持响应性。

要将结构从 Figma 复制到 Webflow：

1. 访问 复制粘贴 在插件模式窗口中选择 结构 从下拉菜单中
2. 选择一个 结构
3. 选择 Figma 画布上的结构
4. 从中选择您想要插入结构的 Webflow 站点 选择Webflow站点 插件模式窗口中的下拉菜单
5. 点击 复制到 Webflow 在插件模式窗口中
6. 如果插件提示，确认复制到 Webflow
7. 在单独的窗口中启动 Webflow Designer
8. 将结构粘贴到 Webflow Designer 画布上

您只需从 选择Webflow站点 下拉菜单。之后，您可以将多个结构从 Figma 文件复制并粘贴到 Webflow。

提醒： 确保选择整个结构，而不仅仅是其中的某些元素。未选择完整结构可能会导致复制问题，并阻止您将其粘贴到 Webflow Designer 中。

复制并粘贴文本和颜色样式

如果您的 Figma 文件中有文本和颜色样式，您可以将其复制到 Webflow，以便在网站设计过程中轻松访问。建议在 Webflow 中建立一个样式指南页面来组织您的文本和颜色样式。您可以同时复制单个文本样式、颜色样式或所有文本和颜色样式。

可供复制的文本和颜色样式包括：

• 本地化的 Figma 文本和颜色样式
• Figma 库中的文本和颜色样式 （如果应用于当前 Figma 页面）

文本和颜色样式将通过预定义的“样式指南”模板在 Webflow 中复制。

文本样式

要从 Figma 复制文本样式：

1. 访问“汉堡菜单”在插件模式窗口中
2. 选择 复制文本样式
3. 继续访问 Webflow 站点上指定的样式手册页面（如果已建立），或 Webflow 站点上的其他页面
4. 打 控制 + 五 （在 Mac 上）或 命令 + 五 （在 Windows 上）插入本地文本样式

文本样式将通过预定义的“样式指南”模板插入到 Webflow 中。文本样式插入到 文本样式 部分。每种文本样式都将从 Figma 中的文本样式中获得一个具有指定名称的类（例如，如果您在 Figma 中将文本样式命名为“Tahoma Bold”，则其 Webflow 类名将为“Tahoma Bold”）。

颜色样式

要从 Figma 复制颜色样式：

1. 点击 ”汉堡菜单”在插件模式窗口中
2. 选择 复制颜色样式
3. 前往 Webflow 网站中指定的样式指南页面（如果您创建了）或 Webflow 网站中的另一个页面
4. 打 控制 + 五 （在 Mac 上）或 命令 + 五 （在 Windows 上）粘贴本地颜色样式

颜色样式将使用预设的“样式指南”模板粘贴到 Webflow 中。颜色样式粘贴在 颜色样式 部分。每种颜色样式都将分配一个类，将其标记为颜色样本，并从 Figma 中的颜色样式指定名称（例如，如果颜色样式在 Figma 中被命名为“粉红色”，则其 Webflow 类名称将为“颜色样本/粉红色”）。颜色的十六进制代码可以在 Webflow 画布上的本地样式旁边查看，或者通过导航到样式面板 > 背景，然后选择颜色旁边的颜色样本来查看。

这些颜色样式不会自动生成为 Webflow 颜色变量，因此，我们建议手动创建这些变量以将颜色应用于整个站点。

如何同时复制所有文本和颜色样式

复制 全部 Figma 的文本和颜色样式， 

1. 点击 ”汉堡菜单”在插件模式窗口中
2. 选择 复制所有文本和颜色样式
3. 前往 Webflow 网站中指定的样式指南页面（如果您创建了）或 Webflow 网站中的另一个页面
4. 打 控制 + 五 （在 Mac 上）或 命令 + 五 （在 Windows 上）插入本地样式

这些样式将通过预设的“样式指南”模板插入到 Webflow 中。

插件的运行

在使用Figma到Webflow插件时，需要考虑以下几个关键因素：

• 自动布局
• 特殊字体
• 类别
• 合并班级
• 显卡
• HTML 元素
• 背景
• 适应性
• 增强的插件功能

此外，利用 Figma 到 Webflow 应用程序可以将组件和变量从 Figma 顺利集成到 Webflow。

自动布局

您只能使用以下方式复制和粘贴图层 自动布局.这保证了从 Figma 复制到 Webflow 时的最佳翻译。

笔记： 如果您的 Figma 设计中有一个没有自动布局的图层，则插件模式中会出现一条通知，提示您在将其粘贴到 Webflow 之前将该图层转换为自动布局。通过单击模式中的黄色警告三角形，您可以选择所有需要转换为自动布局的图层。

特殊字体

如果您的 Figma 设计中使用了自定义字体，请确保在传输 Figma 设计之前将其上传到您的 Webflow 网站，以确保正确传输字体。未将自定义字体添加到 Webflow 可能会导致它们在传输过程中丢失。了解将自定义字体上传到您的 Webflow 网站的过程。

描述和符号

Figma 是一款矢量软件，可让您制作描绘、符号和矢量徽标。大多数描绘都是由 Figma 和其他矢量工具独有的各种矢量图层构建的，这使得插件难以处理它们，经常导致超时错误。

如果有 矢量图层 在您的设计中，插件会自动生成一个名为“Vectors wrapper”的新矢量父层。此包装器封装了您的矢量图层以进行 SVG 导出。复制过程结束后，插件会在 Figma 中删除此层，但它会保留在 Webflow 中。

如果你正在使用 Figma 成分 在矢量图层中，你可能需要 分离实例 在复制图层之前。如有必要，插件将提示您分离实例。

可以通过按以下方式快速分离实例 选项 + 命令 + 乙 （在 Mac 上）或 控制 + 乙 （在 Windows 上）。

类别

将设计从 Figma 复制到 Webflow 后，每个 Figma 图层名称都会转换为一个类。

名称匹配，风格多样

如果两个 Figma 图层共享 相同的姓名 但携带 对比风格，插件将通过在类名中添加数字来自动重命名这些类。例如，如果 Figma 中的两个图层被命名为“容器”，并且具有不同的样式，则在将它们粘贴到 Webflow Designer 画布上时，插件会将“容器”类分配给一个图层，将“容器 2”类分配给第二个图层。

同样，在 Webflow 画布上粘贴具有站点上现有类名的图层时，类名将显示为递增数字。例如，如果您的网站已经包含“按钮”类，并且您将名为“按钮”的 Figma 图层粘贴到 Webflow Designer 画布上，则该图层的类将在选择器字段中标记为“按钮 2”。或者，您可以将 Figma 图层粘贴到 Webflow 中并应用现有的 Webflow 类样式，或者将现有的 Webflow 类的样式更改为 Figma 图层的样式。

专家提示： 如果您频繁将相同的布局复制到 Webflow，则可能会出现不良的类过多，从而导致网站性能下降。为了保持整洁的类结构（并避免像“按钮 234986”这样的混乱），请消除 Webflow 网站上不必要的布局或元素，并在样式管理器中整理样式。这样，您就可以将 Figma 设计粘贴到 Webflow 中，而不会导致类过载。

Figma 和 Webflow 之间交换设计

有 2 个键盘快捷键可用于在 Figma 图层和 Webflow 类之间共享样式。

• 命令 + 转移 + 五 （在 Mac 上）或  控制 + 转移 + 五 （在 Windows 上）— 此特定快捷方式将允许您粘贴 Figma 图层并使用现有的 Webflow 类应用样式。要继续，只需复制 Figma 中的图层，然后使用 命令 + 转移 + 五 （在 Mac 上）或 控制 + 转移 + 五 （在 Windows 上）。然后，您的图层将粘贴到 Webflow 中，并带有现有类的样式。例如，如果您在 Figma 中有一个带有红色背景的“按钮”图层，但 Webflow 中的“按钮”类具有绿色背景，则“按钮”图层将以绿色背景粘贴到 Webflow 中。
• 命令 + 选项 + 五 （在 Mac 上）或 控制 + 选项 + 五 （在 Windows 上）— 此特定快捷方式可让您粘贴 Figma 图层并调整现有的 Webflow 类以匹配 Figma 中的样式。该过程涉及复制 Figma 中的图层并将其粘贴到 Webflow 中，使用 命令 + 选项 + 五 （在 Mac 上）或 控制 + 选项 + 五 （在 Windows 上）。随后，Webflow 类的现有样式将被修改以与 Figma 层的样式保持一致。例如，如果您在 Figma 中有一个带有红色背景的“按钮”层，而 Webflow 中匹配的“按钮”类具有绿色背景，则 Webflow 中“按钮”类的背景颜色将切换为红色。

风格相同，阶级独特

如果两个 Figma 层或一个 Figma 层和一个 Webflow 元素共享相同的样式但具有不同的类名，则插件将合并这些类。此操作有助于减少 Webflow 中重复的类实例数量。

例如，如果您在 Figma 中拥有 2 个图层，它们共享相同的 CSS 样式，但命名不同，假设一个图层名为“Navbar”，另一个图层名为“Cool navbar”，则 Webflow 会在将它们粘贴到 Webflow 画布上后，通过为它们分配相同的“Navbar”类来简化它们。

合并班级

另一项功能是在 Figma 层上通过在正斜杠后添加类名来创建组合类（例如，“基类/组合类/第二组合类”）。

插图

粘贴包含图像的设计后，这些图像将上传到 Webflow 的“资产”面板。请确保在 选择Webflow站点 插件模式窗口内的下拉菜单；否则，图像可能无法上传到资产面板。

笔记： 您可能需要刷新 Webflow Designer 才能在 Assets 面板中查看上传的图像。

标记元素

该插件尝试通过遵循指定标准来推断每个 Figma 层合适的 HTML 标签：

• 锚标签：如果图层名称包含“button”，则会将该图层转换为 HTML 锚标记（例如，“<a>”）
• 段落标签：如果图层名称包含“description”、“text”或“paragraph”，则会将图层转换为 HTML 段落标签（例如，“<p>”）
• 标题标签：当图层名称包含“heading”时，会转置为HTML H1标签（例如，“<h1>”）

但是，如果希望改变插件使用的 HTML 标签，则可以进行手动配置。

手动确定 HTML 标签

您可以通过重命名图层并添加括号中的标签名称，后跟 2 个连字符（例如，“[H1]-图层名称”）来指定每个 Figma 图层的 HTML 标签。

笔记： 确保标签中的首字母大写。

该插件包含以下 HTML 标签：

1. H1
2. 氢气
3. H3
4. H4
5. H5
6. H6
7. 磷
8. A
9. 股利

背景选项

该插件支持自动布局层和文本层的纯色、线性和图像背景。

笔记： 如果您使用插件复制粘贴后，背景图像无法在 Webflow 中显示，请刷新设计器页面。

适应性

您还可以灵活地确定 Figma 层过渡到垂直堆栈的断点，从而更好地控制设计的响应能力。该插件提供了 4 种断点方案供选择：

• 药片 — 该图层将在平板电脑断点处切换到垂直堆栈（宽度范围从 991px 到 767px）
• 移动领域 — 该图层将在移动横向断点处转换为垂直堆栈（宽度范围从 767px 到 478px）
• 手机肖像 — 该图层将在移动端纵向断点处转换为垂直堆栈（宽度范围从 478px 到 0px）
• 没有响应 — 无论视口宽度如何，图层都会保留水平堆栈。但是，您可以手动建立 裹 和 最小/最大宽度 在父框架上以确保您的设计具有响应能力。

笔记： 如果图层宽度低于 478px 或者图层已经处于垂直堆栈中，则无法在“响应式”下拉菜单中配置图层的响应性。

要管理层的响应能力：

1. 选择图层
2. 来自 响应式 在插件模式的下拉菜单中，选择层应转换为垂直堆栈的断点

增强插件功能

该插件会剖析所选的 Figma 层并将其样式和布局转换为 HTML 标签和 CSS 属性。通过仅接受自动布局元素来确保转换精度。

笔记： 遗憾的是，Figma to Webflow 插件目前与 Safari 浏览器上的 Figma 不兼容。因此，如果您在 Safari 浏览器中使用 Figma，该插件将无法运行。我们建议改用 Chrome 或 Figma 桌面应用程序。

卸载 Figma 到 Webflow 插件

要从您的工作区或某个站点中删除 Figma to Webflow 插件，您应该确定您最初授予插件访问权限的位置。对于工作区授权，请按照以下步骤删除插件。对于特定于站点的授权，请继续执行从您的站点卸载插件的步骤。

从工作区中删除插件

要从工作区中删除 Figma 到 Webflow 插件：

1. 访问 帐户 导航栏中的下拉菜单
2. 点击 工作区
3. 选择要从中删除插件的工作区
4. 导航 工作区设置 > 集成 标签 > 授权申请
5. 选择 撤销 对于“Webflow from Figma to Site”应用程序

从您的网站删除该插件

要从您的网站中删除 Figma 到 Webflow 插件：

1. 访问您的 仪表板
2. 单击“3 个披露点” 位于所需站点旁边
3. 导航 设置
4. 继续 站点设置 > 集成 标签 > 授权申请
5. 点击 看法
6. 选择 账户集成设置
7. 访问 帐号设定 >  授权申请
8. 点击 撤销 对于“Webflow from Figma to Site”应用程序

插件故障排除

如果插件无法准确复制您的设计，请首先确保您使用的是受支持的浏览器。该插件支持的浏览器包括 Chrome 和 Figma 桌面应用程序。值得注意的是，该插件目前与 Safari 浏览器中的 Figma 不兼容。

如果问题仍然存在，请尝试以下措施：

• 利用自动布局复制单个预建布局、预建结构或文本层并粘贴到 Webflow 中 — 如果框架复制和粘贴正确，则插件可以运行。如果框架复制不正确，请按照规定的故障排除步骤进行操作
• 探索 我们的解决方案 Webflow 实验室社区
• 从事 在里面 Webflow 实验室社区 通过提出问题

如果按照上述故障排除步骤操作后问题仍然存在，请创建一个包含有问题的框架的新 Figma 文件，并将其分享给 Webflow Labs 团队 [email protected]。他们会及时解决您的问题。

提供反馈

我们热切期待您的想法、评论和反馈，以帮助我们改进此插件。请在 Webflow 实验室社区.