Adobe XD组件功能常见交互用例！——都是知识点！

平时，你是怎么使用Adobe XD的组件功能呢？

将内容制作为组件重复利用么？其实这只是组件功能的一部分，利用XD的组件多态功能，我们可以在按钮，输入字段，卡片等上创建多状态效果，从而制作出模拟真实的交互模型。

使用组件状态创建悬停效果

下图向我们展示10多种使用组件创建悬停状态的交互效果，这些平时在真实场景中出现的交互用例，只需要用多态组件就可以制作。

创建一个组件

我们以悬停状态为例，示范在按钮或其他元素上创建悬停状态。

创建组件非常简单，只需右键单击该元素，然后选择“制作组件”或单击组件面板上的“+”号。

建立状态

创建组件后，单击“默认状态”旁边右上角的+将允许添加新状态。有两种选择，即New State和Hover State。

如果选择悬停状态可以看到旁边有一个闪电，说明软件默认已经给这个状态添加了交互效果了，如果不是创建悬停状态，可以创建New State。

编辑状态属性

选择新状态后，可以将按钮或元素的属性修改为所需的悬停效果。这里我们以加深按钮背景为示范。

预览悬停状态

将状态切换回默认状态并单击预览按钮将在新窗口中显示设计。

将鼠标移到组件上方将显示新创建的悬停状态，以及默认和悬停之间的平滑动画。 

除此之外，我们还可以利用组件的悬停状态来制作其他效果如：

创建一个复选框组件

使用组件状态构建可重用的下拉菜单

浮动动作按钮和d出菜单

图像轮播和滑块

这些都只是展示了部分多态组件的用例场景，如果你感兴趣，可以继续使用Adobe XD尝试更多的可能性！

打开 Finder，选择菜单 「前往」>「前往文件夹」；

输入 「~/Library/Application Support/Adobe/Adobe XD CC」；

如果该文件夹中没有 「plugins」文件夹，创建该文件夹；

然后运行下载的插件安装文件（.xdx 文件）。

Windows 10解决办法：

从左侧菜单 – 插件 – 开发 – 显示开发文件夹；

修改当前路径至上一层，即LocalState 目录

查看当前路径下是否存在 plugins 文件夹，若无则手动创建 plugins 文件夹

创建好 plugins 文件夹后便可成功安装摹客 XD 插件啦。

XD 插件安装后闪退的解决办法

如果你的XD插件遇到安装后闪退的情况，请尝试以下步骤：

1. 将下载下来的安装文件的后缀.xdx改为.zip。

插件下载地址：https://www.mockplus.cn/download/idoc-xd

2. 解压zip文件。

3. 在XD菜单中找到“插件”->“开发”->“显示开发文件夹”，将解压的文件夹放入开发文件夹中。

4. 在XD菜单中找到“插件”->“开发”->“重新加载插件”后，你的XD插件就可以正常使用啦！

使用摹客插件上传设计稿时，选择 iOS @2× 为什么比选择 iOS @1× 的标注数值更小？

摹客插件中的倍率选择指的是设计稿是以几倍图设计的，并不是选择要导出几倍图。在上传到摹客时，只需要选择对应的倍率，就能获取到正确的标注和切图。

例如：设计时，画板大小为 357*667，上传时选择 iOS @1× 上传即可。

倍率选择对应表：

更新Creative Cloud之后，国内版的Adobe账号登录，XD的插件无法安装

解决办法：

1. 在官网下载XD插件：https://www.mockplus.cn/download/idoc-xd，将下载的.xdx文件后缀修改为.zip格式，使用解压工具将文件解压到新建的文件夹中，新建的文件夹命名为“Mockplus for xd”。

2. 在XD顶部菜单栏中找到“插件->开发->显示开发文件夹”。

【Mac版界面】

【Windows界面】

3. 显示开发文件夹后，会自动打开一个名为“develop”的文件夹，将第1步中的“Mockplus for xd”文件夹剪切并粘贴到“develop”文件夹中，最后重启XD即可。

插件唤醒了浏览器，登录之后返回插件，显示未登陆怎么办？

请检查 Creative Cloud 中是否正常登录了Adobe账号。注：国际版账号（谷歌邮箱等）需要开梯子，国内账号（qq邮箱等）需要关闭梯子。

另外一种情况为 Creative Cloud账号的登录超时了， 请退出账号后重新登录再试。

使用XD插件上传摹客后，画板内容显示不全怎么办？

如果你在使用XD插件上传设计稿到摹客后，发现画板内容显示不全，请在插件设置中，取消“上传高清设计稿”的选项后，再次上传设计稿。

Windows系统使用XD插件登录时，没有打开浏览器怎么办？

这可能由于你的系统默认浏览器是IE。请点开桌面左下角菜单栏 - 控制面板 - 设置 - 应用 - 修改默认应用，将默认浏览器修改为Chrome，如果依然无法打开，请检查“按文件类型制定默认应用”和“按协议指定默认应用”中是否依然有IE浏览器的设置。

---