如何在adobe xd中使用ui工具包

对于那些对网页设计感兴趣的人来说，Adobe XD中的UI工具包是快速启动新设计项目的好方法。 使用这些工具包，您可以访问一些可以修改和用于您的网站或应用程序设计的便捷资源。

如果您是该软件的新手，并且不确定如何在Adobe XD中使用UI工具包，那么您来对地方了。 ，我将向您展示如何在软件中安装UI工具包，然后使用包含的项目资源。

同样是关于指导技术

如何使用Adobe Bridge批量转换照片

如何在Adobe XD中下载UI工具包

首先，让我们来看看如何在软件中直接下载Adobe XD中的UI工具包。 只需按照以下步骤开始：

第1步：单击软件左上角的汉堡菜单按钮。

步骤2：在菜单中，向下滚动到“获取UI套件”选项，然后单击三个可用选项。

对于本文，我将选择Google Material UI工具包。 但是，根据您的项目，您可以选择Apple iOS或Microsoft Windows套件。 这将打开一个官方网页，您可以从中免费下载UI工具包。

步骤3：在以下网页中找到Adobe XD UI工具包，并将其下载到您的系统上。

第4步：现在在Adobe XD中打开下载的文件，您将看到一堆包含各自平台的UI资源的画板。

您可以按住Ctrl键并移动滚轮进行放大/缩小以查看所有单独的画板。

如果您希望下载Wireframes，可以单击Get UI Kits菜单中的Wireframes选项。

您还可以通过单击Get UI Kits菜单中的More UI Kits选项在Adobe网站上查找其他UI工具包。

该网站有一些很好的选择，包括这个非常酷的Movie Magic UI套件，看起来像一个单挑显示器。

既然您知道如何下载UI工具包，那么让我们来看看如何在项目中使用它们。

如何在Adobe XD中使用UI工具包

要在项目中使用UI工具包，只需按照以下简单步骤操作：

第1步：放大要在项目中使用的UI元素，然后单击其标题以选择它。

第2步：现在使用Ctrl + C快捷方式复制元素。

第3步：然后从菜单中打开一个新的Adobe XD项目。

第4步：在此处，使用Ctrl + V快捷键粘贴UI元素。

对于本文，我将使用Google Material UI工具包中的Mobile Dark元素。 该元素包含帮助您放置更多图层的指南，但如果您不想使用它们，可以按照下一步轻松删除它们。

步骤5：要删除指南，请单击左上角的锁定图标，然后单击“删除”。 如果您希望使用向导准确地将更多对象放入元素，则可以跳过此步骤。

第6步：现在返回UI工具包，选择要添加到此页面的另一个元素。 再次单击元素的标题，然后使用Ctrl + C快捷键复制它。

我将为本文创建一个基本的吐司，我将使用其中一个对话框。

步骤7：将新元素粘贴到前一个元素上，然后根据指南对齐它。

步骤8：现在编辑toast中的每个元素，双击文本框，然后输入要使用的文本。 首先，让我们改变吐司的标题。

接下来，通过双击文本框并键入要添加的内容来更改正文的内容。

您也可以以相同的方式更改按钮的文本。 编辑完文本后，可以更改文本的颜色和不透明度。 要更改不透明度，只需将工具栏中“不透明度”选项下的滑块向右移动即可。

要更改文本的颜色，请单击“填充”选项旁边的矩形，然后从颜色选择器中选择一种新颜色。

并且不仅仅是您可以以这种方式编辑的文本。 您还可以更改对话框中几乎所有项目的颜色和不透明度，如果您要使用独特的颜色方案，这非常有用。

对结果感到满意后，只需单击菜单中的“另存为”选项或使用Shift + Ctrl + S快捷键保存文件即可。

同样是关于指导技术

#平面设计

点击此处查看我们的平面设计文章页面

使用UI工具包完善您的设计

既然您已经知道如何在Adobe XD中下载和使用UI工具包，我相信您很快就会开始制作出令人惊叹的设计。 这些UI工具包非常方便，可帮助您直接进入项目，而无需担心设计每个UI元素。

接下来：完成Adobe XD上的项目，不知道如何将其导出为HTML？ 查看下一篇文章，了解简单的分步教程。