形状工具 #

你会发现形状构成了设计中的大多数图层。

对于更复杂形状的设计，你可以使用 Figma 独一无二的钢笔工具构建自己的矢量网络。

你还可以使用各种基本形状。

在本文中，我们将讲解 Figma 中提供的基础形状工具，以及如何使用它们。

找到形状工具 #

你可以从工具栏的形状菜单找到所有形状工具。

单击矩形旁边的向下箭头以查看选项：

然后，你可以单击列表中的形状进行选择，或使用关联的快捷键。

这里有六种基础形状工具可用：

  1. 矩形工具（可以使用圆角工具）。
  2. 线条工具（包括虚线）。
  3. 箭头工具（包括双向箭头）
  4. 椭圆工具（包括半圆和扇形工具）
  5. 多边形工具。
  6. 星形工具。

提示

  • 拖动创建形状时按住 Shift 键可创建完美的正方形，圆形和多边形。
  • 按住 Option 键可以从中心创建形状并调整其大小。
  • 按住 Shift 和 Option 可以同时执行这两项操作！

1. 矩形工具 #

你可以使用矩形工具创建矩形和正方形。

  1. 从形状工具中选择矩形工具，或使用键盘快捷键 R。
  2. 单击画布中的某个点并拖动以创建矩形。矩形尺寸将在底边下方以蓝色显示。
  3. 在形状的每个角落都有一个手柄，这允许你根据需要调整形状的大小。

调整圆角半径 #

除常规手柄外，矩形在每个角落的内侧还有四个圆形手柄。

这些手柄允许你调整圆角半径。

  1. 将鼠标悬停在角落的手柄上，直到显示 Radius。这将默认设置为0。
  2. 单击并将手柄拖向对象的中心以使角变圆。

你还可以使用属性面板中的 Corner Radius 字段来调整圆角。

  • 将鼠标悬停在圆角半径图标上，直到出现箭头，然后滑动改变数值。
  • 单击字段并输入所需的数值。
  • 要单独调整每个角，请单击该字段右侧的单角图标。

然后你将可以单独调整每个角（从左到右：左上，右上，右下，左下）。

提示

此模式激活时，你还可以使用形状上的手柄单独调整角点。

2. 线工具 #

线条工具允许你在任何方向创建线条，是隔离区间或模拟 CSS 边框的有效方式。

  1. 从形状工具中选择线条工具，或使用键盘快捷键 L。
  2. 单击画布中的某个点并拖动以创建线。线的尺寸将以蓝色显示。 线的宽度始终为 0。

选择线后，可以在属性面板的 **描边（Stoke）**部分中更改其外观：

  • 使用颜色选择器更改线条颜色和不透明度：
  • 在 Weight 以更改线的粗细，以及对齐线条的方式。这可以应用于线的内部，外部或中心：

高级选项允许你进一步自定义线条; 包括确定 Cap（线的每一端看起来如何）和 Join（线连接到其他线时的行为），以及使用 Dashes 设置创建虚线。

提示

要为单个终点添加上限：双击该行以进入矢量编辑模式，选择该点，然后选择要应用的上限。 你可以通过按住[Alt]（Windows）或[Shift]（Mac）或单击并拖动以选择来选择形状中的多个点。

创建虚线 #

  1. 绘制或选择要制作虚线的线条。
  2. 在属性面板的描边中，单击三个椭圆以打开高级设置：
  3. 你既可以指定虚线中点的长度（Dashes），也可以指定它们之间的距离（Gap）。
  4. 在 Dashes 字段中按以下格式输入：Dash，Gap; 例如，要创建长度为 5 像素且间隙为 2 像素的虚线，请输入 5,2。

3. 箭头工具 #

箭头工具允许你绘制单向和双向箭头。

  1. 从形状工具中选择箭头工具，或使用键盘快捷键 ⇧ + L。
  2. 单击画布中的某个点并拖动以创建箭头。你可以在画布上移动光标以更改方向

与线条工具（上图）一样，你可以调整描边属性。

使箭头双向：

  1. 选择画布中的箭头。
  2. 双击箭头进入矢量编辑模式。
  3. 选择箭头另一端的点。
  4. 在高级描边选项中，在 Cap 字段中选择要使用的箭头类型。

4. 椭圆工具 #

你可以使用椭圆工具绘制椭圆和圆，也可以通过操作来创建一些特殊形状。

  1. 从形状工具中选择椭圆工具，或使用键盘快捷键 O。
  2. 单击画布中的某个点并拖动以创建椭圆。形状的尺寸将在对象下方以蓝色显示。
  3. 椭圆周围将有一个蓝色边框，每个角都有一个手柄。这允许你根据需要调整形状的大小。

创建半圆 #

将圆变成半圆：

  1. 使用 O 快捷键选择椭圆工具
  2. 单击并拖动时按住 Shift 键可创建完美的圆。
  3. 在形状内双击以进入矢量编辑模式。
  4. 选择四个主要点中的一个，然后在键盘上选择 Delete。
  5. 要闭合半圆，请单击 P 键选择钢笔工具。
  6. 单击半圆中的开放点以关闭形状。

使用扇形工具 #

你还可以使用椭圆工具创建其他形状，如饼图，圆环等：

有关详细信息，请参阅 扇形工具 一文。

5. 多边形工具 #

多边形工具允许你绘制由任意数量的直线组成的封闭形状。

多边形工具的默认形状是三角形，但你可以创建自己的自定义多边形。

  1. 从形状工具中选择多边形工具：
  2. 单击画布中的某个点并拖动以创建多边形。形状的尺寸将在对象下方以蓝色显示。
  3. 形状周围将有一个蓝色边框，每个角都有一个手柄。这允许你根据需要调整形状的大小。
  4. 与矩形形状一样，你也可以对多边形的角进行圆角处理。将鼠标悬停在角落的手柄上，直到显示 Radius。单击并将手柄拖向对象的中心以使角变圆。

多边形和边界框 #

你可能已经注意到，当我们绘制多边形时，为三角形形状周围的蓝色边界框延伸到形状底部的下方。

当增加边数时，这允许边界框保持一致的形状或大小。

要将边界框改到到形状的真实边界，可以扩展形状。 你可以通过右键单击形状并选择 Flatten 或使用 Command + E。

6. 星形工具 #

创建星形时，默认为 5 角星，有 10 个边。

  1. 从形状工具中选择星形工具：
  2. 单击画布中的某个位置并拖动以创建星形。
  3. 现在有三个手柄可以用来操纵星形：
    • Count 确定星星有多少个角（最小值：3，最大值：60）。
    • Ratio 确定星星的内点与中心的距离。这显示为星星总直径的百分比。
    • Radius 允许你调整星星的圆角半径。

提示

进入矢量编辑模式后，你可以单独调整每个点的圆角半径。

扇形工具