Back to Details

figma-sync-design-system

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Sync Design System Components

同步设计系统组件

Name

名称

figma:figma-sync-design-system - Sync design system components between Figma and code
figma:figma-sync-design-system - 在Figma和代码之间同步设计系统组件

Synopsis

概要

Synchronize design system components between Figma and codebase using Code Connect mappings. Identifies gaps, generates missing components, updates existing ones, and creates bidirectional links between design and code.
使用Code Connect映射在Figma和代码库之间同步设计系统组件，可识别差异、生成缺失的组件、更新已有组件，并在设计和代码之间创建双向链接。

Description

描述

You are tasked with synchronizing a design system between Figma and the codebase using the Figma MCP server and Code Connect. This command analyzes both Figma components and code components to identify discrepancies and facilitate keeping design and code in sync.
你的任务是使用Figma MCP服务器和Code Connect同步Figma和代码库之间的设计系统。该命令会同时分析Figma组件和代码组件，识别不一致之处，助力设计和代码保持同步。

Implementation

实现逻辑

Inventories all Figma components via MCP server and scans codebase for component library. Compares component sets to identify missing, outdated, or unmapped components. Generates Code Connect configuration files to establish bidirectional mapping between Figma designs and code implementations.
通过MCP服务器盘点所有Figma组件，同时扫描代码库中的组件库。对比两组组件集合，识别缺失、过时或未映射的组件。生成Code Connect配置文件，在Figma设计和代码实现之间建立双向映射关系。

Your Task

你的任务

  1. Inventory Figma Components:
    • Use Figma MCP tools to list all components in the file
    • Group components by category (buttons, inputs, cards, etc.)
    • Identify component variants and properties
    • Note component descriptions and documentation
  2. Inventory Code Components:
    • Scan the codebase for existing component library
    • Identify component files and their exports
    • Check for existing Code Connect configurations
    • Map components to Figma equivalents
  3. Analyze Gaps:
    • Identify Figma components without code implementations
    • Identify code components without Figma designs
    • Note variant mismatches (Figma has variants code doesn't)
    • Find naming inconsistencies
  4. Create Sync Plan:
    • Prioritize which components to sync first
    • Determine if generating new code or updating existing
    • Plan Code Connect mapping creation/updates
    • Identify breaking changes that need migration
  5. Execute Sync: Based on user preference, either:
    • Generate missing components: Create code for Figma-only components
    • Update existing components: Align code with Figma changes
    • Create Code Connect mappings: Link existing code to Figma
    • Document discrepancies: Report on mismatches without changing code
  1. 盘点Figma组件：
    • 使用Figma MCP工具列出文件中的所有组件
    • 按类别（按钮、输入框、卡片等）对组件分组
    • 识别组件变体和属性
    • 记录组件描述和文档
  2. 盘点代码组件：
    • 扫描代码库中现有的组件库
    • 识别组件文件及其导出内容
    • 检查现有的Code Connect配置
    • 将组件映射到对应的Figma等效组件
  3. 分析差异：
    • 识别没有对应代码实现的Figma组件
    • 识别没有对应Figma设计的代码组件
    • 记录变体不匹配问题（Figma有但代码中没有的变体）
    • 查找命名不一致的问题
  4. 制定同步计划：
    • 确定优先同步的组件顺序
    • 确定是生成新代码还是更新现有代码
    • 规划Code Connect映射的创建/更新方案
    • 识别需要迁移的破坏性变更
  5. 执行同步： 根据用户偏好，选择执行以下操作：
    • 生成缺失组件：为仅存在于Figma的组件创建代码
    • 更新现有组件：让代码对齐Figma的变更
    • 创建Code Connect映射：将现有代码链接到Figma
    • 记录差异：仅上报不匹配问题，不修改代码

Code Connect Integration

Code Connect集成

When creating or updating Code Connect mappings:
typescript
// 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>
    ),
  }
);
创建或更新Code Connect映射时参考以下示例：
typescript
// 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>
    ),
  }
);

Sync Report Format

同步报告格式

Provide a comprehensive report:
markdown
undefined
请提供完整的同步报告，参考如下格式：
markdown
undefined

Design System Sync Report

设计系统同步报告

Generated: [date] Figma File: [file name and URL] Code Location: [path to component library]
生成时间：[date] Figma文件：[file name and URL] 代码位置：[path to component library]

Summary

概览

  • Total Figma Components: 45
  • Total Code Components: 38
  • Synced Components: 35
  • Needs Generation: 10
  • Needs Update: 3
  • Needs Code Connect: 7
  • Figma组件总数：45
  • 代码组件总数：38
  • 已同步组件：35
  • 待生成组件：10
  • 待更新组件：3
  • 待创建Code Connect映射：7

Components Needing Action

需要处理的组件

Generate (Figma → Code)

待生成（Figma → 代码）

  1. AlertDialog
    • Variants: Info, Warning, Error, Success
    • Props: title, message, onClose, onConfirm
    • Figma: [URL]
  2. Tooltip
    • Variants: Top, Right, Bottom, Left
    • Props: content, trigger, delay
    • Figma: [URL]
  1. AlertDialog
    • 变体：Info, Warning, Error, Success
    • 属性：title, message, onClose, onConfirm
    • Figma链接：[URL]
  2. Tooltip
    • 变体：Top, Right, Bottom, Left
    • 属性：content, trigger, delay
    • Figma链接：[URL]

Update (Align Code with Figma)

待更新（代码对齐Figma）

  1. Button
    • Missing variant: Ghost
    • New prop: iconPosition (left/right)
    • Action: Add variant and prop to code
  1. Button
    • 缺失变体：Ghost
    • 新增属性：iconPosition (left/right)
    • 处理动作：在代码中添加对应变体和属性

Create Code Connect

待创建Code Connect映射

  1. Card
    • Code exists at: src/components/Card/Card.tsx
    • Figma: [URL]
    • Action: Create Card.figma.tsx mapping
  1. Card
    • 代码位置：src/components/Card/Card.tsx
    • Figma链接：[URL]
    • 处理动作：创建Card.figma.tsx映射文件

Recommendations

建议

  1. Consolidate Button and IconButton components
  2. Standardize size prop values across all components
  3. Add missing documentation to Input component
  4. Consider deprecating old Badge variants
undefined
  1. 合并Button和IconButton组件
  2. 所有组件统一size属性的取值规范
  3. 为Input组件补充缺失的文档
  4. 考虑废弃旧的Badge变体
undefined

Best Practices

最佳实践

  1. Component Naming:
    • Keep names consistent between Figma and code
    • Use PascalCase for component names
    • Match variant names exactly (case-sensitive)
  2. Variant Mapping:
    • Map Figma variant properties to code props
    • Handle boolean variants properly
    • Support all variant combinations
    • Provide sensible defaults
  3. Documentation:
    • Sync component descriptions from Figma
    • Document prop types and accepted values
    • Include usage examples
    • Note any differences between Figma and code
  4. Validation:
    • Test all generated components compile
    • Verify variants render correctly
    • Check accessibility compliance
    • Validate against design system guidelines
  1. 组件命名：
    • Figma和代码中保持命名一致
    • 组件名使用PascalCase
    • 变体名称完全匹配（区分大小写）
  2. 变体映射：
    • 将Figma变体属性映射到代码属性
    • 正确处理布尔类型的变体
    • 支持所有变体组合
    • 提供合理的默认值
  3. 文档：
    • 同步Figma中的组件描述
    • 记录属性类型和可接受的取值
    • 包含使用示例
    • 标注Figma和代码之间的所有差异
  4. 验证：
    • 测试所有生成的组件可正常编译
    • 验证变体可正确渲染
    • 检查可访问性合规性
    • 对照设计系统规范进行校验

Workflow Options

工作流选项

Ask the user which workflow they prefer:
  1. Full Sync: Generate all missing components, update existing ones, create all Code Connect mappings
  2. Partial Sync: Only sync specified components or categories
  3. Report Only: Generate sync report without making changes
  4. Code Connect Only: Only create/update Code Connect mappings for existing components
询问用户偏好的工作流：
  1. 全量同步：生成所有缺失组件、更新现有组件、创建所有Code Connect映射
  2. 部分同步：仅同步指定的组件或类别
  3. 仅生成报告：仅生成同步报告，不做任何变更
  4. 仅处理Code Connect：仅为现有组件创建/更新Code Connect映射

Additional Deliverables

额外交付物

  1. Migration Guide:
    • If updating existing components, document breaking changes
    • Provide codemod scripts if possible
    • List all components affected
  2. Testing Plan:
    • Visual regression test suggestions
    • Component test updates needed
    • Storybook story generation
  3. Documentation Updates:
    • Updated component documentation
    • Design system guidelines
    • Usage examples
  1. 迁移指南：
    • 如果更新现有组件，记录破坏性变更
    • 尽可能提供codemod脚本
    • 列出所有受影响的组件
  2. 测试方案：
    • 视觉回归测试建议
    • 需要更新的组件测试用例
    • Storybook故事生成
  3. 文档更新：
    • 更新后的组件文档
    • 设计系统规范
    • 使用示例

Notes

注意事项

  • Preserve existing component behavior unless explicitly changing
  • Maintain backwards compatibility when possible
  • Use design tokens from Figma variables
  • Consider responsive behavior and breakpoints
  • Test dark mode if supported
  • Validate accessibility (WCAG AA minimum)
  • 除非明确要修改，否则保留现有组件的行为
  • 尽可能保持向后兼容性
  • 使用Figma变量中的设计token
  • 考虑响应式行为和断点
  • 如果支持暗黑模式需要测试
  • 验证可访问性（最低符合WCAG AA标准）