Guía Completa de Figma MCP Gratis: Generación de Código con IA

October 11, 2025

Índice

📢 Introducción: Por Qué Importa Esta Guía

¿Sabías que? MCP es un estándar abierto completamente gratuito. Sin embargo, el servidor MCP oficial de Figma en Dev Mode está limitado a planes de pago ($15/mes o más).

Buenas noticias: ¡Puedes hacer lo mismo gratis solo con un Personal Access Token!

Este artículo proporciona instrucciones extremadamente detalladas para que incluso los usuarios del plan gratuito de Figma puedan lograr la generación de código desde diseños usando MCP, garantizando el éxito incluso para principiantes.

Lo Que Puedes Lograr

✅ Generar automáticamente código React/Vue/HTML desde diseños de Figma
✅ Desarrollo asistido por IA con Claude Code o Codex CLI
✅ Extracción automática de design tokens
✅ Implementación completamente gratuita (no requiere plan de pago)

🎓 Contexto: ¿Qué es MCP?

Acerca del Model Context Protocol (MCP)

MCP es un estándar abierto completamente gratuito que Anthropic liberó como código abierto en noviembre de 2024. Piénsalo como un “puerto USB-C” para conectar asistentes de IA a herramientas externas y fuentes de datos.

¿Por Qué Figma Lo Hizo de Pago?

MCP en sí: Código abierto y completamente gratuito
Servidor oficial de Figma: Limitado a Dev Mode (plan de pago)
Solución: Usar servidores alternativos gratuitos desarrollados por la comunidad

🛠 Preparar Herramientas Requeridas

Entorno Requerido (Todo Gratuito)

1. Node.js (18 o posterior)

# Verificar instalación
node --version

# Debería mostrar v18 o posterior
# Si no está instalado: descargar desde https://nodejs.org/

2. npm o pnpm

# Verificar npm (incluido con Node.js)
npm --version

# O pnpm (alternativa más rápida)
npm install -g pnpm

3. Editor de Texto (Elegir Uno)

VS Code: https://code.visualstudio.com/
Cursor: https://cursor.com/
Windsurf: https://codeium.com/windsurf

4. Claude Code o Codex CLI (se explica en detalle más adelante)

👤 Crear y Configurar Cuenta de Figma

Paso 1: Crear Cuenta de Figma

Visitar el Sitio Web de Figma https://www.figma.com/
Hacer clic en “Sign up”
- Registrarse con correo electrónico o cuenta de Google (puede iniciar sesión automáticamente) En ese caso, iniciarás sesión automáticamente con un plan gratuito. Si lo has usado antes, los siguientes pasos pueden no ser necesarios.
- Importante: Seleccionar el plan gratuito (Starter)
Verificación de Correo Electrónico
- Hacer clic en el enlace de confirmación enviado a tu correo registrado
Configuración de Perfil
- Ingresar tu nombre
- Seleccionar propósito de uso (Personal project está bien)

Paso 2: Instalar Aplicación de Escritorio de Figma (Recomendado)

Acceder a la Página de Descarga https://www.figma.com/downloads/
Descargar Versión para tu Sistema Operativo
- Windows: archivo .exe
- macOS: archivo .dmg
- Linux: archivo .AppImage
Iniciar Sesión Después de la Instalación
- Iniciar sesión con tu cuenta creada

También puedes descargar haciendo clic en el ícono de perfil en la esquina superior izquierda.

🔑 Obtener Personal Access Token

¡Importante: Esta es la Clave para Usar MCP Gratis!

Paso 1: Acceder a la Pantalla de Configuración

Abrir Figma (navegador o aplicación de escritorio)
Hacer clic en el ícono de perfil en la esquina superior izquierda
Seleccionar “Settings”

Para usuarios nuevos, es posible que necesites hacer clic en “Back to files” en la esquina superior izquierda para acceder a la configuración.

Paso 2: Generar Personal Access Token

Hacer clic en la pestaña “Security”
Desplazarse hacia abajo para encontrar la sección “Personal access tokens”
Hacer clic en “Create new token”
Configuración del Token

Nombre del token: figma-mcp-free (nombre descriptivo)
Caducidad: 30 días (o período deseado)

Casillas recomendadas para Figma MCP:
✅ Requeridas (marca absolutamente estas)

File content - Esencial para leer archivos de diseño
File metadata - Requerido para recuperación de información de archivos
Current user - Necesario para verificación de autenticación de API

⚡ Recomendadas (maximizar funcionalidad de MCP)

Library content - Recuperación de componentes/estilos
Library assets - Útil para extracción de Design Tokens
Team library content - Soporte para componentes compartidos del equipo

🔧 Opcionales (para características avanzadas)

File versions - Para características de gestión de historial
Projects - Para gestionar proyectos completos
Webhooks - Características de sincronización en tiempo real (planificado para el futuro)
Dev releases - Características equivalentes a Dev Mode

🚫 No necesarias

File dev releases - Innecesario para solo lectura

Configuración mínima para empezar:
✅ Current user
✅ File content
✅ File metadata
✅ Library content
¡Estos 4 son suficientes para un servidor MCP funcional!
Si necesitas más permisos después, puedes regenerar el token. Comienza con configuración mínima y expande según sea necesario.

Hacer clic en “Generate token”
⚠️ Crítico: Copiar y Guardar Token

Ejemplo: figd_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

¡Este token nunca se mostrará de nuevo!
Asegúrate de guardarlo en un bloc de notas o similar

📊 Estructura de Restricción de Permisos de la API de Figma

Este es el núcleo de la estrategia de bloqueo del proveedor.

Personal Access Token (Gratuito)

✅ Acceso de solo lectura
❌ Sin permisos de escritura
❌ Restricciones de API de Dev Mode

Planes de Pago (Dev/Full seat)

✅ API de Dev Mode
✅ Algunos permisos de escritura
✅ Webhooks avanzados

🔥 Este es un Ejemplo Típico de Empaquetado de Código Abierto

API REST de Figma (técnicamente capaz de lectura/escritura)
↓
Agregar artificialmente restricciones de permisos
↓
"¿Quieres escribir? Actualiza al plan de pago"
↓
Forzar estructura de pago sobre tecnología gratuita

⚡ ¡Pero No Te Preocupes! Solo Lectura es Más Que Suficiente

Lo que figma-mcp-free puede hacer:

Extracción de design tokens → generación de CSS/Tailwind
Análisis de estructura de componentes → generación de React/Vue
Recuperación de información de diseño → soporte responsive
Información de color/fuente → generación de archivos de tema
Recuperación de assets en lote → salida de imagen optimizada

¡Todo esto es posible con acceso de solo lectura!

🚀 Soluciones Alternativas Cuando se Necesita Acceso de Escritura

Mediante Plugin de Figma

// Ejecutar escritura dentro del plugin
figma.createComponent(componentData);

Automatización Web de Figma

// Operar con Playwright/Puppeteer
await page.click('[data-testid="create-component"]');

Utilizar Función de Importación

# Flujo inverso mediante SVG/Sketch/Adobe XD
figma-mcp-free export → editar → reimportar

Conclusión: ¡Solo lectura es lo suficientemente revolucionario!

De hecho, esto demuestra:

“Incluso los permisos de escritura que Figma restringe artificialmente son innecesarios. Solo lectura puede proporcionar más valor que el Dev Mode oficial”

¡Esta es la esencia de la resistencia técnica! 🔥

💻 Configuración y Uso con Claude Code

Paso 1: Instalar Claude Code

# Instalar con npm
npm install -g @anthropic-ai/claude-code

# Verificar instalación
claude --version

Paso 2: Autenticación

# Primer lanzamiento de Claude Code
claude

# El navegador se abre para iniciar sesión con cuenta de Claude
# O usar clave de API

🚀 Configuración de Servidor MCP Gratuito

Comandos de Conexión Correcta Más Rápidos (Claude Code)

Ejemplo para agregar al ámbito de usuario:

# Usar un token nuevo (no expuesto)
claude mcp add figma --scope user \
  --env FIGMA_API_KEY=figd_xxx \
  -- npx -y figma-developer-mcp --stdio

Verificación:

claude mcp list   # figma debería aparecer
claude            # Iniciar Claude Code
# Después del inicio, dentro del editor
/mcp              # "figma" debería mostrar como Connected

-- es requerido para separar banderas de Claude de argumentos del lado del servidor. Anthropic

Para Compartir Proyecto

El método oficial es colocar .mcp.json en la raíz del proyecto:

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": { "FIGMA_API_KEY": "figd_xxx" }
    }
  }
}

(Este método de archivo guarda en la misma ubicación que --scope project.)

Lista de Verificación de Descuidos Comunes

.env no se carga automáticamente. O bien export FIGMA_API_KEY=... o pasar mediante --env / .mcp.json como arriba.
Verificación de salud del token (verificar conexión de API primero) curl -sH "X-Figma-Token: $FIGMA_API_KEY" https://api.figma.com/v1/me Si se devuelve JSON de usuario, la clave es válida. Personal Access Token usa el encabezado X-Figma-Token.
No confundir con Figma Dev Mode MCP (oficial) Eso es algo separado usado dentro de Figma desktop. La versión npm que estamos usando es un servidor stdio local, y necesitan distinguirse.
Nota de ejecución nativa de Windows (no WSL) Al lanzar npx, se necesita un wrapper cmd /c: claude mcp add my-server -- cmd /c npx -y <package>

Mejores Prácticas de Uso de Claude Code + Figma MCP

Requisitos Previos

Servidor MCP de Figma configurado con clave de API establecida
Permiso explícito para “recuperación directa de datos de Figma” mejora la eficiencia

Información Recomendada al Solicitar Implementación

Enlace de Figma: URL completa (incluyendo parámetro node-id)
Destino de salida: Ruta de archivo específica (ej., src/components/Button.tsx)
Componentes: Tipos de archivos requeridos (componente + CSS + imágenes, etc.)
Método de verificación: comandos de lint, build, test
Restricciones: Requisitos de responsive, accesibilidad, etc.

Consejos de Eficiencia

Especificar nodeId: Mencionar si el nodo específico está determinado
Tipos de assets: Formatos de imagen requeridos (SVG/PNG) y tamaños
Referencia de archivo existente: Especificar ruta si tokens.json o variables CSS existen localmente
Sistema de diseño: Mencionar patrones de componentes existentes o convenciones de estilo

Ejemplo de Plantilla de Solicitud de Implementación de Claude Code

【Solicitud】Implementar diseño de Figma como componente React

**URL de Figma**: https://www.figma.com/design/[fileKey]/[title]?node-id=[nodeId]
**Destino de salida**: src/components/[ComponentName]/
**Estructura**:
- [ComponentName].tsx (componente principal)
- [ComponentName].module.css (estilos)
- assets/ (imágenes requeridas)

**Requisitos**:
- Soporte responsive (móvil/escritorio)
- Cumplimiento de modo estricto de TypeScript
- Accesibilidad (atributos ARIA)

**Verificación**:
- npm run lint
- npm run build
- Verificación de operación de Storybook

**Nota**: OK recuperar datos del servidor MCP de Figma

Ventajas Específicas de Claude Code

serena MCP: Comprensión eficiente de estructura de código existente con búsqueda simbólica
Ejecución paralela: Procesamiento rápido con ejecución simultánea de múltiples herramientas
TodoWrite: Gestión de progreso y visualización de tareas complejas
Función de memoria: Retención de contexto mediante persistencia de información del proyecto

Si Usas Servidor Alternativo (versión HAPINS)

npm i -g @hapins/figma-mcp
FIGMA_ACCESS_TOKEN=figd_xxx npx @hapins/figma-mcp

(La única diferencia es que el nombre de la variable de entorno es ACCESS_TOKEN)

🤖 Configuración y Uso con Codex CLI

Paso 1: Instalar Codex CLI

# Instalar con npm
npm install -g @openai/codex

# O con yarn
yarn global add @openai/codex

Paso 2: Configuración Inicial

# Iniciar Codex
codex

# Seleccionar "Sign in with ChatGPT"
# Iniciar sesión en el navegador

Paso 3: Configurar Servidor MCP

Editar Archivo de Configuración

# Abrir archivo de configuración
code ~/.codex/config.toml

# O
nano ~/.codex/config.toml

Agregar lo siguiente:

# ~/.codex/config.toml

# Modelo (opcional: gpt-5 es predeterminado si se omite)
model = "gpt-5"

[mcp_servers.figma]
command = "npx"
args    = ["-y", "figma-developer-mcp", "--stdio"]
env     = { FIGMA_API_KEY = "figd_xxx" }

La configuración anterior no es para “leer Figma” sino para instruir cómo lanzar/conectar el servidor MCP.

Qué Significa Cada Parte

[mcp_servers.figma] → Registra un “servidor llamado figma” con el cliente MCP (Codex/Claude Code, etc.)
command = "npx" / args = ["-y","figma-developer-mcp","--stdio"] → Lanzar paquete npm figma-developer-mcp con npx. → -y significa “automáticamente Sí a confirmaciones”. → --stdio especifica método de comunicación, significando conectar cliente⇄servidor mediante entrada/salida estándar (StdIn/StdOut). 👉 Esto no es un interruptor para leer desde Figma. Solo eligiendo la “ruta de transporte” de MCP (otros ejemplos: SSE/WebSocket, etc.)
env = { FIGMA_API_KEY = "figd_..." } → Pasar Personal Access Token de Figma al servidor como variable de entorno. El servidor usa esto para hacer solicitudes HTTP a api.figma.com para recuperar archivos/nodos y exportar imágenes. (Aquí es donde se leen realmente los datos de Figma. --stdio no está relacionado)

Flujo General (Diagrama Aproximado)

Cliente(Codex) ⇄ stdio ⇄ figma-developer-mcp(proceso Node local) ⇄ HTTPS ⇄ API de Figma (usando FIGMA_API_KEY)

Paso 4: Verificar Operación

# Iniciar Codex
codex

# Verificar con prompt
> Show me available MCP servers

# figma debería aparecer

🎨 Práctica: Generación de Código desde Diseño

Preparación: Preparar Diseño de Muestra

Opción 1: Usar Tu Propio Diseño

Crear nuevo archivo en Figma
Diseñar un botón o tarjeta simple
Seleccionar marco o componente

Opción 2: Usar Sistema de Diseño Público

Material 3 Design Kit:
https://www.figma.com/community/file/1035203688168086460

Generación de Código Real

Ejemplo de Uso con Claude Code

# Iniciar Claude Code
claude

# Copiar enlace de Figma (ejemplo)
# https://www.figma.com/file/xxxxx/MyDesign?node-id=1:2

Ejemplo de Prompt:

Implementa este diseño de Figma como componente React:
[Pegar enlace de Figma]

Requisitos:
- Usar TypeScript
- Estilar con Tailwind CSS
- Soporte responsive
- Considerar accesibilidad

Ejemplo de Uso con Codex CLI

# Ejecutar en directorio del proyecto
codex

# Prompt
/model gpt-5-codex

# Solicitar implementación de diseño de Figma
Implement this Figma design as a React component:
[Enlace de Figma]
Use the MCP server to get design tokens and layout information.

Podrías comunicarte como sigue. Esto es lo que realmente pregunté a Codex CLI:

Dado que ~/.codex/config.toml ya tiene la configuración del servidor MCP de Figma y la clave de API, el permiso explícito como “OK recuperar tokens directamente desde Figma” ayuda al solicitar (el uso de red está restringido por defecto, así que haré solicitudes de permiso explícitas si es necesario).

Al escribir solicitudes de implementación, no solo incluir la URL objetivo como en el chatgpt.txt actual, sino también especificar ubicación de salida (ej., src/app/components/), formato de salida deseado (componente + CSS Modules + colocación de imagen…) y requisitos de prueba para acelerar el flujo de lectura→código→validación.
Si has determinado qué recursos recuperar con MCP, anota los comandos a usar, nodeId y tipos de assets (imágenes/JSON) que quieres descargar juntos, para no dudar al consultar Figma.
Por el contrario, si “token ya recuperado” o “usando tokens.json local”, especifica la ruta y el contenido para comenzar el trabajo inmediatamente sin acceso a la red.
Dado que es suficiente colocar configuraciones comunes en .codex como esta vez, este estilo está bien en adelante. Si hay notas adicionales, agrégalas a chatgpt.txt y las leeré.

Contenido de chatgpt.txt

# Plantilla de Solicitud de Implementación de Diseño de Figma

## Objetivo
- Implementar nodo de Figma especificado como componente Next.js (React) e incorporar estilos y assets necesarios.

## Información a Incluir en la Solicitud
1. Enlace de Figma y node-id (ej., https://www.figma.com/...&node-id=60799-137)
2. Ubicación de archivo de salida y ejemplo de estructura (ej., `src/app/components/IntroductionCard.tsx`, `.module.css`, destino de colocación de imagen)
3. Método de prueba/verificación (ej., `npm run lint`, `npm run build`, confirmación en navegador)
4. Cómo obtener design tokens o datos de diseño:
   - Si está bien recuperar usando servidor MCP de Figma definido en `.codex/config.toml`
   - O ruta a datos alternativos como tokens.json / CSS local
5. Restricciones especiales (requisitos de soporte responsive, requisitos de accesibilidad, política de comentarios, etc.)

Referencia

La configuración del servidor MCP de Figma está registrada en ~/.codex/config.toml.
Cuando se necesita acceso a la red, se puede solicitar aprobación durante la ejecución del comando, por lo que declarar la política de permisos por adelantado hace que sea más fluido.
Si se necesitan assets binarios como imágenes, exportar desde Figma o proporcionar rutas locales ya colocadas.

Con solicitudes que cumplan lo anterior, la implementación y las pruebas pueden manejarse con intercambios mínimos.

Ejemplo Real

# Plantilla de Solicitud de Implementación de Diseño de Figma (Ejemplo)

## Objetivo
- Componentizar nodo de Figma especificado en Next.js (React) y agregar estilos y assets necesarios.

## Información a Incluir en la Solicitud
1. Enlace de Figma y node-id:
   https://www.figma.com/design/zulHEkmFfSjlprJcoxtPCv/Material-3-Design-Kit--Community-?node-id=60799-137&t=f7VWEEISfmSKhtT0-0
2. Estructura de archivo de salida (ejemplo):
   - `src/app/components/IntroductionCard.tsx`
   - `src/app/components/IntroductionCard.module.css`
   - Colocar imágenes bajo `public/images/` (seguir procedimiento normal de Next.js)
3. Método de prueba/verificación:
   - `npm run lint`
   - `npm run build`
   - Confirmar `http://localhost:3000/` en navegador
4. Recuperación de design token/datos de diseño:
   - OK recuperar usando servidor MCP de Figma en `.codex/config.toml`
5. Restricciones especiales: Ninguna

Este formato proporciona toda la información necesaria para comenzar el trabajo.

Ejemplo de Código Generado

🔧 Solución de Problemas

Problemas Comunes y Soluciones

Problema 1: El Token se Muestra como Inválido

Causa: Error de copia del token, caducidad, ámbito insuficiente

Solución:

# Regenerar token
1. Figma Settings > Security
2. "Revoke" token antiguo
3. Generar nuevo token
4. Actualizar variable de entorno

export FIGMA_API_KEY="nuevo token"

Problema 2: El Servidor MCP No Puede Conectarse

Causa: Firewall, conflicto de puerto, versión de Node.js

Solución:

# Verificar versión de Node.js
node --version
# Se requiere v18 o posterior

# Iniciar con puerto especificado
npx figma-developer-mcp --port 3334 --figma-api-key=token

# Verificar firewall (Windows)
netsh advfirewall firewall show rule name=all | findstr 3333

Problema 3: La Generación de Código No Funciona Bien

Causa: Complejidad del diseño, prompts poco claros

Solución:

Comenzar con Componentes Simples
- Botón único
- Tarjeta simple
- Formulario básico
Usar Prompts Claros

Buen ejemplo:
"Implementa este componente de botón en React.
Usa Tailwind, incluye efectos hover y eventos de clic"

Mal ejemplo:
"Haz esto"

Aumentar Gradualmente la Complejidad
- Primero implementación básica
- Luego estilos
- Finalmente agregar características

Problema 4: Error de Permission Denied

Solución:

# Al instalar npm globalmente
# No usar sudo (recomendado)
npm config set prefix ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

# Si aún no funciona, usar npx
npx @anthropic-ai/claude-code

¿Qué Pasa con la Versión de Pago?

“Pago ≠ acceso de escritura REST”. La API REST es básicamente “solo lectura” (solo algunas características como comentarios pueden escribirse). Agregar/mover/editar contenido de diseño no es posible con REST, y requiere API de Plugin de Figma (ejecutado dentro del editor) + permisos de edición (asiento de Editor).

Flujo de Implementación Recomendado (Token Gratuito OK)

Confirmar enlace /design (o /file) + node-id (reemplazar 1-2 → 1:2).
Exportar assets requeridos con API de Images (PNG/SVG/WebP).
Recuperar texto/fuente/color/posición/auto-layout con API de Files/Nodes.
Mapear información recuperada a React + Tailwind (reemplazar posiciones fijas con auto-layout donde sea posible).
Colocar imágenes en /public o cargar enlaces directos CDN con next/image.
Terminar con responsive (mapear Auto Layout de Figma → Flex/Grid).

Plantilla Mínima (Ejemplo)

// app/toc/page.tsx
import Image from "next/image";

export default function Toc() {
  return (
    <main className="min-h-screen bg-stone-100 flex items-center justify-center p-8">
      <section className="max-w-5xl w-full grid grid-cols-12 gap-8 items-start">
        <h1 className="col-span-12 text-5xl font-semibold tracking-tight">
          Tabla de Contenidos
        </h1>

        <div className="col-span-5">
          <div className="rounded-xl overflow-hidden shadow">
            <Image
              src="/images/mamu-avatar.png" // ← Asset exportado desde Images API
              alt="Mamu Minokamo"
              width={640}
              height={640}
            />
          </div>
          <p className="mt-3 text-xl">Mamu Minokamo</p>
        </div>

        <ol className="col-span-7 space-y-6 text-4xl leading-snug">
          <li>Exposición</li>
          <li>Acción ascendente</li>
          <li>Clímax</li>
          <li>Acción descendente</li>
          <li>Resolución</li>
        </ol>
      </section>
    </main>
  );
}

Notas Importantes

Reemplazo de fuente (fuentes solo de Figma → fuentes web).
Uso excesivo de posicionamiento absoluto causa rupturas de diseño. Mejor cambiar Auto Layout→Flex.
Las imágenes son enlaces directos o /public. No se pueden usar URLs de vista de Figma.
Gestionar token con variables de entorno (.env, etc.). No codificar en repositorios públicos.

Las imágenes originales pegadas deberían finalmente reemplazarse con URLs estables colocadas en tu servidor o /public. (Solo para desarrollo, puedes usar temporalmente “URLs temporales” de la API de Figma pero expiran)

3 Enfoques Realistas

1) Producción (Recomendado): Exportar y Alojamiento Estable

Exportar imágenes desde Figma (PNG/JPG/SVG) → a) Guardar en /public/images/... de Next.js y usar src="/images/..." b) O subir a medios de WordPress o tu CDN y usar enlace directo
El nombre de archivo debe ser ASCII, sin espacios (ej., mamu-avatar.png)

import Image from "next/image";
export default function Hero() {
  return <Image src="/images/mamu-avatar.png" alt="Mamu" width={640} height={640} />;
}

Si usas enlaces directos de WP o CDN, agregar dominios permitidos a next.config.js

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: 'https', hostname: 'minokamo.tokyo' },
      { protocol: 'https', hostname: 'vibelsd.com' },
    ]
  }
}

2) Alternativa: Colocar en GitHub Raw, etc.

Poner imágenes en repositorio y usar URL Raw
Evitar imágenes demasiado grandes (recomendar dentro de varios MB)

images: {
  remotePatterns: [{ protocol: 'https', hostname: 'raw.githubusercontent.com' }]
}

3) Solo Desarrollo: URLs Temporales de API de Images de Figma

Asumiendo caducidad inmediata. Conveniente para enlaces temporales en depuración o implementación inicial

curl -H "X-Figma-Token: $FIGMA_API_KEY" \
  "https://api.figma.com/v1/images/<file_key>?ids=<node_id>&format=png"
# Poner temporalmente url del JSON devuelto en <Image src="...">

Si se usa, permitir dominio de imagen S3/figma en next.config.js (※No para producción ya que expira)

images: {
  remotePatterns: [
    { protocol: 'https', hostname: 's3-us-west-2.amazonaws.com' },
    { protocol: 'https', hostname: 'images.figma.com' }, // Coincidir con dominio de salida real
  ]
}

Instrucciones para Agente (Se Puede Pegar Directamente)

Exportar <node_id> de <file_key> desde Figma con Images API a PNG 2x, guardar en public/images/mamu-avatar.png del repositorio. En componente, usar <Image src="/images/mamu-avatar.png" width={640} height={640} />, no usar referencias remotas. Si hay máscara, agregar use_absolute_bounds=true para exportar. Si se usa URL remota, agregar dominio correspondiente a next.config.js.

Pequeños Consejos de Operación

Usar SVG tal cual si es posible (iconos, etc.) → Súper estable al colocar inline//public tal cual
Evitar nombres de archivo en japonés (evitar problemas de codificación de URL y compatibilidad de herramientas)
Verificación de enlace directo: Abrir en ventana de incógnito para verificar que solo la imagen se muestre y HTTP 200/Content-Type: image/*

🚀 Avanzado: Uso Más Sofisticado

Generación Automática de Sistema de Diseño

# Ejecutar en Claude Code
claude

# Prompt
"Genera una biblioteca completa de componentes React desde este sistema de diseño de Figma.
Incluye también historias de Storybook."

Integración de Pipeline CI/CD

# .github/workflows/design-sync.yml
name: Sync Figma Design
on:
  schedule:
    - cron: '0 0 * * *'  # Ejecutar diariamente
jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v2
      - name: Generate Components
        env:
          FIGMA_API_KEY: ${{ secrets.FIGMA_API_KEY }}
        run: |
          npx figma-developer-mcp --sync

Soporte Multi-Framework

// config.js
module.exports = {
  frameworks: ['react', 'vue', 'svelte'],
  styling: ['tailwind', 'styled-components', 'css-modules'],
  typescript: true,
  generateTests: true
};

📊 Comparación: Solución de Pago vs Gratuita

Característica	Figma Oficial (Pago)	Versión Comunitaria (Gratis)
Precio	$15/mes~	Completamente Gratis
Soporte MCP	✅	✅
Personal Access Token	✅	✅
Generación de Código	✅	✅
Extracción de Design Token	✅	✅
Frecuencia de Actualización	Regular	Dependiente de comunidad
Soporte	Soporte Oficial	Soporte Comunitario
Dificultad de Configuración	Fácil	Poco Más Trabajo (Resuelto en Este Artículo)

🎉 Resumen y Próximos Pasos

Lo Que Logramos

✅ Construir entorno para usar MCP en plan gratuito de Figma
✅ Configuración de autenticación con Personal Access Token
✅ Integración de MCP en Claude Code y Codex CLI
✅ Realizada generación de código real desde diseño

Próximos Pasos

Aplicar a Proyectos Reales
- Migrar componentes UI de proyectos existentes
- Construir sistema de diseño para nuevos proyectos
Introducción de Equipo
- Desplegar a miembros del equipo
- Crear archivos de configuración compartidos
Personalización
- Desarrollar servidor MCP personalizado
- Integrar con sistema de diseño interno

Comunidad y Recursos

GitHub Issues: Reportar problemas y compartir soluciones
Discord: Soporte en tiempo real
Documentación:
- MCP Oficial
- API de Figma

🙏 Palabras Finales

Hemos demostrado que el poder del código abierto puede contrarrestar las estrategias de bloqueo corporativo. Con este método, cualquiera puede realizar desarrollo asistido por IA de vanguardia gratis.

Si este artículo fue útil: