1.1 为什么 Figma 是「基于 Frame」的工具

• PS/AI 是「画布+图层」，Figma 是「Frame+图层」
• Frame = 画板 = 容器 = 网页/APP 页面
• 所有界面必须放在 Frame 里，否则无法做响应式、自动布局、原型跳转

1.2 界面分区详解

1. 左侧面板
   • Layers：图层结构（决定一切）
   • Assets：组件、样式、图标库
2. 顶部工具栏
   • 选择 V、画板 F、矩形 R、文本 T、钢笔 P
3. 右侧属性面板
   • 设计 Design
   • 原型 Prototype
   • 开发 Dev Mode
4. 右上角
   • 分享、评论、历史版本、网格设置

1.3 图层结构逻辑（非常重要）

• 图层嵌套决定对齐、约束、自动布局
• 永远保持：Frame → 组 → 元素
• 命名规范：Page / Frame / Section / Item

第二篇：基础工具与样式系统——从像素到规范

2.1 形状工具

• 矩形 R、椭圆 O、直线 L、箭头

  

• 布尔运算：联合、减去、相交、排除（做图标必备）

• 圆角、混合模式、描边、虚线

2.2 文本系统（UI 设计核心）

• 字体、字重、大小、行高、字间距
• 对齐方式：左/居中/右/两端
• 文本溢出处理：隐藏、滚动、截断显示省略号
• 行高最佳实践：
  • 标题：1.1–1.2
  • 正文：1.4–1.5

2.3 颜色体系

• 十六进制、RGBA、HSB
• 全局样式 Styles（后面深入）
• 主色、辅助色、中性色、强调色
• 对比度原则（WCAG 标准）

2.4 效果

• 阴影 Inner/Outer
• 模糊
• 渐变线性/径向
• 不透明度与混合模式

第三篇：对齐、栅格、布局——UI 设计师的基本功

3.1 对齐与分布

• 顶部工具栏：左对齐、居中、右对齐、顶对齐、底对齐
• 分布间距：水平均分、垂直均分
• 快速对齐快捷键：
  • Alt + 方向键：微调
  • Alt 悬停：查看间距

3.2 栅格系统 Layout Grid

• 栅格 = 界面骨架
• 常用：
  • 移动端：8pt 网格 + 16/20px 左右边距
  • 网页：12 列栅格
• Grid、Columns、Rows 三种模式
• 如何让所有元素对齐栅格（专业度关键）

3.3 约束 Constraints

• 元素在父容器放大缩小时如何定位
• Left / Right / Top / Bottom / Center / Scale
• 案例：
  • 按钮固定右下角
  • 标题居中
  • 图片宽度充满

第四篇：选择、编组、复制、快捷键——效率体系

4.1 选择逻辑

• 单击：选子元素
• Cmd/Ctrl + 单击：穿透选择
• 双击：进入组
• 框选：只选完全包围的元素

4.2 编组与解组

• Group：Cmd/Ctrl + G
• Frame 与 Group 的区别（非常关键）
  • Group：仅视觉分组
  • Frame：具备约束、自动布局、尺寸限制

4.3 复制技巧

• Cmd/Ctrl + D：重复上一次位移
• Alt + 拖拽：快速复制
• 批量复制、等距复制

4.4 必背快捷键

• V 选择
• F 画板
• R 矩形
• T 文本
• Shift+A 自动布局（提前认识）
• Cmd/Ctrl + G 编组
• Cmd/Ctrl + Alt + L 锁定
• Cmd/Ctrl + Shift + L 解锁全部
• Alt 看间距