name: figma-extract-tokens description: 从Figma文件中提取设计令牌和变量，以创建或更新设计系统

从Figma提取设计令牌

名称

figma:figma-extract-tokens - 从Figma文件中提取设计令牌和变量

概要

从Figma文件中提取设计令牌（颜色、间距、字体等），并生成各种格式的令牌文件（CSS自定义属性、TypeScript、JSON、Style Dictionary、Tailwind配置）。

描述

您的任务是通过Figma MCP服务器从Figma文件中提取设计令牌和变量。此命令分析Figma变量和变量集合，为您的设计系统生成结构化的令牌文件。

实现

连接到Figma Desktop MCP服务器以访问Figma变量API。提取所有变量类型（颜色、数字、字符串、布尔值），并将其组织成基本和语义令牌层次结构。支持多种输出格式和主题变体。

您的任务

访问Figma文件：
- 使用Figma MCP工具访问当前文件
- 如果没有文件打开，请要求用户在Figma中打开一个或提供URL
提取变量：
- 获取所有颜色变量及其值
- 获取间距/大小变量
- 获取字体变量（字体家族、大小、权重、行高）
- 获取任何其他变量（边框半径、阴影等）
- 如果存在变量集合，则按集合组织
分析令牌结构：
- 识别语义令牌（主要、次要等）
- 记录基本令牌（具体值）
- 检测主题变体（亮/暗模式）
- 检查令牌层次结构和引用
生成令牌文件：
- 询问用户偏好的格式：
  - CSS自定义属性
  - JavaScript/TypeScript对象
  - JSON
  - Sass/SCSS变量
  - Tailwind配置
  - Style Dictionary格式
- 生成正确结构的令牌文件
- 包含Figma引用的注释
提供文档：
- 创建令牌名称到Figma变量的映射
- 记录任何应添加的缺失令牌
- 如果不一致，建议令牌命名约定
- 记录如何在代码中使用令牌

输出格式

CSS自定义属性

/**
 * 设计令牌 - 从Figma提取
 * 文件：[Figma文件名称]
 * 生成日期：[日期]
 */

:root {
  /* 颜色 - 基本 */
  --color-blue-500: #3b82f6;
  --color-gray-900: #111827;

  /* 颜色 - 语义 */
  --color-primary: var(--color-blue-500);
  --color-text: var(--color-gray-900);

  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;

  /* 字体 */
  --font-family-base: 'Inter', sans-serif;
  --font-size-body: 1rem;
  --line-height-body: 1.5;
}

TypeScript/JavaScript

/**
 * 设计令牌 - 从Figma提取
 * 文件：[Figma文件名称]
 * 生成日期：[日期]
 */

export const tokens = {
  colors: {
    primitives: {
      blue500: '#3b82f6',
      gray900: '#111827',
    },
    semantic: {
      primary: '#3b82f6',
      text: '#111827',
    },
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
  },
  typography: {
    fontFamily: {
      base: "'Inter', sans-serif",
    },
    fontSize: {
      body: '1rem',
    },
    lineHeight: {
      body: 1.5,
    },
  },
} as const;

export type Tokens = typeof tokens;

Style Dictionary格式

{
  "color": {
    "primitive": {
      "blue": {
        "500": { "value": "#3b82f6" }
      },
      "gray": {
        "900": { "value": "#111827" }
      }
    },
    "semantic": {
      "primary": { "value": "{color.primitive.blue.500}" },
      "text": { "value": "{color.primitive.gray.900}" }
    }
  },
  "spacing": {
    "xs": { "value": "0.25rem" },
    "sm": { "value": "0.5rem" },
    "md": { "value": "1rem" }
  }
}

最佳实践

令牌命名：
- 对应用令牌使用语义名称（主要、次要）
- 对基本令牌使用描述性名称（blue-500、spacing-md）
- 保持命名约定一致
- 使用命名空间进行组织
令牌组织：
- 分组相关令牌（颜色、间距、字体）
- 分离基本和语义令牌
- 支持带令牌引用的主题
- 记录令牌用途
令牌值：
- 保留Figma中的单位（px、rem、em）
- 为目标平台转换为适当格式
- 包括令牌引用的备用值
- 验证值是否有效的CSS/代码
维护：
- 包括Figma文件引用以便追踪
- 添加生成时间戳
- 记录任何需要的手动调整
- 记录如何从Figma重新同步

附加交付物

提取令牌后，还提供：

令牌文档：
- Markdown文件记录每个令牌类别
- 设计师和开发人员的使用示例
- 如果更新现有令牌，提供迁移指南
集成指南：
- 如何在项目中导入令牌
- 如何在组件中使用令牌
- 如何扩展或覆盖令牌
验证：
- 检查重复令牌
- 记录任何缺失的语义令牌
- 识别Figma中未使用的变量
- 建议令牌整合机会

注释

如果变量集合存在，单独提取它们
记录任何没有值的Figma变量
识别颜色模式变体（亮/暗）
建议未涵盖的常见用例的令牌添加
提供在实际组件中使用令牌的示例