Organización de Props de Componentes: Estructura y Jerarquía

¿Por qué importa el orden de las Props?

Imagina un componente complejo (ej. un Input con etiqueta, icono, mensaje de error y ayuda). Si las propiedades de configuración están desordenadas, el usuario del sistema de diseño (el diseñador o el desarrollador) perderá tiempo buscando cómo cambiar el color del icono o el tamaño del texto.

Una organización lógica de las props sigue un orden mental de importancia: Identidad > Contenido > Apariencia > Comportamiento.

El Modelo de Capas de Organización

Para una organización óptima, se recomienda agrupar las propiedades en las siguientes categorías, manteniendo siempre este orden de arriba hacia abajo:

1. Propiedades de Identidad y Tipo (Contexto)

Son las que definen qué “clase” de componente estamos usando.

• Ejemplos: variant="primary | secondary", size="small | medium | large".
• Uso: Determinan la estructura base del componente y a menudo afectan a otras propiedades disponibles.

2. Propiedades de Contenido (Materia Primas)

Todo lo que el usuario ve y lee.

• Ejemplos: label, placeholder, helperText, iconName.
• Uso: En Figma, estas suelen ser Text Properties y Instance Swap Properties.

3. Propiedades de Apariencia y Estilo (Visuales)

Ajustes finos que no cambian el tipo ni el contenido.

• Ejemplos: color, isRounded, hasBorder, alignment.
• Uso: Deben usarse con moderación para evitar que los diseñadores creen variaciones no autorizadas del sistema.

4. Propiedades de Estado y Comportamiento (Lógica)

Definen cómo reacciona el componente ante situaciones externas o interactividad.

• Ejemplos: isLoading, isDisabled, isError, isFocused.
• Uso: Son fundamentales para la interactividad y la lógica de negocio de la aplicación.

Mejores Prácticas de Agrupamiento y Nombramiento

• Usa Separadores: Tanto en Figma (usando el panel de propiedades) como en la documentación, agrupa las props relacionadas bajo títulos o secciones (ej. “Settings”, “Content”, “State”).
• Prioriza lo más usado: Las propiedades que se cambian el 90% del tiempo (como el texto del botón) deben estar al principio de la lista.
• Consistencia entre herramientas: Intenta que el orden de las propiedades en el panel de Figma coincida exactamente con el orden en el que se pasan las props en el código (ej. en React o Vue).
• Booleanos al final (a veces): Las propiedades de encendido/apagado (hasIcon, showLabel) suelen agruparse al final de sus respectivas secciones para no interrumpir el flujo de lectura de las props más críticas.

Beneficios para el Sistema de Diseño

• Reducción de la Curva de Aprendizaje: Los nuevos miembros del equipo entienden rápidamente cómo configurar cualquier componente.
• Handoff sin Errores: Al compartir el mismo orden y lógica, los desarrolladores saben exactamente qué esperar del archivo de diseño.
• Escalabilidad: Añadir nuevas funcionalidades a un componente existente es mucho más sencillo si ya existe una estructura definida.
• Velocidad de Diseño: En Figma, un panel de propiedades ordenado permite a los diseñadores prototipar pantallas completas mucho más rápido.

Consejos de Mentor

• No asumas, pregunta: Observa a un compañero diseñador usando tu componente por primera vez. Si tarda más de 3 segundos en encontrar una propiedad común, tu organización de props necesita una revisión.
• Documenta la jerarquía: Incluye en tu manual del sistema de diseño un ejemplo de “Orden Estándar de Props” para que todos los colaboradores sigan la misma lógica al crear nuevos componentes.
• Cuidado con las Props Ocultas: Utiliza la capacidad de Figma de “ocultar” propiedades que no son relevantes según otras selecciones (ej. oculta la prop de “Icon Name” si hasIcon es false).

Recursos y Herramientas

• Figma Blog: Organizing Component Properties
• Storybook Docs: Controls and Props Sorting
• Atlassian Design System: Un excelente ejemplo de jerarquía y orden en la documentación de componentes.
• Libros: Refactoring UI de Adam Wathan y Steve Schoger.

component-api-design variant-explosion-control