1.4　使用Figma工具

Figma是一款功能强大的在线UI设计工具，它提供了丰富的设计工具和功能，本节将向读者介绍Figma工具栏中常用工具的使用方法和使用技巧，使读者掌握Figma中工具的使用。

1.4.1　移动工具和缩放工具

Figma中的“移动”工具用于移动选定的元素。单击工具栏中的“移动”工具图标 ，或按快捷键【V】，在画布中单击并拖动需要移动的元素，即可移动元素的位置。

1．复制和调整元素

如果需要对元素进行复制操作，可以按住【Alt】键不放，使用“移动”工具拖动需要复制的元素，即可对该元素进行复制，如图1-46所示。同时按住【Alt+Shift】组合键不放，使用“移动”工具拖动需要复制的元素，可以将所复制的元素保持在水平或垂直方向上，如图1-47所示。

在Figma中还可以进行重复操作，方便用户快速制作相同的具有规律的元素。完成对象的一次复制操作之后，按【Ctrl+D】组合键，可以快速执行上一次的复制对象操作，如图1-48所示。

使用“移动”工具在画布中单击矩形元素，可以看到在矩形的4个角上分别有一个空心圆点，如图1-49所示。使用“移动工具”拖动空心圆点，可以修改矩形的圆角半径大小，如图1-50所示。如果只需要修改其中一个圆角半径大小，可以按住【Alt】键不放，再使用“移动”工具拖动空心圆点，即可只修改该圆角半径的大小，其他的圆角半径不受影响，如图1-51所示。

2．使用“整理”功能

如果在项目制作过程中，出现多个元素间距不统一的情况，框选多个需要统一间距的元素，在选框的右下角出现“整理”图标 ，如图1-52所示。单击该图标，可以迅速将所选中元素的间距调整为统一的间距大小，如图1-53所示。

单击“整理”图标后，在元素与元素之间会显示红色的短竖线，单击并按住此处进行拖动，可以同时调整所选中元素之间的间距，如图1-54所示。如果需要调整对象的排列顺序，只需要在元素的红色圆圈处单击并拖动鼠标，即可快速调整元素的排列位置，如图1-55所示。

3．缩放元素

使用“移动”工具还可以对元素进行缩放操作，选中需要进行缩放操作的对象，将光标移至4个角的调整锚点上拖动鼠标，如图1-56所示，即可对元素进行缩放处理。在拖动鼠标的过程中，按住【Shift】键，即可进行等比例缩放处理。

但是如果缩放的元素是一个具有圆角半径值的对象时，使用“移动工具”对其进行缩放的过程中其圆角半径值会保持不变，这就导致如果元素缩小后会改变其形状，如图1-57所示。

针对这种情况，可以使用“缩放”工具来对元素进行缩放操作。单击工具栏中的“移动”工具右侧的向下箭头，在隐藏工具中选择“缩放”工具，如图1-58所示。将光标移至画布中所选中元素的任意一个调整锚点上并拖动鼠标，如图1-59所示，即可对元素进行等比例缩放。如果缩放的元素具有圆角半径值，则在缩放操作过程中，其圆角值的大小也会同时进行调整，如图1-60所示。

使用“缩放”工具，将光标移至所选择元素4个角的调整锚点外侧，当光标变为如图1-61所示的形状时，拖动鼠标可以对元素进行旋转操作，如图1-62所示。

1.4.2　形状工具

在Figma中为用户提供了绘制常见形状的多种形状工具，包括“矩形”“直线”“箭头”“椭圆”“多边形”“星形”等，如图1-63所示。

1．矩形工具

使用“矩形”工具，在设计区域中拖动光标即可绘制一个矩形，如图1-64所示。在拖动光标绘制矩形的过程中按住【Shift】键不放，可以绘制出一个正方形，如图1-65所示。

完成矩形的绘制后，使用“移动”工具移至刚绘制的矩形上方，可以看到矩形4个角的圆角控制点，如图1-66所示。单击并拖动任意一个圆角控制点，即可对该矩形4个角的圆角半径同时进行调整，如图1-67所示。按住【Alt】键不放并拖动某一个圆角控制点，即可对该圆角进行单独调整，如图1-68所示。

如果需要进入形状图形的编辑模式，可以在选中形状图形后，单击工具栏中间的“编辑对象”图标 ，或者双击需要编辑的形状图形，即可进入该形状图形的编辑模式，如图1-69所示。进入编辑模式后，可以选择图形的任意锚点进行调整，如图1-70所示。双击设计区域的空白位置，即可退出编辑模式。

2．直线工具

使用“直线”工具，在设计区域中拖动光标即可绘制一条直线，如图1-71所示。完成直线的绘制后，在“设计”面板的“描边”选项区中可以对直线的相关选项进行设置。例如，修改“描边粗细”选项，可以看到直线的效果，如图1-72所示。

在“起始点”和“结束点”下拉列表框中可以选择直线起始点和结束点的样式效果，如图1-73所示。完成“起始点”和“结束点”样式设置，效果如图1-74所示。

单击“高级描边设置”图标 ，打开“高级描边”设置选项，如图1-75所示。在“描边样式”下拉列表框中选择“虚线”选项，可以将所绘制的直线设置为虚线，并且可以对虚线的效果进行设置，如图1-76所示。

3．箭头工具

使用“箭头”工具，在设计区域中拖动光标即可绘制一条在结束点有箭头形状的直线，如图1-77所示。在“设计”面板的“描边”选项区中的相关设置选项与“直线”工具相同，如图1-78所示。

4．椭圆工具

使用“椭圆”工具，在设计区域中拖动光标即可绘制一个椭圆形，如图1-79所示。在拖动光标绘制椭圆形的过程中按住【Shift】键不放，可以绘制出一个正圆形，如图1-80所示。使用“移动”工具移至刚绘制的正圆形上方，可以看到一个控制点，拖动该控制点，可以将正圆形处理为饼状图形，如图1-81所示。

5．多边形工具

使用“多边形”工具，在设计区域中拖动光标即可绘制一个三角形，如图1-82所示。在拖动光标绘制三角形的过程中按住【Shift】键不放，可以绘制出一个等边三角形，如图1-83所示。

使用“移动”工具移至刚绘制的三角形上方，可以看到两个控制点，如图1-84所示。拖动顶部控制点，可以调整三角形的圆角半径大小，如图1-85所示。拖动右下角控制点，可以增加多边形的边数，如图1-86所示。

6．星形工具

使用“星形”工具，按住【Shift】键不放，在设计区域中拖动光标即可绘制一个正五角星形，如图1-87所示。使用“移动”工具移至刚绘制的五角星形上方，可以看到3个控制点，如图1-88所示。

拖动顶部控制点，可以调整五角星形的圆角半径大小，如图1-89所示。拖动中间的控制点，可以调整五角星形的内陷角度大小，如图1-90所示。拖动右侧的控制点，可以增加星形的角数量，如图1-91所示。

7．导入图片/视频

在形状工具组的下方有一个“导入图片/视频”选项，使用该选项可以在设计文档中导入图片或视频素材，并且可以将图片或视频素材放置到所绘制的形状图形中，从而使图片或视频素材表现出不同的形状效果。

选择形状工具组中的“导入图片/视频”选项，弹出“打开”对话框，选择需要导入的图片或视频素材，如图1-92所示，单击“打开”按钮，在Figma设计区域的空白处单击，即可导入所选择的图片或视频素材，如图1-93所示。

导入到Figma中的图片或视频素材默认显示为矩形，如果需要素材显示为特殊的形状效果，可以使用蒙版的方式来实现。

绘制一个形状图形，例如这里绘制一个正圆形，如图1-94所示。在“图层”面板中拖动调整正圆形的叠放顺序，将其放置在图片或视频素材的下方，同时选中正圆形和素材对象，如图1-95所示。单击工具栏中间的“设为蒙版”按钮 ，即可创建蒙版，素材对象将显示为正圆形效果，如图1-96所示。

除了可以使用蒙版的方式得到特殊形状的图片或视频素材，还可以在导入图片或视频素材时直接将其导入到已经绘制好的图形中，从而表现出特殊的素材效果。

选择形状工具组中的“导入图片/视频”选项，弹出“打开”对话框，选择需要导入的图片或视频素材，如图1-97所示，单击“打开”按钮，将光标移至需要放置该素材对象的图形上并单击，即可将所选择的图片或视频素材直接放置到相应的形状中，如图1-98所示。

1.4.3　钢笔工具

Figma中的“钢笔”工具与Adobe XD、Sketch中的“钢笔”工具非常相似，使用“钢笔”工具可以绘制出不同形状的图形和路径。

单击工具栏中的“钢笔”工具按钮 ，在设计区域中单击即可创建一个锚点，将光标移至下一处位置并单击，两个锚点会连接成一条直线路径，如图1-99所示。在其他位置单击可以继续绘制直线，如图1-100所示。

如果需要完成直线路径的绘制，可以按【Esc】键，即可完成当前路径的绘制。

使用“钢笔”工具不仅能够方便绘制直线路径，还可以绘制出曲线路径。

使用“钢笔”工具在设计区域中单击创建一个锚点，将光标移至下一个需要创建锚点的位置，如图1-101所示。单击并拖动鼠标创建一个平滑锚点，两个锚点之间即可创建出曲线路径，如图1-102所示。使用相同的方法，可以继续创建平滑锚点，绘制出曲线路径，如图1-103所示。如果需要完成曲线路径的绘制，可以按【Esc】键。

直线路径上的锚点称为转角锚点，曲线路径上的锚点称为平滑锚点，这两种锚点类型是可以相互转换的。使用“钢笔”工具，将光标移至转角锚点上，如图1-104所示，按住【Ctrl】键并单击该转角锚点，即可将其转换为平滑锚点，如图1-105所示。按住【Ctrl】键并单击平滑锚点，同样可以将其转换为转角锚点。

根据绘制图形的需要，可以在路径上添加或者删除锚点，使绘制的路径更加平滑美观。使用“钢笔”工具，将光标移至路径上需要添加锚点的位置，如图1-106所示，单击即可在当前位置添加一个锚点，如图1-107所示。

如果需要调整锚点的位置，可以使用“移动”工具单击选中需要调整的锚点，如图1-108所示。拖动锚点即可调整该锚点的位置，如图1-109所示，从而改变路径的形状。

如果需要删除某个锚点，可以使用“钢笔”工具，将光标移至需要删除的锚点上方，如图1-110所示，按住【Alt】键并单击锚点，即可将该锚点删除，如图1-111所示。

使用“钢笔”工具绘制的是一个闭合路径，默认情况下，闭合路径只有锚边没有填充，如图1-112所示。如果需要为其填充颜色，可以使用“颜料桶”工具 ，将光标移至需要填充颜色的区域，如图1-113所示。单击即可在闭合的路径区域中填充颜色，可以在“设计”面板中修改填充颜色的值，效果如图1-114所示。

如果需要删除封闭区域中的填充颜色，可以使用“颜料桶”工具在封闭区域的填充区域单击，即可删除该封闭区域的填充颜色。

1.4.4　文本工具

在Figma中输入文字与在其他设计软件中输入文字相同，输入的文字分为两种类型，分别是点文字和段落文字。

1．输入文字

点文字是一个水平文本行，在处理标题等字数较少的文字时，可以通过点文字来完成。单击工具栏中的“文本”工具按钮 ，在设计区域中单击设置插入点，输入文字，如图1-115所示。单击其他任意工具，可以完成文字的输入，在“图层”面板中会自动生成一个文字图层，如图1-116所示。

当需要输入大量的文字内容时，可将文字以段落的形式进行输入。输入段落文字时，文字会基于文本框的大小自动换行。用户可以根据需要自由调整文本框的大小，使文字在调整后的文本框中重新排列。

单击工具栏中的“文本”工具按钮 ，在设计区域中单击并拖动鼠标绘制一个文本框，如图1-117所示。在文本框中输入相应的文字，如图1-118所示。单击其他任意工具，可以完成文字的输入，在“图层”面板中会自动生成一个文字图层。

2．设置文字属性

无论是点文字还是段落文字，完成文本的输入后，都可以在“设计”面板的“文本”选项区中对文字的字体、样式、字体大小、行高、字距、对齐方式等属性进行设置，如图1-119所示。单击“文本”选项区右下角的“文本设置”图标 ，可以显示出更多的文本设置选项，如图1-120所示。

“文本”选项区中的大多数设置选项都与其他设计软件中的文字设置选项相同，下面对一些特殊的文字设置选项进行介绍。

复制/粘贴：选择文字，单击“复制/粘贴”图标 ，在打开的下拉菜单中可以选择需要执行的命令，如图1-121所示。选择“复制字体属性”命令，可以复制所选择文字的字体属性；选择“复制字体名”命令，可以复制所选择文字的字体名称。复制了相应文字的字体属性之后，选择“粘贴字体”命令，可以将所复制文字的字体属性应用到当前所选择的文字上；选择“粘贴字体、字重”命令，可以将所复制文字的字体和字重属性应用到当前所选择的文字上；选择“粘贴字体、字重、大小”命令，可以将所复制文字的字体、字重和字体大小属性应用到当前所选择的文字上。

除了可以使用“复制/粘贴”下拉菜单中的命令来实现文字属性的复制和选择性粘贴，还可以在需要复制的文字上单击鼠标右键，在弹出的快捷菜单中的“复制/粘贴为”子菜单中，同样提供了相应的文字复制命令，如图1-122所示。

字体搜索：单击“字体搜索”图标 ，打开“字体搜索”下拉列表框，如图1-123所示。输入字体名称，即可快速找到需要使用的字体，单击即可为所选择的文字应用该字体，如图1-124所示。

文本样式：单击“文本样式”图标 ，弹出“文本样式”对话框，在该对话框中显示了已经创建的文本样式列表，如图1-125所示。如果需要将当前所选择的文字属性创建为文本样式，可以单击该对话框中的“创建样式”图标 ，弹出“创建新的文本样式”对话框，输入样式名称和描述，如图1-126所示，单击“创建样式”按钮，即可创建文本样式。

如果需要为文字应用文本样式，可以选择文字，如图1-127所示，单击“文本样式”图标 ，在弹出的“文本样式”对话框中选择需要应用的文本样式名称即可，如图1-128所示。如果需要取消文本样式的应用，可以单击“设计”面板中文本样式名称右侧的“分离样式”图标 ，如图1-129所示。

段落间距：该选项用于设置文字段落之间的间距，可以直接单击输入相应的数值，也可以按住【Alt】键在数值上左右拖动来调整段落间距，如图1-130所示。

调整大小：在Figma中无论是点文字还是段落文字，都是包含在文本框中的，“调整大小”选项中的3种控制图标主要是对文本框进行设置的。单击“自动宽度”图标 ，所选择文本框的宽度会自动适应文本框中所包含文本的宽度；单击“自动高度”图标 ，所选择文本框的高度会自动适应文本框中所包含文本的高度；单击“固定大小”图标 ，所选择文本框将设置为固定大小，当调整文本框的宽度时，文本框中所包含的文本会自动进行换行。

水平对齐方式：当文本框的宽度大于所包含文字内容的宽度时，可以通过“水平对齐方式”选项中的控制图标来控制文字内容在文本框中的水平位置。单击“左对齐”图标 ，文字内容在文本框中居左对齐，如图1-131所示；单击“居中对齐”图标 ，文字内容在文本框中居中对齐，如图1-132所示；单击“右对齐”图标 ，文字内容在文本框中居右对齐，如图1-133所示。

垂直对齐方式：当文本框的高度大于所包含文字内容的高度时，可以通过“垂直对齐方式”选项中的控制图标来控制文字内容在文本框中的垂直位置。单击“上对齐”图标 ，文字内容在文本框中垂直居顶对齐，如图1-134所示；单击“垂直居中”图标 ，文字内容在文本框中垂直居中对齐，如图1-135所示；单击“下对齐”图标 ，文字内容在文本框中垂直居底对齐，如图1-136所示。

3．设置文字链接

在Figma中除了可以对文字的相关属性进行设置，还可以为文字设置链接地址。选择需要设置链接地址的文字，单击工具栏中间的“创建链接”按钮 ，在文字上方显示链接地址文本框，如图1-137所示。在文本框中输入完整的URL链接地址，如图1-138所示，即可完成文字链接地址的设置。

如果需要修改为文字所设置的链接地址，可以将光标移至文字上方，单击文字链接地址右侧的“编辑”文字，如图1-139所示，即可对链接地址进行修改。如果单击链接地址右侧的“断开链接”图标，如图1-140所示，即可删除文字的链接地址。

1.4.5　对象的编组操作

在许多设计软件中都有编组这个概念，主要作用是对多个元素同时进行调整。在Figma中同样具有编组功能，本节将对Figma中的编组功能进行介绍。

在Figma中打开素材文件“源文件/第1章/素材/14501.fig”，效果如图1-141所示。使用“选择”工具框选多个需要编组的对象，如图1-142所示。单击鼠标右键，在弹出的快捷菜单中选择“编组所选项”命令或按【Ctrl+G】组合键，如图1-143所示，即可将所选中的多个对象编组。

将多个对象编组后，在“图层”面板中可以看到编组的对象，如图1-144所示。可以对编组中的对象同时进行调整和设置，如图1-145所示。如果需要对编组中的某个对象进行单独调整，可以双击该对象进入其编辑状态，即可对该对象进行单独调整。

1.4.6　使用画框

Figma中的画框（Frame）是一个非常重要的概念，它相当于一个容器，用于组织和管理设计元素。用户可以将画框看作是一个个独立的画布或页面，用于承载和展示设计内容。

单击工具栏中的“画框”工具按钮 ，在设计区域中单击，可以创建一个尺寸大小为100×100、填充颜色为白色的画框，如图1-146所示。也可以使用“画框”工具在设计区域中单击并拖动鼠标，即可创建一个任意尺寸大小的画框，如图1-147所示。完成画框的绘制后，在“图层”面板中会自动创建一个画框对象，如图1-148所示。

选择所绘制的画框对象，在“设计”面板的“类型”下拉列表框中为用户提供了多种预设的设计尺寸，如图1-149所示，方便用户快捷创建指定尺寸大小的画框，如图1-150所示。

除了可以使用“画框”工具创建空白的画框，还可以在已有对象的基础上创建画框。使用“选择”工具框选多个需要创建画框的对象，如图1-151所示。单击鼠标右键，在弹出的快捷菜单中选择“添加画框”命令或按【Ctrl+Alt+G】组合键，如图1-152所示，可以为所选中的多个对象创建画框。

将多个对象创建画框后，在“图层”面板中可以看到画框的对象，如图1-153所示。在Figma中，画框与组是可以相互转换的，选中相应的画框，在“设计”面板的“类型”下拉列表框中可以选择“分组”选项，如图1-154所示，即可将画框对象转换为分组对象。

当用户对画框的大小进行调整时，如图1-155所示，在“设计”面板中选择“裁剪内容”复选框，如图1-156所示，则可以对超出画框范围的内容进行裁剪隐藏，如图1-157所示。