☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
需将ai生成内容与手动配置的auto layout深度结合：一、创建600px固定宽度frame并用ai生成模板；二、包裹ai内容为vertical auto layout并设填充与间距；三、正文文本启用hug contents+wrap in frame实现换行；四、按钮转组件并设stretch约束；五、新增375px frame复用结构并微调字号与内边距。
如果您希望在figma中借助ai能力高效产出适配多端的响应式邮件模板，同时确保关键区域保持固定宽度、主体内容具备弹性伸缩能力，则需将ai生成内容与手动配置的auto layout结构深度结合。以下是实现该目标的具体操作路径：
一、创建带固定宽度的外层Frame并启用AI生成内容
邮件模板需在桌面端维持视觉一致性，因此最外层容器必须设定为固定宽度（如600px），这是多数邮件客户端（Outlook、Gmail Web）兼容的安全宽度。此Frame作为AI提示词作用域的边界，可引导Figma AI生成严格约束在此尺寸内的布局。
1、点击左侧工具栏的Frame工具（F键），在画布上拖出一个宽600px、高自动的Frame。
2、在右侧属性面板中，将Width设为600，Height设为Auto，取消勾选“Stretch”选项以锁定宽度。
3、选中该Frame，在顶部命令栏输入“/ai”，调出Figma AI面板；输入提示词：“生成一个现代简约风格的营销邮件头部，含品牌Logo、主标题和行动按钮，所有元素居中对齐，适配600px宽度”。
4、点击生成，AI将输出一组图层并自动置入当前Frame内，此时图层尚未具备响应逻辑，需后续嵌套处理。
二、对AI生成内容应用Auto Layout包裹并配置方向与间距
AI输出的图层组默认为普通图层集合，无法随内容变化自动调整尺寸或间距。通过包裹为Auto Layout容器，可赋予其“内容驱动尺寸”的能力，使标题文字变长时按钮自动右移、段落加长时容器高度自适应增长。
1、框选AI生成的所有子图层（不含外层600px Frame），右键选择Add Auto Layout。
2、在右侧属性面板中，将Direction设为Vertical（适用于常规邮件从上至下的阅读流）。
3、设置Padding Top/Bottom为24，Left/Right为32，确保内容与边缘留有呼吸感。
4、设置Gap为16，统一各模块（如标题-正文-按钮）之间的垂直间隔。
5、将该Auto Layout容器的Width设为Fill Container，使其宽度始终匹配600px父Frame，但高度保持Auto以响应内容增减。
三、为文本类子项启用Hug Contents并绑定换行逻辑
邮件中正文段落常因设备宽度差异导致单行过长或换行异常。启用Hug Contents可使文本框宽度紧贴内容，再配合Wrap in Frame确保长文本自动折行而非溢出，是实现窄屏可读性的核心步骤。
1、在Auto Layout容器内，单独选中正文文本图层（非标题或按钮）。
2、在右侧属性面板中，将Width模式切换为Hug Contents。
3、勾选Wrap in Frame选项，此时文本框将生成嵌套Frame并自动启用换行。
4、将该嵌套Frame的Width设为Fill Container，确保其在600px范围内充分延展并触发合理断行。
5、检查行高（Line Height）是否设为数值（如1.5）而非像素值，避免不同字号下基线错位。
四、为按钮等交互元素设置独立约束与填充行为
邮件中的CTA按钮需在不同长度文案下保持视觉稳定：文字缩短时不塌陷、延长时不挤压周边。这需脱离Auto Layout的全局控制，改用Constraints+Fill Container组合实现横向自适应。
1、单独选中按钮图层（含背景色块与内部文字）。
2、右键选择Convert to Component，便于后续复用与状态管理。
3、在右侧Constraints区域，将Horizontal设为Left & Right（即Stretch），Vertical设为Top。
4、将按钮组件的Width设为Fill Container，使其在Auto Layout容器内占据全部可用宽度。
5、进入该组件编辑模式，选中内部文字图层，将其Width设为Hug Contents，并启用Wrap in Frame，防止超长文案撑破按钮边界。
五、添加移动端断点Frame并复用AI生成结构
仅靠单宽度Frame无法覆盖移动设备。需新建一个窄幅Frame（如375px），将已构建的Auto Layout结构完整复制进去，并针对性微调约束与字体尺寸，形成真正的双断点响应体系。
1、新建一个Width为375、Height为Auto的Frame，置于原600px Frame下方。
2、全选600px Frame内的Auto Layout容器及所有子图层，Ctrl+C复制，切换至375px Frame内Ctrl+V粘贴。
3、选中粘贴后的Auto Layout容器，在Constraints中将Horizontal设为Center，确保其在窄屏中水平居中且不拉伸。
4、逐个选中文本图层，在字体设置中将字号下调：标题由24px改为20px，正文由16px改为15px，行高保持1.5不变。
5、检查所有按钮组件，将其Padding Left/Right由24px改为16px，维持紧凑触控区域。
