英文 | https://medium.com/dhiwise/how-to-convert-your-figma-design-into-react-code-step-by-step-guide-%EF%B8%8F-f4a447dccfa3
你想加速你的 React.js 應用程式開發嗎？正是通過自動将你的設計轉換為 React 元件！
如果是，DhiWise Web 應用程式建構器可以節省一些寶貴的時間，否則你可以用它來開發關鍵的應用程式功能。上面提到的 Web 應用程式建構器可以從你的 Figma 設計中快速生成可用于生産的代碼。重要的是它遵循可視化程式設計的精神。
在本文中，我們将了解 DhiWise 如何幫助你獲得可用于生産的前端應用程式，以及頁面導航和 API 內建等功能。
在此之前，我們先簡單介紹一下 Figma 和 React。
Figma
Figma 是一個流行的基于 Web 的矢量圖形編輯器和原型設計&UI設計工具。它支援 macOS 和 Windows 桌面應用程式，也可以線上進行編輯。
它允許移動使用者使用 Figma 鏡像應用程式實時檢視 Figma 原型——适用于 Android 和 iOS。此外，它還使設計人員和開發人員能夠為 Web 和移動應用程式建立 UI 和線框圖。
React.js
React 是一個免費的開源前端 JavaScript 庫，用于建構基于 UI 元件的使用者界面。它由 Meta 和一個由個人開發人員&公司組成的社群維護。
React 用于建構單頁應用程式，它允許我們建立可重用的 UI 元件。
為了在你的代碼中獲得 80% 以上的設計準确度，請在設計 Figma 時遵循這些設計指南。
讓我們更深入地研究它。
第 1 步：登入 DhiWise
首先，需要使用你的 Google 或 GitHub 帳戶注冊/進入 DhiWise。
第 2 步：建立一個新應用程式
完成後，将被定向到儀表闆，可以在其中搜尋和檢視以前建立的應用程式。要開始建構新應用程式，隻需單擊建立應用程式，它将建立新應用程式頁面。
第 3 步：選擇 React 作為建立應用程式的技術
是的，就是這樣。就像選擇冰淇淋口味一樣簡單。
第 4 步：連接配接你的 Figma 帳戶并導入 Figma
接下來，将你的設計從 Figma、XD 或 Sketch 導入 DhiWise。如果你沒有任何現成的設計，DhiWise 提供現成的應用程式模闆和螢幕庫。
要導入應用程式設計，請選擇設計應用程式的平台。輸入應用程式名稱并選擇 Figma。要将 Figma 檔案導入 DhiWise，你需要将 Figma 帳戶與 DhiWise 內建。
你始終可以從其他提到的平台遷移設計，但為此，你可能需要提出請求并在 24-48 小時内讓 DhiWise 為你處理相同的問題。
第 5 步：選擇頁面
接下來，你可以從 Figma 檔案中選擇多個頁面并在應用程式中使用它們，如圖所示。請記住，如果你已經為你的頁面設定了原型，那麼，你的工作就差不多完成了一半。
原因：DhiWise 自動擷取頁面資源，包括導航。而且你無需再次處理單獨的導航和其他配置。
第 6 步：定制
頁面導入後，你可以直接從此處更改視圖。如果有任何錯誤識别的 Figma 元素，此功能将覆寫（這種情況的可能性很小）。
此外，還可以将來自 REST API 的實時資料綁定到你的頁面。
第 7 步：生成源代碼
自定義完成後，單擊“建構”以在幾分鐘内擷取包含所有自定義的結構化源代碼。
第 8 步：下載下傳/同步您的代碼到 GitHub/GitLab
建構應用程式後，可以從 DhiWise 下載下傳整個源代碼和/或将其與你的 GitHub 或 GitLab 存儲庫同步。
如果你在 DhiWise 應用程式中進行了更多更改并且希望在應用程式中更新代碼，你可以使用 VSCode Extension 将最新代碼直接擷取到你的 Vscode 中。
其他補充内容
DhiWise 有兩個很棒的功能可以讓開發生活更加精彩——同時使用 DhiWise。
第一，可以通過單擊将應用程式部署到 Vercel 來檢視應用程式的原型！
其次，可以使用 Figma 中的 Figma to Code 插件在幾分鐘内獲得代碼。
簡而言之…
這些隻是将 Figma 設計轉換為 React 代碼的幾個簡單步驟，以及上面提到的其他功能。
最後，希望這篇文章對你有幫助，如果你覺得有用的話，請記得點贊我，關注我，并将它分享給你的朋友，也許能夠幫助到他。感謝你的閱讀，祝程式設計愉快！