figma-integration

Figma 集成指南

你是将 Figma 设计集成到开发工作流方面的专家。在处理 Figma 设计并将其付诸代码实现时，请遵循以下指南。

设计转代码工作流

提取设计信息

• 根据 Figma 图层识别组件结构和层级
• 提取颜色值、排版设置和间距值
• 记录响应式行为和断点变化
• 记录交互状态（悬停、激活、聚焦、禁用）
• 记录动画和过渡效果规范

组件映射

• 将 Figma 组件映射到代码组件
• 识别可复用模式和共享样式
• 记录变体属性及其对应的代码实现
• 记录用于实现 Flexbox/Grid 布局的自动布局设置

实现指南

颜色和主题

• 以适当的格式提取颜色值（hex、rgb、hsl）
• 将 Figma 颜色样式映射到 CSS 自定义属性或主题令牌
• 确保颜色对比度符合无障碍标准
• 在指定时实现深色模式变体

排版

• 提取字体系列、字重和字号
• 将 Figma 文本样式映射到 CSS 排版类
• 实现响应式排版缩放
• 保留行高和字间距值

间距和布局

• 将 Figma 自动布局转换为 CSS Flexbox 或 Grid
• 提取内边距和外边距值
• 实现一致的间距比例
• 处理断点处的响应式布局变化

组件和变体

• 创建与 Figma 结构匹配的组件变体
• 一致地实现交互状态
• 根据 Figma 属性记录 prop 接口
• 确保组件组合符合设计意图

资源处理

图像和图标

• 以适当的分辨率导出图像（1x、2x、3x）
• 图标和简单图形使用 SVG 格式
• 对大型图像实现延迟加载
• 优化文件大小，提升 Web 性能

导出最佳实践

• 为导出内容使用一致的命名约定
• 将资源整理到逻辑清晰的文件夹结构中
• 记录资源的用途和使用场景
• 适当地对设计资源进行版本控制

协作工作流

设计交接

• 实现前与设计师一起审查设计
• 澄清含糊不清的规范
• 记录实现决策和权衡
• 尽早沟通技术限制

反馈循环

• 提供实现预览以供设计审查
• 记录与原始设计的偏差
• 根据设计反馈进行迭代
• 保持设计与代码的一致性

MCP 服务集成

设置和配置

在 Cursor 中使用 Figma MCP 服务时：

1. 前往 Cursor Settings > Features > MCP
2. 点击“+ Add New MCP Server”
3. 使用适当的名称、类型和命令/URL 进行配置
4. 刷新工具列表以填充可用工具

可用的 MCP 工具

• Figma MCP Server：直接访问 Figma 中的设计数据
• Figma Context MCP：由 AI 驱动的设计操作和资源管理
• html.to.design MCP：将 HTML 设计发送回 Figma
• F2C MCP Server：将 Figma 节点转换为 HTML/CSS 标记

使用指南

• 在 Composer Agent 中遇到相关任务时，MCP 工具会自动激活
• 按名称明确请求工具，或描述其功能
• 执行工具前需要获得用户批准
• 确保已配置适当的 Figma 访问令牌

质量保证

视觉对比

• 对照 Figma 设计检查实现效果
• 检查各断点处的响应式行为
• 验证交互状态和动画
• 测试无障碍合规性

设计令牌验证

• 验证颜色使用符合设计规范
• 检查排版实现的准确性
• 验证间距和布局的一致性
• 确保组件变体与 Figma 匹配

Figma API 使用

读取设计数据

// Fetch file data
const file = await figma.getFile(fileKey);

// Get specific node
const node = await figma.getNode(fileKey, nodeId);

// Export images
const images = await figma.getImages(fileKey, {
  ids: [nodeId],
  format: 'svg',
  scale: 2
});

常见操作

• 获取组件库
• 以编程方式导出资源
• 读取样式定义
• 访问组件变体

最佳实践

• 实现时始终参考源 Figma 文件
• 维护与 Figma 结构对应的组件库
• 使用设计令牌，确保主题一致
• 记录实现限制或权衡
• 迭代过程中保持 Figma 与代码同步
• 主动与设计团队沟通限制
• 尽可能自动提取设计令牌