第2章 矢量绘图工具基础：矩形、椭圆、钢笔、布尔运算、路径编辑

矢量绘图是Figma原型设计的基石。产品经理与交互设计师每天都需要绘制按钮、卡片、图标、表单等界面元素，这些看似简单的组件背后，是对矩形、椭圆、钢笔、布尔运算与路径编辑等核心工具的熟练掌握。本章从产品需求出发，结合真实业务场景，系统讲解矢量工具的使用方法、交互逻辑与设计规范。

2.1 用户场景与业务问题

在原型设计过程中，以下三类场景高频出现：

场景	业务问题	矢量工具解决方案
快速搭建页面骨架	需在5分钟内输出首页布局，包含搜索栏、卡片列表、底部Tab	矩形工具生成区块，椭圆工具绘制头像占位
绘制自定义图标	设计稿中缺少“个人中心”图标，需原创一个带肩标的火柴人	钢笔工具勾勒轮廓，路径编辑调整曲线
组件状态切图	按钮需包含正常、悬停、按下、禁用四种状态，且尺寸需严格一致	布尔运算叠加形状层，路径编辑对齐锚点

2.2 矩形与椭圆工具：基础形状的绘制与属性调整

矩形和椭圆是Figma中最基础的矢量工具，适用于绝大多数界面占位与容器绘制。

2.2.1 操作步骤

1. 从工具栏选择矩形工具（快捷键 R）或椭圆工具（快捷键 O）。
2. 在画布上拖拽生成形状；按住 Shift 拖拽可保持正方形或正圆。
3. 在右侧属性面板中调整：填充（Color/渐变/图像）、描边（宽度/颜色/对齐方式）、圆角（单独控制四角或统一值）。
4. 使用 圆角图标 切换为独立圆角模式，分别设置左上、右上、右下、左下半径。

2.2.2 交互逻辑描述

矩形与椭圆生成后默认带有6个控制点（四角与边中点），拖拽控制点可等比缩放；双击形状进入“隔离模式”，可单独编辑路径。圆角属性支持实时预览，调整时原型画面同步更新。

2.2.3 设计决策权衡

决策点	推荐方案	权衡说明
圆角使用统一值还是独立值	统一值（如8px）	独立圆角增加后期修改成本，仅在特殊形状（如“对话气泡”）时使用
填充使用纯色还是线性渐变	纯色优先	渐变在交付开发时需额外标注，且可能导致多端渲染偏差
描边放在内部还是外部	内部描边	外部描边会增加组件实际尺寸，破坏布局精确性

2.3 钢笔工具：自定义路径绘制

当界面需要不规则形状（如曲线背景、自定义图标、手绘感元素）时，钢笔工具是唯一的选择。

2.3.1 操作步骤

1. 选择钢笔工具（快捷键 P）。
2. 点击画布生成直线锚点；点击并拖拽生成贝塞尔曲线锚点（带方向线）。
3. 路径闭合：将鼠标悬停在起始锚点上，光标旁出现圆圈时点击。
4. 路径开放：按 Esc 或双击空白处完成绘制。
5. 使用“编辑路径”模式（快捷键 Cmd/Ctrl + E）调整锚点位置与方向线。

2.3.2 交互逻辑描述

钢笔工具生成的路径默认不填充，需在属性面板中设置填充色与描边。锚点分为三种类型：

锚点类型	外观	适用场景
直角点	无方向线	直线转折、多边形角点
平滑点	两条方向线共线且长度对称	流畅曲线、圆弧过渡
角点	两条方向线不共线或长度不对称	曲线突然转向、尖角与弧线组合

2.4 布尔运算：形状的组合与裁切

布尔运算是矢量编辑中最高频的复合操作，用于从基础形状构建复杂界面组件。Figma提供四种布尔运算模式：

运算类型	图标	效果	典型应用
合并	∪	将多个形状合并为一个整体，重叠部分消失	创建复合图标、Tab栏背景
减去	⊖	顶层形状从底层形状中裁切掉重叠区域	制作镂空按钮、进度条轨道
相交	∩	仅保留所有形状的重叠区域	生成遮罩、高光形状
排除	⊘	保留不重叠区域，移除重叠区域	创建网格、棋盘格、复杂蒙版

2.4.1 操作步骤

1. 选中两个或以上形状图层（按住 Shift 多选）。
2. 在顶部工具栏或右侧属性面板中点击布尔运算图标。
3. Figma自动将选中图层归入一个“布尔组”，组内保留所有原始形状，可随时切换运算模式或调整子图层顺序。
4. 双击布尔组可进入编辑状态，单独移动、缩放或修改子形状。

2.4.2 原型说明与组件规范

布尔运算生成的复合形状，在组件库中应遵循以下规范：

• 命名规则：布尔组以 icon/ 或 component/ 为前缀，如 icon/arrow-right。
• 图层结构：子形状保持扁平，不超过3层嵌套；复杂图标建议拆分为多个布尔组。
• 可编辑性：布尔组内不合并路径，保留原始形状以便后期调整。
• 导出属性：布尔组在导出SVG时自动合并为单一路径，体积更小。

2.5 路径编辑：锚点与曲线调整

路径编辑是所有矢量工具的底层能力，掌握锚点与贝塞尔曲线的控制方法，才能精确塑造形状。

2.5.1 核心操作

操作	快捷键	说明
选择锚点	直接点击 / 框选	选中后锚点变为实心蓝色
移动锚点	拖拽 / 方向键	按 Shift 约束水平或垂直移动
添加锚点	双击路径	在路径上任意位置双击即可插入新锚点
删除锚点	选中后按 Backspace	删除后路径自动重新闭合
转换锚点类型	双击锚点	在“平滑点”与“角点”之间切换
调整方向线	拖拽方向线端点	按住 Option/Alt 可单独控制一端

2.5.2 业务问题与解决策略

在团队协作中，路径编辑不当会导致以下问题：

• 锚点冗余：过多锚点增加文件体积，且调整时易出现不可控扭曲。 解决方案：使用“简化路径”插件或手动删除多余锚点。
• 曲线不流畅：方向线长度或角度不一致导致曲线有“鼓包”。 解决方案：确保相邻平滑点的方向线共线且长度相近。
• 路径未闭合：填充异常或导出SVG出现破面。 解决方案：使用“闭合路径”命令（Cmd/Ctrl + J）。

2.6 用户操作流程全景图

以下SVG展示了从需求接收到矢量图形产出的完整操作流程，涵盖矩形、椭圆、钢笔、布尔运算与路径编辑的协作关系：

2.7 验收标准

矢量图形在交付开发或纳入组件库前，需通过以下验收检查：

检查项	验收标准	验证方式
形状完整性	所有路径闭合，无游离锚点；布尔组内无冗余子形状	选中图形，查看属性面板“路径”选项卡
尺寸精确性	关键尺寸（宽/高/圆角）与设计规范一致，误差≤0.5px	使用测量工具（Option/Alt 悬停）
可编辑性	布尔组未合并路径，钢笔路径锚点数量合理（每100px不超过8个锚点）	双击进入编辑模式检查锚点密度
导出兼容性	导出SVG后无乱码、无缺失图层、无异常填充	使用“导出”功能生成SVG并在浏览器中预览
组件一致性	同类型组件（如所有图标）使用相同的描边宽度、圆角风格与填充策略	对比组件库内同类元素的属性面板

2.8 本章小结

矢量绘图工具是Figma原型设计的“语言”——矩形与椭圆解决80%的布局占位需求，钢笔工具处理剩余20%的异形场景，布尔运算与路径编辑则负责将基础形状转化为可复用的界面组件。产品需求型设计的关键，在于根据业务场景选择最合适的工具组合，并始终为后续的修改与复用保留编辑空间。