创建图像和英雄区

接下来，我们将为我们的案例研究页面创建剩余的元素：图像和英雄区。

We'll be building the image and hero elements.png

创建图像

我们将创建一个图像块，用于在整个案例研究中展示我们的作品。

Create the image block

  1. 选择矩形工具或按 R，在案例研究探索框架内绘制一个矩形。
  2. 将层的宽度设置为 1000。这将匹配我们的文本层的宽度，以便它们彼此保持一致。
  3. 将高度设置为 562。
  4. 在右侧边栏的填充部分打开颜色选择器
  5. 选择顶部的图像 。Figma 会将填充更改为灰白棋盘图案，以表示图像占位符。我们将在后面的课程中更新这些占位符。
  6. 将图层重命名为 Image 。

Style the image block

创建英雄

Create the hero

在创建英雄元素之前，请选择案例研究探索框架中的所有元素，并将它们向下移动至少 400 像素。

提示： 您可以通过按下测量距离的键盘快捷键，并将鼠标悬停在图层和边缘之间的空间来检查所选图层距离边缘有多远：

添加文本图层

现在我们有空间可以工作了，我们将创建英雄元素。

  1. 使用 文本 工具在 案例研究探索 框的顶部创建一个文本图层。
  2. 为了使这个元素突出，将字体大小增加到 76，字体粗细设置为 Bold，行高设置为 自动 。当你将行高设置为自动时，Figma 将使用字体设置的默认行高。这意味着行高将根据你使用的字体而变化。
  3. 将文本对齐设置为 居中对齐 。
  4. 在对齐部分，点击水平居中对齐将图层居中于框架内。

Format the hero.png

将文本图层添加到框架中

在这个英雄元素上添加背景，可以使其更加突出。为此，我们将文本图层添加到一个带有图片填充的框架中。

在之前的课程中，我们学习了如何为现有图层绘制框架。这次，我们将使用另一种方法来添加一个新的框架。

  1. 选择文本图层。
  2. 右键点击选择区域，选择框架选择 ，或使用键盘快捷键：
    Mac: ⌘ Command ⌥ Option G
    Windows：Control Alt G
  3. 使用 填充 部分将填充更改为占位符图像。
  4. 然后，通过点击并拖动新框架的边界框的左右两侧来使框架变大。您可以通过按住修饰键一次性调整相对的两侧大小。
    Mac: ⌥ Option
    Windows: Alt
  5. 调整大小，直到边框与父框架的边缘对齐——由红色 X 指示。为此，您需要在文件偏好设置中打开对齐到对象 。
  6. 然后，将框架的高度设置为 440。
  7. 将框架重命名为 Impactful text。

Add the text layer to a frame and change the fill to an image placeholder

设置文本图层的约束

当你调整这个框架的尺寸时，标题文本会保持在顶部，但我们希望它能居中锚定。我们将使用约束 来改变这一行为

  1. 选择 Impactful text 框架内的文本图层。
  2. 将图层的约束改为居中和居中 。
  3. 点击水平居中对齐和垂直居中对齐 ，将文本在框架内居中。

现在当我们调整框架大小时，文本图层仍然保持居中。

Change the constraints for the impactful text block.png