# Figma 到 Webflow 應用程式

#### 使用新的配套應用程式將 Figma 同步到 Webflow

今天，我們很高興地宣布發布[Figma to Webflow 插件](https://www.figma.com/community/plugin/1164923964214525039)的配套應用程式以及我們在插件中稱為「設計系統同步」的新功能。在此版本中，整合使用者現在擁有更有效率的工作流程，可以將元件和變數從 Figma 傳輸到 Webflow 專案中。&#x20;

#### 主要特徵：&#x20;

* **配套應用程式：**[配套應用程式](https://webflow.com/apps/detail/figma-to-webflow)位於 Webflow 應用程式面板中，透過促進與 Webflow 的直接同步來增強現有插件。&#x20;
* **設計系統同步標籤**：外掛程式中的新增功能，使用者現在可以更輕鬆地同步 Figma 中的元件和變量，確保跨平台的設計一致性。 &#x20;
* **預覽和檢查**：在應用程式中，同步更新到先前連結的元件或變數的使用者將在應用程式中看到預覽，並且還可以選擇檢查 CSS 變更。&#x20;
* **核准佇列**：現在，Webflow 中的使用者可以查看變更並給予最終批准，從而確保在將設計部署到 Web 時實現更高層級的控制和準確性。 &#x20;

這些增強功能旨在無縫整合到您現有的工作流程中，最大限度地減少干擾並最大限度地提高生產力。透過 Figma 設計和 Webflow 專案之間更受控和高效的橋樑，應用程式、同步和批准減少了設計到程式碼轉換所需的手動工作。&#x20;

{% embed url="<https://www.youtube.com/watch?v=hVRzm9kZ8jQ>" %}

#### 賦能設計系統

新的配套應用程式和設計系統同步透過確保無縫、[可擴展的設計系統](https://webflow.com/blog/announcing-figma-webflow-design-system-sync)來增強 Webflow 。這意味著一致、高效的設計到程式碼工作流程，讓使用者能夠更專注於創造力和統一設計語言的業務關鍵維護。&#x20;

#### 入門

[從Figma 社群清單](https://www.figma.com/community/plugin/1164923964214525039)安裝後，該應用程式就包含在外掛程式中。對於已經安裝了該插件的用戶，該應用程式將在下次插件驗證或登入時可用。確認您擁有該外掛程式的最新版本後，透過Webflow 專案中的[「應用程式」面板](https://university.webflow.com/lesson/webflow-apps-overview?topics=getting-started#how-to-use-apps-in-the-designer)存取配套應用程式。然後從 Figma 中使用該插件開始第一次同步。很快您將開始在 Figma 中進行設計並在 Webflow 中啟動。

#### 立即同步您的設計

[將Figma to Webflow 外掛程式](https://www.figma.com/community/plugin/1164923964214525039)加入到您的 Webflow 專案中；該應用程式和設計系統同步均包含在內。

自從該插件推出一年以來，安裝量已超過 180,000 次，今天發布的配套應用程式和設計系統同步將釋放更多可能性。感謝您與我們同在。我們迫不及待地想看看您接下來會建造什麼。

***

February 22, 2024


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/changelog/2024/figma-dao-webflow-ying-yong-cheng-shi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
