☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
应手动扩展触控区域至44×44px：一、添加透明矩形层作为hit target；二、用auto layout设12px内边距；三、通过slot插入不可见触控槽；四、标注css变量供开发还原。
如果您在使用figma ai生成按钮后发现其可点击区域（touch target）过小，导致在移动端预览或开发交付时操作困难，则可能是由于ai未自动扩展交互热区、未遵循wcag 44×44px最小触控尺寸规范所致。以下是解决此问题的步骤：
一、手动扩展按钮容器并设置透明填充层
通过包裹一层不可见但具备响应能力的父容器，为原始按钮提供符合无障碍标准的触控范围，同时不改变视觉表现。
1、选中AI生成的按钮组件，在左侧图层面板中右键选择「Group Selection」或按Ctrl+G将其单独成组。
2、在该按钮组外新建一个矩形图层，尺寸设为44×44px（若按钮本身小于该值），位置居中对齐按钮中心点。
3、将该矩形的填充设为无色（None），描边设为无，不透明度保持100%，混合模式设为Normal。
4、在右侧属性栏中将该矩形的「Interactive」选项开启，并勾选「Hit Target Only」（仅作为触控目标）。
5、将该矩形图层拖入按钮组最底层，确保其层级低于所有可见元素且不遮挡视觉内容。
二、利用自动布局+内边距扩展热区
借助Figma自动布局的弹性约束机制，在不新增图层的前提下，通过padding控制逻辑热区大小，适用于已启用Auto Layout的按钮组件。
1、双击进入按钮组件内部，确认主容器已启用自动布局（右下角显示「Auto Layout」图标）。
2、在右侧属性栏中，将「Padding」值统一设为12px（当按钮内容高为20px时，20+12×2=44px）。
3、检查「Layout Mode」是否为Horizontal或Vertical，并确认子元素（文字、图标）的约束方式为「Left & Right」或「Center」。
4、在组件外部选中该按钮，查看右侧「Constraints」中是否将「Horizontal」设为「Left & Right」、「Vertical」设为「Top & Bottom」以维持热区稳定。
三、添加带透明Hit Area的Slot占位层
对于支持Slots的智能按钮组件，可通过插入专用触控槽位实现热区解耦，使视觉与交互区域完全分离，便于后续复用和开发映射。
1、在按钮组件内新建一个空画框（Frame），命名为「hit-area-slot」，尺寸固定为44×44px，锚点设为居中。
2、将该画框的「Fill」设为无，勾选「Clip Content」，并在属性栏底部点击「Convert to Slot」。
3、退出组件编辑，在实例上右键选择「Edit Instance」，将一个透明矩形拖入该Slot区域。
4、选中该透明矩形，在右侧属性栏中启用「Is Hit Target」开关，并关闭「Visible on Export」选项。
5、保存组件，所有实例将同步获得一致且不可见的触控扩展区。
四、通过CSS变量反向注入Touch Target（交付前校验）
在导出至开发者前，预先标注热区参数，确保前端实现时能准确还原触控范围，避免因缩放或响应式裁剪导致热区失效。
1、在按钮组件旁新建文本图层，输入内容：--touch-target: 44px;
2、将该文本图层命名为「dev-note-touch-target」，并设置字体大小为10px、颜色为#999、不透明度为60%。
3、在组件属性面板中，于「Description」字段填写："Touch target min size: 44×44px. Apply padding or ::before pseudo-element in CSS."
4、使用Figma Dev Mode打开该组件，确认右侧「CSS」面板中是否自动识别并显示对应变量提示。
