使用预设框架创建框架

课程概览

在本课中，我们将构建案例研究页面的基本结构，以展示我们的作品。在此过程中，我们将使用框架预设创建框架，学习如何使用约束使设计响应式，并使用智能选择快速整理和重新排列图层。

案例研究是对特定项目或工作的书面展示。它突出显示了问题、解决问题的方法以及取得的成果。它还展示了技能和专业知识，以帮助潜在雇主或客户了解你能带来的价值。有关撰写自己的案例研究的灵感，可以查看 Figma 博客上的数十个案例研究 。

你的作品集可能会有多个案例研究。我们不会创建单个案例研究模板，而是创建以下元素，以便我们可以自定义不同的案例研究页面布局：

1. 一个带有粗体文字和图片背景的英雄区域，用于设定页面上下文。
2. 一个区域标题 ，用于组织页面内容。
3. 段落文字 ，用于描述项目的不同方面以及我们如何为其成功做出贡献。
4. 一张图片 ，使我们能够展示最终资产、说明进行中的工作或其他视觉和资源。
5. 还有一个引用区块 ，我们可以在这里包含一个引用、项目中的见解，或来自客户或合作者的证言。

注意： 在本课中，我们将专注于设定这些元素的基本结构，不会为每个图层提供精确的尺寸。但不用担心！我们将在后续课程中完善这些细节。

使用框架预设创建框架

我们的案例研究将是我们网站上的一个完整页面。为了帮助我们布局页面并确保使用正确的尺寸，我们可以使用一个框架预设。

框架预设是一组现成的框架尺寸集合。它们允许你快速创建适用于常见尺寸的框架，这样你就不必记住或猜测你的框架需要多大尺寸。当你启用框架工具时，你会在右侧边栏中找到适用于常见桌面、移动和平板设备的框架预设。点击箭头展开该部分，从列表中选择一个预设。你可以选择适用于常见设备和资源模板的预设。了解更多关于框架预设 的信息。

使用框架预设创建新框架

我们将使用 Desktop 预设来创建一个框架。

1. 启用 框架 工具，然后在右侧边栏中打开 桌面 部分。
2. 选择桌面框架预设，将新框架添加到画布上。
3. 将新框架重命名为Case study exploration 。

现在我们有一个定义好的空间来开始构建我们的案例研究元素。如果框架内空间不足，你可以选中它并拖动底部边缘来延长它。在未来的课程中，我们将学习如何使用自动布局来节省手动调整框架大小的手动工作。