編輯評分: 用戶評分:[總計:0 平均:0] @media(min-width: 500px) { } @media(min-width: 800px) { }
Noya 是一款免費的 UI 原型製作工具，帶有類似 Notion 的編輯器和 Figma 導出功能。此工具只是您的另一個 UI 原型設計工具，但它的工作方式不同。它速度更快，並且為您提供了一種全新的不同方式來設計網頁或其他 UI。它允許您使用拖放來繪製 UI 塊，然後實時生成最終佈局。它具有類似於斜線命令的概念，您可以使用它在設計中插入各種塊。
您可以使用它在幾秒鐘內構建您的設計。對於圖像和表格等佔位符，它可以自動為您生成可編輯的虛擬數據。您可以只專注於設計，設計完成後，您可以將其導出為 PNG、PDF 和 Figma 文件。它也支持在 React 中導出，但我認為這不包括在免費計劃中。
Noya 的免費計劃允許您創建網站、登陸頁面或 Web 應用程序的任何設計原型。但是你只限於 200 個塊。這對設計小型企業網站很有幫助。編輯器不會限制您擁有固定大小的塊。您可以像調整圖像大小一樣使用鼠標調整塊的大小和形狀。
🎉🚀 介紹 Noya (YC W23) 🚀🎉
Noya 是一種生成設計的線框圖工具＆ 代碼。試試看:https://t.co/Cxrcs1bWkb
Noya 讓您可以在低保真線框圖，同時仍可生成高保真設計和 React 原型以與您的團隊共享。 pic.twitter.com/WV3bcXkLLt
— Devin Abbott (@dvnabbott) 2023 年 2 月 9 日
免費 UI 原型製作工具使用 Notion 之類的 Editor、Figma Export: Noya
在 Noya 主網站 上，您只需需要創建一個免費帳戶才能開始使用它。所以，這樣做，然後您將登陸主儀表板。從這裡，您可以創建您的第一個項目，然後開始設計。
在編輯器中，您首先要設置的是項目名稱，然後是尺寸.此外，您選擇了一個設計系統，但目前僅支持 Charka UI。
現在，真正的樂趣可以開始了。在視口中，您只需開始繪製塊。單擊“+”圖標，然後拖動繪製一個塊。根據繪製塊的尺寸，它會嘗試自動猜測你想要什麼。如果你繪製一個窄矩形，那麼它會自動猜測它是標題中的導航欄。
同樣，你可以在你的設計中添加其他塊，例如圖像和英雄部分。
塊支持斜杠命令，還有一個菜單可以更改塊類型。您只需鍵入斜杠 (/)，然後查看選項。或者您也可以使用每個塊右下角的下拉菜單設置類型。
設計完成後，您可以看到設計的實時預覽。只需單擊打開實時預覽即可將在新選項卡的網頁上呈現您的設計。
以同樣的方式，您可以不斷添加塊，它會不斷為您生成設計及其預覽。完成後，您可以簡單地導出您的設計。單擊“導出”選項，然後您將看到它為您提供的各種選項。
通過這種方式，您可以使用這個簡單的新 UI 原型製作工具，它配備了新工具並遵循不同的設計 UI 的工作流程。它提供的 AI 內容生成也值得稱讚，您可以在此處複製您的項目。
結束語:
如果您從事 UI 和 UX 設計，那麼我就是相信您會喜歡這個工具，因為它的簡單性和強大的功能。這個工具最好的部分是手繪圖。您可以按照自己的方式設計和塑造構建塊。此外，Figma 和 React 導出也非常有用，因為現在可以在其中創建現代設計。
