📐 05 - 画框与布局
Frame是Figma设计的核心容器，理解Frame的嵌套、自动布局和约束机制，是创建专业UI设计的基础。本课从基础Frame操作到响应式布局全面讲解。
📌 本课要点
- Frame创建与属性设置，Frame vs Group的区别
- 自动布局方向、间距、内边距详解
- Hug/Fill/Fixed三种尺寸模式
- 嵌套自动布局构建复杂界面
- 约束系统与响应式适配
- 绝对定位、Z轴层级与布局网格
一、Frame基础
1. 创建Frame
1预设画框：按F激活画框工具，右侧属性面板选预设——Phone(iPhone 15 Pro 393×852)、Desktop(1440×1024)、Tablet等。专业设计师从预设开始确保适配目标设备。
2自定义尺寸：按F拖拽绘制。创建后在属性面板输入精确尺寸。拖拽时按⌥从中心开始绘制。
2. Frame vs Group
📦 Frame（画框）
- 有独立尺寸和位置
- 支持自动布局
- 支持约束属性
- 可以裁剪溢出内容
- 子元素相对Frame定位
- 几乎所有场景首选
快捷键：⌘+⌥+G 包裹为Frame
📁 Group（组）
- 没有独立尺寸，随内容调整
- 不支持自动布局
- 不支持约束
- 不支持裁剪溢出
- 子元素相对画布定位
- 仅临时分组时用
快捷键：⌘+G 创建 / ⌘+⇧+G 取消
⚠️ 关键区别：Group内元素可随意拖出Group范围——Group无边界。Frame内元素想超出需开启"Clip content"。Frame更适合做UI容器。
二、自动布局深入
1. 添加自动布局
1为已有内容添加：选中Frame内多个元素，按⇧+A，自动创建带自动布局的包裹Frame。
2为空Frame添加：选中空Frame按⇧+A，获得自动布局属性。后续添加子元素自动按规则排列。
2. 自动布局属性全解析
📋 完整属性表
| 属性 | 选项 | 说明 |
|---|
| Direction | Vertical / Horizontal | 主轴方向 |
| Gap | 数值 / 独立设置 | 子元素间距 |
| Padding | 统一 / 独立四边 | 内容到容器边缘内边距 |
| Primary axis | Start/Center/End/Space Between | 主轴对齐 |
| Counter axis | Start/Center/End | 交叉轴对齐 |
| Wrap | On / Off | 是否换行 |
3. 三种尺寸模式
📏 Fixed
固定尺寸，不受内容和容器影响。
- 固定图标尺寸32×32
- 按钮高度固定48px
- 间距占位元素
🤗 Hug
跟随内容自动调整。
- 按钮宽度随文字变化
- 标签大小随文本调整
- 容器包住所有子元素
🔲 Fill
填满父容器剩余空间。
- 列表项填满列表宽度
- 卡片内容区填满卡片
- 输入框填满表单宽度
1案例：导航栏
- Frame水平自动布局，Padding 24/12
- Logo Fixed 32×32
- 导航链接容器水平Gap:24 Hug
- 右侧按钮容器水平Gap:12 Hug
- 主轴Space Between——Logo左按钮右
- 导航栏宽度Fill自动适配父Frame
三、嵌套自动布局
🏗 页面布局嵌套示例
页面 Frame（垂直布局，Gap:0）
├── 顶部导航（水平，Space Between，Padding:0 24）
│ ├── Logo（Fixed 32×32）
│ ├── 导航链接（水平，Gap:24，Hug）
│ └── 用户操作（水平，Gap:12，Hug）
├── 主内容区（垂直，Gap:24，Padding:24，Fill）
│ ├── 标题区（垂直，Gap:8，Hug）
│ │ ├── 主标题（Fill）
│ │ └── 副标题（Fill）
│ └── 卡片网格（水平，Wrap:On，Gap:16，Fill）
│ ├── 卡片1（垂直，Gap:12，Padding:16，Fixed 280×Hug）
│ ├── 卡片2
│ └── 卡片3
└── 底部栏（水平，Center，Padding:16）
💡 嵌套原则：每层Frame只负责一个方向排列（水平或垂直）。复杂布局通过嵌套实现而非双向排列。确保布局可预测和可维护。
四、约束系统
无自动布局的Frame中，约束控制子元素在容器尺寸变化时的行为：
🔗 约束选项
| 约束组合 | 行为 | 典型用途 |
|---|
| Left + Top | 左上固定 | 默认行为 |
| Left + Right | 左右固定，宽随容器 | 导航栏、输入框 |
| Right + Top | 右上固定 | 关闭按钮、通知图标 |
| Center + Center | 始终居中 | 弹窗内容、加载器 |
| Left+Right+Top+Bottom | 四边固定，宽高随容器 | 背景图、全屏遮罩 |
| Scale | 等比缩放 | 装饰图形 |
1约束设置方法：选中Frame内的子元素，在右侧属性面板Constraints区域选择。竖线控制水平约束（左/中/右/左右），横线控制垂直约束（上/中/下/上下）。
2验证约束效果：选中父Frame，拖拽边角改变尺寸，观察子元素是否按预期行为移动和缩放。这是验证约束设置最直观的方式。
五、绝对定位与Z轴
1绝对定位：在自动布局Frame内，选中子元素右键→"Add absolute position"，该元素脱离布局流但仍属于Frame。适合徽标角标、关闭按钮、浮动装饰等。
2Z轴层级：图层面板中元素从上到下 = 从前到后。拖动图层顺序改变覆盖关系。也可以使用快捷键：⌘+⌥+]置顶、⌘+⌥+[置底、⌘+]上移一层、⌘+[下移一层。
六、布局网格（Layout Grid）
1添加网格：选中Frame，右侧属性面板点击Layout Grid的"+"。三种网格类型：
- Columns——列网格（如12列，间距24px，边距24px）
- Rows——行网格（如8行，间距0）
- Grid——点阵网格（8px×8px点阵）
2常用网格设置：
- Web设计：12列，Margin 24px，Gutter 24px，Width 1440px
- 移动设计：4列，Margin 16px，Gutter 16px，Width 375px
- 8px基准网格：Grid 8px，对齐所有元素
💡 快捷键：⌃+G 切换网格显示/隐藏。网格只是辅助线，不会导出或影响设计输出。
七、响应式设计工作流
1创建多尺寸画板：设计同一页面在不同屏幕尺寸下的表现。创建Desktop(1440)、Tablet(768)、Mobile(375)三个Frame。
2优先设计移动端：Mobile First策略——先设计最小屏幕，再逐步扩展。移动端设计是最受限的，先解决它再放大更容易。
3利用自动布局+约束：自动布局控制元素排列和间距，约束控制元素在容器变化时的定位。两者配合实现真正的响应式。
八、总结与练习
✅ 知识检查
- Frame和Group的本质区别？为什么优先使用Frame？
- 自动布局的三种尺寸模式分别在什么场景使用？
- 嵌套自动布局的核心原则是什么？
- 约束系统的Left+Right组合有什么效果？
- 如何在自动布局中添加一个脱离布局流的元素？
🎯 练习：响应式导航栏
- 创建Desktop(1440)和Mobile(375)两个Frame
- 在Desktop Frame中设计完整导航：Logo + 5个导航链接 + 登录按钮
- 使用自动布局实现导航排列
- 复制到Mobile Frame，调整为汉堡菜单样式
- 测试拖拽Frame宽度观察导航的自适应行为
📐
第五课完成！
下一课：组件系统——设计复用的核心机制。