Inlab Design System

Librería de componentes · MUI

Sistema de diseño principal de Inlab, construido sobre Material UI y pensado para escalar.

Resumen

El proyecto

Diseño e implementación del sistema de diseño principal de la compañía, basado en MUI (Material UI). El objetivo era dotar al producto de una base sólida y coherente sobre la que diseñar y desarrollar nuevas funcionalidades sin reinventar cada pantalla.

El sistema se apoya en componentes, variantes y tokens, de forma que cualquier cambio de estilo se propaga desde una única fuente de verdad y el producto puede crecer manteniendo la consistencia.

Proceso

Reto

Construir un sistema propio sobre la arquitectura de MUI que respetase la identidad de Inlab sin perder la robustez, la accesibilidad y la documentación de la librería base, y que el equipo de desarrollo pudiese implementar sin traducciones manuales.

Enfoque

Partí de los tokens como cimiento: color, tipografía, espaciado, radios y elevación. Sobre ellos construí los componentes con todas sus variantes de color, tamaño y estado, como los botones o los switches, organizados en Figma para que diseño y desarrollo trabajasen sobre la misma referencia.

Cada componente se definió con sus propiedades y estados de interacción (reposo, hover, foco, deshabilitado), lo que reduce la ambigüedad en desarrollo y acelera el diseño de nuevas pantallas.

Pantallas y casos de uso

Además del sistema, diseñé pantallas Ad-Hoc y casos de uso para el cliente, como la gestión de campañas, que sirvieron para validar los componentes en contextos reales y detectar necesidades antes de llevarlas a código.

Mi rol

Diseño del sistema completo en Figma: arquitectura de tokens, componentes y variantes, documentación y diseño de pantallas y casos de uso, acompañando su implementación sobre Material UI.

Entregables