Figma

Figma Context MCP

Servidor MCP para una integración fluida de diseños de Figma con herramientas de codificación de IA

Características • Inicio rápido • Capacidades MCP • Arquitectura • Documentación • 中文文档

¿Qué es esto?

Figma Context MCP es un servidor de Model Context Protocol (MCP) que conecta diseños de Figma con asistentes de codificación de IA como Cursor, Windsurf y Cline.

Cuando las herramientas de IA pueden acceder directamente a los datos de diseño de Figma, generan código más preciso al primer intento, mucho mejor que usando capturas de pantalla.

Nota: Este proyecto se basa en Figma-Context-MCP, con estructuras de datos optimizadas y algoritmos inteligentes de detección de diseño.

Características

Capacidades principales

Mejoras clave

Inicio rápido

Requisitos previos

• Node.js >= 18.0.0
• Una cuenta de Figma con acceso a la API

Instalación

Mediante Smithery (Recomendado)

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

Mediante npm

npm install -g @yhy2001/figma-mcp-server

Desde el código fuente

git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install
pnpm build

Configuración

1. Obtener el token de API de Figma

1. Ve a Configuración de la cuenta de Figma
2. Desplázate hasta "Personal access tokens"
3. Haz clic en "Create new token"
4. Copia el token

2. Configura tu herramienta de IA

{
  "mcpServers": {
    "Figma": {
      "command": "npx",
      "args": ["-y", "@yhy2001/figma-mcp-server", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-key"
      }
    }
  }
}

# From source (development)
cp .env.example .env  # Add FIGMA_API_KEY to .env
pnpm install && pnpm build
pnpm start            # Starts on port 3333

# Or with environment variable
FIGMA_API_KEY=<your-key> pnpm start

# Or via global install
figma-mcp --figma-api-key=<your-key> --port=3333

# Connect via SSE
# URL: http://localhost:3333/sse

Ejemplo de uso

Please implement this Figma design: https://www.figma.com/design/abc123/MyDesign?node-id=1:234

Use React and Tailwind CSS.

Capacidades MCP

Este servidor ofrece soporte completo de capacidades MCP:

┌─────────────────────────────────────────────────────────────┐
│                  Figma MCP Server v1.1.0                    │
├─────────────────────────────────────────────────────────────┤
│  Tools (2)                        AI-invoked operations     │
│  ├── get_figma_data              Fetch design data          │
│  └── download_figma_images       Download image assets      │
├─────────────────────────────────────────────────────────────┤
│  Prompts (3)                      User-selected templates   │
│  ├── design_to_code              Full design-to-code flow   │
│  ├── analyze_components          Component structure        │
│  └── extract_styles              Style token extraction     │
├─────────────────────────────────────────────────────────────┤
│  Resources (5)                    Lightweight data sources  │
│  ├── figma://help                Usage guide                │
│  ├── figma://file/{key}          File metadata (~200 tok)   │
│  ├── figma://file/{key}/styles   Design tokens (~500 tok)   │
│  ├── figma://file/{key}/components Component list (~300 tok)│
│  └── figma://file/{key}/assets   Asset inventory (~400 tok) │
└─────────────────────────────────────────────────────────────┘

Herramientas

Prompts

Plantillas de prompts profesionales integradas para ayudar a la IA a generar código de alta calidad:

El flujo de trabajo design_to_code incluye:

1. Análisis del proyecto - Leer configuración de tema, estilos globales, biblioteca de componentes
2. Análisis de estructura - Identificar patrones de página, estrategia de división de componentes
3. Plano de diseño ASCII - Generar diagrama de diseño con anotaciones de componentes y recursos
4. Gestión de recursos - Analizar, descargar y organizar imágenes/iconos
5. Generación de código - Generar código siguiendo las convenciones del proyecto
6. Optimización de accesibilidad - HTML semántico, etiquetas ARIA
7. Adaptación responsiva - Ajustes de diseño para móviles

Recursos

Acceso ligero a datos para ahorrar tokens:

# Get file metadata (~200 tokens)
figma://file/abc123

# Get design tokens (~500 tokens)
figma://file/abc123/styles

# Get component list (~300 tokens)
figma://file/abc123/components

# Get asset inventory (~400 tokens)
figma://file/abc123/assets

Comparación entre Recursos y Herramientas:

Arquitectura

┌──────────────────────────────────────────────────────────────┐
│                        MCP Server                            │
├──────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐   │
│  │   Tools     │  │   Prompts   │  │     Resources       │   │
│  │ (2 tools)   │  │ (3 prompts) │  │   (5 resources)     │   │
│  └──────┬──────┘  └─────────────┘  └──────────┬──────────┘   │
│         │                                      │              │
│         └──────────────────┬───────────────────┘              │
│                            ▼                                  │
│  ┌────────────────────────────────────────────────────────┐  │
│  │                   FigmaService                         │  │
│  │          API Calls • Validation • Error Handling       │  │
│  └────────────────────────┬───────────────────────────────┘  │
│                           │                                  │
│         ┌─────────────────┴─────────────────┐                │
│         ▼                                   ▼                │
│  ┌─────────────────┐              ┌─────────────────────┐    │
│  │   CacheManager  │              │    Parser + Algo    │    │
│  │  L1: LRU Memory │              │  • Layout Detection │    │
│  │  L2: Disk Store │              │  • Icon Merging     │    │
│  └─────────────────┘              │  • CSS Generation   │    │
│                                   └─────────────────────┘    │
└──────────────────────────────────────────────────────────────┘

Sistema de caché

La arquitectura de caché de dos capas reduce significativamente las llamadas a la API:

Algoritmo de detección de diseño

Convierte automáticamente el posicionamiento absoluto en diseños semánticos Flexbox/Grid:

Input (Figma absolute positioning):
┌─────────────────────────┐
│ ■ (10,10)  ■ (110,10)   │
│ ■ (10,60)  ■ (110,60)   │
└─────────────────────────┘

Output (Inferred Grid):
display: grid
grid-template-columns: 100px 100px
grid-template-rows: 50px 50px
gap: 10px

Estructura del proyecto

src/
├── algorithms/           # Smart algorithms
│   ├── layout/          # Layout detection (Flex/Grid inference)
│   └── icon/            # Icon merge detection
├── core/                 # Core parsing
│   ├── parser.ts        # Figma data parser
│   ├── style.ts         # CSS style generation
│   ├── layout.ts        # Layout processing
│   └── effects.ts       # Effects handling
├── services/             # Service layer
│   ├── figma.ts         # Figma API client
│   └── cache/           # Multi-layer cache system
├── prompts/              # MCP prompt templates
├── resources/            # MCP resource handlers
├── types/                # TypeScript type definitions
├── utils/                # Utility functions
├── server.ts             # MCP server main entry
└── index.ts              # CLI entry

tests/
├── fixtures/             # Test data
│   ├── figma-data/      # Raw JSON from Figma API
│   └── expected/        # Expected output snapshots
├── integration/          # Integration tests
│   ├── layout-optimization.test.ts  # Layout optimization tests
│   ├── output-quality.test.ts       # Output quality validation
│   └── parser.test.ts               # Parser tests
└── unit/                 # Unit tests
    ├── algorithms/      # Algorithm tests (layout, icon detection)
    ├── resources/       # Resource handler tests
    └── services/        # Service layer tests

scripts/
└── fetch-test-data.ts   # Figma test data fetcher

Documentación

Algoritmos principales

Documentos de investigación

Documentos de arquitectura

Opciones de línea de comandos

Contribuciones

¡Las contribuciones son bienvenidas!

# Setup
git clone https://github.com/1yhy/Figma-Context-MCP.git
cd Figma-Context-MCP
pnpm install

# Development
pnpm dev          # Watch mode
pnpm test         # Run tests (272 test cases)
pnpm lint         # Lint code
pnpm build        # Build

# Debug
pnpm inspect      # MCP Inspector

# Test with your own Figma data
pnpm tsx scripts/fetch-test-data.ts <fileKey> <nodeId> <outputName>

# Commit (uses conventional commits)
git commit -m "feat: add new feature"

Tipos de commits

Proceso de publicación (Mantenedores)

# 1. Update version in package.json and CHANGELOG.md

# 2. Commit version bump
git add -A
git commit -m "chore: bump version to x.x.x"

# 3. Publish to npm (auto runs: type-check → lint → test → build)
npm login --scope=@yhy2001  # if not logged in
pnpm run pub:release

# 4. Create git tag and push
git tag vx.x.x
git push origin main --tags

# 5. Create GitHub Release (optional)
# Go to https://github.com/1yhy/Figma-Context-MCP/releases/new

Pruebas con tus propios datos de Figma

Puedes probar la detección y optimización de diseño con tus propios diseños de Figma:

1. Configurar variables de entorno

# Copy the environment template
cp .env.example .env

# Edit .env file with your configuration
FIGMA_API_KEY=your_figma_api_key_here
TEST_FIGMA_FILE_KEY=your_file_key      # Optional
TEST_FIGMA_NODE_ID=your_node_id        # Optional

2. Obtener datos de nodos de Figma

# Method 1: Using command line arguments (recommended)
pnpm tsx scripts/fetch-test-data.ts <fileKey> <nodeId> <outputName>

# Example: Fetch a specific node
pnpm tsx scripts/fetch-test-data.ts UgtwrncR3GokKDIS7dpm4Z 402-34955 my-design

# Method 2: Using environment variables
TEST_FIGMA_FILE_KEY=xxx TEST_FIGMA_NODE_ID=123-456 pnpm tsx scripts/fetch-test-data.ts

Parámetros:

Ejemplo de análisis de URL:

https://www.figma.com/design/UgtwrncR3GokKDIS7dpm4Z/MyProject?node-id=402-34955
                            ↑ fileKey                              ↑ nodeId

3. Ejecutar pruebas para validar la salida

# Run all tests
pnpm test

# Run only integration tests (validate layout optimization)
pnpm test tests/integration/

# View output JSON files
ls tests/fixtures/figma-data/

4. Analizar los resultados de optimización

Las pruebas validan automáticamente:

• Compresión de datos - Normalmente >50% de compresión
• Detección de diseño - Tasa de reconocimiento de diseños Flex/Grid
• Propiedades CSS - Limpieza de propiedades redundantes
• Calidad de salida - Comprobaciones de consistencia estructural

Si las pruebas fallan, la salida puede no cumplir las expectativas. Revisa los mensajes de error para ajustar o informar de un problema.

Licencia

MIT © 1yhy

Agradecimientos

• Figma-Context-MCP - Proyecto original
• Model Context Protocol - Especificación MCP
• Best-README-Template - Referencia de plantilla README

Hecho con ❤️ para la comunidad de codificación con IA