figma-demo 教学文件导览
真实教学文件名为 figma-demo。使用 Figwright 的 list_files → use_file 定位它,或者在你已有权限的 Figma 文件列表中按名称查找。
当前工具无法取得可靠的 file key,因此本站不拼造文件或原型链接。你在 Figma 中打开文件后,可从分享界面复制实际链接;文件保持原有访问权限。公开读者可以使用截图、资源和步骤复现。
文件结构
全部样例组织在同一页的 Section 中,便于免费套餐跟做。
| Section | 内容 | 从哪里开始 |
|---|---|---|
| 01 · 基础与布局 | 四个学习卡片:结构、布局、组件、协作 | 阅读指南 Frame |
| 02 · 组件与状态 | Card、Button、六种 Artwork | 观察四种卡牌状态 |
| 03 · 星际翻牌 | 七个主界面 | 大厅 3:25 |
| 04 · 原型状态 | 翻开第一张、失配、匹配 | 第一张状态屏 3:354 |
| 05 · 适配练习 | 360、390、430 宽度测试 | 比较棋盘与卡牌尺寸 |
这些 nodeId 对应本次制作,复制文件或重建后会变化。复现时应重新搜索和读取,不把示例 ID 当成跨文件常量。
如何查看可点击原型
- 打开文件,找到大厅 Frame 或选择对应 Flow 起点。
- 使用 Figma 的原型演示入口进入 Present。
- 从「01 · 从大厅开始」测试主路径。
- 使用「02 · 翻牌与反馈」直接检查预设翻牌路径。
- 从成功/失败起点测试重新开始与返回大厅。
暂停使用全屏 Overlay;继续关闭浮层。重新开始路径配置了重置交互组件状态。配置可通过工具读回,真实播放效果还应在 Figma Present 中按步骤检查。
与教程对照
看布局时读 Header、Status、Board 的属性;看复用时读 Card 的 mainComponent 和实例属性;看交互时读 reactions,不能仅从截图判断点击去向。
练习与检查
让 AI 不做修改,只给出五个 Section 的内容摘要,再定位 Game 中第 7 张卡。要求解释这张卡为什么与第 1 张共享图案、但位置和 ID 不同。
完整的节点与导出映射见样例清单。其中不包含凭据,也不改变 Figma 文件的分享权限。

