Los componentes y patrones son la columna vertebral de cualquier sistema de diseño. Si quieres entender cómo Carbon Design System organiza estos bloques para construir interfaces coherentes, aquí encontrarás la lógica detrás de su estructura, sus estados y su documentación.

¿Qué diferencia hay entre componentes y patrones en un sistema de diseño?

Los componentes son las piezas individuales de una interfaz: botones, campos de texto, sliders, tablas. Cada uno cumple una función específica y, al combinarlos, dan forma a la experiencia visual y funcional del producto.

Los patrones, en cambio, son combinaciones estratégicas de esos componentes que resuelven problemas concretos de diseño. Piensa en un formulario de registro, un menú de navegación o un flujo de checkout. Su valor está en garantizar coherencia, accesibilidad y reutilización dentro de un proyecto.

¿Qué es un patrón de diseño? Es una combinación de componentes que resuelve un problema recurrente, como un checkout o un formulario, asegurando consistencia y reutilización.

¿Cómo está estructurada la sección de componentes en Carbon?

En la vista general aparece el listado completo de elementos que estructuran la solución. Tu trabajo es revisarlos y seleccionar los que mejor se acomoden a tu proyecto. Para entender la lógica, conviene aterrizarla en un caso concreto: los botones.

¿Qué encuentras dentro de la documentación de un botón?

Al entrar a la sección de botones, Carbon despliega cuatro bloques principales que ordenan toda la información:

• Usos, con un demo en vivo que muestra el comportamiento real del componente.
• Estilos, donde se documentan los estados del botón.
• Código, con la guía de implementación en distintos lenguajes de programación.
• Reglas de accesibilidad, pensadas para que el componente sea inclusivo.

El demo en vivo es clave porque permite entender cómo se comporta el botón sin tener que prototiparlo desde cero [00:54].

¿Cuáles son las variaciones y formatos de botón que documenta Carbon?

Carbon define cinco variaciones de botón que cubren la mayoría de necesidades de una interfaz:

• Botón primario.
• Botón secundario.
• Botón terciario.
• Botón de alerta.
• Botón fantasma.

Además, documenta el formato según su contenido: botón con iconografía, botón solo con iconografía, botón fantasma con iconografía, y los usos correctos e incorrectos de cada uno [01:18]. También se especifica el tamaño, porque tener todos los escenarios cubiertos optimiza la construcción del componente.

¿Por qué importan los estados y la accesibilidad de un componente?

Los estados indican cómo se comporta un elemento según la situación: deshabilitado, hover, activo o al hacer clic. Documentarlos no es un detalle estético, es la señal de que un elemento es interactivo y de que el usuario puede operar con él [01:48].

La sección de código complementa esto con la documentación técnica para implementar el botón en distintos lenguajes. Y la parte de accesibilidad cierra el círculo asegurando que el componente funcione para todas las personas, sin importar sus capacidades.

¿Qué son los estados de un botón? Son las variaciones visuales que muestran si está deshabilitado, en hover, activo o presionado. Indican al usuario que el elemento es interactivo.

¿Cómo funcionan los patrones dentro de Carbon Design System?

Los patrones definen cómo se comportan ciertos elementos dentro del sistema. Por ejemplo, cuándo debería aparecer un loading o qué sucede cuando das clic en la barra de búsqueda [02:35]. No describen solo la apariencia, también la mecánica de la interacción.

Aquí el nivel de detalle pesa mucho, igual que en la sección de tokens. Cuando alguien nuevo entra al equipo, una documentación granular evita que se pierda intentando descifrar el funcionamiento del sistema. Ese es el verdadero poder de Carbon: no solo define cómo se ve algo, sino cómo funciona y cómo se siente, todo listo para que cualquier miembro del equipo lo entienda y lo use.

¿Cuál de los patrones documentados te llama más la atención? Cuéntame en los comentarios cuál explorarías primero en tu próximo proyecto.