Adobe XD 是 Adobe 推出的界面设计与原型工具。它的定位介于 Figma 与 Sketch 之间，最大的优势是原型交互上手极快：画完界面拖一根线就能演示跳转，组件状态切换用面板配置，无需写表达式。尧图团队在做需要快速演示交互的项目时常用 XD。这篇指南按真实工作流，讲清楚原型、交互、组件、响应式四块，最后给一套实战技巧。

一、原型：连线即跳转

XD 的原型模式（左上角 Prototype 切换）把设计稿变成可点击演示。点击元素，右侧出现一个蓝色连线小圆点，拖到目标画板（Artboard）就完成一次跳转设置。比 Figma 的连线更直观，因为 XD 用画板作为页面单位，每个画板就是一个独立页面。

原型连线三种类型

• Transition：跳转到目标画板，目标画板替换当前画板。最常用的跳转方式。
• Overlay：在当前画板上叠加弹出层，类似 CSS 的 fixed 定位。适合模态框、提示气泡、下拉菜单。
• Previous Screen：返回上一个画板，类似浏览器的后退按钮。适合返回操作。

连线时可以设置触发方式（Tap 点击、Drag 拖动、Hover 悬停、Time 自动）、动效类型（Dissolve 溶解、Slide 左右滑、Push 推入、Fade 淡入）、方向与缓动。尧图团队常用的组合：跳转用 Slide Left + Ease-Out 300ms，弹层用 Fade + Ease-In 200ms。

二、交互：自动动画 Auto-Animate

Auto-Animate（自动动画）是 XD 的杀手锏，对应 Figma 的 Smart Animate。原理相同：两个画板里有同名元素时，XD 会自动补间过渡。把元素在画板 A 放左上，画板 B 放右下，连线选 Auto-Animate，预览时元素会平滑滑过去。

Auto-Animate 三种用法

• 位置变化：移动元素位置，做抽屉滑出、卡片切换、轮播滚动。
• 尺寸变化：改变元素宽高，做展开折叠、放大查看。
• 属性变化：改变颜色、透明度、圆角，做按钮态切换、淡入淡出。

实战示例：做一个抽屉菜单。画板 A 抽屉在画板左侧外（位置 X=-300），画板 B 抽屉在画板内（位置 X=0），两个抽屉命名相同（比如 drawer）。连线 A 到 B 选 Auto-Animate，时长 300ms，Ease-Out。预览时点击触发按钮，抽屉会从左侧滑入。

触发与缓动

• 触发方式：Tap（点击）、Drag（拖动）、Hover（悬停）、Time（延时自动触发）、Voice（语音，演示用）。
• 缓动 Easing：Ease-In（开始慢）、Ease-Out（结束慢，最自然）、Ease-In-Out（两端慢）、Snap（弹性回弹，适合卡片）。
• 时长 Duration：网页动效 200-400ms 最舒服，超过 500ms 会觉得慢，低于 150ms 会觉得突兀。

三、组件状态：一个组件切换多种样式

XD 的组件（Component）支持状态（Component State）：一个主组件可以定义多个状态，实例在原型里通过交互切换状态。这对应 Figma 的 Variant，但 XD 的实现更接近「同一个元素的多种样子」。

组件状态的三种类型

• Default State：默认状态，组件的初始样式。
• Hover State：悬停状态，鼠标移上去的样式。配合 Hover 触发自动切换。
• Toggled State：切换状态，点击后切换并保持。适合开关、收藏按钮、Tab 选中态。

实战示例：做一个收藏按钮。主组件 Default State 是空心星标，Hover State 是实心星标浅色，Toggled State 是实心星标品牌色。原型里给按钮添加交互：Hover 切换到 Hover State，Tap 切换到 Toggled State。预览时鼠标悬停变实心浅色，点击变实心品牌色并保持。

组件状态的好处是把多个相关样式收进一个组件，原型演示时状态切换有连贯动效（如果配合 Auto-Animate），开发交接时一份组件说明所有状态。尧图团队的项目里，所有交互按钮、Tab、开关都做成带状态的组件，原型演示时真实感强。

四、响应式调整：用 Responsive Resize

XD 的响应式能力比 Figma 略弱，但够用。核心是 Responsive Resize（响应式调整）：选中一组元素，开启右侧属性面板的 Responsive Resize，调整外框尺寸时，内部元素会按比例缩放与重排。

响应式工作流

• 画板尺寸代表设备：XD 自带设备画板预设（iPhone、iPad、Desktop），新建画板时直接选设备。一个网页项目建议至少画三个尺寸：1920 桌面、768 平板、375 手机。
• Responsive Resize：选中卡片，开启 Responsive Resize，把卡片从桌面宽度拖到手机宽度，内部元素按比例缩小。适合简单卡片。
• 手动重排：复杂布局（导航、网格）不能靠 Resize 自动完成，需要在新尺寸画板里手动重排。建议复制桌面画板到手机画板，再调整。

XD 没有 Figma 的 Auto Layout 那么强的自动布局能力。响应式更多是「画三个尺寸的画板，分别调整」。尧图团队的做法：桌面画板画完整，复制到手机画板后，把多列改单列、隐藏次要内容、调整字号。虽然手动，但结果可控，不会出现 Auto Layout 嵌套混乱的问题。

五、实战技巧总结

1. 用 Voice Commands 做语音演示。XD 支持语音触发原型，给画板连线设 Trigger 为 Voice，输入命令词（如「打开菜单」）。演示时对着麦克风说命令，原型自动响应。给甲方演示时科技感十足。

2. 用 Plugins 加速。XD 的插件市场不如 Figma 丰富，但有几个必备：Overflow（用户流程图）、Trello（设计任务同步）、Animator（动效导出 GIF）。尧图团队用 Overflow 把所有画板连成用户流程图，给甲方看整体逻辑。

3. 用 Share 分享评审。XD 的 Share 链接可以让评审者在原型上直接留评论，评论落在交互元素上。比截图发微信清晰得多。配合 Adobe Creative Cloud，链接可设密码与有效期，适合外部甲方评审。

4. 用 Repeat Grid 快速生成列表。XD 独有的 Repeat Grid 功能：选中一个卡片，按 Cmd + R 拖动右侧手柄，卡片会自动复制成网格，内容自动递增。改一个卡片的样式，所有副本同步。做列表设计时极快。

六、XD 在网页设计流程里的定位

需要说清楚 XD 现在在网页设计流程里的定位：它是 Adobe 生态里负责原型交互的工具，适合已经用 Photoshop / Illustrator 做素材、需要快速演示交互的团队。如果你的团队主力是 Figma，XD 的价值就不大，因为 Figma 已经覆盖了 XD 的大部分能力。但如果你重度使用 Adobe 全家桶，XD 与 PS、AI 的素材互通是无缝的，这是它的独占优势。