如何將 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 和網站託管。 憑藉多年的經驗和對了解最新行業趨勢的承諾，他制定了有效的線上策略來增加流量、提高參與度並提高轉換率。 拉胡爾對細節的關注以及製作引人入勝的內容的能力使他成為任何希望提高其線上形象的品牌的寶貴資產。