要将Figma设计稿准确转为前端代码，需先确保：①文本图层使用原生Text节点，禁用Frame包裹文字；②颜色全部存为命名样式；③Auto Layout容器的Padding/Gap为整数。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
想把Figma设计稿快速变成可运行的前端代码，又不想被图层嵌套混乱、样式映射错乱、API权限失效这些问题反复打断节奏，就得绕开默认路径，直击CodeBuddy与Figma协同的关键控制点。
先做这三件事，再碰“生成”按钮
很多开发者卡在第一步就失败，不是插件没装好，而是Figma文件本身不满足CodeBuddy的解析前提。它不会报错，只会静默输出结构错乱或样式丢失的代码。
第一步：打开Figma文件，选中画板 → 右键 → “Show layers panel”，检查所有文本图层是否都用了Figma内置的Text节点，【禁止用Frame包裹纯文字再加背景色模拟按钮】——这种“伪组件”会被识别为不可交互的静态容器，生成的JSX里连onClick都不会有。
第二步：点击顶部菜单栏“Design” → “Color styles”，确认所有用到的颜色都已存为命名样式（如“primary-500”、“text-muted”），而不是直接填十六进制值。未存为样式的色值会转成内联style，破坏Tailwind类名体系。
第三步：在右侧属性面板，找到任意一个按钮或卡片组件，确认其父级容器启用了Auto Layout，并且Padding/Gap数值是整数（如8、12、16）。非整数间隙（如12.5px）会导致生成的CSS类名无法匹配，最终回退为行内style。
两种导入方式，适用场景完全不同
方法一：用Figma MCP插件直连（适合长期协作项目）
需要你拥有Figma文件编辑权限，且能配置个人API Token。流程是：Figma官网Security页生成Token → CodeBuddy MCP市场安装Figma插件 → 插件设置中粘贴Token → 保存后重启IDE。这一步做完，你在Figma里右键任何图层，都会出现“Send to CodeBuddy”选项，点击即触发实时同步。注意：【Token有效期默认30天，过期后插件会静默断连，不提示也不报错】，建议设日历提醒提前7天重置。
方法二：粘贴公开分享链接（适合临时评审或外包交付）
在Figma中点击Share → 开启“Public link” → 复制完整URL → 切换到CodeBuddy IDE → 点击“Design → Import from Figma” → 粘贴链接 → 等待加载完成。这种方式跳过OAuth授权，但只读取当前画板快照，不支持后续设计变更自动更新代码。
生成前必须调的三个参数
① 组件拆分粒度：选“原子级”会把每个图标、文字块都生成独立组件，适合搭建设计系统；选“页面级”则整个画板输出一个JSX文件，适合快速验证原型逻辑。中间档“模块级”最常用，比如把导航栏、轮播区、商品列表各自切为单独组件。
② 样式方案：Tailwind CSS是默认且推荐项；如果项目已用Ant Design，勾选“Design System Mapping”并指定Token，CodeBuddy会自动将Figma中的“Primary Button”映射为<Button type="primary">，避免手动替换。
③ 交互状态：务必展开“States & Variants”选项，勾选“Hover / Press / Disabled”。Figma里用Variant做的按钮状态组，只有在这里启用才会生成useEffect监听鼠标事件的逻辑，否则导出的只是静态DOM。
生成后立刻要做的验证动作
打开生成的src/components目录，找对应组件的.tsx文件，搜索“className”，确认90%以上样式都通过Tailwind类名实现，而非style={{}}。如果发现大量内联style，说明Figma中存在未规范化的尺寸或颜色，得退回第一步重新整理。
在终端执行npm run dev启动本地服务，用浏览器打开，拖动窗口宽度，观察响应式断点是否生效。若布局错乱，大概率是Figma中某个Auto Layout容器未设置“Constraints”（如水平方向设为“Scale”而非“Left-Right”），需回到设计稿修正。
右键检查任意按钮元素，在Elements面板里看是否有data-testid属性。CodeBuddy默认为所有可交互元素注入测试ID，格式为“btn-primary-submit”，这是后续E2E测试的锚点，删掉会影响自动化覆盖率。
