¿Qué son las librerías de componentes?

En el mundo del diseño y desarrollo de experiencias de usuario, es crucial para el negocio encontrar la eficiencia y consistencia en los espacios de trabajo. 

Imagina por un momento que eres un albañil y estás construyendo una casa desde cero. Tienes una visión clara de cómo quieres que se vea y funcione cada habitación: la cocina, el salón, los dormitorios. Sin embargo, en lugar de fabricar cada elemento desde cero, consideras crear piezas prefabricadas a partir de moldes adaptados para cada cosa: ladrillos, vigas, pomos, puertas… Así, su casa seguirá una lógica, y será consistente con el tipo de habitaciones y rincones del mismo. Del mismo modo, en el diseño de experiencias web, contamos con las librerías de componentes. 

Aquí es donde entra en juego el concepto de la librería de componentes en el ámbito de la experiencia de usuario. Al igual que un arquitecto o constructor puede acudir a una librería física de componentes para seleccionar desde puertas y ventanas hasta grifos y pomos, un diseñador o desarrollador de UX recurre a una librería de componentes digital para encontrar elementos ya diseñados y probados que pueden integrarse en sus proyectos de software.

¿Cómo se traduce esto en el mundo digital? Por ejemplo, cuando estamos creando una aplicación móvil para un servicio de entrega de alimentos, en lugar de diseñar y codificar cada botón, menú desplegable o cuadro de texto desde cero, puedes acceder a una librería de componentes que ya contiene una amplia variedad de elementos comunes de diseño de aplicaciones. 

Desde botones de «Agregar al carrito» hasta barras de búsqueda y tarjetas de producto. Estas piezas prefabricadas, además de acelerar el proceso de desarrollo, también garantizan una coherencia visual y funcional en toda la aplicación.

Por qué crear una librería de componentes

Algunas de las razones por las que el diseñador UX crea y utiliza librerías de componentes residen en las ventajas que se reflejan en sus propios principios, siendo estos los siguientes:

• Consistencia. Al ofrecerse elementos de diseño bajo un estándar, se logra mantener una apariencia y comportamiento coherentes en todo un sistema, evitando al usuario posibles confusiones a la hora de interactúas con diferentes partes de una aplicación o sitio web. Esto genera un valor importante en nuestra aplicación, fortalece la credibilidad y usabilidad de un producto.
• Iteración. El principio de iteración queda nuevamente reflejado en el uso de las librerías: proporcionando una colección de elementos predefinidos y probados, los diferentes equipos de diseño y desarrollo pueden iterar sobre diseños ya existentes de una forma más rápida y ágil, evitando así la necesidad de comenzar desde cero. Esta capacidad puede ser de gran ayuda a la hora de perfeccionar la experiencia global a largo plazo, adaptando así las interfaces a las necesidades cambiantes del cliente o del usuario de una aplicación. 
• Escalabilidad. A medida que un producto digital puede verse afectado por el crecimiento de sus funcionalidades, la consistencia con las nuevas partes de su interfaz es crucial. La librería de componentes permite crear y expandir el tamaño de una aplicación manteniendo todas sus interfaces cohesionadas, consistentes y similares, contemplando así consideraciones de negocio como el mantenimiento de las guías de marca y de estilo.  
• Eficiencia. Volviendo a las necesidades de negocio, los equipos de trabajo deben de ser eficientes y lograr los objetivos contemplados. Gracias al uso de librerías, los tiempos de diseño y aplicación se recortan, así como los recursos de cada una de las etapas de trabajo. 

El diseño atómico

Brad Frost, escritor estadounidense con interés en el mundo del diseño digital, propuso como modelo de trabajo lo que conocemos como atomic design o diseño atómico, una metodología que enfocando la vista en la química, donde se aplica una analogía con la química en la creación de un sistema de diseño coherente: pequeños componentes que se mezclan entre sí y crean nuevos componentes mayores, complejizándose y permitiendo una jerarquía de componentes que van desde los átomos hasta las páginas completas, pasando por moléculas, organismos, y plantillas o templates. 

El sistema atómico proporciona una base sólida para la creación de librerías de componentes. Al dividir la interfaz de usuario en componentes básicos y reutilizables, se establece una estructura modular que facilita la creación, organización y mantenimiento de una librería de componentes coherente y escalable.

Cada componente en el sistema atómico representa un átomo de diseño que puede ser utilizado y combinado de diversas formas para construir elementos de interfaz más complejos: los átomos de una librería – como los colores, o la unión de dos puntos- puede crear una molécula, como una palabra con color. A continuación, la combinación de moléculas crea organismos que ya pueden existir de forma independiente, botones, cuadros de texto o barras de navegación. Al juntarse en plantillas, crean así formularios de registro o un menú desplegable, y al combinarse, crean una página de inicio o un panel de administración.

Esta organización, si se aplica correctamente, facilita la creación de una librería de componentes coherente y fácil de usar que estará disponible para los diferentes actores que intervendrán en la creación de las interfaces: equipos de diseño, de desarrollo, equipos de negocio en las fases de definición… 

Además, la estructura modular del sistema atómico permite que las librerías de componentes escalen de manera efectiva a medida que los productos digitales crecen y evolucionan. Los nuevos componentes pueden agregarse fácilmente a la librería, y los existentes pueden actualizarse o reemplazarse según sea necesario sin afectar la integridad de la librería o la coherencia de las interfaces de usuario.

Es por ello, que el sistema atómico debe de ser considerado como un marco sólido, siendo especialmente útil para crear librerías de componentes. El uso de estas metodologías son de extremo valor, algo que deberían de tener en cuenta todos los equipos que intervienen en la creación de interfaces y aplicaciones web.

En definitiva, con una librería de componentes bien estructurada, los equipos de diseño UX podemos enfrentarnos a retos de diseño más complejos con confianza, sabiendo que tenemos una base sólida sobre la que seguir construyendo y evolucionando.

Ver también:

• Sistemas de diseño, ¿qué son y por qué son tan importantes?
• Explorando los elementos clave de los Sistemas de Diseño efectivos
• Transformando el diseño en acción: guía completa para implementar un Sistema de Diseño efectivo
• Sistemas de Diseño VS. UI Kits

Foto de portada de Tirza van Dijk en Unsplash.