一、 位图与失量图的本质区别 #
学习 Figma 必须理解失量图形的原理，包括图标设计和导出切图等操作都需应用相关知识。
1. 位图（Bitmap / 点阵图） #
- 记录原理： 位图记录像素点的色彩，并通过拼凑这些像素点来呈现最终图形。
- 图像特性： 位图的边缘不可能过渡得特别平缓，显示内容时会产生强烈的锯齿性（句齿性）。
- 局限性： 位图存在数据量固定的局限性。如果图像以 100x100 像素记录，放大到 1000x1000 时无法正常显示（像素感很强），因为原始数据量只有那么多。
2. 失量图（Vector Graphics） #
- 记录原理： 失量图形使用数学公式的方法去描述图像，例如告知系统某处有一个圆、一个正方形或一个三角形。
- 渲染优势： 系统在渲染失量图形时，会按照指定画部和比例进行渲染，显示出最适用于当前屏幕和分辨率的图形。
- 核心优势： 失量图形可以进行无损放大和缩小（无损放大跟缩小），因为它们都是基于公式和失量的数字内容。
- 应用范围： 失量图形一般适用于显示相对简单的图像，例如插画或图标。它无法应用于真正的摄影图或非常复杂的其他图形。
二、 Figma 对位图的处理逻辑与性能影响 #
- Figma 的定位： Figma 是一个失量绘图工具。
- 位图导入： Figma 可以导入位图，但不能在位图中进行一些复杂的编辑。
- 性能警示： 从外部导入的图片数据量是固定的，并且会被融入到 Figma 本身的文件的内部里面去。
- 如果引入大量大图（如摄影源图），文件体积可能会高达几百兆以上。
- 加载包含位图的页面会非常慢，因为系统加载的是位图，而非简单的失量代码。
- 位图会不断增大电脑的整体负荷。
三、 失量图形的构成：点、线、面 #
失量图形是由点、线、面三者混合构成的。
- 点（Points/毛点）： 矩形的角是点。线段由毛点之间形成。
- 线段（Lines）： 点和点之间的区域是线段。
- 面（Faces）： 中间被填充的区域是面。
- 贝塞尔曲线（Bézier Curve）： 通过控制毛点的控制杆来调节曲线。线段是直线还是弧线，正是由毛点的控制杆决定的。
1. 路经类型 #
失量图形会形成两种类型的路径：
- 闭合路径（Closed Path）： 路径的首尾必须相连，形成一个完整的闭环。
- 非闭合路径（Unclosed Path）： 即线段。只要首尾没有相连，它就不是一个闭合路径。
四、 失量图形的属性与系统认知 #
1. 属性与图形本身 #
- 边缘是核心： 对于系统来说，失量图形的边缘/轮廓才是真正的失量图形。
- 填充与描边： 中间的填充（面）和描边（线段的控制）是额外的属性效果或装饰。它们不是图形本身。
2. 轮廓化描边操作（Outline Stroke） #
- 操作目的： 如果用户添加了一个很粗的描边，可以使用右键操作 Outline Stroke (outlinest)。
- 功能： 该操作会把这个描边创建成一个独立的失量图形。
- 应用重要性： 在进行图标绘制等特定操作时，理解填充和描边只是属性效果而非真实图形的概念，非常重要，可以避免很多错误。
五、 失量图形的编辑模式与显示工具 #
1. 编辑模式的切换 #
- 进入编辑模式： 要修改失量图形，必须双击进入失量编辑模式。
- 退出模式： 按 Esc 键可以退出编辑状态。通常需要按两次 Esc 才能完全退出到外部的排版模式。
2. 像素级别的显示工具 #
Figma 提供了用于观察像素和渲染状态的工具：
- Pixel Preview (像素预览)： 开启后，在放大时，会将边缘以像素点正常渲染模式显示出来，让用户看到边缘的虚化（锯齿）。这有助于设计师在绘制精细的图标时，观察它在真实显示环境中的状态。
- Pixel Grid (像素网格)： 开启后，画布上会显示代表像素点的网格（点正）。所有的颜色都是基于这些像素点进行着色。
- 边缘平滑： 边缘的圆滑过渡是通过**指向素渲染（sle pixel）**技术实现的。该技术在边缘填入不同但相似的颜色，让用户感觉过渡比较圆滑。
最后一次修改于 2025-11-18