MCP Figma Dev Mode — context real del diseño para generar código fiel

Qué es#

Figma Dev Mode MCP es la implementación oficial que Figma publicó para que AI agents (incluido Claude Code) entiendan tu diseño con la precisión que tiene Dev Mode dentro de Figma: medidas exactas, design tokens, properties de componentes, jerarquía, naming.

La diferencia versus pegarle un screenshot a Claude: el screenshot te da "más o menos". El MCP te da los valores reales — #5B21B6, padding: 24px, font-size: 16px, no aproximaciones.

Resultado: cuando Claude genera código desde un frame de Figma, el output usa los valores correctos. Menos iteraciones de "movelo 2px a la derecha".

997 installs lo posicionan como uno de los MCPs más adoptados de la categoría devtools.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --mcp devtools/figma-dev-mode

Pre-requisitos: cuenta Figma con plan que incluya Dev Mode (Professional o superior) + Personal Access Token.

Para Claude:

Instalé el MCP devtools/figma-dev-mode. Configurá las credenciales y
generame el componente React del frame `<URL Figma>` respetando colores,
spacing y tipografía exactos. Si hay design tokens definidos, usalos.

Qué podés hacer con esto#

Generación de componente fiel al diseño#

"Convertí este frame de Figma a un componente React + Tailwind. Usá los tokens de color y typography del archivo, no inventes". El MCP los lee directo.

Extracción de design tokens#

"Listame todos los design tokens del proyecto Figma X. Generame un tokens.json listo para usar con Style Dictionary o equivalente".

Auditoría de design system#

"Comparame los componentes definidos en mi código vs los componentes en el library de Figma. ¿Qué tengo en código que no está en Figma? ¿Y al revés?". Útil para alinear DS.

Inspecciones precisas#

"Para el botón primario en el frame X, dame específicamente: color, hover state, font, padding, border radius, sombra". El MCP saca todo.

Generación de Storybook stories#

"Para cada variant del componente Button en Figma (primary, secondary, ghost, danger), generá la story de Storybook correspondiente con los props correctos".

Workflow design-to-code#

Si tu diseñador trabaja en Figma y vos en código, el MCP cierra el gap. Cambios en Figma → Claude detecta → propone diff en código.

Pre-requisitos#

• Cuenta Figma con Dev Mode (Pro+)
• Personal Access Token generado desde Figma settings
• Acceso al archivo / proyecto target
• Diseño con tokens y componentes bien nombrados: el MCP no inventa nombres, lee lo que hay

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: Figma Dev Mode MCP — comando exacto.
• Config JSON: figma-dev-mode.json.
• Figma Dev Mode docs: help.figma.com — referencia oficial.

Recursos relacionados#

• Réplica diseños web — patrón clásico de replicar UI sin tener Figma fuente; complementario al MCP.
• Anatomía de Claude — ubicar este MCP como conector a un servicio externo.
• Claude Plugins Official — incluye también un plugin figma con scope distinto (todo Figma, no solo Dev Mode).