Librería e-commerce
Cada proyecto de e-commerce en Pragma arrancaba desde cero: sin una base de componentes común, cada diseñador reconstruía lo mismo una y otra vez. Diseñé una extensión del sistema de diseño de Pragma —enfocada en la plantilla Magento— para que cualquier diseñador de la empresa pudiera partir de una base lista, consistente y validada con desarrollo, en lugar de una página en blanco.
01 - Contexto
Punto de partida: auditar Magento antes de diseñar
Antes de diseñar, había que entender el terreno. Hicimos un benchmark de la plataforma de referencia —Magento— auditando las páginas críticas del flujo de compra: Home, PLP (Product List Page), PDP (Product Detail Page), carrito, checkout con pasarela de pagos y backoffice de administración. Mientras otros compañeros UI evaluaban plataformas distintas, mi foco fue mapear la capa visual de Magento y sus restricciones técnicas.
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 e-commerce que define desde el backend cómo se estructuran las páginas, los componentes y las interacciones: PLP, PDP, carrito y checkout tienen arquitecturas de plantilla predefinidas, construidas sobre un sistema de temas en Less, bloques PHP, módulos y layout XML. El diseño no puede ignorar esos límites: lo que se proponga tiene que ser implementable dentro de lo que la plataforma renderiza de forma nativa. Por eso cada componente, variante y personalización se revisó con el equipo de desarrollo experto en Magento antes de avanzar.
Validación técnica continua
Cada componente, variante y personalización se validó con el equipo técnico experto en Magento. La prioridad: que ninguna propuesta de diseño exigiera desarrollo fuera del alcance del sprint ni comprometiera los tiempos de entrega.
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, apliqué Atomic Design para construir la librería desde sus unidades mínimas. Cada átomo —botones, inputs, etiquetas— quedó documentado con variantes, booleans, opciones de texto y, donde aplicaba, variables de color. El objetivo era claro: que ningún diseñador tuviera que hacer detach de un componente para adaptarlo, porque la flexibilidad ya venía 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 se configuró para máxima flexibilidad sin salir del sistema: variantes para los distintos estados, booleans para mostrar u ocultar elementos y textos editables. La idea era cubrir desde el diseño las razones habituales por las que alguien hace detach —cambiar el tamaño o sumar opciones que el componente no contempla—, de modo que editar contenido o ajustar visibilidad nunca obligara a romper el vínculo con la librería.
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 e-commerce. Documenté cada uno con todas sus variaciones, 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 se ensamblan en plantillas de página completa. Home, PLP, PDP, carrito, 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 personalizar sin empezar de cero. Quien tome una de estas páginas puede ajustar color, tipografía y contenido sin hacer detach de un solo componente.
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
Adopción orgánica en proyectos reales
La librería se adoptó de forma orgánica dentro de Pragma. Diseñadores que la usaron en proyectos reales reportaron —de forma cualitativa— arrancar con gran parte del trabajo ya resuelto, sin partir de cero. Cuando alguien separaba un componente para tener libertad total de edición, ya llevaba adelantado casi todo el camino: señal de que la librería cumplía su propósito de ser un punto de partida, no una restricción.
Arranque más rápido
Feedback cualitativo de diseñadores que la adoptaron en proyectos reales: partir de una base ya resuelta hizo el arranque claramente más ágil que diseñar desde cero.
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
Diseñar para otros diseñadores implica pensar en flexibilidad, no solo en estética. Cada boolean, variante y variable ahorra horas reales a quien usa el componente después.
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
El benchmark define el alcance real del sistema
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.
