一、 Figma 中图片（位图）的应用逻辑 #
1. 位图本质与矢量填充 #
- Figma 本质上是一个矢量软件，它本身不产生位图（Bitmap），而是充当**“位图的搬运工”**。
- Figma 实现图片置入的逻辑是：使用一个矢量图形的轮廓（如一个矩形），然后通过填充（Fill）的方式将图片置入到该轮廓中。
- 因此，一个图片图层本质上与一个普通的纯色填充的矩形图层一模一样。唯一的区别在于右侧属性面板中的“填充”模式被设置为**“图片填充”**。
- 正因为其本质是矢量图形，用户可以对该图层进行相应的设置，比如拖拽形成圆角。
2. 图片的四种置入方法 #
四种将图片置入 Figma 的方法：
- 填充导入（填充模式）： 在填充（Fill）面板中，选择图片填充模式，然后选择从本地文件导入。
- 复制粘贴（Clipboard）： 复制一个图像后，直接在 Figma 中粘贴。
- 截图粘贴（推荐方式）： 使用截图工具（如 QQ 截图）截取区域后，将图像置入剪贴板，然后粘贴。
- 优势： 这种方式建议使用，因为它有助于缩小图像的质量和尺寸。在 99% 的情况下，UI 设计中不需要使用超大尺寸的原图。
- 直接拖拽： 直接将本地存储的图片文件拖拽到 Figma 页面中。
3. 粘贴到特定图形的逻辑 #
- 当用户复制一张图片，并在 Figma 中粘贴（
Cmd + V）时：- 如果页面上已经创建了一个空的矢量图形区域，图片会自动填充到这个矢量图形中。
- 如果用户选中了一个
Selection（如编组 Group 或 Frame），图片将不会填充，而是作为一个独立的元素置入到该编组的下方。
二、 图片的二次调整与填充模式 #
图片置入后通常需要进行二次调整，以确保其在容器内的显示效果。
用户可以通过调整右侧填充面板中的填充模式来控制图像在容器内的显示方式：
- Fill（完全填充）： 图像会被拉伸，完全填满容器。
- Fit（适应）： 图像会按原比例缩放，使其全部适应并显示在容器内。
- Crop（裁切）： 允许用户进入编辑模式，手动放大或缩小图像，并调整其位置，从而裁切出需要的区域。
- Tile（平铺）： 以原图尺寸进行平铺。
- 注意： 直接使用 Crop（裁切） 模式进行二次调整不够自由，操作起来不够顺手，因此通常建议使用蒙版来实现更精细和灵活的裁切。
三、 蒙版（Mask）功能详解 #
蒙版是 Figma 中实现自由裁切和隐藏内容的核心功能，它比 Crop 模式更常用。
1. 蒙版的原理和作用 #
- 原理： 蒙版通过一个底部的矢量图形作为视窗窗口（Window）。所有位于该矢量图形上方的、被包含的图层，将只能显示在这个矢量图形的轮廓区域内。
- 作用： 它能够通过特定的方法，将下级的内容（如图片、其他元素）进行隐藏或遮挡。
2. 蒙版的创建和操作 #
- 创建步骤：
- 选择一个矢量图形（作为蒙版窗口）和需要被遮挡或包含的元素（如图片、文本等）。
- 右键点击选择 “Use as a mask”（创建蒙版）。
- 快捷键为
Cmd / Ctrl + M。
- 结构变化： 蒙版创建后，Figma 会自动生成一个编组/文件夹。
- 作为蒙版的矢量图形会处于这个编组的最底部，并且该图层会变成**“蒙版图层”**。
- 被蒙版包含的图层会位于其上方，并在图层列表中显示一个向上的箭头，表示它们是蒙版内部的子图层。
3. 蒙版使用的关键管理技巧 #
- 创建编组的重要性： 在创建蒙版时，务必记得将作为蒙版的图形和所有被包含的元素一起创建为一个新的编组。
- 避免全局影响： 如果不创建编组，蒙版图层可能会将上面所有的图层都视为需要被蒙版作用的子图层。这将导致整个文件中的上方内容被意外隐藏。
- 优势： 使用蒙版可以在保持蒙版形状不变的情况下，自由地调整被包含元素（如图片）的位置，使其编辑操作更加灵活和方便。
最后一次修改于 2025-11-18