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

> Aprenda a organizar y priorizar las propiedades (props) de sus componentes para crear una experiencia de usuario más intuitiva para los diseñadores y desarrolladores que consumen su sistema de diseño.

*Tags: ux, tecnica, diseño-ui, product-design, desarrollo*

---


> [!info] Definición Rápida
> La **Organización de Props** consiste en estructurar y priorizar las propiedades de un componente para que su uso sea intuitivo y predecible. Esto reduce la carga cognitiva de los diseñadores en Figma y de los desarrolladores en el código, facilitando la creación de interfaces consistentes.


## ¿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](https://help.figma.com/hc/en-us/articles/5579471115159-Create-and-manage-component-properties)
- **Storybook Docs:** [Controls and Props Sorting](https://storybook.js.org/docs/react/essentials/controls#custom-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.
---
[[diseno-apis-componentes]]
[[control-explosion-variantes]]


---

Source: https://www.fernandoux.com/es/wiki/tecnicas/organizacion-props-componentes/