推动设计系统采用
迁移消费者、度量采用、维持组织内认同的策略。
设计系统进阶
为什么
无人使用的设计系统只是个仓库。采用才是难点 — 团队有遗留代码、截止日期和怀疑。深思熟虑的迁移计划带速赢能把束之高阁的系统变成真正杠杆。
何时使用
核心 10 个组件存在且有文档后开始采用工作。别等完整 — 先迁移最易消费者建立成功案例。
如何做
1. 盘点消费者 — 列出应用、技术栈、组件使用、负责团队
2. 选试点 — 绿地或低风险应用、热情团队、2 周迁移
3. Codemod 速赢 — Button/Input/Tag 占 80% 使用，自动化替换
4. 度量 — 跟踪导入 @myorg/ui 的应用百分比，发布仪表盘
5. 答疑时间 — 每周 1h 维护者帮消费者解阻
6. 弃用旧的 — 内部 "ui-legacy" 包安装时打印迁移链接
7. 庆祝 — 公司全员会展示迁移故事
示例
// adoption-dashboard.ts — 跟踪真实使用
import { readFileSync } from "fs";
const apps = JSON.parse(readFileSync("apps.json", "utf8"));
const report = apps.map((a) => ({
app: a.name,
usingDS: a.deps.includes("@myorg/ui"),
pctComponents: a.imports.filter((i) => i.startsWith("@myorg/ui")).length / a.imports.length,
}));
// 输出：18/24 应用（75%）导入 @myorg/ui，平均 62% 组件已迁移
// codemod.button.cjs — jscodeshift 转换
module.exports = function (file, api) {
const j = api.jscodeshift;
return j(file.source)
.find(j.JSXOpeningElement, { name: { name: "Btn" } })
.forEach((p) => { p.value.name.name = "Button"; })
.toSource();
};
常见问题
- ⚠大爆炸迁移 — 团队试图一个 PR 换 200 组件，阻塞数月
- ⚠无度量 — 领导看不到进展，资金被砍
- ⚠维护者不可达 — 消费者遇 bug，2 周无响应，他们 fork
最佳实践
- ✓一次迁移一种组件 — Button 全部换完，再 Input，再 Card
- ✓发布采用仪表盘 — 应用百分比、组件百分比，对领导可见
- ✓提供每周答疑时间 — 可预测支持时段胜过临时 Slack 催促