如何使用 Dualite 建立登陸頁面

我花了幾個小時創建登陸頁面的Figma設計。每種顏色都恰到好處，每個像素都就位，並且具有無縫的用戶流程，但現在是實際編碼此登陸頁面的令人畏懼的部分。

建造 Figma 設計是一項艱鉅的任務。這就是我了解 Dualite 的地方，它使用 AI 將 Figma 設計轉化為實際程式碼，幫助像我這樣的開發人員最大限度地減少實際編碼的工作量。讓我們看看我如何使用 Dualite 將我的登陸頁面轉換為實際程式碼
 

什麼是雙石？

Dualite 是一款創新的人工智慧 Figma 插件，旨在彌合設計和開發之間的差距。它專注於將 Figma 設計轉換為高品質、可重複使用的程式碼，並支援 Reactjs、TailwindCSS 等流行技術。

Dualite 讓您只需單擊即可將任何Figma 設計或動畫轉換為高效的程式碼，您可以根據您的專案進行自訂，它具有令人興奮的功能，讓我對它們進行總結：

• 模式：Dualite 提供兩種模式，元件模式和頁面模式，非常適合開發人員和設計人員將其設計轉換為產生的程式碼。這些模式可確保佈局、互動性、動畫等從設計準確地轉換為程式碼。
  • 元件模式：專注於單獨的設計元素，允許建立可重複使用的元件。
  • 頁面模式：轉換整個頁面，保持整體佈局和結構。
  • 在此部落格上了解有關模式的更多信息
• 進階功能：
  • Dualite 提供高級設置，用戶可以在其中提供有關其設計的更多技術資訊。這可確保產生的程式碼響應靈敏且準確。
  • 這些進階設定為設計人員和開發人員提供了更多功能，使他們能夠自訂輸出以滿足特定的專案要求。此功能對於需要精確控制最終程式碼的複雜設計特別有用，例如響應式佈局或複雜的動畫。 要快速開始使用 Dualite，您可以關注他們的文件

Figma設計

讓我們開始登陸頁面的Figma設計，如下：

所以，Dualite 有一個模式功能，您可以在頁面模式和元件模式之間切換

基本上，頁面模式用於一次性轉換完整的設計，組件模式用於創建單獨的組件，我們可以將其集成到我們的項目中，在文檔中了解有關組件的更多信息

我們將使用元件模式為設計中存在的所有元件產生程式碼，然後將它們整合到一個專案中

讓我們從將登陸頁面分割為元件開始，如下所示：

初始項目設定

我將在 Dualite 中使用 Reactjs 和 Tailwind 來產生程式碼，所以讓我們先設定專案：

• Reactjs App：使用 Vite 或任何其他工具建立 React 應用程式。 Vite 是創建 Javascript 應用程式的熱門選擇
• 設定 Tailwind：依照 Tailwind 文件在 Reactjs 應用程式中設定 tailwind，不會出現任何不必要的錯誤。確保新增依賴項，例如 PostCSS 和 autoprefixer，以實現順利的 Tailwind 設定。
• 設定檔：在專案根目錄下建立tailwind.config.js和postcss.config.css。如果您按照 Tailwind 文件中的所有步驟進行操作，則可能會出現 tailwind.config.js。如果已經存在，則相應更新
• 使用 Javascript：到目前為止，Dualite 不支援 Typescript，因此，請確保僅使用 Javascript 建立 Reactjs 應用程式

開始在 Dualite 中轉換元件

初始設定：

• 模式：我們將使用組件模式。使用右上角的切換按鈕在頁面模式和元件模式之間切換
• 框架：當您選擇要轉換為程式碼的設計時，您將看到多種語言和框架選項。我將使用 Reactjs 和 Tailwind 來產生程式碼。
• 要快速開始使用 Dualite，請閱讀此內容

現在，讓我們開始將設計轉換為元件：

1. 公告欄元件：在此檢查產生的程式碼
    

2. 導覽列組件：在此處檢查產生的程式碼
    

3. 類別過濾元件：在此檢查產生的程式碼
    

4. Card Component 元件：在此檢查產生的程式碼
    

5. 分頁元件：在此檢查產生的程式碼
    

6. 頁腳組件：在此處檢查產生的程式碼
    

客製化

1. 複製組件：
   • 現在，從上面生成的所有程式碼複製 Components 資料夾並將其貼上到專案的元件資料夾中
   • 您可能已經注意到，所有元件的名稱都只是“Component”，所以讓我們相應地命名所有元件。範例：公告欄元件將命名為「AnnouncementBar」。在這裡檢查我是如何做到的
2. 渲染所有元件：
   • 現在，根據App.jsx檔案中的設計導入所有元件
   • 運行項目，你將看到輸出，檢查這裡的App.jsx文件
   • 您可能已經注意到，有些元件需要修復。讓我們從客製化開始
3. 修復組件樣式：
   • 字體：
     • 正如您在設計中看到的，我們有自己的字體。將它們新增至資產資料夾中，以便我可以在專案中的任何位置使用該字體。
     • 還需要為我們在存在 Tailwind 指令的 index.css 檔案中使用的所有字體建立 @font-face
   • 導覽列組件：
     • 版面不準確，樣式需要修復
   • 卡片組件：
     • 星形圖示：在圖形資料夾內新增星形圖示
     • Text.js：更新了 Text.js 檔案以修復元件的按鈕標籤和其他文字
     • 樣式：更新樣式以將字體粗細添加到特定文字元素和按鈕標籤
   • 卡片組件邏輯：
     • Card 元件僅渲染單一元件，因為它只是單一元件。
     • 要渲染多個卡片元件，我必須添加一些演示資料來映射它並渲染多個卡片

注意：所有變更和程式碼都可以在 CodeSandBox 上查看

輸出

一旦我在專案中進行了所有這些自訂和更改，我就可以看到更好的設計版本，請在此處檢查程式碼和輸出

Dualite 有幫助嗎？

讓我們正確理解一下，我們使用Dualite 生成的所有組件都可以使用了，是的，我們對程式碼進行了一些自定義，使其與設計看起來一樣接近，儘管如此，組件的所有樣式，都組件的層次結構以及單獨檔案中的資料由Dualite 產生。

我可以使用 Dualite 來建立 UI，而不是花太多時間。

與手動編碼相比，這需要足夠長的時間。所有組件的輸出都非常好，沒有什麼可以 100% 正確，每個程式碼都需要開發人員進行最後的修改，這就是我們在這裡所做的

是的，Dualite 在為我的元件產生程式碼方面非常有幫助且快速。

結論

現在你已經有了它，這是一種用很少的手動編碼產生 Figma 設計程式碼的有效方法。實際編碼設計的過程就像坐過山車一樣，如果您使用 Dualite 並根據您的需求和專案自訂程式碼，這可能會不那麼複雜。

以上是如何使用 Dualite 建立登陸頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！