Core Identity para la experiencia digital de conectividad y HMI
Una marca europea de automóviles de altas prestaciones quería mejorar la experiencia digital de sus usuarios en el ámbito de la conectividad y la HMI (interfaz hombre-máquina). El reto consistía en diseñar interfaces intuitivas y coherentes sin perder la fuerte identidad de la marca.
Velocity Motors necesitaba unificar su ecosistema digital de conectividad y HMI bajo un sistema de diseño coherente. Los elementos de UI estaban dispersos en Sketch con duplicados, incoherencias y elementos faltantes. El equipo necesitaba migrar a Figma y establecer fundamentos sólidos para escalar el producto.
Ejecutamos una auditoría completa, migramos de Sketch a Figma, y construimos un Design System desde los fundamentos hasta la librería de componentes, asegurando su adopción por equipos multidisciplinares.
Auditoría y Migración
Creamos un inventario completo de todos los elementos de UI en Sketch, identificando duplicados, incoherencias y elementos faltantes. Planificamos y ejecutamos la migración de Sketch a Figma, ayudando al equipo a adaptarse a nuevos flujos de trabajo. Los archivos y componentes se reorganizaron con carpetas claras, convenciones de nombre y permisos para acelerar la colaboración.
Fundamentos del Sistema
Definimos paletas de color, unidades de espaciado, estilos tipográficos y cuadrículas de maquetación para garantizar la coherencia. Los componentes se construyeron aplicando principios de diseño atómico — desde elementos pequeños hasta plantillas completas. Creamos un sistema de nomenclatura consistente y guías de uso para que el sistema fuera fácil de entender y escalar.
Librería de Componentes
Construimos componentes de UI reutilizables y flexibles para distintos casos de uso y tamaños de pantalla. Cada componente incluía diferentes estados (hover, activo, deshabilitado) y comportamiento responsivo. Usamos notas internas de Figma y exploramos herramientas como Storybook y Zeroheight para conectar diseño y código.
Adopción y Gobernanza
Diseñadores, desarrolladores y product managers trabajaron juntos para aplicar el sistema en proyectos reales. Introdujimos flujos de trabajo con ramas (branching) y reglas claras para actualizar y revisar componentes. Recogimos feedback de forma regular e hicimos mejoras para dar soporte a nuevas necesidades del producto y a actualizaciones de marca.
Un sistema escalable y adoptado
Velocity Motors ahora cuenta con un Design System unificado en Figma que permite a diseñadores y desarrolladores trabajar de forma coherente y eficiente. El sistema se aplica en proyectos reales y evoluciona con las necesidades del producto y la marca.