如何在 Adob​​e XD 中使用 UI 工具包

對於那些對網頁設計感興趣的人，Adobe XD 中的 UI 工具包是快速啟動新設計項目的好方法。使用這些工具包，您可以訪問一些方便的資源，您可以修改這些資源並將其用於您的網站或應用程序設計。

如果您是該軟件的新手並且不確定如何在Adob ​​e XD 中使用 UI 工具包，那麼您來對地方了。在本文中，我將向您展示如何在軟件中安裝 UI 工具包，然後將包含的資源用於您的項目。

如何在 Adob​​e XD 中下載 UI 工具包

首先，讓我們看看如何直接從軟件中下載 Adob​​e XD 中的 UI 工具包。只需按照以下步驟開始：

第一步：點擊軟件左上角的漢堡菜單按鈕。

第 2 步：在菜單中，向下滾動到 Get UI Kits 選項，然後單擊其中三個可用選項。

在本文中，我將選擇 Google Material UI 套件。但是，根據您的項目，您可以選擇 Apple iOS 或 Microsoft Windows 套件。這將打開一個官方網頁，您可以從中免費下載 UI 工具包。

第 3 步：在以下網頁中找到 Adob​​e XD UI 工具包，並將其下載到您的系統上。

第 4 步：現在在 Adob​​e XD 中打開下載的文件，您會看到一堆包含相應平台的 UI 資源的畫板。

您可以按住 Ctrl 按鈕並移動滾輪以放大/縮小以查看所有單獨的畫板。

如果您希望下載 Wireframes，可以單擊 Get UI Kits 菜單中的 Wireframes 選項。

您還可以通過單擊“獲取 UI 工具包”菜單中的“更多 UI 工具包”選項在 Adob​​e 網站上查找其他 UI 工具包。

該網站有一些很棒的選項可供選擇，包括這個看起來像平視顯示器的非常酷的 Movie Magic UI 套件。

現在您已經知道如何下載 UI 工具包，讓我們來看看如何在您的項目中使用它們。

如何在 Adob​​e XD 中使用 UI 工具包

要在您的項目中使用 UI 工具包，只需按照以下簡單步驟操作：

第 1 步：放大要在項目中使用的 UI 元素，然後單擊其標題以選擇它。

第 2 步：現在使用 Ctrl+C 快捷鍵複製元素。

第 3 步：然後從菜單中打開一個新的 Adob​​e XD 項目。

第 4 步：在這裡，使用 Ctrl+V 快捷鍵粘貼 UI 元素。

在本文中，我將使用 Google Material UI 工具包中的 Mobile Dark 元素。該元素包括幫助您放置更多圖層的指南，但如果您不想使用它們，您可以按照下一步輕鬆刪除它們。

第 5 步：要刪除指南，請單擊左上角的鎖定圖標，然後點擊刪除。如果您希望使用指南將更多對象準確地放入元素中，則可以跳過此步驟。

第 6 步：現在返回 UI 工具包，選擇要添加到此頁面的另一個元素。再次單擊元素的標題並使用 Ctrl+C 快捷鍵複製它。

我將為本文創建一個基本的 toast，為此我將使用其中一個對話框。

第 7 步：將新元素粘貼到前一個元素上，然後按照指南對齊。

第 8 步：現在要編輯 toast 中的每個元素，雙擊文本框，然後輸入要使用的文本。首先，讓我們更改 toast 的標題。

接下來，通過雙擊文本框並輸入您要添加的任何內容來更改正文的內容。

您也可以以相同的方式更改按鈕的文本。完成文本編輯後，您可以更改文本的顏色和不透明度。要更改不透明度，只需將工具欄中“不透明度”選項下的滑塊向右移動即可。

要更改文本的顏色，請單擊“填充”選項旁邊的矩形，然後從顏色選擇器中選擇一種新顏色。

您可以以這種方式編輯的不僅僅是文本。您還可以更改對話框中幾乎所有項目的顏色和不透明度，如果您要使用獨特的配色方案，這非常棒。

一旦您對結果感到滿意，只需單擊菜單中的“另存為”選項或使用 Shift+Ctrl+S 快捷鍵來保存文件。

使用 UI 工具包完善您的設計

既然您知道如何在 Adob​​e XD 中下載和使用 UI 工具包，我相信您很快就會開始製作出令人驚嘆的設計。這些 UI 工具包絕對非常方便，可以幫助您直接進入您的項目，而無需擔心設計每個 UI 元素。

下一步：在 Adob​​e XD 上完成了一個項目，但不知道如何將其導出為 HTML？查看下一篇文章，了解簡單的分步教程。