AI导哈

设计令牌转换工具

Figma Tokens MCP是一个将Figma设计令牌自动转换为Tailwind CSS配置的工具，支持React组件生成和TypeScript。

  • by jhlee0409
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 jhlee0409/figma-tokens-mcp

使用说明

Figma代币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 설정으로 변환해줘

可用工具

工具 说明
extract_tokens 从Figma文件中提取设计令牌
convert_to_tailwind 将令牌转换为Tailwind CSS设置
generate_component 创建React组件（CVA variants）
health_check 检查服务器状态
get_server_info 查询服务器信息

示例

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-详细信息 许可证 请参考文件。

资源

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

相关 MCP