创建章节标题、段落文本和引用块

现在我们准备好创建案例研究页面的元素了。我们将从创建一个章节标题开始,以将页面划分为不同的主题,一个段落用于长文本,以及一个引用块,它将作为页面中的视觉分隔,用于不属于正文内容的引用。

In this lesson, we're building the section title, paragraph text, and quote block

创建章节标题

我们将从章节标题开始。

Create the section heading

  1. 选择 文本 工具,点击 Case study exploration 框架。
  2. 输入一小段占位符文本。点击画布上的任意位置停止编辑文本内容。
  3. 使用 排版 部分将字体大小更改为 28,字体粗细更改为 Bold,行高更改为 38
  4. 将文本图层重命名为 Section heading 。

Style the section heading

创建段落文本

我们将创建段落文本块。

Create the paragraph text block

  1. 点击画布上的空白区域以取消选择所有图层。
  2. 再次选择 文本 工具。
  3. 点击并拖动,创建一个大小约为 Case study exploration 框架三分之二大小的文本框。
  4. 开始输入几段占位符文本。你会发现 Figma 记住了我们为上一个图层设置的文本属性。
  5. 将字体大小更新为 20,字体粗细更新为 Medium,并将文本调整方式设置为 Auto height 。保持行高设置为 38
  6. 为提高可读性,打开类型设置并将段落间距(Paragraph spacing)设置为 24
  7. 将文本层的宽度设置为 1000,以帮助防止单行文字过多导致阅读疲劳。
  8. 最后,将框架重命名为Paragraph text 。

Style the paragraph text block

创建引言块

我们将为引用块使用另一个文本图层。

Create the quote block.png

  1. 选择 文本 工具,点击并拖动以绘制另一个与 段落文本 层宽度相似的文本框。
  2. 输入一个占位符引用。
  3. 将字体大小增加到 24,并将文字改为中等斜体以增加强调。确保文字调整大小设置为自动高度 ,行高设置为 38,段落间距设置为 24
  4. 为了帮助引用突出显示并作为与其他内容之间的分隔,我们将图层宽度改为 570,并将其水平对齐方式改为居中对齐 。了解更多关于文字对齐 的信息。
  5. 将图层重命名为 Quote 。

Format the quote block.png