画布、图层与日常操作
Figma 中看到的位置不等于对象真正的父子关系。开始前，先掌握画布、图层树和右侧属性面板的分工。
找到你的对象
画布用于观察结果；左侧图层树用于确认归属和命名；右侧属性面板用于读取尺寸、布局、填充及原型配置。界面版本可能调整面板位置，判断时优先寻找属性名称和对象类型。
在 figma-demo 中先定位 Section，再展开其中的屏幕 Frame。单击选中外层对象；需要进入嵌套对象时，通过展开图层树或逐层进入。复杂结构里，直接在树中选择 Board/Row 1/Card 01 通常比反复点击画布更可靠。
第一次创建对象：手动操作
打开左侧 Page 1，在空白处按 F 选择 Frame 工具并绘制容器；右侧输入宽 390、高 844，在图层树把它命名为练习屏。按 T 创建文字，按 R 创建矩形。需要自动排布时选中对象，使用右侧 Auto layout 的添加入口，或按 Shift+A。
选中多个元素时，要确认它们共同的父层。把一个对象拖进图层树中的目标 Frame 后，再检查缩进和父节点。画布上盖在另一对象上方，不一定表示已经成为它的子层。
选中完整按钮 Frame，通过右键菜单的 Create component 建主组件。需要复用时从 Assets 找到组件并拖入实例；不要用截图或普通矩形冒充实例。名称、图标样式和菜单位置可能随版本变化，用对象类型与右侧属性再次确认。
日常操作的最小集合
| 操作目的 | 建议方法 | 容易误解的地方 |
|---|---|---|
| 移动画布 | 使用手形工具或按住空格拖动 | 不是移动选中的设计对象 |
| 放大看细节 | 缩放视图；选中对象后缩放到选择 | 缩放视图不会改设计尺寸 |
| 改对象位置 | 选中后拖动或改坐标 | Auto Layout 流内位置由父容器决定 |
| 调整对象大小 | 修改宽高或拖动尺寸手柄 | 某轴可能因此切为 Fixed |
| 复制对象 | 复制后检查类型与归属 | 复制实例得到实例；复制屏幕不保证原型目标自动正确 |
| 搜索对象 | 使用图层名称或 Figwright 搜索 | 名称相同的节点仍有不同 ID |
不要背完所有快捷键再开始。先熟练选中、展开父层、读属性、撤销、复制和缩放到对象，足以完成前几章。
命名就是给未来的 AI 建索引
Rectangle 128 只说明它曾经是什么。Game/Header/Pause 说明它的职责。对于需要动画匹配或组件覆盖的内部图层，名称还应保持稳定。
建议按“语义名称 + 少量必要编号”命名：Board、Row 01、Card 01、Artwork、Label。不要把当前金币数字写进容器名，也不要把整段需求放进每个图层名。
请检查选中屏幕的图层命名。
仅重命名用途明确的容器和关键交互对象。
先给出 nodeId、旧名、新名及理由；不要改变结构和外观。
同名对象必须结合父层路径区分。
编辑前的三个确认
确认文件是 figma-demo；确认当前页和目标 Section；确认当前选择的节点类型。让 AI 写入时再绑定文件，避免你切换标签后工具跟随了另一个文件。
练习与检查
找到游戏屏幕中的一张卡牌，写下它的父节点、对象类型和 nodeId。再选中同一主组件的另一个实例，检查二者为什么外观相似但 ID 不同。不要用截图中的位置代替身份信息。
依据：画布 Section、Auto Layout。核查：2026-10-31。