品牌型号：联想Yoga 14Sitl

系统：Windows 10 64位专业版

软件版本：Figma入门版

在Figma里做UI设计特别顺手，可以实时看到界面效果，还能轻松添加各种交互动效。把描边转成形状后，就像捏橡皮泥一样，可以自由调整每个细节，想怎么改就怎么改，特别适合做那些需要精细打磨的图标。下面就为大家介绍如何在Figma上设计UI，Figma怎么让描边变成形状的相关内容。

一、如何在Figma上设计UI

在Figma上进行UI设计，可以实现从页面规划到组件设计到原型链接的全流程设计。接下来以绘制一个APP的启动页面为例，向大家介绍如何在Figma上设计UI。

1、创建框架。我们在制作任何UI之前都要先创建框架，框架其实就是画布。虽然不在画布里，元素也能够绘制，但在后续的使用流程中容易出现问题。对于APP界面来说，Figma提供了多种预设好的框架尺寸，先在工具栏里切换为画框工具，然后把右边的面板切换到原型模式，这样就能看到各种手机尺寸了。图1中使用的是iPhone 16的画布。

2、制作页面元素。常见的页面元素有文字、图标、按钮等，对于这些元素我们可以在Figma中直接绘制，或者在资源库中找到合适的直接使用，也可以导入外部下载好的资源进行使用。在实际的项目制作中，一般是这三种方式同时运用的。对于启动页的UI制作，我们一共绘制三个元素。

①创建一个宽212*高67的矩形，选用绿色填充，把四个角都调成22像素的圆角。用白色文字写上【启动】。注意调整好文字大小和位置，把文字和矩形的中心对齐。这样就制作了启动按钮。

②接下来从电脑里选一张插画素材导入，把它放在页面顶部位置。

③用文字工具打上【识别植物】，将字号设置为40，起到标识APP核心价值的作用。

3、界面排列。同时选中三个元素进行居中对齐。这样引导页就制作完成了。其他UI界面的制作也是类似的流程。

二、Figma怎么让描边变成形状

在设计里，有时候我们需要把对象的描边变成可以编辑的形状轮廓，这样就能更精细地调整。在Figma里将描边变成形状是简单的，通过以下三个步骤就可以达到。

1、绘制图形。要设置描边，首先得画个图形。这里我们用直线工具画一条线。线宽设成15，颜色选黑色。

2、设置描边。线创建好后，默认情况下，我们可以在右侧的设计面板里对描边进行调整，比如改颜色、改粗细。还可以双击这条线进入编辑模式，可以看到线上出现了左右两个圆点，拖拽圆点我们可以改变线的长短和方向。

3、描边变成形状。在直线上右击，找到轮廓化描边选项，点一下，描边就会变成一个可以编辑的形状了。

变成形状后，我们再次双击进入线的编辑模式，可以看到线的四周都出现了可编辑的圆点，变多的圆点让我们对线的控制更加精细，线变成了路径后，我们可以拖动这些点，轻松改变线条的形状。

以上就是如何在Figma上设计UI，Figma怎么让描边变成形状的相关内容。用Figma做UI设计可以快速搭建界面，实时看到效果，还能轻松调整布局和样式。而描边转成形状就能自由修改图形的每个细节，做精细的设计调整特别方便。