用於 Figma 整合的 Webflow 插件

探索我們的 Figma 文件 詳細了解英雄和導覽列結構。

至關重要的： 我們的客戶支援團隊無法提供有關該插件的直接協助。如有任何疑問或建議，請直接聯繫 Webflow 實驗室社區 整個 Webflow 社區（包括工作人員）可以提供額外的援助和資源。

您是否願意在 Figma 中建立初始站點藍圖，然後將其用作 Webflow 站點建設的路線圖？現在，您可以將 Figma 設計無縫貼上到 Webflow 中，而無需費力地重新創建每個元素。此外，您可以利用 Figma to Webflow 應用程式將 Figma 元件和變數與 Webflow 網站同步，只需按一下即可立即更新它們。

筆記： Figma to Webflow 插件由內部創意團隊 Webflow Labs 開發並推出。 Webflow 實驗室推出的產品透過我們的標準管道獲得的支援有限，並且被設計為實驗性的，這意味著它們的功能可能會不斷發展。該插件也可能隨時被刪除—您可以自行決定使用它。我們熱切地等待您的 想法、評論和回饋都在這裡.

在本教程中，您將獲得以下方面的見解：

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 to 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 上）或 控制 + 替代 + C （在 Windows 上）複製圖層的屬性，然後套用 選項 + 命令 + V （在 Mac 上）或 控制 + 替代 + V （在 Windows 上）將其傳輸到另一個選定的圖層。此捷徑對於複製填滿、描邊和文字屬性非常有用。

使用自動佈局進行設計後，您可以使用插件將其傳輸到 Webflow：

1. 選擇 Figma 畫布上的設計（包含所有圖層）
2. 從以下位置選擇您想要插入設計的 Webflow 站點 選擇Webflow站點 插件模式視窗中的下拉式選單
3. 點選 複製到Webflow 在 Figma 到 Webflow 插件模式視窗中
4. 如果插件提示，請確認複製到 Webflow
5. 在單獨的視窗中啟動 Webflow Designer
6. 將設計貼到 Webflow Designer 畫布上

提醒： 您只需從 Webflow 站點中選擇一次 選擇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 站點中選擇一次 選擇Webflow站點 落下。接下來，您可以將 Figma 檔案中的多個結構複製並貼上到 Webflow。

提醒： 確保您選擇整個結構，而不僅僅是其中的某些元素。未能選擇完整結構可能會導致複製問題並阻止您將其貼上到 Webflow Designer 中。

複製並貼上文字和顏色樣式

如果您的 Figma 檔案中有文字和顏色樣式，您可以將它們複製到 Webflow，以便在網站設計過程中輕鬆存取。建議在Webflow中建立一個樣式指南頁面來組織您的文字和顏色樣式。您可以複製單一文字樣式、顏色樣式或同時複製所有文字和顏色樣式。

可用於複製的文字和顏色樣式包括：

• 在地化 Figma 文字和顏色樣式
• Figma 庫中的文字和顏色樣式 （如果套用於目前 Figma 頁面）

文字和顏色樣式將透過預先定義的「樣式指南」範本在 Webflow 中複製。

文字樣式

要從 Figma 複製文字樣式：

1. 訪問“漢堡菜單” 在外掛模式視窗中
2. 選擇 複製文字樣式
3. 繼續造訪 Webflow 網站上指定的樣式手冊頁面（如果已建立），或 Webflow 網站中的其他頁面
4. 打 控制 + V （在 Mac 上）或 命令 + V （在 Windows 上）插入本機文字樣式

文字樣式將使用預先定義的「樣式指南」範本插入到 Webflow 中。文字樣式插入到 文字樣式 部分。每個文字樣式將從 Figma 中的文字樣式取得具有指定名稱的類別（例如，如果您在 Figma 中將文字樣式命名為“Tahoma Bold”，則其 Webflow 類別名稱將為“Tahoma Bold”）。

顏色款式

若要從 Figma 複製顏色樣式：

1. 點擊 ”漢堡菜單” 在外掛模式視窗中
2. 選擇 複製顏色樣式
3. 前往 Webflow 網站中指定的樣式指南頁面（如果您建立了一個），或 Webflow 網站中的另一個頁面
4. 打 控制 + V （在 Mac 上）或 命令 + V （在 Windows 上）貼上本機顏色樣式

顏色樣式將透過預設的「樣式指南」範本貼到 Webflow 中。顏色樣式貼在 顏色款式 部分。每個顏色樣式都將被分配一個類，將其標記為顏色樣本，並從Figma 中的顏色樣式指定名稱（例如，如果顏色樣式在Figma 中被命名為“粉紅色”，則其Webflow 類名稱將為“顏色樣本/粉紅色” ”）。可以在 Webflow 畫布上的本機樣式旁查看顏色的十六進位代碼，或導覽至「樣式」面板 > 背景，然後選擇與該顏色相鄰的色樣。

這些顏色樣式不會自動產生為 Webflow 顏色變量，因此，我們建議手動建立這些變數以在整個網站中套用顏色。

如何同時複製所有文字和顏色樣式

複製 全部 Figma 的文字和顏色樣式， 

1. 點擊 ”漢堡菜單” 在外掛模式視窗中
2. 選擇 複製所有文字和顏色樣式
3. 前往 Webflow 網站中指定的樣式指南頁面（如果您建立了一個），或 Webflow 網站中的另一個頁面
4. 打 控制 + V （在 Mac 上）或 命令 + V （在 Windows 上）插入本機樣式

這些樣式將透過預設的「樣式指南」範本插入到 Webflow 中。

插件的操作

使用 Figma to Webflow 插件時，需要考慮以下幾個方面的幾個關鍵因素：

• 自動佈局
• 特殊字體
• 類別
• 聯合課程
• 圖形
• HTML 元素
• 背景
• 適應性
• 增強的插件功能

此外，利用 Figma 到 Webflow 應用程式可以順利整合從 Figma 到 Webflow 的元件和變數。

自動佈局

您只能使用以下命令複製和貼上圖層 自動佈局。這保證了從 Figma 複製到 Webflow 時的最佳轉換。

筆記： 如果您的 Figma 設計中有一個沒有自動佈局的圖層，插件模式中會出現一條通知，提示您在將圖層貼上到 Webflow 之前將其轉換為自動佈局。透過點選模式中的黃色警告三角形，您可以選擇需要轉換為自動佈局的所有圖層。

特殊字體

如果您的 Figma 設計中使用了自訂字體，請確保在傳輸 Figma 設計之前將其上傳到您的 Webflow 站點，以確保正確的字體傳輸。如果未能將自訂字體新增至 Webflow，可能會導致它們在傳輸過程中遺失。了解將自訂字體上傳到 Webflow 網站的過程。

描述和符號

Figma 是一款向量軟體，可讓您產生描述、符號和向量標誌。大多數描述都是由 Figma 和其他向量工具特有的各種向量圖層建構的，這使得插件處理起來具有挑戰性，通常會導致逾時錯誤。

如果有 向量層 在您的設計中，該插件會自動產生一個名為「向量包裝器」的新向量父層。此包裝器封裝了用於 SVG 導出的向量圖層。複製過程完成後，該插件會在 Figma 中刪除該圖層，但它仍會保留在 Webflow 中。

如果您正在使用Figma 成分 在你的向量圖層中，你可能需要 分離實例 在複製圖層之前。如有必要，外掛程式將提示您分離實例。

可以透過按快速完成分離實例 選項 + 命令 + 乙 （在 Mac 上）或 控制 + 乙 （在 Windows 上）。

類別

將設計從 Figma 複製到 Webflow 後，每個 Figma 圖層名稱都會轉換為一個類別。

名字相配，風格多樣

如果兩個 Figma 層共享 相同的姓名 但攜帶 對比風格，插件將透過在類別名稱中添加數字來自動重命名這些類別。例如，如果Figma 中的兩個圖層被命名為具有不同樣式的“container”，則在將它們貼到Webflow Designer 畫布上時，插件將向其中一個圖層分配“container”類，向第二層指派“container 2”類別。

同樣，當在 Webflow 畫布上貼上具有網站上現有類別名稱的圖層時，類別名稱將顯示為遞增的數字。例如，如果您的網站已包含「Button」類，並且您將名為「Button」的Figma 圖層貼到Webflow Designer 畫布上，則該圖層的類別將在「選擇器」欄位中標記為「Button 2”。或者，您可以將 Figma 圖層貼上到 Webflow 中，套用現有的 Webflow 類別樣式，或將現有 Webflow 類別的樣式變更為 Figma 圖層的樣式。

專家提示： 如果您經常將相同的佈局複製到 Webflow，可能會出現不良的類豐富情況，從而導致網站效能下降。為了保持整潔的類別結構（並避免像「Button 234986」這樣的混亂），請消除 Webflow 網站上不必要的佈局或元素，並在樣式管理器中整理樣式。這樣，您就可以將 Figma 設計貼到 Webflow 中，而不會導致類別過載。

Figma 與 Webflow 之間交換設計

有 2 個鍵盤快速鍵用於在 Figma 圖層和 Webflow 類別之間共用樣式。

• 命令 + 轉移 + V （在 Mac 上）或  控制 + 轉移 + V （在 Windows 上）— 此特定捷徑將使您能夠貼上 Figma 圖層並使用現有的 Webflow 類別套用樣式。要繼續，只需複製 Figma 中的圖層，然後使用以下命令將其貼上到 Webflow 中： 命令 + 轉移 + V （在 Mac 上）或 控制 + 轉移 + V （在 Windows 上）。然後，您的圖層將被貼上到 Webflow 中，並且現有類別的樣式已經就位。例如，如果 Figma 中有一個紅色背景的「Button」圖層，但 Webflow 中的「Button」類別具有綠色背景，則「Button」圖層將貼上到具有綠色背景的 Webflow 中。
• 命令 + 選項 + V （在 Mac 上）或 控制 + 選項 + V （在 Windows 上）- 這個特殊的快捷方式將允許您貼上 Figma 圖層並調整現有的 Webflow 類別以符合 Figma 的樣式。該過程涉及複製 Figma 中的圖層並使用以下命令將其貼上到 Webflow 中 命令 + 選項 + V （在 Mac 上）或 控制 + 選項 + V （在 Windows 上）。隨後，Webflow 類別的現有樣式將被修改以與 Figma 圖層的樣式保持一致。例如，如果 Figma 中有一個紅色背景的「Button」圖層，而 Webflow 中符合的「Button」類別具有綠色背景，則 Webflow 中「Button」類別的背景顏色將切換為紅色。

相同的風格，獨特的檔次

如果兩個 Figma 圖層或 Figma 圖層和 Webflow 元素共用相同的樣式但具有不同的類別名稱，則外掛程式將合併這些類別。此操作有助於減少 Webflow 中重複類別實例的數量。

例如，如果您在Figma 中擁有2 個圖層，它們共用相同的CSS 樣式，但名稱不同，假設一個標題為“Navbar”，另一個標記為“Cool navbar”，Webflow 將透過將相同的“Navbar”類別分配給它們來簡化它們將它們貼在 Webflow 畫布上後。

聯合課程

另一項功能是透過在正斜線後面新增類別名稱（例如「基底類別/組合類別/第二個組合類別」），在 Figma 圖層上建立組合類別。

插圖

貼上包含圖像的設計後，這些圖像將上傳到 Webflow 的資產面板。確保在以下位置選擇了適當的站點 選擇Webflow站點 插件模式視窗內的下拉式選單；否則，圖像可能無法上傳到資源面板。

筆記： 您可能需要刷新 Webflow Designer 才能查看資產面板中上傳的圖像。

標記元素

該插件致力於透過遵循指定的標準為每個 Figma 層推斷出合適的 HTML 標籤：

• 錨標記：如果圖層名稱包含“button”，它將將該圖層轉換為 HTML 錨標記（例如，“<a>”）
• 段落標籤：如果圖層名稱包含“description”、“text”或“paragraph”，則會將該圖層轉換為 HTML 段落標籤（例如“<p>”）
• 標題標籤：當圖層名稱整合“heading”時，它將轉置為 HTML H1 標籤（例如“<h1>”）

但是，如果需要更改外掛程式使用的 HTML 標籤，手動設定是可行的。

手動確定 HTML 標籤

您可以透過重新命名圖層並新增用括號括起來的標籤名稱，後面跟著 2 個連字元（例如，「[H1] - 圖層名稱」）來指定每個 Figma 圖層的 HTML 標籤。

筆記： 確保標籤中的第一個字母大寫。

該外掛包含以下 HTML 標籤：

1. H1
2. 氫2
3. H3
4. H4
5. H5
6. H6
7. 磷
8. A
9. 分割區

背景選項

該外掛程式支援自動佈局圖層和文字圖層的純色、線性和圖像背景。

筆記： 如果您的背景圖片在使用外掛程式複製貼上後無法在Webflow中顯示，請重新整理設計器頁面。

適應性

您也可以靈活地確定 Figma 層轉換為垂直堆疊的斷點，從而更好地控制設計的反應能力。該外掛提供了 4 個斷點選項供選擇：

• 藥片 — 此層將在平板電腦斷點處切換為垂直堆疊（寬度範圍從 991 像素到 767 像素）
• 移動景觀 — 此圖層將在移動景觀斷點處轉換為垂直堆疊（寬度範圍從 767 像素到 478 像素）
• 手機人像 — 此圖層將在移動縱向斷點處轉換為垂直堆疊（寬度範圍從 478 像素到 0 像素）
• 沒有反應 — 無論視窗寬度如何，圖層都會保留水平堆疊。但是，您可以手動建立 裹 和 最小/最大寬度 在父框架上，以確保您的設計具有回應能力。

筆記： 如果圖層寬度低於 478 像素或圖層已位於垂直堆疊中，則在「響應式」下拉清單中配置圖層的回應能力將無法使用。

要管理圖層的回應能力：

1. 選擇圖層
2. 來自 反應靈敏 插件模式中的下拉式選單，選擇層應轉換為垂直堆疊的斷點

增強的插件功能

該外掛程式會剖析所選的 Figma 圖層，並將其樣式和佈局轉換為 HTML 標籤和 CSS 屬性。透過僅接受自動佈局元素來保證這種轉換精度。

筆記： 遺憾的是，Figma to Webflow 外掛程式目前缺乏與 Safari 瀏覽器上 Figma 的兼容性。因此，如果您在 Safari 瀏覽器中使用 Figma，該插件將無法運作。我們提倡使用 Chrome 或 Figma 桌面應用程式。

卸載 Figma 至 Webflow 插件

要從您的工作區或網站之一刪除 Figma 至 Webflow 插件，您應該確定您最初授予插件存取權限的位置。對於工作區授權，請依照下列步驟刪除外掛程式。對於特定於網站的授權，請繼續執行從網站卸載外掛程式的步驟。

從您的工作區中刪除該插件

若要從工作區中刪除 Figma 至 Webflow 插件：

1. 訪問 帳戶 導覽列中的下拉式選單
2. 點選 工作空間
3. 選擇您要從中刪除外掛程式的工作區
4. 導航 工作區設定 > 整合 選項卡 > 授權應用
5. 選擇 撤銷 用於“Webflow 從 Figma 到 Site”應用程式

從您的網站中刪除該插件

要從您的網站根除 Figma 至 Webflow 插件：

1. 訪問您的 儀表板
2. 點擊“3個披露點” 在所需站點旁邊
3. 導航 設定
4. 繼續 站點設定 > 整合 選項卡 > 授權應用
5. 點選 看法
6. 選擇 帳戶整合設定
7. 訪問 帳號設定 >  授權應用
8. 點選 撤銷 用於“Webflow 從 Figma 到 Site”應用程式

插件故障排除

如果外掛程式無法準確複製您的設計，請先確保您使用的是受支援的瀏覽器。該插件支援的瀏覽器包括 Chrome 和 Figma 桌面應用程式。值得注意的是，該插件目前與 Safari 瀏覽器中的 Figma 不相容。

如果問題仍然存在，請嘗試以下措施：

• 利用自動佈局複製單一預先建置佈局、預先建置結構或文字圖層並貼上到 Webflow 中 — 如果框架複製和貼上正確，則插件可以運行。如果框架無法正確複製，請繼續執行規定的故障排除步驟
• 探索 我們的解決方案 Webflow 實驗室社區
• 從事 在裡面 Webflow 實驗室社區 透過提出查詢

如果按照上述故障排除步驟後問題仍然存在，請建立一個包含有問題的框架的新 Figma 文件，並將其與 Webflow 實驗室團隊共用： [email protected]。他們會立即解決您的疑慮。

提供回饋

我們熱切等待您的想法、評論和回饋，以幫助我們增強這個外掛程式。請與我們一起貢獻您的見解 Webflow 實驗室社區.