最近都在研究AdobeXD的用法，分享给大家一些经验
今天我们来用AdobeXD做一个动态的Button
同样的第一步，建立新画板，大小随意，随你喜欢
第二步，画一个加入购物袋的Button，选择所有图层，ctrl+g建立编组
第三步，画一个圆形，直径大概是从icon中间到入字的长度，再用钢笔工具画一个水滴形状，也可以直接从图标库复制svg图形
第四步，调整水滴形状和位置，复制一层圆形，调整图层顺序与水滴做一次布尔运算
然后把圆形和水滴不透明度都调整为0，编组备用，再选择所有图层建立组件
第五步，选择组件，添加悬停状态，然后调整icon形态
然后切换钢笔工具，沿着购物袋轮廓画一个形状，再在该形状上面画一个圆形，取消描边，调整图层顺序，建立剪切蒙版，把剪切蒙版与icon放到同一组。最后输入数字1，调整好位置后把颜色改为背景颜色
第六步，选择悬停状态，新建点击状态，切换到原型，设置交互动作
第七步，选择点击状态，调整图层状态
最后我们来看看效果
Powered by Froala Editor
声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)