2、工具初识：Figma 界面介绍、画板与图层、基本绘图工具（矩形、圆形、线条）
好，咱们正式开始动手了。
这一章，我带你把 Figma 的界面摸熟。别怕，这工具没那么玄乎。说白了，它就是一个在浏览器里跑的矢量绘图软件，但比 Sketch 和 XD 都更「活」一点。
我记得我第一次打开 Figma 时，第一反应是：「怎么这么干净？」 嗯，干净就对了。好的工具，不会一上来就给你一堆按钮把你吓住。
2.1 界面布局：别被工具栏吓到
Figma 的界面，我习惯把它分成四个大块：
- 顶部工具栏：放的是最常用的操作，比如移动、画形状、文字、钢笔。你想想看，其实 80% 的时间你只用其中三四个。
- 左侧图层/页面面板：这里管的是「层级结构」。你画的所有东西，都会在这里列出来。我刚开始带新人时，发现他们总喜欢在画布上乱点，找不到东西。其实你只要看左侧面板，一切都在那。
- 中间画布区：这就是你干活的地方。无限大，随便拖。
- 右侧属性面板：选中一个东西后，这里会显示它的尺寸、颜色、圆角、阴影等等。这是你调样式的主战场。
2.2 画板（Frame）—— 你的第一块「画布」
在 Figma 里，你很少直接在灰色背景上画东西。你得先建一个 Frame（画板）。
为什么？因为 Frame 就像一个容器。你把内容放进去，它就能帮你做自动布局、切图导出、甚至做交互跳转。没有 Frame，这些东西都玩不转。
怎么建？
- 按快捷键
F或A，然后在画布上拖一下。 - 或者，在右侧面板里选一个预设尺寸，比如 iPhone 14、Web 1920。
我曾经犯过一个错：直接用矩形工具画了个框当背景，结果后面做原型时，所有交互都连不上。嗯，记住，做原型一定要用 Frame。
2.3 图层（Layers）—— 谁在上，谁在下
图层这个概念，如果你用过 PS 或 PPT，应该不陌生。简单说，就是「后来者居上」。你后画的图形，会盖住先画的。
在左侧面板里，你可以拖拽图层的顺序。我个人的习惯是：
- 背景层放最下面
- 内容层放中间
- 弹窗、浮层放最上面
你想想看，如果弹窗被背景盖住了，那用户点啥？所以，图层顺序就是视觉层级，别搞反了。
2.4 基本绘图工具：矩形、圆形、线条
好，终于到动手环节了。这三个工具，你几乎每天都会用。
2.4.1 矩形工具（R）
按 R，拖一下，一个矩形就出来了。就这么简单。
但我想说的是：矩形是 UI 的基石。按钮、卡片、输入框、列表项…… 90% 的界面元素，本质上都是矩形。你只要把矩形玩熟了，界面就搭起来一半。
选中矩形后，右侧面板你可以调：
- 宽高（W/H）
- 圆角（Corner radius）—— 我建议按钮圆角用 8px 或 12px，卡片用 16px，别搞太夸张
- 填充颜色（Fill）
- 边框（Stroke）
2.4.2 圆形工具（O）
按 O，拖一下，就是椭圆。按住 Shift 拖，就是正圆。
圆形在 UI 里一般用来做：头像、图标背景、开关按钮、加载动画。
我个人的经验是：圆形做头像时，最好用「裁切蒙版」（Clip content），这样图片就不会跑出圆框。具体操作是：选中圆形，在右侧面板勾上「Clip content」，然后把图片拖进去。
2.4.3 线条工具（L）
按 L，点一下起点，再点一下终点，一条线就画好了。
线条看起来简单，但用处很大：分割线、下划线、连接线、装饰线。
嗯，这里要注意：线条的粗细（Stroke weight）一般用 1px 或 2px。太粗了会显得笨重。颜色我习惯用浅灰色（#E0E0E0 或 #CCCCCC），别用纯黑，太扎眼。
2.5 组合拳：用矩形和圆形画一个简单的图标
光说不练假把式。咱们来画一个「搜索」图标（就是那个放大镜）。
- 按
O，按住Shift，画一个 24x24 的正圆。填充设为透明，边框设为 2px 灰色。 - 按
L，从圆的右下角画一条 45 度角的斜线，长度约 12px。这条线就是放大镜的把手。 - 选中圆和线，按
Ctrl+G（Mac 是Cmd+G）编组。 - 搞定。
你看，两个基本工具，组合一下，就是一个标准图标。这就是 Figma 的魅力——简单工具，无限可能。
2.6 本章小结
这一章，咱们把 Figma 的界面、画板、图层、三个基本工具都过了一遍。说实话，这些内容你花 10 分钟就能上手，但真正用好，需要你在项目里反复练。
下一章，我会带你深入「自动布局」—— 这是 Figma 最强大的功能之一，也是很多新手觉得难的地方。别担心，我会用最笨的办法讲清楚。