Figma 基础知识 · 初学者快速入门

1. 界面概览

先认清四个工作区，后面就不会迷路。

2. 文件 / 页面 / Frame

理解「文件装页面，页面装 Frame」，层级就通了。

• 文件（File）：一个完整设计稿文档，可分享链接、设权限。
• 页面（Page）：同一文件里的分区，例如「线框 / UI / 组件 / 归档」。
• Frame：设计里的「画板」。手机屏、桌面屏、卡片容器通常都是 Frame。

最短动手路径

1. 新建文件 → 左侧点页面名可改名、可新增页面。
2. 按 F 选择 Frame，右侧选预设（如 iPhone / Desktop）。
3. 在 Frame 内再放按钮、文字、图片；尽量不要把主内容散落在 Frame 外。

3. 图层与布尔

左侧图层列表 = 画布对象的「目录树」。

图层基础

• 越靠上的图层越「在上面」显示。
• 双击图层名可重命名；养成「按钮 / 标题 / 图标」命名习惯。
• Ctrl/Cmd+点击可选中被盖住的对象；Enter 进入组/Frame 内层。
• Ctrl/Cmd+G 编组；Ctrl/Cmd+Shift+G 解组。

布尔运算（Boolean）

选中两个及以上形状后，顶部可做：

4. 形状与钢笔基础

形状工具

• 矩形 R、椭圆 O、直线 L、箭头、多边形、星形。
• 按住 Shift 绘制可得到正圆/正方形。
• 圆角：选中矩形 → 右侧 Corner radius。

钢笔（Pen）入门

1. 按 P 进入钢笔，单击加点，拖动可拉出贝塞尔手柄。
2. 闭合路径：点回起点，或画完后用填充。
3. 改点：用「移动」工具双击路径进入编辑；Alt/Option 可拆分对称手柄。

5. 文字与颜色

文字

• 按 T 添加文字。单击是自动宽度，拖出文本框是固定宽度换行。
• 右侧可调：字号、字重、行高、字距、对齐。
• 同一产品尽量统一标题 / 正文 / 辅助文字三级样式（后续可升为 Text styles）。

颜色（填充 / 描边）

• Fill：填充色、渐变、图片填充。
• Stroke：描边粗细、位置（Inside / Center / Outside）。
• 取色器旁可复制十六进制色值，方便和开发对齐。
• 常用色建议存成 Color styles，避免每个按钮颜色都不一样。

6. 导出

把设计交给开发或做演示素材时用。

1. 选中 Frame 或图层 → 右侧最下方 Export → +。
2. 常见格式：PNG（界面/带透明）、JPG（照片）、SVG（图标矢量）、PDF（整页）。
3. 倍率：移动切图常用 1x / 2x / 3x；Web 图标常用 SVG 或 2x PNG。
4. 需要多张时可选中多个对象，或导出整个 Frame。

7. 与团队协作（评论 / 分享）

分享

• 右上角 Share：可邀请邮箱，或复制链接。
• 权限常见两档：can view（查看/评论）与 can edit（可改稿）。
• 对外只读预览时，优先 view，避免误改主文件。

评论

• 按 C 放置评论钉，把问题和位置绑在一起。
• 评论可解决（Resolve）；改完再标解决，沟通更清楚。
• 重要决策可在评论里写清「结论 + 负责人」，减少口头漂移。

技巧 · 实用提效

已嵌入设计师素材 · 入门向提效与避坑（macOS 快捷键为主；Windows 把 ⌘ 换成 Ctrl，⌥ 换成 Alt）。

1. 快捷键（先背这 12 个）

2. Auto Layout（自动布局）

几乎所有列表 / 按钮都该用。

• 先想「方向」再堆内容：横向排按钮用 Horizontal；表单、卡片栈用 Vertical。改方向比事后拆组省事。
• Padding + Gap 代替肉眼留白：内边距与子项间距写在右侧面板，改文案时框会跟着长，不会挤爆。
• Hug / Fill 配对记：文字、图标多半 Hug contents；背景条、列表行宽要拉满用 Fill container。填反了就会「框塌掉」或「撑出画布」。
• 嵌套 Auto Layout：外层页面栏 + 内层按钮组，比「一个大 Frame 里绝对定位」稳得多，改稿不易散架。
• 为何重要：研发看到带 Auto Layout 的稿，间距意图更清晰，切图/还原时少猜。

3. 组件与变体（Component / Variants）

• 可复用的先做成组件：按钮、输入框、导航项、空状态——改主组件，实例一起更新。
• 变体用属性表，不靠复制改名：如 State=Default/Hover/Disabled、Size=S/M/L，比 Button_blue_big_2 好维护。
• 实例里只改「允许覆盖」的内容：文案、图标替换可以；乱拆实例结构会导致无法再跟主组件同步。
• 为何重要：一套按钮改圆角时不用全文件搜；评审时状态齐全，少漏 Disabled。

4. 约束与布局网格（Constraints / Layout grids）

• Constraints 管「窗口变宽时谁跟着走」：左右钉住、水平拉伸、居中——做响应式示意时比纯绝对坐标靠谱。
• 和 Auto Layout 别混用乱套：内容流用 Auto Layout；少数贴边装饰层再用 Constraints。
• Layout grid 用「列 + 边距」：例如 12 列、左右 margin 固定；对齐时开网格，少口头说「再往右一点」。
• 为何重要：研发问「大屏怎么办」时，你有网格和约束可指，而不是只丢一张静态图。

5. 样式：颜色 / 文字 / 效果

• 颜色建成 Color styles（或 Variables）：主色、中性色、语义色（成功/警告）命名统一，如 Brand/Primary、Text/Secondary。
• 文字建成 Text styles：标题 / 正文 / 辅助各一档；少在每个文本框手改字号。
• 效果（阴影、模糊）也尽量样式化：同一海拔高度共用一个 Effect style，避免「每张卡片阴影都不一样」。
• 为何重要：改品牌色时一处更新；Dev Mode 里样式名可被前端映射到 token。

6. Dev Mode 协作要点（设计 ↔ 研发）

• 交付前开 Dev Mode 自查一遍：看间距、字号、色值是否和你口头说的一致。
• 标注靠「选中即显」，少刷永久红线：现代协作以 Inspect 为主；只在特殊交互处加简短说明。
• 写清「可点/禁用/加载」：变体里带齐状态，比单独贴一张「状态说明」图更不容易漏。
• 链接到正确 Page / Frame：评审与工单里贴「该屏 Frame」链接，不要丢整个文件首页。
• 为何重要：减少「设计是 16、实现是 14」的拉扯；状态齐全等于半份验收清单。

7. 常见避坑

命名与图层

• 图层名可读：Card / Title、Btn / Primary；避免 Rectangle 127、Group 5 Copy。
• 隐藏不用的探索稿：另开 Page 叫 Archive，主流程 Page 保持干净。
• 布尔运算前先复制一份：Outline / Union 后难回退路径编辑。

导出与切片

• 导出设在需要的图层上：图标 SVG；照片 2x PNG；少整页导出再裁。
• 勾选「导出时包含所属 id」前先问研发：多数 Web 用 SVG/组件还原，不靠碎切图。
• 描边居中 vs 内描边：导出图标时描边位置影响视觉粗细，和研发约定一种。

文件卫生

• 别把整站塞进一个 Frame 无结构：按流程分 Frame（落地、表单、成功态），方便评论锚点。
• 外部图片尽量替换为团队库或压缩后再贴：大图拖慢文件，协作卡顿。
• 权限：评论者 vs 编辑者分清：评审给 Comment，避免误改主文件。

8. 五分钟自检清单（交稿前）

1. 主路径每一屏是否都在独立 Frame 且有清晰名字？
2. 按钮 / 输入是否组件化，并至少有 Default + Disabled（按需 Hover）？
3. 间距是否主要来自 Auto Layout 的 Gap/Padding，而不是肉眼挪？
4. 颜色与关键字体是否挂了 Style（不是裸色值散落）？
5. 发给研发的是 具体 Frame 链接，且 Dev Mode 能读到一致数值？