Figma有剪刀工具吗？如何实现裁剪功能？

Question

Figma 中没有传统设计软件中的“剪刀工具”，但可通过布尔运算和蒙版功能实现类似裁剪效果。常用方法是使用“Frame”或“Vector Network”结合“Masking”进行区域遮罩，或将图形转为路径后利用“Subtract”等布尔操作分割形状。此外，通过快捷键 Ctrl/Cmd + Enter 可快速应用蒙版。掌握这些技巧可高效完成元素裁剪与局部显示控制。

Answer 1

一、Figma中的裁剪机制：从基础认知到高级应用

Figma作为现代UI/UX设计的核心工具，摒弃了传统设计软件（如Illustrator）中的“剪刀工具”，转而采用更符合协作与矢量逻辑的布尔运算和蒙版技术来实现元素裁剪。这种设计理念不仅提升了设计系统的可维护性，也增强了组件间的复用能力。

1.1 蒙版（Masking）的基础实现方式

• 在Figma中，创建一个Frame或Vector Network作为容器。
• 将需要裁剪的内容（如图片、图形、文本）放入该容器内。
• 右键点击容器并选择“Create Mask”或使用快捷键 <kbd>Ctrl/Cmd + Enter</kbd> 快速应用蒙版。
• 被遮罩区域外的内容将不可见，实现视觉上的“裁剪”效果。
• 支持嵌套蒙版结构，适用于复杂界面布局。
• 蒙版对象本身可设置圆角、阴影等样式，不影响内部内容渲染。
• 可通过拖拽调整内部元素位置，实现动态可视区域控制。
• 导出时仅输出可见部分，提升资源优化效率。
• 适用于头像裁剪、轮播图遮罩、卡片溢出隐藏等场景。
• 支持与Auto Layout结合，响应式布局中表现优异。

1.2 布尔运算实现路径级裁剪

当需要对矢量形状进行精确切割时，Figma提供四种布尔操作：

操作类型	功能说明	适用场景
Union	合并多个形状为单一路径	图标整合、简化图层
Subtract	以前置形状裁剪后置形状	挖空效果、自定义剪裁轮廓
Intersect	保留重叠区域	交集提取、精准裁切
Exclude	去除重叠部分	镂空设计、负形创意

1.3 高级技巧：结合Vector Network进行自由裁剪

通过将图形转换为Vector Network（快捷键 B 进入钢笔模式），设计师可手动绘制裁剪路径：

1. 使用钢笔工具绘制闭合路径作为裁剪边界。
2. 选中目标图像与路径，执行“Mask with Shape”操作。
3. 利用节点编辑功能微调裁剪边缘曲率。
4. 结合布尔 Subtract 操作，实现非规则形状的局部移除。
5. 支持多段路径组合裁剪，适用于插画级精细处理。
6. 可保存为组件变体，便于团队复用标准裁剪模板。
7. 与变量（Variables）结合，实现条件化显示控制。
8. 适用于品牌视觉系统中定制化图形规范。
9. 在暗黑模式切换中用于控制光影区域显隐。
10. 支持通过API批量生成带蒙版的资产。

1.4 自动化流程与开发协同优势

Figma的裁剪机制天然适配前端实现逻辑，以下为典型工作流示意图：

// 示例：CSS 中对应蒙版的实现
.container {
  overflow: hidden;
  border-radius: 12px;
}
.image {
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}
  

graph TD A[原始图像] --> B{选择裁剪方式} B --> C[Frame + Mask] B --> D[Vector Path + Boolean] C --> E[快速布局调整] D --> F[高精度矢量控制] E --> G[交付开发] F --> G G --> H[前端使用overflow:hidden或clip-path实现]