FIGMA 101教程系列
2023 年 10 月 5 日

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_颜色样式。