在 Webflow 中視覺化地構建 React 組件 — Webflow 正式開放讓大家公開測試Devlink: 透過 Webflow 建構 React UI 組件。

DevLink 讓您能夠在 Webflow 中為 React 專案構建組件 — 設計和開發團隊可以快速交付像素完美的 UI 設計，並簡化團隊合作的工作流程。

超越網站的視覺化開發

Webflow 的建立是為了將程式碼的力量放入視覺界面，有效地創建了一種用 HTML、CSS 和 Javascript 的力量在 UI 中視覺化開發前端界面的方式。雖然我們一直專注於將這種力量應用於改變人們如何構建網站，但我們一直知道 Webflow 的視覺化開發工具可以做得更多。

這就是為什麼我們的 Webflow Labs 團隊一直在 DevLink 上開發構建即用型 React 組件的新方法。無論 DevLink 用戶是在 Webflow 之外重新使用 Webflow 組件，還是視覺化開發全新的 React 組件，他們都能夠快速交付網絡應用程序和設計系統，無需技術成本 — 我們甚至看到一些用戶使用 Webflow 和 DevLink 作為他們進行極高保真度原型製作和快速推進至他們最小可行產品的首選方式。（配合我們新的 Figma 至 Webflow 插件，從想法到最小可行產品所需的時間剛剛變得短得多。）

在一次小型的開發者預覽之後，我們現在正在將 DevLink 釋放給所有客戶公開測試，我們很興奮聽到它對您和您的團隊釋放了什麼。

DevLink 為設計師和開發人員提供了更好的協作方式，並能避免在 Webflow 外部重建 Webflow 組件的重複和繁瑣工作。

要使用 DevLink，有5個基本步驟：

  1. 在您的帳戶中啟用 DevLink: 訪問 DevLink 頁面 並點擊開始使用 DevLink。
  2. 在 Webflow 中構建組件: 確保查看目前 支持的元素。
  3. 設置組件屬性: 對於需要嵌套或 Javascript 的更複雜的組件，設置 插槽 或 運行時屬性。
  4. 將 Webflow 項目連接到 React 項目: 從 Webflow Designer 中複製 DevLink 配置並粘貼到您的 React 項目中。
  5. 將 Webflow 與您的 React 項目同步: 在您的 React 項目上安裝 DevLink npm 包並將您的 Webflow 組件導入為即用型 React 組件。

注意：DevLink 不允許您將 React 導入到 Webflow 中。如需查看如何開始，請查看Webflow 文檔。

通過 DevLink，可以在 Webflow 內創建與數據連接的強大的 React 的體驗，並直接從 Webflow 中導出所有內容。這種我們可以更快移動的強大開發工作流給了 Webflow 開發者巨大的競爭優勢。

更快地推出 web 應用程序和產品

DevLink 在 Webflow 中的圖像

在推出全新的功能、應用或新創公司時有很多工作需要完成，但遺憾的是，卻必須花上大部分時間都被用於繁瑣的前端編碼。例如，假設你的開發人員花了一天的時間讓所有的邊框半徑和陰影與 Figma 中的模擬保持一致，但沒有時間將數據庫連接到計費系統。

有了 DevLink，設計團隊可以全權控制他們的關鍵品牌決策，同時讓開發人員專注於對核心功能至關重要的更複雜的構建部分。

擴大您為客戶提供的服務

DevLink 能夠讓您交付不同的 React 組件的視圖

儘管您可能已經在使用 Webflow 來交付客戶網站，但網站往往只是代理商和自由工作者提供的更大品牌和設計套餐的一部分。這些套餐的一個常見組件是產品或應用的設計系統 - 在缺乏開發團隊的情況下，這通常以大型 Figma 文件或類似東西的形式出現。

DevLink 讓您可以交付的不僅僅是一個扁平文件，而是可以讓您交付一整套具有動畫效果的響應式 React 組件，這些組件可以直接由客戶的開發人員集成到他們的代碼庫中，從而節省他們將會花費在自行從頭開始構建相同組件的時間。

更順暢地進行原型製作和測試

DevLink 讓您更快地進行原型製作和測試

DevLink 可以作為一個中介，可將您的 Figma 設計（透過我們的新 Figma 到 Webflow 插件）變成具有真實數據和功能的 React 應用程序。這為原型製作和測試創造了一種更直接和有效的方法，您可以快速進行測試，以便了解哪些變化會對您的產品起作用。

我們已經看到有些人在使用 DevLink 進行高保真度原型製作和快速推進到他們的最小可行產品，我們對此感到非常興奮。

在開放公開測試期間，我們希望繼續收集反饋並進一步改進產品。我們期待聽到 DevLink 如何對您的團隊有所幫助。開始使用 DevLink 並讓我們知道您的體驗！"

如何開始

要獲得 DevLink 的訪問權限，請在此處註冊，並使用您的 Webflow 帳戶電子郵件地址 - 我們將在其啟用時向您發送電子郵件。然後，請查看我們的開發者文檔指南和我們的設計師指南中的 DevLink以開始。我們還有模板和可複製的項目，以及附帶GitHub倉庫的項目！

如我們之前提到的，DevLink 處於初期開發階段，我們從像您這樣的用戶那裡學到了很多。我們已經在規劃和開發一些重要的改進：

Share this post