1.5　Figma的“设计”面板

Figma工作界面右侧的“设计”面板是一个非常重要的面板，它提供了丰富的选项来调整对象或组件的样式效果、布局和行为，在该面板中允许设计师查看和设置所选择对象的各种属性。

1．“对齐”选项区

在Figma中打开素材文件“源文件/第1章/素材/15101.fig”，拖动鼠标同时选中多个图标元素，如图1-158所示。在右侧的“设计”面板顶部可以看到“对齐”选项区中的相关操作图标，如图1-159所示。

单击“对齐”选项区右侧的向下箭头图标，将显示隐藏的对齐功能操作图标，如图1-160所示。单击“上对齐”图标，可以将所选中的多个元素进行顶对齐，如图1-161所示。

在操作过程中，“整理”功能非常实用，单击“整理”图标 ，会自动对所选中的多个元素之间的间距进行均分，如图1-162所示。单击并拖动元素之间的红色短竖线，可以同时调整所选中元素之间的间距，如图1-163所示。

2．“基础”选项区

在设计区域中选择一个图形元素，如图1-164所示。在“设计”面板的“基础”选项区中可以对该元素的位置、尺寸、角度、圆角等相关属性进行设置，如图1-165所示。

每个属性的设置都可以直接在属性值上单击并输入需要设置的值，或者按住【Alt】键不放，拖动数值即可对属性值进行调整。

如果开启“宽度”和“高度”属性右侧的“约束比例”功能，则调整“宽度”和“高度”属性中的任意一个属性值，另一个属性值都会自动进行调整，从而保证比例缩放。单击“约束比例”图标 ，关闭“约束比例”功能，如图1-166所示，则可以分别调整“宽度”和“高度”的属性值，两个属性值互不影响。

单击“圆角半径”属性右侧的“独立圆角”图标 ，弹出“圆角半径”对话框，在该对话框中可以分别对元素不同角的圆角半径进行单独设置，如图1-167所示。

3．元素翻转操作

在Figma中并没有为用户提供元素翻转的操作选项，在实际的项目设计过程中，如果需要对元素进行翻转操作，可以通过快捷键的方式来实现。

选中需要进行翻转操作的元素，如图1-168所示。单击鼠标右键，在弹出的快捷菜单中选择“水平翻转”命令，或按【Shift+H】组合键，可以实现元素的水平翻转，如图1-169所示。单击鼠标右键，在弹出的快捷菜单中选择“垂直翻转”命令，或按【Shift+V】组合键，可以实现元素的垂直翻转，如图1-170所示。

4．“图层”选项区

Figma与Photoshop相似，都是通过图层来管理元素的。在“设计”面板的“图层”选项区中可以对图层的“混合模式”和“不透明度”选项进行设置。

执行“文件>导入图片”命令，弹出“打开”对话框，选择需要导入的图片素材，如图1-171所示。单击“打开”按钮，在设计区域的空白位置单击导入图片，调整图片到合适的大小和位置，如图1-172所示。在“图层”面板中自动为导入的图片创建一个图层，如图1-173所示。

选择刚导入的图片，在“设计”面板的“图层”选项区中可以对图层的相关选项进行设置，如图1-174所示。在“混合模式”下拉列表框中可以设置当前图层与下方图层的混合模式，如图1-175所示，例如，这里设置“混合模式”选项为“滤色”，效果如图1-176所示。

“混合模式”下拉列表框中的选项与Photoshop中图层混合模式的选项基本相似；“图层不透明度”选项用于控制当前图层的不透明度；“可见性”选项用于控制当前图层内容是否可见。

5．“填充”选项区

在Figma中打开素材文件“源文件/第1章/素材/15102.fig”，选中多边形，如图1-177所示。在“设计”面板的“填充”选项区中可以看到该图层的填充设置选项，如图1-178所示。

（1）纯色填充

选择“填充”选项区中的“填充”选项，弹出“填充”对话框，默认选中“纯色”图标，可以为元素设置纯色，如图1-179所示。

（2）渐变填充

单击“渐变”图标，显示渐变设置选项，默认为线性渐变，对渐变颜色进行设置，如图1-180所示。在图形上可以看到默认的线性渐变填充效果，如图1-181所示。

拖动渐变颜色起始点和终止点的白色小圆点，可以调整渐变颜色的填充角度和位置，如图1-182所示。拖动渐变颜色起始点和终止点的色标，可以调整渐变颜色的起始和终止位置，如图1-183所示。将光标移至渐变填充线上合适的位置并单击，即可在单击位置添加一个色标，如图1-184所示，用于添加渐变过渡颜色。

在弹出的“填充”对话框的“渐变类型”下拉列表框中选择“径向渐变”选项，设置渐变为径向渐变类型，设置渐变颜色，如图1-185所示。在图形上可以看到默认的径向渐变填充效果，如图1-186所示。拖动各控制点，可以调整径向渐变填充的效果，如图1-187所示。

在弹出的“填充”对话框的“渐变类型”下拉列表框中选择“角度渐变”选项，设置渐变为角度渐变类型，设置渐变颜色，如图1-188所示。在图形上可以看到默认的角度渐变填充效果，如图1-189所示。拖动各控制点，可以调整角度渐变填充的效果，如图1-190所示。

在弹出的“填充”对话框的“渐变类型”下拉列表框中选择“菱形”选项，设置渐变为菱形渐变类型，设置渐变颜色，如图1-191所示。在图形上可以看到默认的菱形渐变填充效果，如图1-192所示。拖动各控制点，可以调整菱形渐变填充的效果，如图1-193所示。

（3）图片填充

单击“填充”对话框中的“图片”图标，显示图片填充设置选项，如图1-194所示。单击图片预览区域，在弹出的“打开”对话框中选择需要使用的图片，如图1-195所示。单击“打开”按钮，即可使用所选择的图片进行填充，如图1-196所示。

（4）其他填充设置选项

完成“填充”对话框中渐变选项的设置后，关闭该窗口。单击“填充”选项区中的“添加”图标 ，可以添加一个填充，同样可以对该填充进行设置，如图1-197所示。如果需要删除某个填充效果，可以单击该填充效果右侧的“删除”图标 ，即可删除该填充效果。

如果希望把当前元素的填充设置创建为样式，可以单击“样式库”图标 ，弹出“组件库”对话框，如图1-198所示。单击“组件库”对话框中的“新建”图标 ，在弹出的对话框中输入填充样式名称和描述，如图1-199所示。

单击“创建样式”按钮，即可将当前元素的填充效果创建为填充样式，该填充样式会出现在“组件库”对话框中，如图1-200所示。如果需要为其他图形元素应用相同的填充效果，可以打开“组件库”对话框，选择相应的填充样式，即可为其应用相同的填充效果，如图1-201所示。

如果需要对填充样式进行修改，可以打开“组件库”对话框，单击填充样式名称右侧的“编辑样式”图标 ，弹出“编辑颜色样式”对话框，如图1-202所示。单击填充颜色，弹出“填充”对话框，可以对颜色进行重新设置，如图1-203所示。对填充样式进行修改后，应用该填充样式的元素都会统一进行填充效果的更新，如图1-204所示。

6．“描边”选项区

在设计区域中选择需要添加描边的元素，单击“设计”面板的“描边”选项区中的“添加”图标 ，即可为该元素添加默认的描边效果，如图1-205所示。在“设计”面板的“描边”选项区中显示相应的描边设置选项，如图1-206所示。

选择“描边”选项区中的“描边”选项，弹出“描边”对话框，默认选中“纯色”图标，可以为元素设置纯色描边，如图1-207所示。Figma中的元素描边设置与填充设置相同，支持纯色、渐变、图片和视频形式，设置选项也是相同的。

“描边位置”下拉列表框中包含内部、居中和外部3个选项，用于表示描边在元素边缘的位置。对“描边”选项区中的相关选项进行设置后，可以看到元素描边位置的效果，如图1-208所示。

单击“描边”选项区中的“高级描边设置”图标 ，弹出“高级描边”对话框，其中提供了高级描边设置选项，如图1-209所示。在“描边样式”下拉列表框中选择“虚线”选项，可以将描边设置为默认的虚线效果，如图1-210所示。在“高级描边”对话框中会显示虚线的相关设置选项，如图1-211所示。

7．“效果”选项区

在“设计”面板的“效果”选项区中，可以为所选中的元素添加阴影、模糊等各种效果，使元素的视觉表现效果更加美观。

选择需要添加效果的元素，如图1-212所示。单击“设计”面板的“效果”选项区中的“添加”图标 ，即可为该元素添加默认的投影效果，如图1-213所示。“设计”面板的“效果”选项区中显示相应的设置选项，如图1-214所示。

如果需要对所添加的效果进行设置，可以单击“效果设置”图标 ，弹出“效果设置”对话框，针对当前所添加的效果为用户提供相应的设置选项，如图1-215所示。例如，对投影效果的相关选项进行设置，可以看到元素投影的效果，如图1-216所示。

在“效果类型”下拉列表框中可以选择需要应用的效果，包括“内阴影”“投影”“图层模糊”和“背景模糊”，如图1-217所示。选择“内阴影”选项，可以从元素边缘向内实现阴影效果，如图1-218所示。选择“图层模糊”选项，可以使元素产生模糊的效果，如图1-219所示。

使用“背景模糊”效果能够轻松制作出类似磨玻璃的效果。使用“椭圆工具”在设计区域中绘制一个正圆形，设置正圆形的“填充”为30%的白色，如图1-220所示。选择刚绘制的半透明白色正圆形，在“效果”选项区中添加效果，在“效果类型”下拉列表框中选择“背景模糊”选项，可以看到白色半透明圆形下方背景模糊的效果，如图1-221所示。

8．“导出”选项区

通过“设计”面板中的“导出”选项区，可以轻松地将Figma设计区域中的任意元素进行导出设置。

在设计区域中选择需要导出的元素，如图1-222所示，单击“导出”选项区中的“添加”图标 ，显示相应的导出选项，如图1-223所示。

在“格式”下拉列表框中可以选择元素导出的图片格式，如图1-224所示。在“倍图”下拉列表框中可以根据该素材所适用的移动设备选择相应的倍图，如图1-225所示。在“后缀”文本框中可以输入该素材的后缀名称。

如果希望同时导出1倍图、2倍图和3倍图，则可以单击“导出”选项区右上角的“添加”图标，即可同时导出不同倍图的素材，如图1-226所示。

单击“导出”选项区右侧的“高级导出设置”图标 ，弹出“导出”对话框，可以选择导出选项的色彩配置文件，如图1-227所示。

在“导出”选项区中完成导出设置后，单击“导出”按钮，弹出“选择文件夹”对话框，选择导出文件的保存位置，如图1-228所示。单击“保存”按钮，即可完成素材的导出，如图1-229所示。