如何将 Figma 转换为 WordPress？ [免费和付费方式]

Figma 因其设计和创意工具而闻名，而 WordPress 则以其灵活性、定制性和易用性而闻名。 如果您可以结合这些平台的优点来创建一个令人惊叹的网站怎么办？

对的，这是可能的。 您可以使用 Figma 设计您的网站，然后将其转换为 WordPress。 尽管这曾经是一项涉及 HTML 处理和预安装主题的艰巨任务，但现在事情变得容易多了。

如果您正在寻找相同的东西，那么您来对地方了。

在这篇文章中，我们将指导您如何以一种非常简单、适合初学者的方式将 Figma 转换为 WordPress，而无需任何技术专业知识。

选项 1：使用免费插件将 Figma 转换为 WordPress

虽然将 Figma 转换为 WordPress 的方法有多种，但您可以选择免费方法、使用高级转换插件或手动方法。 （他们各有优缺点）

第 1 步：首先，您应该创建一个 Figma 设计，然后将其转换为 WordPress。 但您永远不应该忘记遵循所有行业最佳实践和设计原则。

第 2 步：成功创建并设计 Figma 页面后，就可以生成其 API 密钥了。 此 API 密钥将有助于通过插件获取 Figma 页面并将其嵌入到 WordPress 中。

为此，请单击屏幕左上角的 Figma 图标。 它将打开菜单选项，您必须在其中选择“帮助”和“帐户”>“帐户设置”。

它将打开一个新提示，您必须向下滚动到“个人访问令牌”部分，然后单击“生成新令牌”链接。

它将进一步打开一个新提示，其中将要求您提供正在创建的令牌的一些基本详细信息，例如名称和到期日期。

注意：在“过期”部分中，始终选择“无过期”，以便您的 Figma 页面在特定时间范围后不会从您的网站上消失。

下面将所有范围设置为“写入”，然后单击“生成令牌”按钮。 您将被重定向到“个人访问令牌”部分，您可以在其中轻松复制生成的令牌并将其保存在记事本或任何编辑器中。

第 3 步：现在您已成功生成并保存令牌，是时候将 Figma 页面转换为 WordPress 了。

首先，您需要在 WordPress 网站上安装并激活一个简单但功能强大的 WordPress 插件，名为“古腾堡块动画和设计转换器 - 高级插件”。

成功安装和激活后，打开您想要嵌入设计的 Figma 页面的 WordPress 网站页面或帖子。

在该页面或帖子上，单击屏幕左上角的“从 Figma 导入”按钮。

将打开一个提示，要求您提供之前生成并保存的“Figma 访问令牌”。 输入 Figma 文件 URL。

对于 Figma 文件 URL，请返回 Figma 文件，复制下面浏览器选项卡中的 URL，然后将其粘贴到 Figma 文件 URL 框中。

对于其余的，插件将完成其工作并将 Figma 文件转换为 WordPress 块。 之后，您可以从块面板中进行任意数量的自定义。

完成后，单击“发布”或“更新”按钮保存您的设置。

选项 2：使用付费插件将 Figma 转换为 WordPress（更高效、更轻松）

对于这种方法，我们将使用更流行且更高效的转换插件“Uichemy”。 该插件提供了非常轻松且简单的工作流程，使转换过程变得无缝。 它最适合没有编码专业知识的初学者以及想要加快流程的开发人员。

目前，该插件只能将 Figma 设计转换为 Elementor 和 Bricks 网站编辑器，但该公司已承诺将来提供对 Gutenberg 块的支持。

第 1 步：打开 Figma 设计并在 Figma 仪表板上安装 Uichemy 插件以启动转换过程。

• 为此，请在搜索栏中搜索“ UiChemy ”并找到 UiChemy 插件。

单击“让我们开始”按钮，然后按照安装和激活说明进行操作。

• 输入您的序列号以完成激活。 （对于序列号，请单击“免费开始”按钮创建一个免费帐户。创建帐户后，您将在 Posimyth 商店帐户的仪表板中找到您的许可证密钥。）

步骤2：成功激活后，选择要转换为WordPress的Figma设计或框架，然后在弹出窗口中单击“转换为Elementor ”按钮。

（在转换过程之前，请确保您已在 WordPress 网站上安装并激活 Elementor 插件，并在转换 Figma 设计之前阅读所有条件）。

第 3 步：您现在可以通过输入站点的 URL 和令牌密钥来预览您的设计。 如果您不想，只需直接单击“转换为 Elemetor”按钮即可。 （有关生成令牌密钥和网站 URL 的指导，请参阅 UiChemy 的教程“什么是实时预览”。）

第 3 步：您的设计将被转换并下载 JSON 文件。

现在打开 WordPress 管理仪表板 > 转到模板 > 已保存的模板。

现在单击页面顶部的“导入模板”按钮并上传 JSON 文件。

第四步：恭喜！ 您的 Figma 设计现在将显示在“保存的模板”部分中，您可以在其中打开它并进行进一步的编辑或自定义。

步骤5：完成定制或编辑后，在前端查看您的设计。 确保所有图像和按钮正确对齐并正常工作。 另外，检查设计是否在所有屏幕尺寸上都能响应。

选项 3：手动将 Figma 转换为 WordPress（针对开发人员）

这种方法技术性很强，需要对WordPress CMS有很好的了解，而且需要一点耐心，因此最适合那些喜欢编码的人。

第 1 步：第一步是从 Figma 导出所有设计片段，例如图标和图像。 为此，请打开 Figma Design 并选择要导出的内容。 现在单击“导出”按钮并选择正确的格式和分辨率。

注意：强烈建议导出图像时选择 PNG 或 JPG，导出图标和矢量时选择 SVG 以保持质量。 另外，导出文件时要小心，确保它们的格式正确，否则会严重影响网站的外观。

第 2 步：现在我们必须创建一个自定义 WordPress 主题，将所有 Figma 设计转换为 WordPress 网站。 这是因为 WordPress 主题控制着您的网站的外观和功能。

典型的 WordPress 主题文件由 PHP 代码、JavaScript 文件和 CSS 样式表文件组成。

• 在 WordPress 中的 wp-content/themes 目录中为您的主题创建一个新文件夹，并根据您的选择命名。 （您可以通过 Cpanel、WordPress 编辑器或 FTP 客户端访问这些文件）或者查看我们的专门博客“如何安装 WordPress 主题？”

如果您是 WPOven 用户，您可以按照本教程访问 WordPress 文件。 “新的文件管理器可轻松管理您网站的文件和文件夹。”

现在，向其中添加像index.php、header.php、footer.php 和functions.php 这样的文件。 （暂时将这些文件留空）。 另外，添加 style.css 文件以在同一文件夹中设置主题的 CSS 样式表。

（这个特定的 style.css 文件负责显示网站的所有颜色、字体、边框、边距和其他视觉元素。）

现在将以下标题注释添加到您的 style.css 文件中，如下所示：

/*

Theme Name: Example WordPress Theme
Author: WPOVen
Description: This code converts Figma design to WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/

在这里，您必须提供自定义 WordPress 主题的主题名称和您的作者。 这将帮助 WordPress 识别您的自定义主题。

另外，不要忘记为您的 WordPress 主题添加图像，以便它可以在 WordPress 目录中轻松识别，就像 YouTube 缩略图一样。

最佳尺寸应为 800×600 像素，并且应为 PNG 格式。 命名您选择的任何内容并将其添加到主题文件夹中。

第 3 步：现在我们必须将所有导出的 Figma 资源添加到您的自定义主题文件夹中。

提示：如果您的网站很复杂，最好在特定子文件夹中管理所有资源，如下图所示：

步骤 4：要使您的 WordPress 主题完全正常运行，您需要将 HTML、CSS 和 JavaScript 添加到主题文件中。

让我们看看你如何做到这一点，

首先，您必须将 Figma 模型转换为代码，为此，您需要有一个代码编辑器工具。

首先设置包含页眉、页脚、导航栏和部分等元素的 HTML 结构。 将代码添加到 PHP 文件（index.php、header.php 和 footer.php）。

现在使用 CSS 来设计您的 HTML 元素。 在“style.css”文件中添加样式，设置颜色、字体、大小和其他设计方面。

• 为了获得更好的样式，您可以使用：
  • CSS 预处理器，例如 SASS 或 LESS
  • Bootstrap 或 Tailwind 等框架
  • WordPress 入门主题
• 对于复杂的设计，您不需要将所有 CSS 放入单个文件中，而是以更有条理的方式放入。 您可以在assets文件夹中为不同部分添加单独的CSS文件，以便您将来轻松管理和排除故障。

最后，对于Javascript，找出需要交互的元素，例如下拉菜单、滑块等）

考虑使用 jQuery 来简化 AJAX 调用和 DOM 操作等任务，并使用functions.php文件将 CSS（样式表）和 JavaScript 文件（脚本）正确加载到 WordPress 主题中。

步骤5：现在到了测试部分，成功完成上述所有步骤后，保存文件并检查一切是否正常。 但在此之前，我们必须激活该插件。

要激活该插件，请转到WordPress 仪表板 > 外观 > 主题。 您的自定义主题将开始显示您之前在主题文件夹中上传的图像。 单击它进行激活，您的 WordPress 网站就可以进行测试了。

以下是您可以遵循的一些测试建议：

• 检查您的网站在不同浏览器和屏幕尺寸中的外观和工作方式。
• 使用工具优化图像以加快加载速度。
• 实施缓存以加快您的网站速度。
• 在网站上线之前对其进行备份。

概括

从 Figma 转换到 WordPress 并不像看起来那么容易，具体取决于网站的复杂性。 设计越复杂，您必须遵循的过程就越复杂。 我们试图涵盖所有类型用户的所有选项。

手动执行可能会给您更多的控制权，但会消耗大量的时间和精力。 但是，您可以利用插件来加快转换过程，但您可能仍然需要进行某些更改才能获得更好的结果。

选择哪种方法完全取决于您的偏好和理解的难易程度。

拉胡尔

Rahul Kumar 是一位网络爱好者和内容策略师，专门从事 WordPress 和网络托管。 凭借多年的经验和对了解最新行业趋势的承诺，他制定了有效的在线策略来增加流量、提高参与度并提高转化率。 拉胡尔对细节的关注以及制作引人入胜的内容的能力使他成为任何希望提高其在线形象的品牌的宝贵资产。