FIGMA 101教程系列

一个实践性的系列，帮助你入门这个强大的设计工具。

在这个教程中，我将向你展示如何在Figma中创建一个新的“卡片组件”，这样你就可以看到开始构建自己的组件有多么容易，以及如何使用强大但有时令人困惑的功能，比如Figma中的“自动布局”。

就像我在之前的教程中提到的，最好是从小事做起，然后逐渐扩大规模，对吗？

在下面的Figma文件中，还包含一个“迷你迷你设计系统”，供你玩耍，并对Figma有一个初步的了解。 在Figma中创建设计系统（以及如何将变体应用于某些组件）。

快速注意事项：在此教程中，你可以下载所需的Figma文件 (opens new window)。

（另一个）快速注意事项：如果你更喜欢观看下面的视频（作为我为Figma设计系统的高级版_Cabana_的一部分），也可以点击 这里 (opens new window)。

让我们开始构建我们的组件。

好的，我们开始吧。

按下F键选择_Frame_工具，并绘制一个约400像素宽、440像素高的框架。

你可以通过检查器中的调整大小来调整尺寸。

给它一个10的_corner-radius_。

然后在检查器中的_Fill_面板中，点击_Style_图标并选择_White_颜色样式。