应调整图层堆叠顺序并锁定顶层容器、启用Ignore Underlying属性、使用Auto Layout包裹并设置Overflow Hidden。具体包括:将顶层容器拖至图层列表最上方并锁定;为其添加极低透明度填充以拦截点击;勾选Ignore underlying layers且不设跳转;转换为Auto Layout并将Overflow设为Hidden,确保无内容溢出。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在Figma中构建了多层嵌套容器(例如模态框覆盖在卡片列表之上),但点击上层元素时底层可交互区域仍被触发,说明发生了点击透传现象。Figma本身不运行真实事件系统,但在原型预览(Present)模式下,其交互模拟依赖图层可见性、堆叠顺序与显式配置。以下是解决该问题的步骤:
一、调整图层堆叠顺序并锁定底层容器
图层在Z轴上的前后关系直接影响原型预览中交互热点的捕获优先级。将需响应点击的顶层容器置于图层列表最上方,并确保其覆盖区域无透明空洞,可自然拦截对下方图层的点击穿透。
1、在左侧面板图层列表中,拖拽目标顶层容器(如弹窗组件)至所有相关底层画板或容器图层的上方。
2、选中该顶层容器,在右侧面板属性区勾选Lock,防止误操作导致位置偏移而暴露底层热区。
3、检查该容器内部是否含透明背景或未填充区域;如有,为其添加纯色填充(如#FFFFFF01)或设置Fill opacity = 0.01%,维持视觉不可见但具备点击捕获能力。
二、启用Ignore Underlying属性
Figma为组件实例提供Ignore Underlying开关,启用后该实例在原型预览中将完全屏蔽其下方所有图层的交互响应,是专为遮罩层、弹窗背板等场景设计的防穿透机制。
1、选中需作为拦截层的组件实例(例如模态框外层遮罩矩形或整个Modal组件实例)。
2、在右侧面板底部找到Prototype区域,展开该图层的交互配置项。
3、勾选Ignore underlying layers复选框。
4、确认该图层未配置任何Destination连接(即不设跳转目标),否则将同时触发跳转与拦截,行为不可控。
三、使用Auto Layout包裹并设置溢出隐藏
当嵌套容器内容动态伸缩(如展开列表、加载更多)时,若父容器未约束尺寸或未裁剪溢出,可能造成视觉外延区域意外接收点击。通过Auto Layout+Overflow Hidden组合,可物理截断穿透路径。
1、选中最外层需拦截的容器图层,右键选择Convert to Auto Layout。
2、在右侧面板Auto Layout区域,将Overflow下拉菜单设为Hidden。
3、手动调整该容器宽高为固定值(如宽度=100%,高度=600px),或绑定至画板尺寸,确保其边界明确闭合。
4、检查子图层是否超出该容器边界:若出现红色溢出提示线,需收缩内容或调整padding,确保无像素溢出。


















