🔷 02 - 形状与绘制

形状是 Figma 设计的基础构建块。无论是按钮、卡片、图标还是复杂的界面元素，都可以从基本形状出发进行构建。本课将深入讲解 Figma 中的形状绘制工具、路径编辑、布尔运算和矢量绘制技巧，帮助你掌握创建任意视觉元素的能力。

📌 本课要点

一、基本形状工具

Figma 提供了多种基本形状工具，每种都有对应的快捷键：

工具快捷键说明
矩形R绘制矩形/正方形
椭圆O绘制椭圆/圆形
线条L绘制直线
钢笔P绘制自由路径
铅笔⇧+P自由手绘
多边形/星形/箭头工具栏下拉特殊形状

1. 绘制矩形

1
选择矩形工具：按 R 或点击工具栏中的矩形图标，光标变为十字线。✅验证通过
2
拖拽绘制：在画布上点击并拖拽，松开鼠标完成绘制。拖拽时可以看到宽高数值实时显示。✅验证通过
3
绘制正方形：按住 ⇧ 键的同时拖拽，可以绘制正方形（宽高相等）。✅验证通过
4
从中心绘制：按住 ⌥（Mac）/ Alt（Win）键的同时拖拽，从中心点向外扩展。✅验证通过
5
精确尺寸绘制：选择矩形工具后，直接点击画布，在弹出的对话框中输入精确的宽度和高度（如 200×100），点击确定即可创建指定尺寸的矩形。✅验证通过

2. 绘制椭圆

1
选择椭圆工具：按 O，在画布上拖拽绘制椭圆。按住 ⇧ 键可以绘制正圆。✅验证通过
2
饼图/弧形：选中椭圆，在右侧属性面板中找到「Arc」设置，调整起始角度（Start）和结束角度（End），即可创建饼图或弧形。这在数据可视化中非常实用。✅验证通过

3. 绘制多边形与星形

1
选择多边形工具：点击工具栏形状图标右侧的下拉箭头，选择「Polygon」或「Star」。在画布上拖拽绘制。✅验证通过
2
调整边数：选中多边形/星形，在右侧属性面板的「Point count」中调整边数（3-60）。星形还可以调整内半径比例。✅验证通过
💡 快捷创建：在工具栏选择形状工具后，直接在画布上单击（不拖拽），会创建一个100×100的默认形状。这在需要快速创建占位形状时很方便。

二、形状属性调整

1. 圆角（Corner Radius）

圆角是 UI 设计中最常用的属性之一。Figma 提供了灵活的圆角控制：

1
统一圆角：选中形状，在右侧属性面板的「Corner radius」中输入数值（如8），四个角将同时应用相同的圆角。✅验证通过
2
独立圆角：点击「Corner radius」右侧的「独立设置」图标（四个角图标），分别设置左上、右上、右下、左下的圆角值。例如，只设置顶部两个角为圆角来创建标签页形状。✅验证通过
3
圆角平滑度：在 Figma 中，圆角默认使用「Apple 圆角」（连续曲率），视觉效果比简单的圆弧更柔和。按住 ⌥ 拖拽圆角手柄可以在圆弧和连续曲率之间切换。✅验证通过

2. 旋转与翻转

1
旋转：选中形状，将光标移到边界框的角点外，光标变为旋转图标，拖拽即可旋转。或在右侧属性面板中输入精确角度。快捷键 ⌘+⇧+R 旋转15°。✅验证通过
2
水平翻转：右键 → 「Flip horizontal」，或按 ⌘+⇧+H。常用于镜像对称元素。✅验证通过
3
垂直翻转：右键 → 「Flip vertical」，或按 ⌘+⇧+V。✅验证通过

3. 形状调整手柄

选中形状后，除了边界框的缩放手柄，还有一些特殊的调整点：

三、钢笔工具与矢量路径

钢笔工具是创建自定义形状的核心工具。掌握钢笔工具，你可以绘制任何想要的图形。

1. 钢笔工具基础

1
选择钢笔工具：按 P，光标变为钢笔图标。✅验证通过
2
创建直线段：在画布上点击创建锚点，继续点击下一个位置，两点之间会自动连接一条直线。按 Esc 或 Enter 完成路径。✅验证通过
3
创建曲线段：在画布上点击并拖拽，会拉出贝塞尔曲线的控制手柄。拖拽的方向和距离决定曲线的弯曲程度。继续在下一个位置点击拖拽创建平滑的曲线。✅验证通过
4
闭合路径：将鼠标移回起始锚点，光标旁会出现圆圈图标，点击即可闭合路径。闭合后可以填充颜色。✅验证通过

2. 锚点类型

贝塞尔曲线有三种锚点类型：

📏 直线锚点

没有控制手柄，只连接直线段。点击（不拖拽）创建。

无手柄

🌈 对称锚点

两个控制手柄长度相等、方向相反，产生平滑曲线。点击拖拽创建。

等长反向

⚡ 不对称锚点

两个控制手柄长度不等但方向相反，一端曲率大、一端曲率小。双击对称锚点可转换。

不等长反向

3. 路径编辑

1
进入编辑模式：选中路径，按 Enter 或双击路径进入编辑模式。锚点显示为小方块，控制手柄显示为线条。✅验证通过
2
移动锚点：在编辑模式下，拖拽锚点可以改变其位置，路径会随之更新。✅验证通过
3
调整手柄：拖拽控制手柄的端点可以调整曲线的弯曲方向和程度。按住 ⌥ 拖拽可以单独调整一侧的手柄。✅验证通过
4
添加锚点：在编辑模式下，将光标移到路径线段上，光标旁会出现「+」号，点击即可在该位置添加锚点。✅验证通过
5
删除锚点：选中锚点后按 Delete 或 Backspace。删除后相邻锚点会自动连接。✅验证通过
6
转换锚点类型：选中锚点，在右侧属性面板中可以切换为直线（Corner）、对称（Smooth）或不对称（Mirrored）模式。也可以双击锚点在直线和曲线之间切换。✅验证通过

4. 铅笔工具

1
选择铅笔工具：按 ⇧+P 或在钢笔工具图标上长按选择铅笔工具。✅验证通过
2
自由绘制：在画布上自由拖拽，释放鼠标后 Figma 会自动平滑你的笔迹。适合快速绘制草图和手写效果。✅验证通过
3
油漆桶工具：在铅笔工具下拉中还有油漆桶工具（Paint bucket），可以填充封闭区域。在编辑矢量路径时使用。✅验证通过

四、布尔运算

布尔运算是组合和修改形状的强大工具。通过简单的数学运算，可以将多个形状合并成复杂的图形。

🔗 联合（Union）

将多个形状合并为一个形状，重叠区域融合。

快捷键：⌥+⌘+U

用途：合并复杂轮廓、创建不规则形状

✂️ 减去（Subtract）

从底层形状中减去顶层形状覆盖的区域。

快捷键：⌥+⌘+S

用途：打孔、镂空、创建缺口

🎯 相交（Intersect）

只保留所有形状重叠的区域。

快捷键：⌥+⌘+I

用途：裁切形状、提取公共部分

🔲 排除（Exclude）

保留所有形状不重叠的区域，重叠部分被去除。

快捷键：⌥+⌘+E

用途：创建中空效果、镂空图案

布尔运算实战示例

下面通过创建一个简单的图标来演示布尔运算的实际应用：

示例：创建一个齿轮图标

1
创建齿轮中心：用椭圆工具绘制一个圆形（直径80px），这是齿轮的主体。✅验证通过
2
创建齿轮齿：在圆形上方绘制一个小矩形（20×30px），然后复制7个，围绕中心均匀分布（每个间隔45°）。✅验证通过
3
联合运算：选中圆形和所有小矩形，执行联合运算（Union）。它们将合并为一个齿轮形状。✅验证通过
4
减去中心孔：在齿轮中心放置一个小圆形（直径30px），选中齿轮和外圆，执行减去运算（Subtract），创建中心孔洞。✅验证通过
5
扁平化：右键布尔组 → 「Flatten」（⌘+E），将布尔运算结果扁平化为单一矢量路径。这样更容易编辑和导出。✅验证通过
💡 布尔运算 vs 编组：布尔运算会创建一个新的矢量形状，而编组只是将形状组合在一起。布尔运算的结果是一个不可逆的合并（除非用 ⌘+Z 撤销），编组则可以随时取消。

五、形状的变换操作

1. 缩放与等比缩放

1
自由缩放：拖拽边界框的角点或边点。拖拽角点时按 ⇧ 可以等比缩放。✅验证通过
2
从中心缩放：拖拽角点时按 ⌥，以中心点为基准缩放。结合 ⇧+⌥ 可以从中心等比缩放。✅验证通过
3
缩放工具：按 K 进入缩放模式，拖拽可以缩放对象。与直接拖拽不同，缩放工具会同时改变对象的所有属性（包括描边粗细、效果参数等）。✅验证通过

2. 倾斜与扭曲

Figma 没有直接的扭曲工具，但可以通过以下方式实现倾斜效果：

1
使用旋转+缩放：先旋转对象，然后非等比缩放，可以创建简单的倾斜效果。✅验证通过
2
使用插件：安装「Skew」或「Perspective」插件，可以实现更精确的倾斜和透视变换。✅验证通过

六、实战：绘制常见 UI 元素

绘制一个开关按钮

1
创建轨道：绘制一个 44×24 的矩形，圆角设为12，填充灰色（#E0E0E0）。这是开关的背景轨道。✅验证通过
2
创建滑块：在轨道内绘制一个 20×20 的圆形，填充白色，添加阴影（X:0, Y:1, Blur:3, Color:rgba(0,0,0,0.2)）。✅验证通过
3
调整滑块位置：将圆形放在轨道左侧（X偏移2px，Y居中），这是"关闭"状态。选中两个形状，编组（⌘+G）。✅验证通过

绘制一个搜索图标

1
绘制放大镜：用椭圆工具绘制一个圆形（直径16px），描边2px，无填充。✅验证通过
2
绘制手柄：用线条工具从圆形右下角画一条斜线（长度8px），描边2px，线端样式设为圆角（Round cap）。✅验证通过
3
编组并旋转：选中两个形状编组，旋转-45度。一个简洁的搜索图标就完成了。✅验证通过

绘制一个心形图标

1
绘制基础形状：绘制一个圆形（直径20px），复制一份，两个圆形水平排列，边缘略微重叠。✅验证通过
2
添加三角形：在两个圆形下方绘制一个倒三角形（可以用钢笔工具绘制，或多边形旋转180°），使三角形的两个上角与圆形的交点对齐。✅验证通过
3
联合运算：选中所有形状，执行联合运算（Union），然后扁平化（Flatten）。一个心形就完成了。✅验证通过
4
用钢笔工具绘制：更精确的方法是使用钢笔工具。从底部尖角开始，点击创建起始点；向上到左侧圆弧顶部，点击拖拽创建曲线；在左侧圆弧底部点击拖拽回到顶部中心；继续到右侧对称位置；最后回到底部尖角闭合路径。✅验证通过

七、高级绘制技巧

1. 描边选项

属性选项用途
对齐方式内部/居中/外部控制描边相对于路径的位置
端点样式平头/圆头/方头控制开放路径端点的形状
连接样式斜接/圆角/斜角控制拐角处的连接方式
虚线自定义模式创建虚线、点线等效果
描边绘制在形状内/外绘制