Figma 至 Webflow 應用程式

在本課中，您將學習：

1. 如何啟動 Figma 至 Webflow 應用程式
2. 如何同步和匯入變數和元件
3. 如何同步先前匯入的元件
4. 如何檢查有衝突的組件的更新
5. 如何同步先前匯入的變數

如何啟動 Figma 至 Webflow 應用程式

首先，打開您的 Webflow 站點，然後從 應用控制板。然後：

1. 轉到 Figma 插件
2. 前往 設計系統同步 標籤
3. 確保在下拉清單中選擇正確的網站（即您要同步 Figma 外掛程式的網站） 

一旦插件顯示已連接，您就可以同步變數和/或元件。

如何同步和匯入變數和元件

設定數字變數的全域單位

如果您想要全域變更數字變數所使用的單位，您可以在 Figma 外掛模式中執行此操作。然後，所有變數在同步到Webflow時將使用指定的單位。

1. 轉到 Figma to Webflow 插件模式窗口
2. 前往 設計系統同步 標籤
3. 點擊右上角旁邊的圖標 設計系統同步‍
4. 點選 插件設定‍
5. 使用 數量 變數 單位 用於設定數字變數的全域單位（即 px、em 或 rem）的下拉列表
6. 返回 設計系統同步 標籤
7. 點選 同步到Webflow

然後，您可以返回 Webflow 並透過點擊在應用程式模式視窗中同步新的數字變數單元 導入和更新變數。畫布上目前使用的任何變數都會調整為新的數字變數單位。

筆記： Figma 僅以像素為單位顯示變量，因此您匯入的設計在 Webflow 中的外觀可能與 Figma 中的有所不同。

同步和導入變數

若要選擇要同步和匯入的變數：

1. 前往 設計系統同步 標籤
2. 點擊 ”變數模式” 右上角的圖標
3. 選擇要同步的變數
4. 點選 同步到Webflow

然後，您可以返回 Webflow 在 App 模態視窗中匯入變數。您可以選取或取消選取複選框來選擇要匯入的變數。然後，點擊 導入變數。導入變數後，它們將出現在 變數 標籤。

同步和導入元件

若要選擇要同步的元件：

1. 前往 設計系統同步 標籤
2. 點擊 ”選擇模式” 右上角的圖標
3. 使用以下命令在 Figma 畫布上選擇一個或多個元件 轉移 + 點選
4. 點選 同步到Webflow

插件同步您的元件後，您可以訪問 Webflow 網站並在 Figma 到 Webflow 應用程式中查看更新。 

1. 點選 導入新元件 查看新同步的組件
2. 選擇要匯入 Webflow 站點的元件
3. 點選 導入元件

從 Figma 匯入元件後，Webflow 就會與該元件建立連線。稍後，您可以從 Figma 重新匯入相同的元件，並直接在 Webflow 中查看其設計更新。請注意，僅更新元素位置和樣式。如果您有屬性或綁定，它們將保留在 Webflow 中。

筆記： 元件變體將作為重複元件匯入到您的 Webflow 站點，除非您在同步時取消選擇它們。

如何同步先前匯入的元件

若要同步您先前匯入 Webflow 網站的元件，請先前往 Figma 並開啟外掛程式視窗。然後：

1. 確保在下拉清單中選擇正確的網站（即您想要與其同步組件的網站） 
2. 點擊 ”選擇模式” 右上角的圖標
3. 選擇 Figma 畫布上的組件
4. 點選 繼續 在插件模式視窗中
5. 點選 同步到Webflow
6. 在您的 Webflow 站點中開啟 Figma to Webflow 應用程式
7. 點選 組件更新 在應用程式模式視窗中

然後，您可以點擊各個組件來查看：

• 已變更的樣式（例如顏色、字體等）
• 新增至組件或隨組件更新的變數
• 新增到組件的新元素

您可以點選 更新元件樣式和變數 從預覽中更新單一元件，或按一下 更新所有元件 來自 查看元件更新 頁。組件的所有實例都將在您的 Webflow 站點上更新。

如何檢查有衝突的組件的更新

當您從 Figma 的元件中刪除一個或多個元素且這些元素仍然存在於 Webflow 中時，先前匯入的元件會發生衝突。若要查看有衝突的元件的更新，請按一下 元件更新有衝突 在應用程式模式視窗中。然後，您可以單擊每個組件以查看其缺少的元素。 

從那裡，您有三個選擇：

• 刪除缺少的元素 — 像往常一樣更新 Webflow 中組件的所有實例（這將 消除 組件中的元素）
• 作為未同步組件導入 — 按原樣將元件匯入至 Webflow。該元件將來無法從 Figma 同步到 Webflow。
• 恢復 Figma 中的更改 — 您可以返回 Figma 並將刪除的元素新增回組件，這將消除衝突

如何同步先前匯入的變數

若要更新您先前匯入 Webflow 網站的變量，請先前往 Figma 並開啟外掛程式視窗。然後：

1. 點擊 ”變數模式” 圖示位於右上角
2. 點選 繼續
3. 選擇要同步的變數
4. 點選 將變數同步到 Webflow

任何已在 Figma 中更新並同步到 Webflow 的變數都會顯示在應用程式模式視窗中。此視窗將顯示變數的初始值和新值。您可以選擇要匯入的變量，然後按一下 更新變數.