xd怎么导入组件库和插件

xd怎么导入组件库和插件,第1张

使用XD可以通过多种方式导入组件库和插件:

1. 点击“资产”,然后点击“组件”图标找到“导入组件”,从本地或云端导入组件库;

2. 点击“文件”,然后点击“插件”图标找到“导入插件”,从Adobe Creative Cloud库中选择你需要的插件并进行安装。

1、在画面上画一个框或者圆形三角形等。

2、然后从外面拖图片进XD里,选中图形框。

3、选中图形框的同时 按住Ctrl+Shirt+}](这是置顶)按Ctrl+}]或{[ 可以讲图形上移一层或下移一层 。

4、把照片放在图形框的上面一层,按住Shirt 选中图形框和照片 再按 Ctrl+Shirt+M就能嵌入照片到图形框里,鼠标双击照片就可以拖拽照片的位置和变换大小,也可以改变框的大小。

5、先在想保留的元素部分画上框框。

6、按住Shirt鼠标左键选中其中一组白框和元素 按住Ctrl+Shirt+M,依次 *** 作其他的元素,就能得到最终的效果。

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

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

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

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

创建一个组件

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

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

建立状态

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

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

编辑状态属性

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

预览悬停状态

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

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

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

创建一个复选框组件

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

浮动动作按钮和d出菜单

图像轮播和滑块

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11724319.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存