Figma-MCP 编写前端代码还原弹窗类 UI 组件

使用 Figma-MCP（Figma to Code Pipeline）可以高效地将设计稿转化为前端代码。以下是实现弹窗类 UI 组件的具体方法：

设计稿准备 确保 Figma 设计稿中弹窗组件已正确命名和组织，图层结构清晰。弹窗通常包含背景遮罩、主体容器、标题、内容和操作按钮等元素。为每个元素命名时使用语义化的前缀，如 dialog/bg、dialog/title。

配置 MCP 转换规则 在 Figma-MCP 配置文件中定义弹窗组件的转换规则。设置弹窗的定位方式为 fixed 或 absolute，并配置动画效果如淡入淡出或滑动。指定按钮的交互逻辑，如关闭弹窗或提交表单。

// MCP 配置文件示例
{
  "components": {
    "dialog": {
      "type": "modal",
      "position": "fixed",
      "animation": "fade",
      "buttons": {
        "close": { "action": "hide" },
        "submit": { "action": "submit" }
      }
    }
  }
}

生成基础代码 运行 Figma-MCP 工具生成弹窗的 HTML 和 CSS 代码。工具会根据设计稿的尺寸、颜色和间距自动生成样式代码。弹窗的 HTML 结构通常包含一个遮罩层和一个内容容器，内容容器内部分为标题区、正文区和操作区。

<!-- 生成的 HTML 结构 -->
<div class="dialog-overlay">
  <div class="dialog-container">
    <h3 class="dialog-title">标题</h3>
    <div class="dialog-content">内容</div>
    <div class="dialog-actions">
      <button class="dialog-button-close">取消</button>
      <button class="dialog-button-submit">确认</button>
    </div>
  </div>
</div>

添加交互逻辑 手动补充 JavaScript 代码实现弹窗的显示、隐藏和交互功能。使用事件监听器处理按钮点击和遮罩层点击关闭。对于复杂弹窗，可以集成状态管理库如 Vue 或 React 控制弹窗的可见性。

// 弹窗交互逻辑
const dialog = {
  show: () => document.querySelector('.dialog-overlay').classList.add('active'),
  hide: () => document.querySelector('.dialog-overlay').classList.remove('active')
};

document.querySelector('.dialog-button-close').addEventListener('click', dialog.hide);
document.querySelector('.dialog-overlay').addEventListener('click', (e) => {
  if (e.target.classList.contains('dialog-overlay')) dialog.hide();
});

响应式适配 检查生成的代码在不同屏幕尺寸下的表现。通过媒体查询调整弹窗的宽度、边距和字体大小。确保弹窗在移动设备上能够正常显示且操作区域易于点击。

/* 响应式调整 */
@media (max-width: 768px) {
  .dialog-container {
    width: 90%;
    margin: 10px auto;
  }
}