跳到主要内容

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 当成跨文件常量。

figma-demo 中的学习导览

如何查看可点击原型​

  1. 打开文件,找到大厅 Frame 或选择对应 Flow 起点。
  2. 使用 Figma 的原型演示入口进入 Present。
  3. 从「01 · 从大厅开始」测试主路径。
  4. 使用「02 · 翻牌与反馈」直接检查预设翻牌路径。
  5. 从成功/失败起点测试重新开始与返回大厅。

暂停使用全屏 Overlay;继续关闭浮层。重新开始路径配置了重置交互组件状态。配置可通过工具读回,真实播放效果还应在 Figma Present 中按步骤检查。

与教程对照​

看布局时读 Header、Status、Board 的属性;看复用时读 Card 的 mainComponent 和实例属性;看交互时读 reactions,不能仅从截图判断点击去向。

组件区的实际导出

练习与检查​

让 AI 不做修改,只给出五个 Section 的内容摘要,再定位 Game 中第 7 张卡。要求解释这张卡为什么与第 1 张共享图案、但位置和 ID 不同。

完整的节点与导出映射见样例清单。其中不包含凭据,也不改变 Figma 文件的分享权限。