adobe xd使用的几点记录

记录一下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尺寸出现问题(阴影占位、无法处理)