figma2code 1.0.0
Add your description here
Requires Python: >=3.12

# Figma to Code MCP Server

基于[Model Context Protocol (MCP)](https://modelcontextprotocol.io/)的服务器，使用FastMCP框架从Figma设计稿自动生成iOS代码。

## 功能特性

- 🎨 **自动解析Figma链接**：从Figma URL中提取设计稿信息
- 🧹 **节点清洗和优化**：自动清理不可见节点，优化节点结构
- 📱 **iOS属性转换**：将Figma节点属性转换为iOS UIKit属性
- 🖼️ **截图获取**：自动获取设计稿截图并转换为Base64格式
- 📝 **完整上下文生成**：整合页面规范、清洗后的节点数据和截图


## 快速开始

Figma2Code支持远程和本地的配置，两者都需要进行Figma token的支持。

### Token获取

**Figma token** 详细见: https://doc.weixin.qq.com/doc/w3_AdYAjwb2ABoCNZ8QUJkGST8GfWqHm?scode=AJEAIQdfAAoz1ApgAf

**MCP市集token** 详细见: https://doc.weixin.qq.com/doc/w3_AdYAjwb2ABoCN76fnXT1KSq2CUruZ?scode=AJEAIQdfAAoOPrQAkz

### 远程配置
复制下面的JSON配置到MCP配置中:
```json
{
  "mcpServers": {    
    "figma2code.mcp.server": {
      "type": "streamable-http",
      "url": "https://mcpmarket.tmeoa.com/v1/mcp.rayrxhuang.dugqn/mcp",
      "headers": {
        "mcp-market-token": "-----填写你的mcp市集token------",
        "figma-token": "-----填写你的figma token-------"
      }
    }
  }
}
```

### 本地配置

```bash
# 安装uv
curl -LsSf https://astral.sh/uv/install.sh | sh
# 安装相关依赖
uv sync
# 激活虚拟环境
source .venv/bin/activate
# 运行
python3 src/figma_mcp_server.py -t streamable-http -p 9000
```

其中`9000`是指定的端口号
运行成功之后，复制以下字符串在支持MCP服务的IDE中即可:

以Cursor为例，在Cursor的MCP Tab下: Cursor --> Preferences --> Cursor Settings --> MCP:
```json
{
  "mcpServers": {    
    "figma2code.mcp.server": {
      "type": "streamable-http",
      "url": "http://0.0.0.0:9000/mcp",
      "headers": {
        "mcp-market-token": "无需填写",
        "figma-token": "---填写你的figma token----"
      }
    }
  }
}
```
💡 注意: 
需要手动填写figma token参数

如果Cursor仍然提示安装失败（会有红点角标），尝试重启Cursor试一下。

### 使用示例
在Cursor的对话框中输入:
```
帮我把这个figma链接转为iOS代码:https://www.figma.com/design/dmH97jlbuutTIBBjTGbgn6/D2C%E6%8E%A2%E7%B4%A2?node-id=1-167&t=58T5xZsivpQPzlbH-4
这是一个2倍图，输出文件名为AIBookDetailVC
```
如果不指定倍数信息，则默认是2倍图，
不指定文件名信息，则由AI自行命名

### 常见问题
详见：https://doc.weixin.qq.com/doc/w3_AdYAjwb2ABoCNo6qy9iqZTxOHYcsE?scode=AJEAIQdfAAopGo6pWm

## 可用工具

1. `get_code_from_figma`

    从Figma URL获取设计稿并生成完整的iOS代码上下文。

    **参数：**
    - `figma_url` (string, 必需): Figma设计稿URL
    - `scale_factor` (float, 可选): 缩放因子，默认2.0
    - `file_name` (string, 可选): 生成的文件名，默认"AIBookDetailVC"

    **返回：** 包含页面规范、清洗后的JSON节点数据和Base64编码截图的完整上下文字符串。

2. `get_figma_json`

    仅获取清洗后的Figma JSON节点数据。

    **参数：**
    - `figma_url` (string, 必需): Figma设计稿URL
    - `figma_token` (string, 必需): Figma API令牌
    - `scale_factor` (float, 可选): 缩放因子，默认2.0

    **返回：**
    清洗后的JSON节点数据字符串。

3. `get_figma_screenshot`

    获取Figma设计稿的截图URL。

    **参数：**
    - `figma_url` (string, 必需): Figma设计稿URL
    - `figma_token` (string, 必需): Figma API令牌

    **返回：**
    Base64编码的图片


## 核心特性说明

### FastMCP框架优势

- **自动工具定义**：使用Python装饰器和类型提示自动生成MCP工具定义
- **简化开发**：无需手动编写复杂的JSON-RPC处理逻辑
- **类型安全**：利用Python类型系统确保参数正确性
- **内置文档**：从docstring自动生成工具描述

### 节点清洗功能

- 删除不可见节点（opacity=0, visible=false）
- 删除微小节点（面积≤1px）
- 优化节点层级结构
- 转换Figma属性为iOS UIKit属性


## 更新日志

### v0.1.0
#### 2025.11.3
1. 修复安全距离问题
2. 去掉MCP promt规范，规范现在都用cursor.rules系统

#### 2025.10.28
1. 修复MCP集市对于fastmcp==2.13.0版本不支持路由转发的问题(顺便解决图片在cursor中无法正常显示的问题)
2. 目前已正常支持远程MCP的figma token在客户端中配置


### 2025.10.20
* 修复预处理中边框显示的问题
* 修复文本宽度不一致的问题
* 修复视图圆角的显示问题（可能有透明父视图提供圆角的信息）

### 2025.10.15
* figma token进行自动配置 
* 约束逻辑加入进去(目前已经写好,需要整合一下)