在Figma上创建设计

这是开发日志的第二部分。之前，我已经想出了应用程序的主要功能，并在excalidraw上创建了一些快速的UI草图。现在我正在通过制作一个Figma线框图来完成UI的设计。我对Figma的经验很少，所以这也是我提高自己的机会。

这篇文章包含了我在学习Figma时发现的有用资源的链接。让我们开始吧

在创建任何屏幕之前，我决定制作一些常见事物的组件，如按钮、文本类型等。我决定使用组件，因为我可以通过更改主要组件来更改任何组件的实例。如果像按钮这样的单个事物有许多类型 我可以创建按钮组件的变体。这些变体使我能够轻松找到并放置我想要的项目类型。有关 Figma 中组件工作的更多信息，请参考以下视频：

Figma 中的组件

有关如何制作变体、如何设置它们的属性等更多信息，请参考以下视频：

Figma 中的变体

在设计按钮时，我注意到形成容器的矩形的大小不会随着添加文本而增长。这导致按钮看起来像这样：

不良按钮行为

当我调查时，我发现使用自动布局可以使内容增加时物体增大。您需要做的是设置内容周围的间距，无论周围是一个矩形还是其他元素，都会增大其大小。自动布局还对于希望元素按行排列以使每个项目之间有固定间距或使每个项目以占用所有空间的方式间隔的情况非常有用。欲了解更多信息，可参考。 我阅读了这篇文章：

我想要一些屏幕，比如申请托管的屏幕，弹出在屏幕上，而不是应用程序导航到新页面。在Figma中设计这个，你可以使用覆盖层，更多解释在这里：

Figma中的覆盖层

我希望可用托管的列表可以滚动，所以我查看了如何在线框中使项目可滚动。我使用了这个教程：

Figma中的滚动

我希望显示申请人详细信息的组件可以展开，如果按下按钮，它就会展开，显示附加到申请的任何消息。我使用了这个视频来学习如何做到这一点：

Figma中的手风琴

到这一步，我有了一个每个页面内容的画框，现在我所要做的就是以某种方式将它们连接起来，以制作一个感觉像实际网站的原型。要创建原型，请点击屏幕右上角的“原型”按钮。似乎没有什么变化，但是现在如果你悬停在元素上，你可以看到。 看到加号图标弹出。这是 Figma 告诉你在元素上与某人交互时添加一个动作。

Figma 具有一些交互功能，如点击、拖动、双击等，一些操作包括导航和打开覆盖层。了解更多原型信息，请查看这个视频：

在 Figma 中创建原型

接着，我决定为我的线框图添加一些颜色。我在选择颜色和如何使用它们方面遇到了一些困难。这个视频帮了我很大忙：

色彩理论

然后，在 Figma 中创建了一些变量来存储我的颜色以及我在设计中使用的一些尺寸和填充。这样做将使我的线框图在将来更容易修改。我使用了这个视频来学习如何使用变量：

Figma 中的变量

这个视频提供了一个很好的示例，展示了如何实现粘性滚动：

这个视频对展示如何在 Figma 中使用占位图像很有用。

感谢阅读本文！如果您有任何问题，请留下评论。 期待第三部分的日志！感谢您的评论！