Soul Design System
Reto
Al comenzar en mi compañía actual, ésta estaba pasando por un cambio tecnológico interno, ya que se estaba migrando de una aplicación de escritorio a una aplicación web. Aunque casi todos los componentes estaban documentados en archivos de Word, no se estaban gestionando de una forma práctica, ordenada y escalable.
Aprovechando también que la etapa “todoterreno” estaba terminando y con la especialización del equipo de diseño, asumí la responsabilidad de crear y mantener el Sistema de Diseño de Endalia — Soul. Este hito fue clave para estandarizar componentes, optimizar los tiempos de desarrollo y garantizar la consistencia visual en una plataforma tan compleja.
Plan de acción
1.
Estrategia y alineamiento (Kick-off)
Iniciamos con sesiones de co-creación interna para establecer los cimientos del sistema. Definimos los principios de diseño, la estructura de la librería y establecimos una hoja de ruta basada en OKRs y etapas de implementación progresiva.
2.
Stack tecnológico y documentación
Realicé una investigación de mercado para encontrar herramientas que equilibraran funcionalidad, curva de aprendizaje y presupuesto. Finalmente, implementamos Zeroheight como la fuente de verdad, facilitando la documentación y el acceso a los recursos para todo el equipo.
3.
Fundamentos y tokenización
Estandarizamos los átomos del sistema: paleta cromática, iconografía, tipografía y sistemas de espaciado. Un paso crucial fue la definición de Design Tokens, traduciendo estas decisiones visuales a variables semánticas para garantizar una integración fluida y escalable con el equipo de Front-end.
4.
Priorización y prioridades
Para evitar cuellos de botella, establecimos mesas de trabajo con el equipo de desarrollo. Priorizamos el desarrollo de componentes basándonos en una matriz de impacto vs. esfuerzo, atacando primero los elementos más críticos y recurrentes de la interfaz.
5.
Auditoría y optimización de componentes
No nos limitamos a "maquetar" lo existente, sino que realizamos un reanálisis crítico de los componentes legacy. A través de investigación (benchmarking de mejores prácticas, encuestas y entrevistas), rediseñamos los componentes para maximizar su usabilidad antes de incluirlos en el nuevo sistema.
Tareas
Las tareas que engloban el mantenimiento del sistema de diseño son:
- Planificación y documentación. Gestión de nuevos componentes y registro de mejoras necesarias en los existentes. Esto nos permite tener una hoja de ruta clara y priorizada según las necesidades reales del producto. Primero empezamos utilizando Microsoft Loop pero ahora hemos empezado a organizarlo en Azure.
- Construcción en Figma. Diseño de componentes robustos y escalables. No se trata solo de la capa visual, sino de la lógica interna:
- Definición exhaustiva de variantes y propiedades (estados, tamaños, estilos).
- Desglose anatómico detallado.
- Creación de ejemplos visuales y casos de uso prácticos para facilitar la comprensión en la documentación posterior.
- Validación técnica (Dev Alignment). Antes de pasar a producción, realizo sesiones de revisión con el equipo de desarrollo. El objetivo es validar la viabilidad técnica, asegurar que hemos cubierto todos los casos límite y evitar fricciones durante la implementación.
- Documentación y estandarización (Zeroheight). Transformación de los componentes en normas de uso. Redacto la documentación técnica y de estilo en Zeroheight para que sirva como única fuente de verdad.
- Contenido: Descripción funcional, anatomía, especificaciones de layout y guías de uso ("Do's & Don'ts").
- Objetivo: Garantizar que cualquier miembro del equipo sepa no solo cómo es un componente, sino cuándo y por qué utilizarlo.
Soul Design System
Reto
Al comenzar en mi compañía actual, ésta estaba pasando por un cambio tecnológico interno, ya que se estaba migrando de una aplicación de escritorio a una aplicación web. Aunque casi todos los componentes estaban documentados en archivos de Word, no se estaban gestionando de una forma práctica, ordenada y escalable.
Aprovechando también que la etapa “todoterreno” estaba terminando y con la especialización del equipo de diseño, asumí la responsabilidad de crear y mantener el Sistema de Diseño de Endalia — Soul. Este hito fue clave para estandarizar componentes, optimizar los tiempos de desarrollo y garantizar la consistencia visual en una plataforma tan compleja.
Plan de acción
1.
Estrategia y alineamiento (Kick-off)
Iniciamos con sesiones de co-creación interna para establecer los cimientos del sistema. Definimos los principios de diseño, la estructura de la librería y establecimos una hoja de ruta basada en OKRs y etapas de implementación progresiva.
2.
Stack tecnológico y documentación
Realicé una investigación de mercado para encontrar herramientas que equilibraran funcionalidad, curva de aprendizaje y presupuesto. Finalmente, implementamos Zeroheight como la fuente de verdad, facilitando la documentación y el acceso a los recursos para todo el equipo.
3.
Fundamentos y tokenización
Estandarizamos los átomos del sistema: paleta cromática, iconografía, tipografía y sistemas de espaciado. Un paso crucial fue la definición de Design Tokens, traduciendo estas decisiones visuales a variables semánticas para garantizar una integración fluida y escalable con el equipo de Front-end.
4.
Priorización y prioridades
Para evitar cuellos de botella, establecimos mesas de trabajo con el equipo de desarrollo. Priorizamos el desarrollo de componentes basándonos en una matriz de impacto vs. esfuerzo, atacando primero los elementos más críticos y recurrentes de la interfaz.
5.
Auditoría y optimización de componentes
No nos limitamos a "maquetar" lo existente, sino que realizamos un reanálisis crítico de los componentes legacy. A través de investigación (benchmarking de mejores prácticas, encuestas y entrevistas), rediseñamos los componentes para maximizar su usabilidad antes de incluirlos en el nuevo sistema.
Tareas
Las tareas que engloban el mantenimiento del sistema de diseño son:
- Planificación y documentación. Gestión de nuevos componentes y registro de mejoras necesarias en los existentes. Esto nos permite tener una hoja de ruta clara y priorizada según las necesidades reales del producto. Primero empezamos utilizando Microsoft Loop pero ahora hemos empezado a organizarlo en Azure.
- Construcción en Figma. Diseño de componentes robustos y escalables. No se trata solo de la capa visual, sino de la lógica interna:
- Definición exhaustiva de variantes y propiedades (estados, tamaños, estilos).
- Desglose anatómico detallado.
- Creación de ejemplos visuales y casos de uso prácticos para facilitar la comprensión en la documentación posterior.
- Validación técnica (Dev Alignment). Antes de pasar a producción, realizo sesiones de revisión con el equipo de desarrollo. El objetivo es validar la viabilidad técnica, asegurar que hemos cubierto todos los casos límite y evitar fricciones durante la implementación.
- Documentación y estandarización (Zeroheight). Transformación de los componentes en normas de uso. Redacto la documentación técnica y de estilo en Zeroheight para que sirva como única fuente de verdad.
- Contenido: Descripción funcional, anatomía, especificaciones de layout y guías de uso ("Do's & Don'ts").
- Objetivo: Garantizar que cualquier miembro del equipo sepa no solo cómo es un componente, sino cuándo y por qué utilizarlo.
Mi perfil
Software web y móvil
Soul Design system
Fontaine Design system
Diseño corporativo
Proyecto personal
Soul Design System
Reto
Al comenzar en mi compañía actual, ésta estaba pasando por un cambio tecnológico interno, ya que se estaba migrando de una aplicación de escritorio a una aplicación web. Aunque casi todos los componentes estaban documentados en archivos de Word, no se estaban gestionando de una forma práctica, ordenada y escalable.
Aprovechando también que la etapa “todoterreno” estaba terminando y con la especialización del equipo de diseño, asumí la responsabilidad de crear y mantener el Sistema de Diseño de Endalia — Soul. Este hito fue clave para estandarizar componentes, optimizar los tiempos de desarrollo y garantizar la consistencia visual en una plataforma tan compleja.
Plan de acción
1.
Estrategia y alineamiento (Kick-off)
Iniciamos con sesiones de co-creación interna para establecer los cimientos del sistema. Definimos los principios de diseño, la estructura de la librería y establecimos una hoja de ruta basada en OKRs y etapas de implementación progresiva.
2.
Stack tecnológico y documentación
Realicé una investigación de mercado para encontrar herramientas que equilibraran funcionalidad, curva de aprendizaje y presupuesto. Finalmente, implementamos Zeroheight como la fuente de verdad, facilitando la documentación y el acceso a los recursos para todo el equipo.
3.
Fundamentos y tokenización
Estandarizamos los átomos del sistema: paleta cromática, iconografía, tipografía y sistemas de espaciado. Un paso crucial fue la definición de Design Tokens, traduciendo estas decisiones visuales a variables semánticas para garantizar una integración fluida y escalable con el equipo de Front-end.
4.
Priorización y prioridades
Para evitar cuellos de botella, establecimos mesas de trabajo con el equipo de desarrollo. Priorizamos el desarrollo de componentes basándonos en una matriz de impacto vs. esfuerzo, atacando primero los elementos más críticos y recurrentes de la interfaz.
5.
Auditoría y optimización de componentes
No nos limitamos a "maquetar" lo existente, sino que realizamos un reanálisis crítico de los componentes legacy. A través de investigación (benchmarking de mejores prácticas, encuestas y entrevistas), rediseñamos los componentes para maximizar su usabilidad antes de incluirlos en el nuevo sistema.
Tareas
Las tareas que engloban el mantenimiento del sistema de diseño son:
- Planificación y documentación. Gestión de nuevos componentes y registro de mejoras necesarias en los existentes. Esto nos permite tener una hoja de ruta clara y priorizada según las necesidades reales del producto. Primero empezamos utilizando Microsoft Loop pero ahora hemos empezado a organizarlo en Azure.
- Construcción en Figma. Diseño de componentes robustos y escalables. No se trata solo de la capa visual, sino de la lógica interna:
- Definición exhaustiva de variantes y propiedades (estados, tamaños, estilos).
- Desglose anatómico detallado.
- Creación de ejemplos visuales y casos de uso prácticos para facilitar la comprensión en la documentación posterior.
- Validación técnica (Dev Alignment). Antes de pasar a producción, realizo sesiones de revisión con el equipo de desarrollo. El objetivo es validar la viabilidad técnica, asegurar que hemos cubierto todos los casos límite y evitar fricciones durante la implementación.
- Documentación y estandarización (Zeroheight). Transformación de los componentes en normas de uso. Redacto la documentación técnica y de estilo en Zeroheight para que sirva como única fuente de verdad.
- Contenido: Descripción funcional, anatomía, especificaciones de layout y guías de uso ("Do's & Don'ts").
- Objetivo: Garantizar que cualquier miembro del equipo sepa no solo cómo es un componente, sino cuándo y por qué utilizarlo.