Diseñé y escalé un Design System desde cero,
creando componentes reutilizables que
redujeron un 35 % los tiempos de diseño y desarrollo
01_Contexto del design system
VT-Platform
Simplificando la complejidad técnica en entornos de obra e industria
VT-Platform es una herramienta de digitalización enfocada en sustituir los procesos manuales tradicionales por flujos digitales ágiles.
El sistema de diseño se construyó para transformar procesos manuales complejos en interfaces de alta eficiencia, garantizando que cada componente responda a condiciones de uso exigentes en entornos de obra.
02_El problema detectado
Los tiempos de desarrollo y diseño son demasiado largos
El reto principal no era solo estético, sino funcional:
Crear una «Single Source of Truth» (Única Fuente de Verdad) que permitiera a equipos multidisciplinares escalar el producto sin generar deuda técnica.
Platform System es un Design System desarrollado en Figma y Bootstrap, de forma colaborativa junto a equipos de Desarrollo, Negocio y Diseño.
Jerarquía y Feedback de Sistema
Colores de Marca y Acción: Utilizados exclusivamente para elementos interactivos primarios, guiando el ojo del usuario hacia la acción principal.
Estados de Sistema: Implementé una paleta de feedback (Success, Warning, Error) con contrastes optimizados para garantizar que las alertas críticas en entornos industriales sean detectadas de inmediato.
Tokens Neutros: Una escala de grises equilibrada para gestionar capas, elevaciones y jerarquías de texto sin saturar la interfaz.
03_Color system
Paleta estratégica que comunica
jerarquía, estados y personalidad
El sistema cromático se aleja de las paletas estáticas para implementar una lógica de Design Tokens.
He definido los colores según su función semántica (action, surface, feedback), lo que permite una escalabilidad total y facilita el mantenimiento del código.
Tema oscuro y accesibilidad
El tema oscuro maximiza la legibilidad y la accesibilidad mediante un contraste equilibrado.
Se reemplazan los colores oscuros y pastel por gamas de azul y tonos claros, asegurando que textos, iconos y componentes interactivos mantengan claridad y jerarquía visual.
04_Typography system
Sistema tipográfico estandarizado
una única familia de tipografía
Seleccioné una tipografía técnica de alta legibilidad (Sans-Serif ) la fuente Arial.
Elegida por su compatibilidad multiplataforma, rendimiento y facilidad de implementación.
La escala tipográfica se basa en un ratio de progresión armónica, asegurando que la jerarquía entre encabezados y cuerpo de texto sea clara y consistente en cualquier resolución.
He ajustado el line-height y el letter-spacing específicamente para mejorar la lectura en dispositivos móviles. Los usuarios consultan la plataforma en condiciones de iluminación variable o en movimiento dentro de la obra.
Los iconos son utilizados como refuerzo cognitivo.
El sistema garantiza que cada acción (editar, descargar, alertar) tenga un referente visual único, reduciendo el tiempo de aprendizaje del usuario y facilitando una navegación intuitiva.
05_Sistema de iconografía
Biblioteca de iconografía
para pasar flujos manuales a digitales
Diseñé un set de iconos basado en un grid de 24px, alineado con la unidad mínima de nuestro sistema de 4px.
Cada glifo ha sido simplificado para mantener su legibilidad incluso en tamaños reducidos (16px), utilizando trazos consistentes que refuerzan la identidad visual de la marca.
06_Tokens de diseño
Tokens de diseño UX/UI que
unifican producto y desarrollo para una experiencia consistente
Se ha construido un ecosistema de primitivos y variables semánticas en Figma.
El éxito del sistema reside en su lógica de nombrado: nombres descriptivos para primitives (blue-500) y nombres contextuales para tokens (button-bg-primary).
Este sistema de nomenclatura permite que diseñadores y desarrolladores hablen el mismo idioma, reduciendo errores de implementación y acelerando el ciclo de entrega de producto.
07_Geometría y Retícula: Espaciado, Radios y Bordes
Sistema de espaciado basado en
escala modular de múltiplos de 4 (Soft Grid)
Este sistema actúa como la unidad mínima de medida, permitiendo que el espaciado (auto-layout), el tamaño de los componentes y la iconografía mantengan un ritmo visual matemático y predecible.
Definición de Tokens y Jerarquía Lineal
Bordes y Contraste: Definí grosores de 1px (para estructura estándar) y 3px (para estados activos o énfasis de sección), optimizando la densidad de información.
Tokens de Radio: Los radios de curvatura no son estéticos; se utilizan de forma semántica para diferenciar contenedores primarios de elementos interactivos (botones, inputs), facilitando la identificación visual de zonas accionables en entornos de baja concentración.
08_Arquitectura de Layout y Grid System
Retículas adaptativas optimizadas para bootstrap
UX/UI coherente en todos los dispositivos
El sistema se sustenta en una retícula de 12 columnas configurada bajo la lógica de breakpoints de Bootstrap.
Esto garantiza una transición técnica fluida entre diseño y código, permitiendo que la plataforma gestione dashboards densos y mantenga la operatividad en dispositivos móviles con una columna única.
Entendiendo que la digitalización industrial requiere procesos de carga de datos extensos, diseñé un sub-sistema de cuadrícula específica para componentes de capa superior (Modales).
Al aplicar una grid de 12 columnas dentro de los contenedores modales, logramos que flujos críticos mantengan el mismo orden jerárquico que el layout principal.
09_Componentes y Ecosistema Atómico
Librería escalable en Figma
orientada a la eficiencia operativa
Construí un ecosistema de componentes reutilizables bajo la metodología de Atomic Design.
Este enfoque permitió descomponer la interfaz en átomos (botones, inputs, iconos) y moléculas (buscadores, selectores complejos) que se ensamblan en organismos funcionales, garantizando que cualquier nueva funcionalidad mantenga el ADN del sistema.
Arquitectura avanzada en Figma
Variantes y Propiedades: Cada componente fue desarrollado utilizando Variants y Boolean Properties, permitiendo a otros diseñadores conmutar estados (hover, active, disabled) o tipos de componentes
Auto-layout Dinámico: Implementé Auto-layout en toda la librería para que los componentes respondan de forma fluida al contenido y a los cambios de resolución, replicando el comportamiento real en desarrollo.
10_Documentación y Gobernanza del Sistema
Sistema de gobernanza
para establecer la "Single Source of Truth" del producto
Guía de Estilo y Uso: Documenté no solo los componentes, sino las reglas de aplicación (el «Do’s & Don’ts»), la jerarquía tipográfica y la semántica del color.
Workflow de Diseño (Design Ops): Definí el proceso desde la conceptualización de un nuevo componente en Figma hasta su validación y paso a producción.
Sincronización con Desarrollo y Herramientas
Protocolo de Handoff: Establecí un sistema de gobernanza que detalla las herramientas y los canales de comunicación entre equipos. Esto incluye la especificación técnica de los componentes en relación con las clases de Bootstrap.
Evolución del Sistema: La documentación incluye un protocolo de actualización. Así, cada mejora en un componente se refleja simultáneamente en la librería y en la documentación, manteniendo la integridad del ecosistema digital a largo plazo.
11_Compromiso con la Accesibilidad (WCAG 2.1)
He auditado cada combinación de color y contraste bajo los estándares WCAG 2.1 nivel AA, garantizando que la información sea perceptible para usuarios con diferentes capacidades visuales o bajo fatiga laboral.
Contraste de Texto: Ratios superiores a 4.5:1 en todos los elementos de lectura.
Áreas de Click: Dimensionamiento de objetivos táctiles (mínimo 44x44px) para facilitar el uso con guantes o en movimiento.
Navegación por Teclado: Definición de estados de focus claros para operarios que utilizan periféricos en planta.
12_El resultado
Se ha desarrollado un sistema de diseño sencillo, eficiente y de fácil implementación, creado específicamente para VT-Platform con el propósito de optimizar la construcción y comprensión de una aplicación de alta complejidad.
.
Este enfoque ha permitido consolidar una identidad de marca clara, distintiva y fácilmente reconocible frente a la competencia.
.
Se han reducido los tiempos de diseño y desarrollo un 35%.
.
Asimismo, el sistema destaca por su practicidad y por ofrecer una curva de aprendizaje ágil, facilitando su adopción tanto por parte de nuevos usuarios como de equipos de desarrollo.
Echa un vistazo a este proyecto de plataforma multidispositivo (VT-Platform), en el que se aplica este sistema de diseño.