使用文本图层构建你的简介
撰写你的简介
现在我们的头像已经完成,我们将使用文本图层来构建我们的问候语和简介。
文本是设计中的关键组成部分,可用于传达信息并鼓励行动。我们在设计中如何设置文本也能帮助支持视觉层次结构,传达适当的语气,甚至影响设计的可访问性。
我们将使用 文本 工具向画布添加文本图层。
添加文本图层
- 在工具栏中选择 文本 工具,或按 T 。
- 在头像下方的画布上点击,并输入你的名字。如果你查看左侧边栏,你会发现图层名称反映了画布上的文本字符串。这将继续这样做,直到我们重命名图层。
- 在仍选择文本工具的情况下,点击并拖动光标以在下方图层创建文本框。确保文本框足够大以容纳您的内容。不必担心其确切大小;我们将在未来的课程中调整它。
当您输入时,您会发现文本内容会保持在文本框内,自动换行而不是流到旁边。为什么这与其他文本图层不同?
文本调整大小
文本图层具有一个调整大小的属性,该属性决定了当其内容发生变化时,图层尺寸(由边界框指示)将如何响应。有三个文本调整大小选项:
- 自动宽度 Auto width:文本层的宽度会随着内容的变化而增减
- 自动高度 Auto height:文本层的高度会随着内容的变化而增减
- 固定尺寸 Fixed size:文本层的宽度和高度将保持不变,无论其内容如何。Figma 会自动换行任何额外文本,以防止其超出层的水平边界。
文本调整大小属性会根据文本层创建的方式自动设置,但您可以在右侧边栏的布局部分随时更新此设置。了解更多关于文本调整大小的信息。
对齐你的图层
如果你的图层看起来有点奇怪,你可以使用右侧边栏中的对齐部分来对齐它们。
- 点击画布上的空白区域以取消选择所有图层。
- 点击并拖动你的光标来选择你的头像和两个文本图层。
- 点击左对齐以对齐图层的最左侧边缘。
样式化文本图层
默认的文本样式略小,难以阅读。我们可以使用文本属性创建一些视觉层次,并帮助将注意力吸引到几个关键区域。
注意: 在本课程中,我们将始终使用 Figma 的默认字体家族 Inter。您可以浏览可用的字体并选择其他字体,但请记住,您选择的字体家族可能不提供我们将使用的相同字重选项。
- 选择包含你名字的文本图层,并查看右侧边栏中的 字体排印 部分。
- 为了给这个文本图层增加更多重量,将字体粗细更改为更粗的选择,例如
黑体
。 - 将字体大小更改为
40
。
提示: 如果您的图层开始重叠,您可以使用微调选项快速重新定位它们。
在 Figma 中有两种微调类型:
- 小微调:使用方向键重新定位图层,默认以
1
为增量移动图层。 - 大微调:使用 Shift 与方向键组合,默认以
10
为增量移动图层。
您可以在偏好设置菜单中更改您的微调值。了解更多关于微调设置的信息。
我们将更新个人简介文本图层:
- 选择包含个人简介的文本图层。
- 将字体粗细更新为
Medium
,大小更新为28
。 - 将文本调整大小更改为自动高度 ,以防止内容超出边界框的底部边缘。
- 为了让内容有呼吸的空间,将行高设置为
38
,段落间距设置为16
。 - 你也可以使用文本格式,如加粗或斜体,来突出你的职业亮点或其他成就。