name: figma-sync-design-system description: 使用Code Connect映射同步Figma和代码之间的设计系统组件

同步设计系统组件

名称

figma:figma-sync-design-system - 同步Figma和代码中的设计系统组件

概要

使用Code Connect映射同步Figma和代码库中的设计系统组件。识别差距，生成缺失组件，更新现有组件，并创建设计和代码之间的双向链接。

描述

您的任务是使用Figma MCP服务器和Code Connect同步Figma和代码库之间的设计系统。该命令分析Figma组件和代码组件以识别差异并促进设计和代码保持同步。

实现

通过MCP服务器清点所有Figma组件，并扫描代码库中的组件库。比较组件集以识别缺失、过时或未映射的组件。生成Code Connect配置文件以建立Figma设计和代码实现之间的双向映射。

您的任务

清点Figma组件：
- 使用Figma MCP工具列出文件中的所有组件
- 按类别分组组件（按钮、输入、卡片等）
- 识别组件变体和属性
- 注意组件描述和文档
清点代码组件：
- 扫描代码库中的现有组件库
- 识别组件文件及其导出
- 检查现有Code Connect配置
- 将组件映射到Figma等效物
分析差距：
- 识别没有代码实现的Figma组件
- 识别没有Figma设计的代码组件
- 注意变体不匹配（Figma有变体而代码没有）
- 查找命名不一致
创建同步计划：
- 优先同步哪些组件
- 确定是生成新代码还是更新现有代码
- 计划Code Connect映射的创建/更新
- 识别需要迁移的破坏性更改
执行同步：根据用户偏好，要么：
- 生成缺失组件：为仅Figma组件创建代码
- 更新现有组件：使代码与Figma更改对齐
- 创建Code Connect映射：将现有代码链接到Figma
- 记录差异：报告不匹配而不更改代码

Code Connect集成

当创建或更新Code Connect映射时：

// Button.figma.tsx
import figma from '@figma/code-connect';
import { Button } from './Button';

figma.connect(
  Button,
  'https://www.figma.com/file/abc123?node-id=1:234',
  {
    props: {
      variant: figma.enum('Variant', {
        Primary: 'primary',
        Secondary: 'secondary',
      }),
      size: figma.enum('Size', {
        Small: 'sm',
        Medium: 'md',
        Large: 'lg',
      }),
      disabled: figma.boolean('Disabled'),
      children: figma.string('Label'),
    },
    example: ({ variant, size, disabled, children }) => (
      <Button variant={variant} size={size} disabled={disabled}>
        {children}
      </Button>
    ),
  }
);

同步报告格式

提供全面报告：

# 设计系统同步报告

生成日期：[date]
Figma文件：[文件名和URL]
代码位置：[组件库路径]

## 摘要

- 总Figma组件：45
- 总代码组件：38
- 已同步组件：35
- 需要生成：10
- 需要更新：3
- 需要Code Connect：7

## 需要操作的组件

### 生成（Figma → 代码）

1. **AlertDialog**
   - 变体：信息、警告、错误、成功
   - 属性：title、message、onClose、onConfirm
   - Figma：[URL]

2. **Tooltip**
   - 变体：顶部、右侧、底部、左侧
   - 属性：content、trigger、delay
   - Figma：[URL]

### 更新（使代码与Figma对齐）

1. **Button**
   - 缺失变体：Ghost
   - 新属性：iconPosition（左/右）
   - 操作：向代码添加变体和属性

### 创建Code Connect

1. **Card**
   - 代码位于：src/components/Card/Card.tsx
   - Figma：[URL]
   - 操作：创建Card.figma.tsx映射

## 推荐

1. 合并Button和IconButton组件
2. 标准化所有组件的size属性值
3. 向Input组件添加缺失文档
4. 考虑弃用旧Badge变体

最佳实践

组件命名：
- 保持Figma和代码之间的名称一致
- 对组件名称使用PascalCase
- 精确匹配变体名称（区分大小写）
变体映射：
- 将Figma变体属性映射到代码属性
- 正确处理布尔变体
- 支持所有变体组合
- 提供合理的默认值
文档：
- 从Figma同步组件描述
- 文档属性类型和接受的值
- 包括使用示例
- 注意Figma和代码之间的任何差异
验证：
- 测试所有生成的组件是否编译
- 验证变体是否正确渲染
- 检查无障碍合规性
- 根据设计系统指南验证

工作流选项

询问用户偏好哪种工作流：

完全同步：生成所有缺失组件，更新现有组件，创建所有Code Connect映射
部分同步：仅同步指定组件或类别
仅报告：生成同步报告而不做更改
仅Code Connect：仅创建/更新现有组件的Code Connect映射

额外交付物

迁移指南：
- 如果更新现有组件，文档破坏性更改
- 如果可能，提供代码修改脚本
- 列出所有受影响的组件
测试计划：
- 视觉回归测试建议
- 组件测试更新需求
- Storybook故事生成
文档更新：
- 更新的组件文档
- 设计系统指南
- 使用示例

注意

除非明确更改，否则保留现有组件行为
尽可能保持向后兼容性
使用来自Figma变量的设计令牌
考虑响应式行为和断点
测试暗模式（如果支持）
验证无障碍性（至少WCAG AA）