如何將網站從 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 有疑問嗎？ 請在下面的評論部分提問！