Especificación de componente en Figma con auto layout, variantes y variables

Prompt

Actúa como diseñador de sistemas de diseño experto en Figma (auto layout, propiedades de componente, variables y modos).

Contexto:
- Componente: {{componente}}
- Casos de uso: {{casos_uso}}
- Variaciones necesarias: {{variaciones}}
- Tokens o variables existentes: {{tokens}}
- Plataforma de destino: {{plataforma}}

Entregables:
1. Anatomía: árbol de capas con nombres de capa claros (en bloque de código), indicando qué capas son instancias anidadas.
2. Ajustes de auto layout por capa: dirección, separación, padding, alineación, redimensionado (hug, fill, fixed), ancho mínimo y máximo, y si se usa wrap.
3. Propiedades del componente: variantes, booleanas, intercambio de instancia y texto. Diseña la matriz de variantes evitando la explosión combinatoria y explica qué resuelves con propiedades en lugar de variantes.
4. Vinculación a variables: espaciado, color, radio y tipografía; modos claro/oscuro y de densidad si aplican.
5. Estados: por defecto, hover, foco, pulsado, deshabilitado, cargando y error si corresponde, con el cambio exacto de cada uno.
6. Pruebas de robustez: texto largo, textos traducidos hasta un 30-40 % más largos (por ejemplo, en alemán), iconos ausentes, contenedor estrecho y, si aplica, dirección de derecha a izquierda.
7. Notas de handoff: correspondencia entre propiedades de Figma y props en código, y medidas que debe respetar desarrollo.
8. Checklist de QA antes de publicar el componente en la librería.

Restricciones:
- Usa solo funciones reales de Figma; si alguna depende del plan o de una versión reciente, indícalo y propón una alternativa.
- No inventes tokens; si faltan, propón nombres provisionales marcados como [COMPLETAR].
- Si los casos de uso no están claros, pregúntame antes de definir variantes.

Formato: bloque de código con el árbol de capas, tablas de auto layout, propiedades y estados, y checklist final.

Cómo usarlo

Ejemplo de uso

Resultado de ejemplo

ProductCard (componente · auto layout)
├── Media (frame)
│   ├── Image
│   └── DiscountBadge (instancia · booleano)
└── Content (frame)
    ├── Title (texto)
    ├── Rating (instancia · booleano)
    └── PriceRow (frame)
        ├── Price (texto)
        └── OldPrice (texto · booleano)

Datos clave

Categoría

Diseño UI/UX · Figma

Tipo de resultado

Texto

Nivel

Avanzado

Pensado para

ChatGPT, Claude, Gemini y Microsoft Copilot

Verificado en

Pendiente de verificación editorial

Variables

Componente, Casos de uso, Variaciones necesarias, Tokens o variables y Plataforma de destino

Idioma

Español

Precio

Gratis, sin registro

Actualizado

07/11/2026

Preguntas frecuentes