Preparar Figma
Comprobar con el MCP
Cómo usar las herramientas del servidor MCP de Figma para ver qué contexto recibe un agente de un componente y qué revisar en la respuesta.
Última revisión:
Después de preparar un componente, conviene comprobar qué recibe de él un agente. El servidor MCP de Figma tiene herramientas de lectura que muestran exactamente eso. Si un dato no aparece en la respuesta, el agente no lo conoce.
En esta página
- Las herramientas de lectura
- Cómo pedir la comprobación
- Qué revisar en la respuesta
- Selecciones pequeñas
- En resumen
Las herramientas de lectura
Estas son las herramientas de lectura del servidor MCP de Figma más útiles para comprobar un componente (Figma: Tools and prompts):
| Herramienta | Qué devuelve |
|---|---|
get_design_context | Código y contexto de diseño de una capa o selección |
get_variable_defs | Las variables y estilos que usa la selección: colores, espaciado, tipografía |
get_code_connect_map | Para cada instancia: nombre del componente, ubicación en el código y fragmento, si existe |
get_metadata | Un esquema ligero en XML de las capas de la selección |
get_screenshot | Una imagen de la selección |
search_design_system | Componentes, variables y estilos de las librerías conectadas (solo en el servidor remoto) |
Cómo conectar el servidor MCP a tu agente lo explicamos en Servidores MCP.
Cómo pedir la comprobación
La guía de Figma pide escribir al agente como si informaras a un compañero: cuanto más concreto, mejor resultado (Figma: Write effective prompts). Para comprobar, pide solo lectura y que te muestre la respuesta tal cual:
Prompt de comprobación
Usa get_design_context y get_variable_defs con este enlace de Figma: <enlace al componente>.
No generes código. Muéstrame, sin resumir:
1. Los nombres de las capas y de las propiedades del componente.
2. Las variables que usa y si queda algún valor sin variable.
3. Las anotaciones o descripciones que aparezcan en la respuesta.
4. Si hay Code Connect, el fragmento de código y las instrucciones.Qué revisar en la respuesta
Recomendación
Revisa la respuesta con esta lista. Cada "no" te lleva a una página de este capítulo:
- ¿Los nombres de las capas describen su función? → Nombres
- ¿Todas las propiedades visuales usan una variable? → Nombres
- ¿Aparecen las anotaciones de comportamiento? → Anotaciones
- ¿Aparecen los enlaces a documentación y código? → Dev resources
- ¿El componente trae su componente de código? → Code Connect
Anota en inventory.md lo que no llega. Algunas cosas no llegarán aunque estén bien hechas: por ejemplo, las anotaciones dentro de instancias anidadas, según informan usuarios en el foro de Figma. Lo que no llega por el MCP tiene que llegar por los archivos del repositorio (capítulo 6).
Selecciones pequeñas
Las selecciones grandes pueden ralentizar las herramientas, provocar errores o devolver resultados incompletos. Figma recomienda trabajar por partes, por ejemplo un componente, una tarjeta o una cabecera, y en diseños grandes pedir primero get_metadata para tener el esquema y después el contexto solo de lo necesario (Figma: Avoid selecting large, heavy frames).
En resumen
get_design_context,get_variable_defsyget_code_connect_mapmuestran lo que recibe el agente.- Si un dato no aparece en la respuesta, el agente no lo conoce.
- Comprueba componente a componente: las selecciones grandes dan respuestas incompletas.