如何將 Adobe XD 設計導出為 HTML

Adobe XD 是一款出色的設計工具，可讓您輕鬆創建偉大的網站設計沒有任何先前的 Web 開發經驗。您只能從以下位置導入設計的 PSD 文件 Photoshop中並創建一個引人注目的網站。

這些設計在幫助開發人員了解您希望他們的網站外觀如何並使他們的開發過程變得更容易方面大有幫助。但是，您可以從程序中導出設計的方法數量有限。

您可以選擇將它們保存為 XD 文件並希望開發人員已經在他們的系統上安裝了該軟件，或者將每個畫板導出為單獨的 PNG 文件，這可能有點不方便使用。

幸運的是，有一個方便的第三方插件允許您將畫板導出為 HTML 文件，這就是我將在本文中討論的內容。但在我們開始之前，你需要知道一些事情。

使用插件將 ADOBE XD 文件導出為 HTML

現在我們已經擺脫了這種方式，只需按照這些簡單的步驟下載所需的插件，然後導出 Adobe 文件 XD 到 HTML：

相片1： 單擊程序左上角的漢堡菜單按鈕。

相片2： 一直向下滾動並點擊附加組件選項。這將在主菜單右側打開一個新的插件面板。

相片3： 從插件面板中選擇發現插件選項。

相片4： 在下一頁上，搜索 HTML，然後單擊 Web 導出插件旁邊的安裝按鈕。

安裝所需的插件後，打開要導出為 HTML 的項目，然後繼續執行後續步驟。在本文中，我將使用我在網上找到的免費 Adobe XD 畫板。

相片5： 通過單擊選擇要導出的畫板。

相片6： 現在單擊菜單按鈕，轉到插件面板，然後從新的 Web 導出插件設置中選擇導出畫板選項。

在同一窗口中，您還可以選擇導出多個畫板或您編輯的最後一個畫板。

相片7： 在“導出畫板”彈出菜單中，添加文件名，然後通過單擊“導出文件夾”選項旁邊的小文件夾圖標來選擇要保存文件的文件夾。

相片8： 現在，如果您想向源文件添加外部腳本、樣式表或替代字體，您可以在同一個窗口中添加它們。

相片9： 然後，您可以通過在大小選項旁邊的空白處輸入值來選擇輸出 HTML 文件的尺寸。

相片10： 為確保項目正確縮放，您還可以通過選中每個選項旁邊的框從同一窗口中選擇多個縮放設置。

相片11： 此外，您可以通過選中選項旁邊的框來選擇任何其他設置，例如鍵盤導航、自動刷新等。

相片12： 完成所有設置後，只需單擊藍色的“導出”按鈕即可完成。畫板將在您之前指定的目標文件夾中顯示為 HTML 文件。

如果您還想與開發人員共享此信息，您還可以從同一窗口復制 CSS 和畫板標記。

再次注意，導出的 HTML 絕不可用於開發功能齊全的網站。到目前為止，您無法將 Adobe XD 項目直接發佈到網絡上，而且根據 Adobe 論壇中的許多討論，短期內不會有。

Adobe XD 只是一個原型製作工具，可讓您在沒有代碼的情況下創建初始設計。完成設計後，您可以使用 Dreamweaver 之類的平台將您的設計轉變為網站。但為此，您需要有一些以前的 Web 開發經驗，否則您需要聘請某人。

既然您知道如何將 Adobe XD 文件導出為 HTML，我相信您將能夠輕鬆地與開發人員或客戶共享您的畫板。而且您不必擔心任何兼容性問題。立即安裝插件並開始導出您的畫板容易地.