如何将网站从 Figma 迁移到 WordPress

已发表: 2023-12-12

Figma 到 WordPress 的转换是许多开发圈中的常见工作流程。 Figma 是一款行业典型工具，可帮助进行用户界面 (UI) 和用户体验 (UX) 设计。 WordPress（当然）是发布网站的典型方式。 这意味着弄清楚这两种解决方案如何协同工作以实现更高效的项目管理。 ⚙️

在本文中，我们将向您展示如何以最佳方式将网站从 Figma 转移到 WordPress 。 我们将在这里介绍很多内容——特定于 WordPress 的设计注意事项、协作、从 Figma 导出资产等等。 当然，我们还将介绍如何进行迁移以及可以使用哪些工具来帮助您。

📚目录：

  • Figma 简要概述
  • 在 Figma 中为 WordPress 进行设计
  • 选择如何将 Figma 导出到 WordPress
  • 如何从 Figma 导出资产
  • 准备 Figma 到 WordPress 的传输
  • 如何将 Figma 的设计集成到 WordPress

Figma 简要概述

Figma 彻底改变了云端 UX/UI 设计的世界。 这一创新工具使设计人员能够在浏览器中无缝地创建、协作和共享项目。

Figma 主要网站。

👉 它的受欢迎程度（部分）归功于其广泛的特性和功能：

  • 有全套设计工具，包括模板库和矢量图形编辑器以及高级原型制作功能。 这让设计师能够精准且富有创意地将想法变为现实。
  • Figma 支持实时协作，使团队能够共同进行设计。 这可以促进更大的凝聚力和更快的反馈周期。

Figma 的一大优势是其平台独立性。 由于它是一款仅限浏览器的工具，因此不需要安装或特定硬件，因此易于访问。 此外，它还与 Windows 和 macOS 兼容 - 您可以找到适用于这两种操作系统的专用应用程序。

Figma 对协作的重视，例如评论功能和实时共享选项，有助于更好的团队沟通和项目管理。 正如我们将在这里探讨的那样，Figma 与 WordPress 等工具的集成尤其有利于您的工作流程。 反过来，您可以确保从设计到开发的更顺利过渡，从而赋予它更大的价值。

在 Figma 中为 WordPress 进行设计

在 Figma 中设计最终的 WordPress 传输时，必须调整您的方法以满足内容管理系统 (CMS) 的独特功能和限制。 主要考虑因素是与 WordPress 主题的兼容性。

您需要了解标准布局、页眉和页脚设置以及 WordPress 主题中典型的其他动态区域。 这将有助于确保您无需大量自定义编码即可将 Figma 转移到 WordPress。

从 WordPress 仪表板自定义 WordPress 主题。

通过扩展，导航菜单、评论部分、博客文章格式和 WordPress 固有的其他独特功能也应该成为您设计过程的一部分。 您的 Figma 模型必须代表这些元素，这将使可视化和进一步的开发过程更加富有成效。

当然，WordPress 插件也会对设计产生影响。 考虑这些插件可能引入的视觉和功能方面至关重要。 例如，联系表单、SEO 工具或电子商务功能都需要正确集成到您的 Figma 设计中。

WordPress 已安装插件屏幕。

最后，WordPress 网站通常会在发布后不断发展，用户会进行调整和自定义。 这显然应该成为 Figma 设计中的一个因素，因为未来的修改不需要彻底的设计检修。

WordPress 对 Figma 的支持

虽然 WordPress 没有对 Figma 提供官方支持，但该工具在 Make WordPress 网站中拥有一些优秀的文档。 特别是，您需要利用 Figma 的 WordPress 设计库：

Figma 的 WordPress 设计库。

这本质上是 WordPress 的完整组件和元素库，可在 Figma 中访问。 Make WordPress 网站提供了有关如何将其用于您自己的设计的完整详细信息，如果您想要将 Figma 转换为 WordPress，我们认为这是必读的内容。

选择如何将 Figma 导出到 WordPress

当涉及到从 Figma 到 WordPress 的实际转换过程时，您有多种方法可以实现。 以下是最流行方法的概述：

  1. HTML 传输。 此方法涉及将 Figma 设计转换为 HTML 和 CSS 代码，然后将其集成到 WordPress 主题中。 这是“高保真”选项，非常适合自定义主题。 您（当然）需要大量的编码知识、时间和资源。 无论是在 Figma 设计过程还是在 WordPress 中复制它，精度都是关键。
  2. Figma 到 WordPress 插件。 插件似乎是最好的方法，因为它速度更快，并且需要更少的技术知识或精度。 然而，根据插件的不同，您可能无法捕捉到设计的每一个细微差别。 您的大部分工作将涉及确保您的 Figma 设计符合插件的要求，然后使用该插件自动执行转换过程。
  3. 使用 WordPress 页面构建器。 Elementor 或 Beaver Builder 也可以帮助在 WordPress 中重新创建 Figma 设计。 此方法提供了其他两种选项之间的平衡。 您的工作流程将涉及在 Figma 中进行设计，并考虑到页面构建器的限制，然后使用构建器的界面在 WordPress 中重建设计。

每种方法的技术要求、对 WordPress 网站的控制和效率各不相同。 选择很大程度上取决于您的具体需求、技术熟练程度和设计的复杂性。 选择正确的方法对于从 Figma 顺利过渡到 WordPress 至关重要，确保最终网站与您最初的设计愿景紧密结合。

鉴于选择一个选项将特定于您自己的项目，我们不会在这里详细介绍任何一个选项。 相反，我们将讨论大部分“繁重工作”——导出设计、准备 WordPress 和导入过程。

如何从 Figma 导出资产

将 Figma 导入 WordPress 所使用的大多数方法都要求您从前者导出媒体资产。 细致的方法是在左侧边栏中选择一个元素，这可能需要一段时间才能找到：

Figma 主要画布。

从那里，您可以从右侧边栏中的对话框导出它：

Figma 中导出对话框的特写。

尽管您确实可以一次选择多个资产，但这可能会花费您更多的时间。 您可以考虑在 Figma 中创建一个“切片”，尽管这不适合 Figma 到 WordPress 的转换。 它更适合创建快速的“屏幕捕获”图像。

导出资源的更好方法是使用 Figma 工具栏中的文件→导出对话框：

Figma 中的文件 → 导出选项。

这使您可以一次选择多个资产并将它们导出到您想要的任何位置。 不过，这可能还不是出口过程的结束。 我们认为，您还应该花一些时间准备出口资产。 接下来让我们快速看一下。

准备出口资产的技巧

虽然这不是必要的步骤，但确保您的资产符合 WordPress 的标准是一个不错的选择。 以下是您在导出自己的资产时可能需要考虑的元素的简要概述：

  • 即使在现阶段，图像优化仍然是一个重要因素。 稍后，一旦您拥有了实时 WordPress 网站，您就可以使用 Optimole 等工具来提供帮助。 但是，现在您需要使用 TinyPNG 等解决方案。 甚至还有专用的 Figma 插件可用。
  • 说到插件，通过 DesignLint 等工具运行您的资源可以帮助您发现导出时突出显示的任何问题。 您甚至可以自动化导出过程的某些部分。
  • 无论如何，使用 Figma 的组件和样式库是我们推荐的典型做法。 这就是 Figma WordPress 设计库的价值所在。

我们还建议您对资产使用一致的命名约定，因为这将使导入过程更加容易。 当您在 WordPress 网站中重新定位这些资产时，它也会为您提供帮助。 这引导我们进入该过程的下一部分：准备设计转移。

准备 Figma 到 WordPress 的传输

我们不需要在本节中详细介绍，因为您可能知道在这里要做什么。 但是，如果没有，WPShout 博客有很多文章可以帮助填补空白。 简而言之，这里需要采取三个步骤：

  1. 设置本地 WordPress 开发环境，甚至使用 WordPress Playground 等工具。
  2. 根据您（客户）的需求选择主题。 当然，如果需要，您也可以创建自定义主题，但这取决于首先执行本文中包含的一些后续步骤。
  3. 您还应该在此阶段安装和配置一些必要的插件。 这可以是特定于开发的工具以及插件，以帮助实现表单、搜索引擎优化 (SEO)、安全性等。

最终，此时，您应该已经建立并运行了一个准系统 WordPress 网站，至少在本地是这样。 您不需要在这里进行太多调整，因为重要的一步是设置站点和数据库。 完成此操作后，就可以将您的设计从 Figma 转移到 WordPress 了。

如何将 Figma 的设计集成到 WordPress

您此处的流程取决于您想要使用哪种方法将 Figma 导出到 WordPress。 手动方法将涉及完整的 Figma 到 HTML 转换。 这还需要对 WordPress 开发有透彻的了解，因为您显然会深入了解代码。

但是，使用页面构建器甚至块编辑器以及一些额外块的方法可能比完全手动编码方法节省更多时间。 这将为您提供使 WordPress 闻名的灵活性和设计选项，而且还可以让您顺利实施 Figma 设计。

此过程将涉及几个不同的步骤：

  1. 您需要使用媒体库将设计资源从 Figma 导入 WordPress。 请记住为任何图像和视频使用合适的标题、说明文字和替代文本。
  2. 页面构建器必须具有足够的灵活性来重新创建 Figma 设计。 您也可能会使用添加更多 CSS 或 JavaScript 的选项。
  3. 您的页面构建器还应该提供自定义模板功能。 这将使您能够以正确的方式融入 Figma 设计的动态方面。 Elementor 是一个提供此功能的页面构建器。

不过，插件可能是将 Figma 转换为 WordPress 的最快方法。 鉴于它可以成为将您的设计转移到 CMS 的一种适应性强的方式，让我们花一些时间来讨论您的选择。

使用插件将 Figma 转换为 WordPress

由于 Figma 和 WordPress 都是各自领域的领先解决方案，因此有很多第三方插件连接两者。 我认为这可以说是转换 Figma 设计的最佳方式，尽管输出的准确性可能需要一些工作才能使其更接近您的愿景。

Yotako 插件

例如，Yotako 的 Figma 到 WordPress 插件就是您将在 Figma 中安装的插件，并且具有简单的工作流程。 您将在 Figma 中选择要导出到 WordPress 的页面，然后告诉插件您要导出哪些设计元素：

Figma 中的 Yotako 应用程序。

从那里，您可以将设计传输到 WordPress，每页有多种分辨率。 虽然 Yotako 是免费的，但也有每月 39 美元起的高级套餐。

Fignel插件

Fignel 是另一个与 Yotako 类似的插件。 它的销售宣传谈到了从 Figma 到 WordPress 的“一分钟”转变。 它使用人工智能 (AI) 将您的 Figma 设计转换为通用 WordPress 模板或 Elementor 设计。

Fignel Figma 到 WordPress 转换器。

您将为其提供 Figma 链接，然后指定要转换的页面：

菲涅尔仪表板。

您可以选择创建一个完整的站点并在 Fignel 内托管，或者下载 WordPress 主题：

Fignel 将 Figma 转换为 WordPress。

但是，这不会为您提供完整的 WordPress 主题。 相反，您将拥有相应页面的文件，您需要从中添加 WordPress 特定的核心文件：

Fignel 转换为 WordPress 主题后为您提供的文件。

我喜欢这个选项，因为它使用起来很快而且是免费的。 在我的测试中，我很快从 Fignel 获得了良好的结果，它可能有助于完成 Figma 到 WordPress 转换中可能包含的一些繁琐的工作。

转到顶部

结论🧐

许多网站设计都将从 Figma 开始，这要归功于 Figma 出色的 UX/UI 设计方法。 从这里开始，将其导入 WordPress 是工作流程中的另一个常见步骤。 简而言之，后者的 Figma 到 WordPress 插件可能是这里的一个重要组件。 然而，如果您进行了正确的准备，那么您选择实施的任何方法都应该是简单的。 这证明了 Figma 和 WordPress 的灵活性！

💡 顺便说一句，随着您的 WordPress 网站启动，您可能有兴趣了解如何使其性能更好并加载更快。 这是相关指南。

您对将设计从 Figma 转移到 WordPress 有疑问吗？ 请在下面的评论部分提问！