学习路线与完成标准

你已经熟悉接口、数据库和业务状态。学习 Figma 的关键，是增加一层能力：把“功能应该怎样工作”表达为用户能看见、能操作、能获得反馈的界面规格。

本站以竖屏微信小游戏「星际翻牌配对」为主线。真实教学设计放在 figma-demo 文件；截图来自该文件。网页中的可交互小实验会单独标注为浏览器原理演示。

三条学习路线

当前需要	阅读顺序	完成标志
先能和 AI 说清楚	心智模型 → 布局 → 提示词 → 双重验收	能解释一次修改的目标、范围和验收方法
从零系统掌握	按左侧七个模块阅读并完成练习	能组织组件、搭建原型并交付规格
正在做项目	案例需求 → 文件导览 → 界面 → 组件 → 原型 → 导出 → 交付	能追踪每个界面和资源对应的需求

第一遍不要同时追求美术表现、复杂原型逻辑和完整游戏代码。先做一个可以点击、结构清楚、状态齐全的小闭环，再扩展视觉细节。

你最终应该能做什么

1. 在图层树中识别屏幕、布局容器、主组件与实例。
2. 解释按钮为什么随文字变高、为什么随屏幕变宽，以及什么情况下会溢出。
3. 把“这里不好看”改写为具体的层级、对比、间距或状态问题。
4. 让 AI 在正确文件中读取上下文、复用组件、小步修改，再以截图和结构核对结果。
5. 交付布局规则、状态表、动效时序、资源和异常策略，让开发环节不必猜测。

如何跟做

打开 Figma Design 与 Figwright 插件。先阅读连接与能力边界，让 AI 确认目标文件是 figma-demo。核心练习使用本地组件、基础原型及单套设计值；需要付费套餐的进阶能力会特别标注。免费版跟做时可把内容放在同一页的多个 Section 中。

每个练习按“先预测 → 操作 → 观察 → 解释”进行。例如修改屏幕宽度前，先说出哪些对象应该改变，哪些应该保持尺寸。结果不同，首先查布局规则，而不是手工把对象拖回原位。

第一份验收记录

练习：把主按钮文案从“开始”改为“继续第 12 关”
预测：按钮宽度跟随容器，文案保持居中，高度不变
观察：记录文字是否裁切、上下留白是否一致
解释：指出父容器、按钮、文字各自的尺寸模式
证据：节点信息 + 修改前后截图

完成核心课程只证明你掌握了设计和协作方法。小游戏的触控手感、帧率、真实设备安全区、广告和网络能力，还需要在微信运行环境验收。见开发交付。

练习与检查

用自己的话写出你最近一个游戏功能的目标、入口、成功状态和失败状态。暂时不谈颜色。若只能描述“加一个按钮”，继续追问：玩家为什么点击、点击后发生什么、失败时看见什么。