Figma Tokens MCP

Figma代币MCP

](https://www.npmjs.com/package/figma-tokens-mcp) 

将Figma设计令牌自动转换为Tailwind CSS的MCP服务器

从Figma文件中提取设计令牌并自动生成Tailwind CSS设置的Model Context Protocol（MCP）服务器。

主要功能

• 从Figma Variables和Styles中提取设计令牌
• 自动生成Tailwind CSS v3/v4设置
• 创建React组件（支持CVA variants）
• 冲突检测和解决
• 完全支持TypeScript

快速入门

安装

npx -y figma-tokens-mcp

设置

1.Figma Access Token发放

最快的方法: 👉 https://www.figma.com/settings

1. Figma登录
2. 设置> 安全 选项卡
3. “生成新令牌” 点击
4. 输入令牌名称后Enter
5. 立即复制 （只显示一次！）

📖 详细指南： 设置.md

2-A.Claude Code（CLI工具）

claude mcp add "figma-tokens" -- npx -y figma-tokens-mcp --figma-api-key=YOUR_KEY --stdio

2-B.修改Claude Desktop（应用程序）设置文件

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json 视窗: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma-tokens": {
      "command": "npx",
      "args": ["-y", "figma-tokens-mcp", "--figma-api-key=YOUR_KEY", "--stdio"]
    }
  }
}

或环境变量方式：

{
  "mcpServers": {
    "figma-tokens": {
      "command": "npx",
      "args": ["-y", "figma-tokens-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_YOUR_TOKEN_HERE"
      }
    }
  }
}

1. 重新启动Claude Desktop

使用方法

在Claude Desktop中，请求：

Figma 파일에서 디자인 토큰을 추출해줘:
https://www.figma.com/file/abc123/My-Design-System

그리고 Tailwind CSS v4 설정으로 변환해줘

可用工具

示例

1.提取令牌

{
  "figmaFileUrl": "https://www.figma.com/file/abc123/Design-System",
  "extractionStrategy": "auto",
  "tokenTypes": ["colors", "typography"]
}

2.Tailwind转换

{
  "tokens": { /* 추출된 토큰 */ },
  "tailwindVersion": "v4",
  "typescript": true
}

3.创建元件

{
  "componentName": "Button",
  "tokens": { /* 추출된 토큰 */ },
  "typescript": true
}

要求

• Node.js：18.0.0或更高版本
• Figma访问令牌：需要个人访问令牌
• MCP客户端：Claude Desktop或兼容客户端

开发

# 저장소 클론
git clone https://github.com/jhlee0409/figma-tokens-mcp.git
cd figma-tokens-mcp

# 의존성 설치
pnpm install

# 빌드
pnpm build

# 테스트
pnpm test

# 개발 모드
pnpm dev

许可证

MIT License-详细信息 许可证 请参考文件。

资源

• 模型上下文协议
• 图API
• Tailwind CSS

______________________________________________________________________

由以下材料制成❤️ 面向设计师和开发人员