2. 标注工具选择：主流工具对比与我的避坑建议
工具选对了，标注工作就轻松了一半。选错了？嗯，后面有的是坑等着你填。
我见过太多团队，一开始随便挑个工具就开始干，结果做到一半发现导出格式不对、协作卡顿、版本乱成一锅粥。最后不得不返工重标，那叫一个痛苦。
今天我就把市面上主流的几款标注工具——Figma、Sketch、Adobe XD 和 手动代码——挨个拆开揉碎了讲。哪些地方容易踩坑，我个人的使用习惯是什么，都会说清楚。
核心观点先放这：没有完美的工具，只有最适合你当前项目场景的工具。选工具之前，先想清楚你的团队规模、协作方式、交付对象是谁。
2.1 四大主流工具速览
先看一张对比表，心里有个底。
| 维度 | Figma | Sketch | Adobe XD | 手动代码 |
|---|---|---|---|---|
| 平台 | Web + 桌面（跨平台） | 仅 macOS | Windows + macOS | 任何文本编辑器 |
| 协作方式 | 实时多人协作 | 需插件或第三方 | 基础协作（较晚才支持） | Git 版本管理 |
| 标注导出 | 内置 + 社区插件 | 依赖插件（如 Zeplin） | 内置标注模式 | 手动写注释 |
| 学习成本 | 中等 | 低（mac 用户友好） | 低 | 高（需懂代码） |
| 条纹与气泡标注 | 支持良好，有专用插件 | 需额外配置 | 基础支持 | 完全自定义 |
| 价格 | 免费版够用，团队版收费 | 付费买断 + 年度订阅 | 免费版功能受限 | 免费 |
2.2 逐个工具深度分析
Figma：我目前的主力工具
说实话，我现在大部分项目都用 Figma。为什么？因为它解决了团队协作最大的痛点——版本混乱。
你想想看，以前用 Sketch 的时候，设计师改一版设计，就得重新导出一次标注文件，然后发到群里。开发拿到的是不是最新版？全靠猜。Figma 的实时协作让这个问题消失了。设计改了，标注自动更新，开发打开链接就是最新状态。
我的个人习惯：在 Figma 里做条纹与气泡标注时，我会用「Auto Layout」配合「Constraints」来定义气泡的伸缩规则。这样开发拿到标注后，能清楚看到气泡在不同文案长度下的表现，而不是只给一个固定尺寸。
但 Figma 也有坑。我遇到过一个问题：插件依赖。Figma 自带的标注功能其实比较基础，要做出专业的条纹与气泡标注，通常需要装社区插件。比如「Measure」或者「Annotate」。但插件版本更新频繁，有时候项目做到一半，插件突然不兼容了，标注全乱掉。
我曾经踩过的坑：有一次项目赶工期，我用了一个刚更新的 Figma 插件来做气泡标注。结果第二天插件作者改了 API，所有标注的连线位置都偏移了。从那以后，我养成了一个习惯——关键标注截图备份。插件可以依赖，但不能完全信任。
Sketch：老牌工具，但生态在萎缩
Sketch 曾经是 UI 设计界的王者。我早期做标注的时候，用的就是 Sketch + Zeplin 的组合。说实话，那个组合在当时确实能打。
但现在呢？Sketch 只支持 macOS，团队里只要有一个人用 Windows，协作就断了。而且它的标注能力完全依赖第三方插件，比如 Zeplin 或者 Avocode。这就意味着，你每多一个协作环节，就多一个出问题的可能。
如果你团队全是 Mac 用户，且项目不需要频繁跨平台协作，Sketch 依然能用。但我不建议新团队再入坑 Sketch 了。生态在萎缩，插件维护越来越慢，这是事实。
避坑指南：如果你坚持用 Sketch 做条纹与气泡标注，记得把「Symbol」和「Overrides」用好。气泡的各个状态（默认态、展开态、错误态）做成 Symbol，然后在标注里注明 Override 的规则。这样开发能一目了然。
Adobe XD：轻量但功能有限
Adobe XD 给我的感觉是——什么都有一点，但什么都不够深。它内置了标注模式，开发可以直接在 XD 里查看尺寸、颜色、间距。这一点比 Sketch 方便，不用额外装插件。
但问题出在条纹与气泡这种复杂标注上。XD 的标注模式只支持基础的尺寸和颜色标注，对于气泡的自适应规则、条纹的重复模式、交互状态，它基本无能为力。你只能手动加文本注释，或者截图后在外部工具里标注。
我个人觉得，XD 适合做快速原型验证，或者小团队内部沟通。但如果你要交付给外部开发团队，或者项目对标注精度要求很高，XD 不太够用。
注意：XD 的免费版有画板数量限制。我有个朋友做到一半，画板超限了，所有标注都打不开。最后只能花钱升级，或者重新整理文件。嗯，提前规划好。
手动代码：最灵活，但最耗时
手动代码标注，说白了就是直接在 HTML/CSS 里写注释，或者用 JSON/YAML 定义标注规则。这种方式的好处是——完全精确。没有工具理解偏差，没有插件兼容问题，开发拿到手就能直接用。
我一般在两种情况下会用手动代码：
- 组件库开发：当我在写一个 UI 组件库时，条纹与气泡的标注直接写在代码注释里，和组件本身绑定。这样维护起来最省心。
- 高精度交付：有些项目对像素级精度要求极高，设计工具导出的标注总有误差。这时候我会直接写一份 CSS 标注文档，把每个尺寸、每个间距都写死。
但手动代码的缺点也很明显——慢。一个简单的气泡标注，在 Figma 里 5 分钟搞定，手动写代码可能要半小时。而且如果设计频繁改动，手动更新标注会让人崩溃。
我的建议：手动代码标注适合「一次定义，长期使用」的场景。比如你正在搭建一个设计系统，条纹与气泡是其中的标准组件。这时候花时间写一份精确的代码标注，后面所有项目都能复用，性价比很高。
2.3 我的个人推荐
说了这么多，到底选哪个？我按场景给你推荐：
- 团队协作项目（3人以上）：首选 Figma。实时协作 + 插件生态 + 跨平台，目前没有更好的选择。
- 个人项目或小团队（全 Mac）：Sketch 依然可用，但建议搭配 Zeplin 做标注管理。
- 快速原型验证：Adobe XD 够用，但别指望它做精细标注。
- 设计系统 / 组件库：手动代码标注 + Figma 设计稿，两者结合最稳妥。
我的最终建议：如果你还在犹豫，直接选 Figma。它虽然不是完美的，但它是目前「坑最少」的选择。记住，工具只是手段，把标注规则想清楚、写明白，才是核心。
2.4 工具选择决策流程
下面这张图是我自己总结的决策流程，帮你快速判断该用哪个工具：
2.5 避坑总结
最后，我把这些年踩过的坑总结成几条铁律，你记一下：
- 不要迷信工具：再好的工具也救不了混乱的标注规范。先把规则定清楚，再选工具。
- 插件不是万能的：依赖插件做标注，一定要做好备份。我吃过亏，你最好别吃。
- 跨平台协作优先：团队里只要有一个人用 Windows，就别选 Sketch。这不是偏见，这是现实。
- 手动代码是最后手段：除非你在做设计系统，否则别轻易选手动标注。时间成本太高。
我曾经犯过的错：有一次我为了追求「工具统一」，强制全团队从 Sketch 迁移到 Figma。结果忽略了部分老设计师的学习成本，项目进度拖了两周。后来我才明白——工具迁移要循序渐进，给团队适应期。别搞突然袭击。
好了，工具选择这块就聊到这。记住，工具是帮你干活的，不是给你添乱的。选对了，事半功倍；选错了，嗯，你懂的。