Cómo Crear Diseños en Figma con IA usando Talk to Figma MCP

Guía completa para configurar Claude Code/Desktop y crear diseños directamente en Figma

El Problema

El servidor MCP oficial de Figma (mcp.figma.com) es solo de lectura. Permite extraer código de diseños existentes, pero NO puede crear ni editar elementos.

La Solución: Talk to Figma MCP

Talk to Figma MCP es un servidor MCP comunitario que SÍ permite crear y editar diseños en Figma mediante IA.

Herramientas de Creación Disponibles

Categoría	Herramientas
Formas	`create_rectangle`, `create_ellipse`, `create_polygon`, `create_star`
Contenedores	`create_frame` (con auto-layout), `group_nodes`, `ungroup_nodes`
Texto	`create_text`, `set_text_content`, `set_font_name`, `set_font_size`
Componentes	`create_component_instance`, `get_local_components`, `get_remote_components`
Modificación	`set_fill_color`, `set_stroke_color`, `move_node`, `resize_node`, `set_corner_radius`
Efectos	`set_effects`, `set_auto_layout`, `set_effect_style_id`

Arquitectura

Claude/Cursor ↔ MCP Server ↔ WebSocket (Puerto 3055) ↔ Plugin Figma

El sistema usa un plugin de Figma que actúa como puente WebSocket para ejecutar comandos en el documento.

Requisitos Previos

Figma Desktop (la versión web no funciona)
Claude Desktop o Cursor IDE o Claude Code
Bun (runtime de JavaScript)

Instalar Bun

bash

# macOS/Linuxcurl -fsSL https://bun.sh/install | bash# Windows (PowerShell)powershell -c "irm bun.sh/install.ps1 | iex"

Paso 1: Instalar el Plugin de Figma

Ve a Talk to Figma MCP Plugin en la comunidad de Figma
Haz clic en "Open in..." → selecciona Figma Desktop
El plugin quedará instalado en tu cuenta

Alternativa (desarrollo local):

bash

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.gitcd claude-talk-to-figma-mcp

Luego en Figma: Menú → Plugins → Development → Import plugin from manifest → selecciona src/claude_mcp_plugin/manifest.json

Paso 2: Configurar el Servidor MCP

Para Claude Desktop

Opción A: Instalación automática (recomendada)

bash

npx claude-talk-to-figma-mcp

Opción B: Paquete DXT

Descarga el archivo .dxt de releases
Doble clic para instalar automáticamente
Reinicia Claude Desktop

Opción C: Configuración manual

bash

git clone https://github.com/arinspunk/claude-talk-to-figma-mcp.gitcd claude-talk-to-figma-mcpbun installbun run buildbun run configure-claude

Reinicia Claude Desktop.

Para Cursor IDE

Ve a Settings → Tools & Integrations
Clic en "New MCP Server"
Se abrirá ~/.cursor/mcp.json, agrega:

json

{  "mcpServers": {    "TalkToFigma": {      "command": "bunx",      "args": ["cursor-talk-to-figma-mcp@latest"]    }  }}

Guarda y reinicia Cursor

Para Claude Code

bash

# Agregar el servidor MCPclaude mcp add talk-to-figma -- bunx cursor-talk-to-figma-mcp@latest# Verificar que se agregóclaude mcp list

Alternativa manual: Edita ~/.claude.json:

json

{  "mcpServers": {    "talk-to-figma": {      "command": "bunx",      "args": ["cursor-talk-to-figma-mcp@latest"]    }  }}

Paso 3: Conectar Figma con Claude

Abre Figma Desktop y el archivo donde quieres diseñar
Ejecuta el plugin: Menú → Plugins → Talk to Figma MCP Plugin (o Cmd/Ctrl+P → "Talk to Figma")
Copia el Channel ID que aparece en el plugin
En Claude/Cursor, escribe:
```
Talk to Figma, channel ABC123XYZ
```
(reemplaza ABC123XYZ con tu Channel ID real)

Si todo está bien, Claude confirmará la conexión.

Paso 4: Crear Diseños con Prompts

Ejemplos de Prompts Efectivos

Crear un frame básico:

Crea un frame de 400x300 con fondo blanco y border-radius de 16px

Crear una card completa:

Crea una card de producto con:- Frame de 320x400 con fondo #FFFFFF- Imagen placeholder de 320x200 en la parte superior- Texto "Producto" en fuente Inter Bold 18px- Texto de precio "$99.00" en Inter Medium 24px color #5158F6- Botón de 280x48 con fondo #5158F6, texto blanco "Agregar al carrito"- Padding de 16px y gap de 12px usando auto-layout vertical

Dashboard completo:

Diseña una pantalla de dashboard con:- Sidebar izquierdo de 280px con logo y navegación- Header de 64px con título y avatar- Área principal con grid de 4 cards de métricas- Usa colores: primario #5158F6, fondo #F8F8F8, texto #11151A

Prompts a Evitar

❌ "Hazlo bonito" (muy vago) ❌ "Mejora el diseño" (sin especificar qué) ❌ "Crea algo moderno" (subjetivo)

Troubleshooting

"No se puede conectar al servidor"

bash

# Verificar que el puerto 3055 está librelsof -i :3055# Reiniciar el servidorpkill -f "bun socket"bun socket

"Plugin no encontrado en Figma"

Cierra Figma completamente
Vuelve a abrir y ve a Menú → Plugins → Development
Importa el manifest nuevamente

"MCP no disponible en Claude"

bash

# Para Claude Desktopbun run configure-claude# Para Claude Codeclaude mcp list  # verificar que aparececlaude mcp remove talk-to-figmaclaude mcp add talk-to-figma -- bunx cursor-talk-to-figma-mcp@latest

"Los comandos fallan silenciosamente"

Abre la consola de desarrollo en Figma (Menú → Plugins → Development → Open Console)
Revisa los logs del servidor WebSocket
Verifica que tienes permisos de edición en el documento

Recursos

GitHub: arinspunk/claude-talk-to-figma-mcp
Plugin Figma: Talk to Figma MCP Plugin
Documentación MCP: modelcontextprotocol.io

Conclusión

Con Talk to Figma MCP, puedes usar Claude para diseñar interfaces directamente en Figma. Es especialmente útil para:

Prototipar rápido ideas de UI
Crear variantes de componentes existentes
Generar diseños desde descripciones de texto
Automatizar tareas repetitivas de diseño

La combinación de IA + Figma abre posibilidades enormes para acelerar el flujo de diseño → código.

Cómo Crear Diseños en Figma con IA usando Talk to Figma MCP

BrendaGo

El Problema

La Solución: Talk to Figma MCP

Herramientas de Creación Disponibles

Arquitectura

Requisitos Previos

Instalar Bun

Paso 1: Instalar el Plugin de Figma

Paso 2: Configurar el Servidor MCP

Para Claude Desktop

Para Cursor IDE

Para Claude Code

Paso 3: Conectar Figma con Claude

Paso 4: Crear Diseños con Prompts

Ejemplos de Prompts Efectivos

Prompts a Evitar

Troubleshooting

"No se puede conectar al servidor"

"Plugin no encontrado en Figma"

"MCP no disponible en Claude"

"Los comandos fallan silenciosamente"

Recursos

Conclusión

Entendiendo yield*: El Operador de Delegación en JavaScript y Effect

Checa este otro Post

Usando Markdoc con Remix: la pareja perfecta

Checa este otro Post

Animaciones web con React + Motion 🧙🏻