记录一下xd使用,还不熟悉,偶尔画一画东西,防止忘记
1. 新建画板
快捷键:A,即切换到画板模式,鼠标点击文档空白处即可新建画板,
右侧面板是画板各移动端型号和不同分辨率参考模板
2. 缩放画板
- 按住Alt键,滚动鼠标可缩放
- ctrl键,结合+/-可进行画板缩放
3. 图标使用
图标库建议使用iconfont,图标导出为svg/AI,直接拖入画板,即可使用
4. 图层选中
- 鼠标点选-直接选中对应图层
- ctrl+鼠标点选-可选中编组中压在底层的图层
5. 组件移动
- 鼠标拖动
- 上/下/左/右键,每次移动1px
- shift键+上/下/左/右键,每次移动10px
6. 布尔运算
对两个以上的矢量图层进行布尔运算:添加、减去、交叉、排除重叠
7. 矢量编辑
对矢量图层,双击可切换为编辑模式,即可进行编辑,可拖动更改大小(按住Alt键拖动,可固定中心点编辑)
8. 背景模糊
一般用于毛玻璃效果,即高斯模糊(前面文章提到过实现方法)
9. 文字样式
字间距、行高、段落间距
10. 重复网格
定义好图层或组件后,可使用重复网格进行列表操作,方便之处如下:
拉框直接列表循环,可统一更改间距
所有样式更改跟随列表第一项
图片可批量添加(不重复)
文本可批量更换(文本编辑器中,换行编辑好,直接拖入文本文件)
11. 蒙版组件
一般用于,图片和矢量图形的叠加:选中图片和矢量图形,快捷键ctrl+shift+M(或右键选择带形状的蒙版组),
形成蒙版组后,可双击组图层,进入编辑模式,可编辑上下层(图片/矢量图形)进行效果和样式调整。溢出隐藏。
crtl+shift+G:取消蒙版组
12. 资源符号
- 颜色:自定义颜色标签库
- 字符样式:字体样式标签库
- 组件:自定义组件库,方便复用
13. 响应式布局
选中图层、组件或画布,设置响应式调整大小,分自动和手动:
自动:不同分辨率下,自动调整大小约束
手动:增加固定宽度/高度选项(可多选固定上/下/左/右位置)
14. 交互动画
切换至原型模块,选中某一画布,会出现交互箭头,右侧面板可设置交互样式和过渡动画,
头部有播放按钮,可进行交互预览
15. 切图导出
导出画板:点击画板左上角画板名,即选中当前画板,按住shift键可多选,导出-所有画板
导出选中内容:选中图层(shift键多选),ctrl+E(导出-所选内容)
导出-批处理:选中图层、组件画画板,在其对应图层信息上添加导出标记,然后ctrl+shift+E(导出标记内容)
16.字体图标
如何把xd内相应图层导出为字体图标,并应用到前端页面上呢?
1)选中对应图层,ctrl+8转为路径
2)ctrl+E导出为svg
3)iconfont上新建项目,并上传图标至项目,保存即可(有需要再进行尺寸和样式微调)
注意:如果图层有阴影设置,务必去掉后再导出,不然会出现导出svg尺寸出现问题(阴影占位、无法处理)