Figma中AI生成的侧边栏无法折叠，需通过Variants变体功能添加Expanded和Collapsed状态，并绑定图层属性、设置Auto Layout及交互原型实现动态折叠。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜如果您在Figma中使用AI生成侧边栏后发现其无法折叠，说明该侧边栏仅作为静态图层存在，未绑定可交互的状态逻辑。此时需借助Variants变体功能为其注入“展开”与“折叠”两种状态，并建立属性驱动的视觉响应机制。以下是解决此问题的具体步骤：
一、将AI生成的侧边栏转为组件并定义State属性
Variants必须基于组件结构运行，且需明确声明状态维度。将原始侧边栏图层封装为组件是启用变体控制的前提，而State属性则为后续折叠/展开行为提供语义化标识。
1、选中AI生成的整个侧边栏图层（含背景、导航项、标题等所有子图层）。
2、右键选择「Create component」或按快捷键 Ctrl+Alt+K（Windows） / Cmd+Option+K（Mac）将其转为组件。
3、双击该组件进入主组件画布，在右侧「Component Properties」区域点击「+ Add property」。
4、创建新属性，命名为
State，类型选择Variant
，添加两个值：
Expanded和Collapsed。
二、构建两种状态的视觉表现
Figma会根据State属性自动创建两个占位区域，需分别为Expanded和Collapsed状态填充对应布局：Expanded状态显示完整导航内容，Collapsed状态仅保留图标或极简标识，确保视觉差异清晰可辨。
1、点击主组件画布中名为「Expanded」的虚线占位框，进入编辑状态。
2、在此区域内复制原始侧边栏全部图层，保持完整结构与交互热区尺寸。
3、点击「Collapsed」占位框，新建一个精简版本：隐藏文字标签图层，仅保留图标组；将宽度收缩至64px；调整图标垂直居中并对齐左边缘。
4、检查两个状态下的图层命名是否一致（如“Icon-Home”“Icon-Settings”），避免因名称错位导致绑定失败。
三、绑定图层属性至变体值实现动态响应
仅完成视觉绘制不足以触发状态切换，必须将关键图层的可见性、尺寸、约束等属性与State值关联，使实例在修改属性时自动应用对应样式。
1、在「Expanded」状态下，选中文字图层组（如包含所有菜单文本的Frame），在右侧「Variant properties」区域找到「Visible」选项，点击右侧下拉箭头，选择Expanded。
2、在「Collapsed」状态下，选中同一文字图层组，将「Visible」设为Collapsed；再选中图标图层，将「Width」属性绑定至Collapsed值，并设为固定64。
3、返回主画布，拖入该组件的一个实例，在右侧属性面板中点击「State」下拉菜单，切换为Collapsed，确认文字消失且宽度收缩生效。
四、通过插件或交互原型模拟真实折叠行为
Variants本身不提供运行时交互，但可结合Figma内置交互功能或第三方插件（如Anima、ProtoPie）将属性变更映射为点击事件，从而还原用户点击汉堡菜单图标时的折叠反馈。
1、在主画布上创建一个独立的汉堡图标（☰），置于页面左上角或顶部导航栏内。
2、选中该图标，点击右上角「Prototype」标签页，拖拽连接线至侧边栏实例。
3、在触发条件中选择「On Click」，在动作中选择「Swap with variant」，目标选择该侧边栏实例，并设置「State」为Collapsed。
4、再创建一个关闭图标（×）置于侧边栏内部右上角，为其配置反向交互：点击时将侧边栏「State」切换回Expanded。
五、使用Auto Layout确保状态切换时布局稳定
若折叠后出现图层错位、间距异常或内容溢出，说明缺乏容器级约束。Auto Layout能保障不同状态下子元素的相对位置与堆叠逻辑保持一致，避免手动调整失效。
1、在主组件画布中，选中「Expanded」状态下的根Frame（即包裹全部导航项的最外层容器）。
2、点击右侧属性栏中的「Shift + A」启用Auto Layout，方向设为Vertical，间距设为12。
3、对「Collapsed」状态下的根Frame执行相同操作，但将方向改为Horizontal，间距设为8，并勾选「Hug contents」。
4、为两个状态下的图标图层分别设置「Fixed size」约束，宽度统一设为40，高度设为40，确保缩放一致性。