🔹博主名称：_Doubletful大家好，欢迎来到Doubletful的博客🪢博主的GitHub： Go to git_hub💠移动应用开发专栏🔷路漫漫其修远兮，吾将上下而求索

---

Figma 是一款更偏向操作的软件，因此有关它的全部中序实战文章将用笔记的形式呈现，并且中序的所有笔记不分先后顺序，可以无障碍弹性阅读各功能，便于各位伙伴实操练习而非迷失在文字汪洋内。

前置知识

必须掌握的理论之——图层，对象和形状间的关系：
图层是设计的组织框架，对象是图层中的设计元素，形状是对象的一种具体类型。例如：当你绘制一个矩形时，创建的是一个形状对象，它在图层面板中会以一个形状图层的形式存在，并遵循整个文件的图层层级结构。

1.形状绘制工具

复制形状快捷键：鼠标选中形状后按 ctrl + D。

1.1.矩形工具

• 矩形快捷键：按 R + 鼠标点击并移动。
• 正方形快捷键：选中绘制矩形并按 shift + 鼠标点击并移动。
• 等比例缩放：选中对象后按 shift + 鼠标点击并移动。

使用鼠标拖动内部小圆点调整对象的圆角半径。如果在拖动的过程中按 shift 会以十的倍数缩放。

单独设置某一个角的圆角半径按 Alt + 拖动设置角的小圆点。

使用鼠标停留在对象外部的小方点旁后，拖动可以旋转对象，停留在对象外部的小方点上拖动可以调整尺寸。如果在拖动的过程中按 shift 会以十五度角的倍数进行旋转。

1.2.椭圆工具

• 椭圆快捷键：按 O + 鼠标点击并移动。
• 圆形快捷键：选中绘制椭圆并按 shift + 鼠标点击并移动。
• 等比例缩放：同上。

使用鼠标拖动内部最初的小圆点可以调整展开面积。

使用鼠标拖动中间的小圆点可以调整内环面积。

1.3.多边形工具

• 多边形工具没有快捷键，其他操作同上。

同样，拖动对象内部的小圆点调整对象的圆角半径。

拖动对象边缘上的小圆点调整边的数量，向上拖动加边，向下拖动减边。

1.4.星形工具

• 星形工具没有快捷键，其他操作同上。

拖动靠近边的小圆点调整圆角半径。

拖动在边上夹角中间的小圆点控制图形夹角。

拖动对象边缘顶点上的小圆点调整边数，上加下减。

1.5.线和箭头工具

• 线和箭头工具都没有快捷键，其他同上。

使用鼠标停留在小方点上斜向拖动可以旋转对象，横向拖动可以加长对象。

选中后按鼠标左键拖动能绘制，线和箭头不是一个闭合的形状，无法填充，可以设置颜色，其本质是描边。

2.形状属性参数设置

2.1.位置

2.1.1.设置形状的对齐关系

2.1.2.XY轴与旋转

这里展示的 XY 轴是相对位置，例如相对于画布或容器。下面的旋转，可以直接按角度旁边的图标调整形状的角度，旁边的三个按钮，第一个使图形顺时针旋转90度，第二个是水平镜像翻转，第三个是垂直镜像翻转。

2.2.布局 & 外观 & 填充

布局：修改宽和高，点击右侧的图标实现等比例缩放。
外观：右上角的眼睛图标控制图层的显示和隐藏，旁边的图标控制图层的混合模式(加深, 减淡, 柔光…)。中间偏左设置图形的透明度，中间偏右设置图形的圆角半径，点击最右侧的图标设置单个角的圆角半径。

点击右下角的图标调整圆角的平滑度(会产生非常细微的变化)，如果再仔细查看，会发现有一个标点 IOS，将滑块移动到这里时，当前的圆角平滑度就和 IOS 中的圆角平滑度一样了。
填充：能看到有很多内容，不重要的用到再介绍，先学习纯色和渐变填充。

纯色直接点击调色板设置就可以了，圆点表示当前颜色在调色板上的位置。

点击渐变板左右的颜色小方块设置渐变色值，拖动渐变线两端的端点调整渐变的位置。点击渐变板或渐变线上的位置新增渐变色。

一个图层上能添加多层颜色填充，例如现在就设置了两层颜色，第一层的不透明度是 20%，第二层的不透明度是 100%，就会形成图示所展示的茄子颜色，点击一层颜色填充右侧的减号删除该层，旁边的眼睛图标同样用于控制显示和隐藏。点击 Fill 最右侧的加号添加一层颜色填充。

2.3.描边

外轮廓(边缘蓝线)里中上效果展示图：

实线与虚线效果展示图：

抖动频率，幅度与平滑度效果展示图：

默认样式笔刷顺时针刷头朝向效果展示图：

下与自定义描边范围效果展示图：

上述提供了一些功能实现后的效果图，大家可以结合操作总览图依次学习描边工具中的一些设计操作。

3.布尔运算

布尔运算是一组用于将多个形状通过逻辑操作组合成复杂图形的功能，共有五种：合并，减去，相交，排除和扁平化。

合并：将选中的多个图形融合成一个大图形，重叠部分的边界会消失，只保留最外层的轮廓。按 Ctrl + 鼠标选择能单独调整合并后图形的尺寸和位置。
减去：用底层的图形减去顶层图形重叠的部分。相当于在底板上“挖洞”。
相交：只保留所有选中图形重叠相交的部分，其余部分全部删除。
排除：保留图形不重叠的部分，而重叠的部分会变成透明（镂空）。
扁平化：将多个选中的图形合并成一个单一的图层。与合并不同的是，扁平化会彻底消除内部所有的交叉线，变成纯粹的轮廓。

4.形状编辑和钢笔工具

选中形状后双击或按回车键打开形状编辑工具。

4.1.锚点的复制和删除

选中锚点后，按 Alt 键拖拽可以复制锚点。

删除锚点按 Delete 键，但你会发现这样操作后删除了锚点及其两侧的连接线，这使得图形变“开放”了，想要只删除锚点按 Shift + Delete 键。

4.2.形状编辑工具

移动（快捷键 V）：选中后可以去移动形状的锚点和边，在移动的过程中按 Shift 可以按照锚点或边初始位置的15度角的倍数方向移动。

弯曲（快捷键 Ctrl）：可以拖出一个手柄影响锚点两边的线，对直线段进行拖拽弯曲，使其变成平滑的曲线。按 Alt 可以只指拖拽一侧的手柄。

套索（快捷键 Q）：用于框选多个锚点进行批量编辑。



形状生成器：一个矢量形状工具，允许你通过简单的绘制和点击，将多个基础形状组合、拆分或删除，从而创造出复杂的自定义图形，功能如下：

• 合并区域：点击并拖拽鼠标，划过你想要合并的多个区域，松开后，这些被选中的区域就会融合成一个单一的图层。
• 减去区域：按 Alt 键后，单击你想删除的区域，即可将其从画布上移除。

上色（快捷键 Shift + B）：点击某一段具体的路径或区域，单独给这一小块区域填充颜色或渐变，也可以删除填充色，与形状生成器类似。

切割（快捷键 X）：用于切断当前的路径，把一条线分成两条，方法为选中锚点后拖拽，此时会发现线从锚点处断开了。

橡皮擦（快捷键 Shift + E）：可以擦除特定的锚点或线段。

4.3.钢笔工具

快捷键 P，通过控制锚点和手柄来决定线条的走向与弯曲程度。使用钢笔工具时，你实际上是在创建一个个锚点，而线段则是连接这些锚点的路径。
绘制直线：选中钢笔工具后，在画布上单击创建锚点，移动后再单击下一个位置，即可生成直线段。
绘制曲线：在放置锚点时，按住鼠标左键并拖拽，拉出手柄（或者叫贝塞尔控制柄）。拖拽的距离越远，曲线的弯曲程度越大。
钢笔工具还能去增删锚点，其操作在鼠标变成的钢笔图标上有提示（增+删-），增加就在线段上点击，删除只需要按 Alt 后选择要删除的锚点即可。
铅笔工具（快捷键 Shift + P）：选中并按住可以自由的在画布上绘制，使用 Move 双击后能自动延线生成锚点；快捷键 V 取消钢笔工具。

5.组、画框、蒙版

5.1.组：将多个图层装在一起的容器

可以对组内的所有图层实现批量操作，效果类似于多选。

持久化建组：选中建组图层后右键选择 Group Selection，快捷键 Ctrl + G。

在左侧边栏中能看到选中图层被装进组里了，如果想要把图层移出组，只需要在左边栏拖拽对应图层即可，移入图层同理；如果想将图层放在组在画布上的位置而不移入画布，在移动时按空格键。
解除持久化组：点击组后右键，在与建组相同的窗口中选择 Ungroup，快捷键是 Ctrl + Shift + G。

在上面介绍过这些功能的名称，具体在设置形状的对齐关系标题中，这些功能用于设置组内图层的布局，对齐的标准是组的边界。

竖条调整图层的间距，拖拽每个图层中间的小圆点能与其他图层交换位置。
注意：竖条能调整间距的前置条件是组中的各图层必须等间距。

之前在右边栏中没能介绍的设置——Auto layout（自动布局） 属性面板；这个面板用于让容器和内部元素实现自动排列和响应式尺寸。

5.2.画框：结构性的设计容器

画框是Figma设计体系的基石，它更像一个具有独立属性的“画板”或“窗口”。
创建画框有两种方式，分别是用快捷键按 F 或 A 鼠标拖拽，或选中放入画框的图层后，右键并点击：

将所选内容添加到画框，快捷键是 Ctrl + Alt + G。

此外，选择第一种方式创建画框按 F 或 A 后，你能在右边栏中看到一些厂商的手机，平板等其他设备对应版本的画框预设尺寸，可以自行选择。

画框的专属属性面板，设置图层距离画框的哪些边缘保持距离不变，一般用于响应式设计，比较常用。

5.2.1.画框和组的对比

画框很像组，所以提供一份画框和组的区别对比表格：

特性维度	画框	组
尺寸逻辑	独立控制，大小不随内容变化。	内容驱动，边界自动贴合内部所有元素。
布局能力	支持自动布局、布局网格、约束等功能。	不支持这些布局功能。
样式属性	拥有独立的填充、描边、圆角、效果等属性。	没有独立的样式属性，仅作为容器。
剪裁/滚动	可以剪裁越界内容，并支持原型中的滚动。	不能剪裁内容，内容总会完整显示。
原型交互	是创建可交互原型（如滚动、跳转）的基本单位。	通常不作为原型的交互单位。
快捷键	F 或 A	Ctrl + Shift + G

如何理解画框：设备的视图窗口，就像实际在设备中展示的那样。
如何理解组：便捷的临时编组工具，将多个图层捆绑在一起以便于操作。

5.3.蒙版：限制可见区域的显示窗口

蒙版会以某个图层作为显示区域，让其他图层在这个区域内显示。
创建蒙版与展示效果图：


这是右边栏中关于蒙版的专属设置项，以下是它们各自的作用：

• Alpha (use transparency) - 透明通道蒙版：
  • 工作原理：Figma 根据蒙版图层的像素透明度（Alpha 通道）来决定底层内容的显示与隐藏。
  • 效果表现：
    • 蒙版图层完全不透明的地方，底层的内容会完全显示。
    • 蒙版图层完全透明的地方，底层内容被完全隐藏。
    • 蒙版图层半透明的地方，底层内容也会呈现半透明状态。
  • 示例：
    
    选中作为显示窗口的图层，调整它的渐变填充属性中的透明度以设置。
• Vector (use shape outlines) - 矢量轮廓蒙版：
  • 工作原理：Figma 会忽略蒙版图层的透明度，只看它的几何路径(轮廓边界)。
  • 效果表现：
    • 只要是蒙版形状轮廓内部的区域，底层内容就会完全显示。
    • 轮廓外部的区域被完全隐藏。
  • 示例：
    
    仅按照作为显示窗口的图层的轮廓完全显示内容，不随透明度影响。
• Luminance (use brightness) - 亮度蒙版：
  • 工作原理：Figma 根据蒙版图层的亮度值来决定底层内容的可见度。
  • 效果表现：
    • 蒙版图层越白的地方，底层内容显示得越清晰。
    • 蒙版图层越黑的地方，底层内容越透明。
    • 蒙版图层是灰色的地方，底层内容呈现相应的半透明状态。
  • 示例：
    
    选中作为显示窗口的图层，通过填充色设置，颜色越白越完整，颜色越黑越透明。

本期就到这里，欢迎讨论，如果有错误欢迎指正补充，下期再见。

---

⚛️EL PSY CONGROO，十分感谢你的阅读

本期不确定：
该如何继续优化笔记的排版呢