原型设计是将静态模型转化为交互式动态模型的过程（更好地称为原型）。将静态模型变为现实无疑是设计工作流程中最--如果不是最--令人兴奋的步骤之一。**
开发人员理解设计的用户流，以及它的感觉和功能，也是非常重要的。还有什么比使用Figma（根据2020年设计工具调查，它是世界上最好的设计工具）更好的方法？
一旦你知道了Figma的工作原理，用它进行原型设计是很容易和愉快的。首先复制这个静态模拟图（点击交互系列，然后复制到我的草稿中），然后在整个教程中，我们将增加越来越多的功能保真度。你的本地拷贝应该看起来像这样。
注意：我假设你至少对现代UI设计工具（如Figma或Sketch）有少量经验。
第1步：创建一个可水平滚动的框架
让我们从Artboard 1开始，使溢出视口的卡片的选择可以水平滚动。这是一个例子，说明我们如何使我们的模型动态化，而不需要创建Figma所说的 "连接"。连接将我们引向新的艺术板，但这不是我们在步骤1中要做的。
首先从图层面板（左侧边栏）选择卡片，然后从设计面板（这次是右侧边栏）使用下拉菜单将组选项改为框架。
我不会深入研究这个问题，但组和框架的主要区别是，组把它们的孩子紧紧包裹起来，而框架可以是任何大小。这意味着。
- 分组的孩子与组一起缩放，而框架的孩子则比较顽固（这是一个特点，不是一个错误）
- 有框架的孩子会相对于他们的框架对齐，而分组的孩子仍然是相对于他们的艺术板的。
- 框架可以有溢出的内容，可以水平或垂直滚动（这就是我们将要尝试的）。
等等，这是否意味着艺术板实际上就是框架？确实如此：其他 UI 设计工具称之为 Artboards，而 Figma 则称之为Frames。这可能是因为，在 Figma 中，框架可以嵌套在其他框架中，这与 Artboards 在 Sketch、Adobe XD 等其他工具中的做法略有不同。
切换到原型模式（⌥+9），这里的溢出行为设置现在可用，然后将下拉选项从无滚动改为水平滚动。
现在，你会注意到阴影被新转换的框架奇怪地切断了，但这实际上是溢出内容的标准行为，而且可以比较容易地修复。
由于阴影的模糊变量是30，而Frame可以是任何大小，我们需要调整Frame的大小，使其边缘有一个额外的30的间距。调整大小（shift+⌘+↑↓←→）和推移（shift+↑↓←→）相应的对象应该是很容易的。
顺便说一下，你可能会注意到（如果你点击框架），卡片和它们的间距可以很容易地重新排列。这与本教程的具体内容无关，但还是很不错的。
继续阅读《SitePoint上的Figma原型设计简介》。
