Librería e-commerce
Esta librería nació de una necesidad real: cuando no existe una base de componentes para ecommerce, cada diseñador empieza desde cero. El objetivo fue construir una extensión del sistema de diseño de Pragma —enfocada en la plantilla Magento— para que cualquier diseñador de la empresa pudiera arrancar un proyecto de ecommerce con avance garantizado desde el primer día.
01 - Contexto
Punto de partida: Magento bajo la lupa
Antes de diseñar, había que entender. El equipo hizo un benchmark del ecommerce de referencia —la plataforma Magento— analizando las páginas críticas del flujo: el Home, el PLP (Product List Page), el PDP (Product Detail Page), el carrito de compras, el checkout con pasarela de pagos y el backoffice de administración. Paralelamente, otros compañeros UI evaluaban otras plataformas; este proyecto se enfocaba en la parte visual de Magento específicamente.
Home — plantilla Magento
PLP (Product List Page) — plantilla Magento
PDP (Product Detail Page) — plantilla Magento
Carrito de compras — plantilla Magento
Magento y los márgenes del diseño
Magento (Adobe Commerce) es una plataforma open source de ecommerce que define cómo se estructuran las páginas, los componentes y las interacciones del usuario desde el backend: el PLP, el PDP, el carrito y el checkout tienen arquitecturas de plantilla predefinidas, construidas sobre un sistema de temas en Less, bloques PHP, módulos y layout XML. Eso significa que el diseño no puede ignorar sus límites — lo que se proponga debe ser implementable dentro de lo que la plataforma puede renderizar de forma nativa. Por eso, de principio a fin, cada componente, variante y personalización fue revisada con el equipo de desarrollo con experticia en Magento antes de avanzar.
Validación técnica continua
Cada componente, variante y customización propuesta fue validada con el equipo técnico experto en Magento. La prioridad: que ninguna propuesta de diseño requiriera desarrollo fuera del alcance del sprint ni sobrepasara los tiempos de entrega del proyecto.
Diseño dentro de los límites de la plataforma
Magento define qué puede renderizarse de forma nativa y qué requiere módulos PHP personalizados. Entender esa frontera fue esencial para proponer componentes con viabilidad técnica real, no solo visual.
02 - Sistema
Del átomo a la plantilla: diseño en capas
Con el benchmark como base, se aplicó Atomic Design para construir la librería desde sus unidades mínimas. Cada átomo —botones, inputs, etiquetas— fue documentado con variantes, booleans, opciones de texto y, en algunos casos, variables de color. El objetivo era claro: que ningún diseñador tuviera que hacerle detach a un componente para personalizarlo, pues la flexibilidad ya estaba incorporada desde el diseño.
Vista general de la librería — documentación de todos los componentes en Figma
Personalización de componentes
Cada componente fue configurado para máxima flexibilidad sin separarlo del sistema: variantes para los diferentes estados, booleans para mostrar u ocultar elementos y opciones de texto editables. La meta era que el diseñador pudiera editar el contenido sin necesidad de separarlo del sistema de diseño —cuando alguien le hace detach a un componente, generalmente es porque quiere modificar su tamaño o agregar más opciones de las que el componente contempla, no porque necesite cambiar texto o ajustar la visibilidad de sus elementos.
Personalización de componente Card en Figma — variantes, instancias, booleans y textos
Componentes clave documentados
El mini carrito y la card de producto son los componentes de mayor frecuencia en cualquier ecommerce. Cada uno fue documentado con todas sus variaciones posibles, cubriendo desde el estado vacío hasta los múltiples estados de interacción con el usuario.
Documentación del componente Mini Cart
Documentación del componente Card de producto
03 - Páginas
De componentes a páginas funcionales
Los átomos y moléculas construidos se ensamblan en plantillas de página completa. Home, PLP, PDP, carrito de compras, backoffice de administración y lista de deseos quedaron diseñados como páginas reutilizables en Figma, todas conectadas al sistema de diseño de Pragma y listas para ser personalizadas sin empezar desde cero. El diseñador que tome una de estas páginas puede ajustar colores, tipografías y contenido sin separar ni un solo componente del sistema.
Home en atomic design — plantilla ecommerce Pragma
PLP en atomic design — plantilla ecommerce Pragma
Carrito de compras en atomic design — plantilla ecommerce Pragma
PDP en atomic design — plantilla ecommerce Pragma
Página backoffice y lista de deseos en atomic design — plantilla ecommerce Pragma
04 - Resultados
Un producto que generó velocidad real
La librería fue adoptada de forma orgánica dentro de Pragma. Compañeros UI que la usaron en proyectos reales reportaron un aumento en la velocidad de ejecución mayor del 50%, porque no tenían que diseñar desde cero. En casos extremos separaban algún componente del sistema para tener libertad total de edición —pero ya llevaban gran parte del trabajo adelantado—, lo cual confirmó que la librería cumplía su propósito: ser un punto de partida sólido, no una restricción.
+50%
Aumento en velocidad de ejecución reportado por compañeros UI que adoptaron la librería en proyectos reales de ecommerce.
Sin diseño desde cero
Ningún diseñador que usó la librería tuvo que construir un componente base de nuevo. Todo el trabajo visual de arranque ya estaba resuelto.
05 - Conclusiones
Aprendizajes
01
Un sistema bien construido multiplica el trabajo en equipo
Cada ajuste al wireframe tuvo respaldo directo de los hallazgos. Sin ese paso, habríamos presentado una solución a stakeholders construida sobre suposiciones, no sobre evidencia.
02
El detach es síntoma de un componente mal diseñado
Si alguien necesita separar un componente del sistema para modificarlo, el problema es el componente, no el diseñador. La meta era anticiparse a todas las variaciones posibles desde el principio.
03
Un diseño fundamentado sobrevive al cambio de equipo
Entender primero cómo funciona la plataforma base —en este caso Magento— fue lo que permitió diseñar componentes verdaderamente útiles. Sin ese contexto, los componentes habrían sido genéricos.
Esta librería no es solo diseño visual; es una infraestructura de trabajo. Construirla exige pensar como quien va a usarla —no como quien la diseña para sí mismo—, y ese cambio de perspectiva es, en sí mismo, una competencia de diseño que va más allá de los componentes.
