Preparar Figma
Anotaciones
Qué comportamiento documentar con las anotaciones de Figma, cómo escribirlas para que se entiendan sin ambigüedad y qué limitaciones tienen.
Última revisión:
Un diseño estático no dice qué pasa al pulsar, al hacer más estrecha la pantalla o al cargar los datos. Las anotaciones de Figma sirven para escribir ese comportamiento sobre el propio diseño, y la guía de Figma para el servidor MCP las recomienda para lo que no se puede mostrar en el dibujo.
En esta página
Qué son las anotaciones
Una anotación es una nota unida a una capa. Puede llevar texto libre, propiedades de la capa (alineación, tamaño) o las dos cosas; las propiedades se mantienen al día si el diseño cambia (Figma: Add measurements and annotate designs).
Cada archivo trae cuatro categorías: Development, Interaction, Accessibility y Content. Se pueden renombrar, editar o borrar, y los cambios solo afectan a ese archivo.
La guía de Figma para el servidor MCP recomienda añadir anotaciones para explicar lo que es difícil de mostrar en el diseño, como el comportamiento, la alineación o la respuesta a distintos tamaños (Figma: Structure your Figma file for better code).
Qué anotar
| Categoría | Qué anotar | Ejemplo |
|---|---|---|
| Interaction | Qué pasa al interactuar | "Al perder el foco, valida el campo. El mensaje de error sustituye al texto de ayuda." |
| Development | Cómo se adapta o se carga | "Por debajo de 360 px, la imagen pasa arriba y ocupa todo el ancho." |
| Accessibility | Lo que no se ve en el dibujo | "El foco queda atrapado dentro del modal. Esc lo cierra, salvo en acciones destructivas." |
| Content | Límites del contenido | "El título se corta a dos líneas con puntos suspensivos." |
Cómo escribirlas
Recomendación
- Una idea por anotación. Si necesitas "y además", son dos anotaciones.
- Condiciones medibles. "Por debajo de 360 px", no "en pantallas pequeñas".
- Verbo y resultado. "Al pulsar, abre el panel lateral", no "panel lateral".
- En el componente principal, cuando el comportamiento es del componente. En una pantalla, cuando es de esa pantalla.
Las reglas que valen para todo el sistema ("nunca dos botones principales en una vista") no son anotaciones: van en las guidelines de la librería y en la documentación.
Limitaciones
- Asientos: añadir anotaciones pide un asiento Full y permiso de edición; verlas, un asiento Full o Dev (Figma: Add measurements and annotate designs).
- Instancias anidadas: en el foro de Figma, varios usuarios informan de que las anotaciones dentro de instancias anidadas no llegan al agente por el servidor MCP (Foro de Figma: MCP server not displaying annotations from nested component instances). Es un informe de usuarios, no documentación oficial, pero conviene comprobarlo en tu archivo.
En Figma
Selecciona una capa, abre la herramienta de anotaciones y escribe el texto o añade propiedades. Las anotaciones se ven en Dev Mode por defecto, y se pueden filtrar por categoría (Figma: Add measurements and annotate designs). Para crearlas en bloque, la ayuda remite a la API de plugins de Figma.
En resumen
- Las anotaciones describen el comportamiento que no se ve en el dibujo.
- Una idea por anotación, con condiciones medibles y el resultado esperado.
- Las reglas de todo el sistema van en las guidelines y en la documentación, no en anotaciones.