Frame、Group 与 Section
容器决定设计能否被整体操作、适配和复用。Frame、Group 与 Section 不能因为“都能把东西放一起”就混用。
三种容器的职责
| 对象 | 适合用途 | 不适合承担的职责 |
|---|---|---|
| Frame | 屏幕、按钮、面板、棋盘、布局区域 | 无需为每个纯装饰路径都加一层 |
| Group | 临时选择一组图形、组合小插画 | 作为需要独立尺寸规则的列表容器 |
| Section | 在画布上组织流程、组件和说明 | 放进手机 Frame 里模拟页面布局 |
Frame 有独立边界，可以设置 Fill、裁切和布局规则。Group 的边界跟随内容；Section 是画布组织层，不能置于 Frame 或 Group 内。
建立第一张屏幕
- 创建一个 390 × 844 的 Frame，命名为
Game。这是教学设计基准，不是所有手机必须使用的分辨率。 - 在 Frame 本身设置背景填充；不要另建一张同尺寸背景矩形抢占层级。
- 在里面建立
Header、Status、Board和Help四个 Frame。 - 暂时只放文字标签，先检查职责和嵌套。
- 在外侧的 Section 放规格说明，避免说明文字混入导出屏幕。
裁切与“内容不见了”
Frame 的 Clip content 会隐藏边界外的内容。卡牌跑出棋盘后看不见，可能是位置或布局错误，也可能只是被祖先裁切。不要首先删除裁切；先沿父层向上确认哪个边界在裁切，以及这个边界是否符合设计意图。
例如横向卡牌预览区需要裁切，但一个弹出的提示气泡可能应该放在单独浮层，而不是棋盘内部。
请在 figma-demo 的教学 Section 中建立 Game Frame，390×844。
背景使用 Frame Fill。内部按 Header / Status / Board / Help 分区。
先只建立结构和占位文字，报告每层 nodeId 与职责。
屏幕外的教学说明放在 Section 中，不能成为 Game 的子层。
练习与检查
把三个图形分别放进 Group 和 Frame，移动子图形并观察外层边界。再改变 Frame 宽度，解释它为什么不会像 Group 一样总是贴合子图形。最后检查导出 Game 时是否只包含屏幕内容。
依据：Frame、Frame 与 Group、Section。核查：2026-10-31。