用变体表达有限状态
变体用于表达一组有限、可枚举的外观配置。星际翻牌以 State 为维度，包含 Hidden、Revealed、Matched、Mismatch 四种值。
先写状态表
| State | 玩家看到什么 | 是否允许再次翻开 |
|---|---|---|
| Hidden | 卡背与“探索” | 允许，前提是游戏没有锁定输入 |
| Revealed | 图案与“已翻开” | 不应再次选择同一张参与配对 |
| Matched | 成功边框、图案与勾选说明 | 不允许 |
| Mismatch | 失配边框和状态说明 | 等待反馈结束，再回到 Hidden |
这里的“允许”是业务规格，不能只靠画出四种外观就宣称已经实现。游戏输入锁仍由运行时管理。
浏览器原理演示 · 卡牌外观状态，不执行配对逻辑
state = hidden
外观由组件状态决定。两张牌是否相同、是否锁定输入和何时结算，由游戏状态机决定。
建立组件集
先创建四个主组件，按 State=Hidden 等名称表达变体值，再组合成 StarMatch/Card。每个变体保持相同的内部名称和层级：BackMark、Label、Artwork/Symbol。
状态组合必须唯一。同一组件集中两个对象都叫 State=Hidden 会造成歧义。也不要为“土星 × 月亮 × 六个图案 × 四个状态”全量复制；图案应通过嵌套实例交换，避免状态组合膨胀。
保留覆盖靠稳定结构
切换变体时，Figma 尝试保留可匹配的覆盖。若某个变体把 Artwork 改成 Vector 91 或换了层级，图案可能丢失。先查名称、父层路径与属性绑定，再判断是否是工具问题。
本案例使用外层 Artwork Frame 控制显隐，里面的 Symbol 实例负责交换图案。这样交换图案不会意外把卡背状态的图案显示出来。
请读取 Card 的组件 API，使用实际 State 名称切换变体。
保持 Artwork 覆盖；切换 Hidden → Revealed → Matched 后读回属性。
截图检查 Hidden 不泄露图案，Matched 有成功标记。
若出现覆盖丢失，检查同名层级与属性引用，不先解除实例。
练习与检查
把一张月亮卡切换到四个状态，确认图案身份始终不变，只有外观和显隐变化。用这个测试区分“状态”与“内容”两个维度。
