在Webflo 我們總是積極推出新
Posted: Wed Dec 04, 2024 9:52 am
這意味著，我們必須將所有「Vector」節點明確轉換為 SVG，同時將節點從 Figma 轉換為 Webflow。為了增加翻譯的複雜性，Figma 使用者經常對他們的圖層進行「分組」。為了保持一致性，我們決定邀請使用者將其群組圖層轉換為“自動佈局”，否則我們將不得不將它們轉換為 SVG。
為了緩解上述一些挑戰，我們決定利用 Webflow 和 Figma 提供的設計系統原語（元件和變數），並開發了一種將您的設計引入 Webflow 的新方法：設計系統同步。
第二種方法：設計系統同步
產品。大約一年前，我們推出了變數並使用新 阿根廷 電話號碼資源 的設計器API改進了 Webflow 應用程式。這是將 Figma 發展為 Webflow 產品並允許我們的用戶將其設計系統直接同步到 Webflow 的最佳時機。
我們著手創建一種新方法，將元件和變數等設計系統原語引入 Webflow。目標是將 Figma 作為事實來源並輕鬆更新元件和變數。為了實現這一目標，我們發布了一款名為「Figma to Webflow」的新 Webflow 應用程式。
設計系統同步的翻譯引擎是我們用來複製/貼上的引擎的一個實例。這意味著從 Figma 收集數據的繁重工作已經完成。
該產品最大的工程挑戰是管理正在傳輸的資料的狀態。我們想知道您的元件或變數是否已經存在，以避免 Webflow 端出現重複。我們也希望使這種體驗盡可能簡化和即時。為此，我們創建了一個即時連接兩個應用程式（Figma 插件和 Webflow 應用程式）的系統。
即時同步
為了連接這兩個應用程序，我們使用 WebSockets。 WebSocket 是一種通訊協議，它透過單一 TCP 連線在客戶端（如 Web 瀏覽器）和伺服器之間提供雙向通訊通道。與傳統的 HTTP 請求不同，傳統的 HTTP 請求是單向的，需要不斷地重新請求更新，而 WebSocket 允許連續、即時的資料交換。
資料的即時同步是使用websocket完成的。具體來說，透過使用訊息傳遞（發布/訂閱）功能，可以將訊息從發布者即時分發到多個訂閱者。我們還使用存在檢測來即時追蹤用戶的線上狀態，讓我們了解誰已連接、已斷開連接或離線。此功能通常用於聊天應用程式或多人遊戲等應用程式。我們嘗試利用這些技術為我們的用戶創造獨特的體驗。
匯入您的設計系統
當使用者將元件或變數同步到Webflow時，我們首先需要確定該元件或變數是否已存在於Webflow中。如果是，我們就會檢查其樣式或屬性是否有任何變更或更新。本質上，我們將現有的 Webflow 數據對應到 Figma 的傳入數據，讓我們的用戶可以透過突出顯示差異來控制他們將導入的內容。
建立這個「風格差異畫面」需要將 Figma 中的每個節點與 Webflow 中的對應節點進行比較。然而，由於這兩個工具的資料結構截然不同，我們需要建立一個可以表示兩個環境中的資料的通用結構。
我們使用的結構如下：
我們解析 Figma 和 Webflow 中的資料以適應這種通用結構。結果是來自 Figma 的節點數組和來自 Webflow 的另一個節點數組。下一步是比較這些數組，以確定每個組件的哪些節點不同。同樣的過程也適用於變數。
此流程使我們能夠通知使用者他們將要匯入的更新，確保他們能夠完全控制對其 Webflow 專案所做的變更。透過突出顯示樣式、屬性和變數的差異，使用者可以就保留、修改或丟棄哪些內容做出明智的決定。這種程度的透明度和細節最終提高了整個過程的效率。
為了緩解上述一些挑戰，我們決定利用 Webflow 和 Figma 提供的設計系統原語（元件和變數），並開發了一種將您的設計引入 Webflow 的新方法：設計系統同步。
第二種方法：設計系統同步
產品。大約一年前，我們推出了變數並使用新 阿根廷 電話號碼資源 的設計器API改進了 Webflow 應用程式。這是將 Figma 發展為 Webflow 產品並允許我們的用戶將其設計系統直接同步到 Webflow 的最佳時機。
我們著手創建一種新方法，將元件和變數等設計系統原語引入 Webflow。目標是將 Figma 作為事實來源並輕鬆更新元件和變數。為了實現這一目標，我們發布了一款名為「Figma to Webflow」的新 Webflow 應用程式。
設計系統同步的翻譯引擎是我們用來複製/貼上的引擎的一個實例。這意味著從 Figma 收集數據的繁重工作已經完成。
該產品最大的工程挑戰是管理正在傳輸的資料的狀態。我們想知道您的元件或變數是否已經存在，以避免 Webflow 端出現重複。我們也希望使這種體驗盡可能簡化和即時。為此，我們創建了一個即時連接兩個應用程式（Figma 插件和 Webflow 應用程式）的系統。
即時同步
為了連接這兩個應用程序，我們使用 WebSockets。 WebSocket 是一種通訊協議，它透過單一 TCP 連線在客戶端（如 Web 瀏覽器）和伺服器之間提供雙向通訊通道。與傳統的 HTTP 請求不同，傳統的 HTTP 請求是單向的，需要不斷地重新請求更新，而 WebSocket 允許連續、即時的資料交換。
資料的即時同步是使用websocket完成的。具體來說，透過使用訊息傳遞（發布/訂閱）功能，可以將訊息從發布者即時分發到多個訂閱者。我們還使用存在檢測來即時追蹤用戶的線上狀態，讓我們了解誰已連接、已斷開連接或離線。此功能通常用於聊天應用程式或多人遊戲等應用程式。我們嘗試利用這些技術為我們的用戶創造獨特的體驗。
匯入您的設計系統
當使用者將元件或變數同步到Webflow時，我們首先需要確定該元件或變數是否已存在於Webflow中。如果是，我們就會檢查其樣式或屬性是否有任何變更或更新。本質上，我們將現有的 Webflow 數據對應到 Figma 的傳入數據，讓我們的用戶可以透過突出顯示差異來控制他們將導入的內容。
建立這個「風格差異畫面」需要將 Figma 中的每個節點與 Webflow 中的對應節點進行比較。然而，由於這兩個工具的資料結構截然不同，我們需要建立一個可以表示兩個環境中的資料的通用結構。
我們使用的結構如下：
我們解析 Figma 和 Webflow 中的資料以適應這種通用結構。結果是來自 Figma 的節點數組和來自 Webflow 的另一個節點數組。下一步是比較這些數組，以確定每個組件的哪些節點不同。同樣的過程也適用於變數。
此流程使我們能夠通知使用者他們將要匯入的更新，確保他們能夠完全控制對其 Webflow 專案所做的變更。透過突出顯示樣式、屬性和變數的差異，使用者可以就保留、修改或丟棄哪些內容做出明智的決定。這種程度的透明度和細節最終提高了整個過程的效率。