Saltar al contenido

Preparar Figma

Descripciones

Dónde se escribe la descripción de un componente, una variable o un estilo en Figma, dónde se ve y una plantilla fija de cinco líneas.

Última revisión:

La descripción es el texto que acompaña a un componente, una variable o un estilo allá donde se use. Es el sitio natural para su propósito y su regla principal. Esta página explica dónde se escribe y propone una plantilla fija.

En esta página

Dónde se escribe

ElementoDóndeFuente
Componente, conjunto o varianteSelecciónalo en el archivo de la librería y abre Component configurationFigma: Add descriptions
EstiloPasa el cursor sobre el estilo en el panel Design, pulsa el icono de edición y escribe en DescriptionLa misma
VariableEn la ventana de variables, clic derecho sobre la variable y Edit variableLa misma

Los componentes tienen, además, un campo de enlace a documentación externa o a otro archivo con más explicaciones (Figma: Add descriptions). Al combinar componentes en un conjunto, sus descripciones y enlaces pasan a las variantes.

Para editar descripciones necesitas permiso de edición en el archivo de la librería.

Dónde se ve

Según la ayuda de Figma, la descripción aparece en el menú de la instancia en el panel Design, en el panel Assets, en el panel Inspect de Dev Mode y, para quien solo tiene acceso de lectura, en el panel de propiedades (Figma: Add descriptions). La de variables y estilos aparece como ayuda emergente en los selectores.

Nota

La documentación del servidor MCP de Figma no detalla si la descripción de un componente forma parte del contexto que recibe el agente. Compruébalo con tu cliente, como explicamos en Comprobar con el MCP. Para las reglas que el agente debe seguir sí hay canales documentados: las guidelines de la librería y las instrucciones para el MCP de Code Connect.

Una plantilla de cinco líneas

Recomendación

Escribe todas las descripciones con la misma estructura. Una estructura fija se lee de un vistazo, se revisa con facilidad y se puede copiar a la documentación Markdown sin reescribirla.

Descripción de Button

Dispara una acción en la vista actual.
Usar: acción principal o secundaria de formularios y diálogos.
No usar: para navegar entre páginas (usa Link). Máximo un primary por vista.
Tokens: button.primary.*, radius.control, space.200
Docs: https://ds.ejemplo.com/components/button

Para una variable, basta con una línea que diga su función y su restricción principal: "Fondo de la acción principal. Máximo uno por vista". DesignToken101 explica qué lleva una buena descripción de token y por qué Figma la exporta a DTCG como $description (DesignToken101: Documentar el sistema). Volveremos a ello en el capítulo 3.

Qué no va en la descripción

  • Reglas largas o con excepciones. No caben en una línea; van a la documentación Markdown.
  • La lista de propiedades. Ya la tiene el componente.
  • Cambios de versión. Van al changelog.

En resumen

  • Componentes, variables y estilos tienen descripción; los componentes, además, enlace a documentación.
  • Una plantilla fija de cinco líneas: propósito, usar, no usar, tokens y enlace.
  • Las reglas largas no caben aquí: van a la documentación y a las guidelines.

Fuentes