Guía: integrar Figma en flujos de trabajo con IA

Propósito

Permitir a los LLMs:

• Analizar y modificar diseños en Figma.
• Generar código a partir de ellos.

A quién va dirigido

Equipos de UX/UI que quieren automatizar auditorías de accesibilidad, realizar tests de usuario sintéticos y iterar diseños basándose en feedback automatizado.

Equipos de Frontend que necesitan acelerar la traducción de diseños a código, especialmente cuando trabajan con sistemas de componentes y frameworks modernos.

Equipos de Backend/DevOps que desarrollan workflows automatizados y agentes IA que requieren integrar análisis de diseños en Figma y generación de código a partir de ellos.

Equipos multidisciplinarios que buscan reducir la fricción en el handoff entre diseño y desarrollo, manteniendo cada equipo en su herramientas habituales.

Herramientas

API de Figma

Requisitos

• Cuenta de Figma
• Generar un token de acceso o usar OAuth 2

Descripción

Es la vía más simple para que un LLM analice un diseño.

La API de Figma permite construir endpoints para solicitar archivos, imágenes, versiones de archivos, usuarios, comentarios, proyectos de equipo y archivos de proyecto. Devuelve un JSON que podemos pasar al LLM para que lo interprete.

A diferencia de los MCPs, no necesitamos tener abierto Figma Desktop para que un agente analice un diseño. Esto la convierte en el método idóneo para integrar Figma en flujos de trabajo de agentes IA.

Instalación

Al tratarse de una API, no de un MCP, no existe una instalación como tal. Podemos ver cómo funciona con una prueba simple con Cursor o VS Code:

1. Crea un token.
2. Dile a tu agente que analice un diseño en Figma ejecutando una petición curl de un endpoint.

Por ejemplo, para la siguiente URL de un nodo de un diseño:

https://www.figma.com/design/XG1EYHLnC7NdwGuYc7LmUf/MVC---WEB?node-id=6037-2235&t=AHpchSRAIyGCdoci-0

dile que use:

curl -H 'X-FIGMA-TOKEN: {your personal access token}'
'https://api.figma.com/v1/files/XG1EYHLnC7NdwGuYc7LmUf/nodes?ids=6037-2235'

Al recibir el prompt, el agente ejecutará la petición curl y obtendrá un JSON con los parámetros del diseño. Luego lo analizará y generará un texto con el contenido de su análisis.

Dev Mode MCP Server

Requisitos

• Dev o Full seat en los planes Professional, Organization o Enterprise.
• Un editor de código o aplicación que soporte MCP Servers (VS Code, Cursor, Windsurf, Claude Code).
• Figma Desktop App

Descripción

Se trata del servidor MCP oficial de Figma.

Habilita varias herramientas de análisis (5 a la fecha de publicación de este post) que los agentes pueden usar para generar código a partir de un diseño.

Las herramientas que permiten "ver" un diseño son get_code y get_image. A diferencia de la API de Figma, get_code no devuelve un JSON con los datos del diseño, sino una traducción del diseño a React que genera al vuelo Dev Mode.

Esto facilita al LLM la generación de código aunque no sea React, ya que la distancia entre React y otro framework/lenguaje es menor que entre la información del JSON y nuestro framework/lenguaje.

get_image crea una captura de pantalla del diseño seleccionado y sirve de apoyo al agente a la hora de generar código.

Instalación

1. Activación en Figma Desktop App
2. Instalación en nuestro editor de código (Cursor, VS Code, Windsurf, Claude Code, Others)

Claude Talk to Figma MCP

Requisitos

• Claude Desktop
• Figma Desktop
• Bun instalado

Descripción

MCP server de código abierto.

Habilita un conjunto amplio de herramientas (43 a la fecha de publicación de este post) que permite a los agentes analizar y también modificar diseños en Figma.

Las herramientas que permiten "ver" un diseño devuelven un JSON con sus datos. Esto permite a los LLMs analizarlo mediante "thinking aloud", evaluación crítica, test de usuario, auditoría de accesibilidad, auditoría de SEO, etc.

Con las herramientas de modificación, el LLM puede después aplicar los cambios propuestos en el análisis.

Instalación

Sigue las instrucciones de la documentación oficial.

Comparte tu experiencia

Si ya estás integrando Figma en tu flujo de trabajo con IA, ya sea con estas u otras herramientas, me encantaría conocer tu experiencia:

• Cómo ha ido su instalación.
• Experimentos y descubrimientos.
• Casos de uso reales.
• Resultados obtenidos.

El ecosistema de IA + diseño/desarrollo está en constante evolución y las mejores prácticas emergen de la experiencia colectiva de quienes las implementan en proyectos reales ✊

Si todavía no lo has hecho, atrévete con alguna de las herramientas de este post. Si algo se te atasca, puedes escribirme en mi perfil de LinkedIn 😉