订单 #2087已付款去结算
产品与设计 · 设计交付
FigmaFigma
Figma 这类协作式设计工具把同一份文件当作单一事实来源：设计师看稿、开发读 Dev Mode 规格、组件库管复用、变量管主题，改一处主组件或变量，所有实例同步。
Figma 工作流实验台：同一物件，4 个视角，改一处看实例同步
切视角看同一物件呈现什么，调 radius.md 看实例是否同步，模拟「开发看旧截图」看对齐怎么断——这就是 Figma 这类协作式设计工具的运作方式。
第 0 步：在 Figma 里选中 OrderCard，右侧顶部在 Design / Inspect / Variables / Assets 间切视角。下面是同一物件的模拟：切视角看它呈现什么，调 radius.md 看实例是否同步，再验收设计与开发是否对齐。
- 开发 · 实例订单 #2087
- 评审 · 实例订单 #2087
主组件 + 2 实例都 = 8px——改一处处处变
视角
radius.md待验收。当前 设计稿 · radius.md = 8px。调 radius 看实例是否同步，再点「验收对齐」盖戳。
面板里测到的结论怎么用
刚才物件随视角变切面、随变量同步、随截图脱节，对应的就是单一事实来源、多视角、组件实例和 Dev Mode 规格化这几件事。
- 单一事实来源：一个文件只有一处定义主组件和变量，所有引用方读取它；改定义即处处生效。
- 多视角：设计稿看外观、Dev Mode 看规格、组件库看复用、变量看主题——同一物件向不同角色呈现不同切面。
- 组件实例：实例引用主组件，主组件改一处，所有实例同步；复制改色会绕开这条链。
- 变量驱动主题：把颜色、圆角、间距命名成变量，换主题只改变量定义，组件和页面零改动。
- Dev Mode 规格化：开发按节点读 CSS、token 和切图，不自己量图，减少设计与实现的口径差。
- 实时协作可追溯：评论锚定节点、版本历史与多人光标——这一层靠正文补充，面板里用「实例同步」做了近似。
什么时候用 Figma 这类工具
界面设计要多人协作、要把规格交付开发、组件和主题要复用统一时用；它不是所有视觉工作的万能解。
多人协作的界面设计、要把规格交付开发、组件和主题要跨页面复用、设计变更要可追溯和可评审。
一次性草图或白板速绘（纸笔、Excalidraw 更快）、纯位图修图（用 Photoshop）、已定稿印刷物料（用 InDesign）。Figma 管的是界面设计的协作与规格化。
从打开链接到对齐验收：最短路径
不要从「发个截图」开始。先打开同一份文件，再让设计与开发各自用对应视角，最后验收对齐。
- 第 0 步 打开：打开 Figma 链接 → 选对 Page → 用左侧图层树或搜索定位 Frame/组件。
- 设计师搭稿：用主组件 + 变量 + Auto Layout 组合，不画散框；变体走属性轴，不复制改色。
- 开发读规格：切 Dev Mode，按节点读 CSS、token、间距和切图，不自己量图。
- 改动可追溯：评论锚定节点，重大改动写版本说明或分支，不开口头修改。
- 对齐验收：开发能从同一文件定位节点、读到最新规格、看到当前版本即算对齐。
同一颗 OrderCard：正例与反例
目标都是把按钮圆角从 8 改成 12 并让开发拿到。差异只在用单一事实来源，还是截图口头交付。
改 radius.md = 12，主组件和 2 个实例一起变成 12px；开发在 Dev Mode 读到 border-radius: 12px，不用自己量图。改 1 处，验收 1 次。
把设计稿截图发给开发，微信说「圆角再大一点」。开发拿旧截图自己量出 8px，主组件早改成 12 了——交付的规格是旧的，还得返工对齐。
差异：只改一处——把可查看链接换成截图，单一来源就断了。快速自测
设计师在 Figma 里把主按钮复制 3 份各改一版颜色，开发问该按哪个实现。问题出在哪？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。