Cómo Dev Mode ayuda a HP a ahorrar 1,5 horas en el flujo de trabajo del diseño a la codificación

HP, todo un gigante del sector electrónico, ha liderado la innovación en tecnología con sus impresoras, portátiles, sistemas de juego, etc. De hecho, el garaje en Palo Alto donde tuvo sus humildes comienzos es ahora un Monumento Histórico de California, conocido como el «Lugar de Nacimiento de Silicon Valley». Sin embargo, al tener una gama tan amplia de productos, cada uno con su propia base de clientes, resulta difícil mantener una experiencia coherente para todos mientras la empresa sigue innovando. Ahí es donde entra en juego el sistema de diseño de HP, Veneer. Hablamos con el equipo para conocer cómo:

• Crearon un sistema de diseño multinivel para dar soporte a más de 70 productos y reducir la separación entre equipos
• Usaron Dev Mode para ahorrar a los diseñadores y desarrolladores una media de 98 minutos por semana
• Implementaron Code Connect para escalar la adopción de Veneer y reducir los cambios de contexto para los desarrolladores
• Consiguieron un retorno de la inversión del 500 % en el ahorro de tiempo anual y redujeron los plazos de desarrollo un 50 % gracias a Veneer

Háblanos de tu equipo y vuestro enfoque para garantizar la calidad de los productos de HP.

Gilson Hoffmeister, estratega de sistemas de diseño en HP: Nuestro equipo gestiona de principio a fin la experiencia del sistema de diseño de HP. Todo, desde la habilitación del diseño hasta plataformas específicas como Android, iOS, Windows y la web.

Nuestro objetivo es ayudar a los equipos de HP a crear experiencias coherentes y de alta de calidad para todos los clientes. Pero esta tarea puede resultar difícil, ya que HP es una gran empresa con más de 100 líneas de productos distintas. Cada producto de HP tiene un ADN único. Para los ordenadores empresariales, se necesita algo elegante y funcional para el uso diario, que transmita confianza a los usuarios. En cambio, los accesorios de gaming deben ser divertidos y de gran calidad, algo de lo que los jugadores puedan presumir.

Andrei Garcia, director sénior de HP: Teníamos problemas con las distintas unidades de negocio de HP, ya que cada una iba por libre y se centraba en sus propias necesidades. A menudo trabajaban de forma aislada, sin demasiada coordinación en lo relativo al aspecto y la imagen digital de HP. Aunque se trataba de una circunstancia accidental, necesitábamos unificar todo bajo un mismo estándar.

¿Puedes hablarnos de Veneer, el sistema de diseño de HP?

Gilson: En HP, nuestro objetivo número uno es la satisfacción del cliente. Con Veneer, podemos asegurarnos de que todo nuestro software es consistente y funciona bien en conjunto. Ayuda a que todo el mundo utilice las mismas directrices de diseño, lo que a su vez se traduce en más facilidades para nuestra amplia variedad de clientes.

Andrei: Veneer ofrece a todos (diseñadores, desarrolladores, redactores y demás) una base con la que empezar y les ayuda a lo largo de todo el proceso de desarrollo de software.Lo que empezó como una mera «librería de componentes de frontend» se ha convertido en un sistema polifacético que ahorra tiempo, evita el trabajo redundante y mejora la cohesión.

¿Cómo medís el nivel de adopción de Veneer?

Gilson: Medimos la adopción de Veneer mediante una combinación de métricas cuantitativas y cualitativas. Al analizar los datos de participación de los análisis de bibliotecas de Figma y supervisar las descargas de nuestros paquetes de desarrollo, obtenemos información sobre la extensión y efectividad del uso del sistema. Por ejemplo, en nuestra biblioteca de iconografía, vemos que 915 componentes de iconos se utilizan en 320 equipos de HP, con un promedio de 85 000 inserciones por semana, lo que demuestra que el uso generalizado. Dato curioso: El icono de puntos suspensivos destaca como el más utilizado, con más de 1.2 millones de inserciones.

¿Porqué es importante fomentar la adopción?

Gilson: Usar Veneer es clave porque acelera nuestro proceso de desarrollo de productos y mantiene la coherencia a nivel empresarial. Con Veneer, diseñadores y desarrolladores tienen un punto de partida. Crear componentes desde cero lleva tiempo. Nosotros nos encargamos de eso: los diferentes estados de los componentes y las prácticas recomendadas de accesibilidad se integran en el sistema, y los equipos no tienen que desarrollar y probar lo mismo que ya probamos en Veneer. Esto libera tiempo para que puedan centrarse en sus responsabilidades y tareas pendientes.

Gilson: Por ejemplo, de enero a diciembre de 2023, vimos que al usar Veneer ahorrábamos un 500 % más de tiempo en comparación con lo que hubiera sido crear los componentes desde cero. En vez de dedicar el mismo tiempo a crearlos en cada proyecto, usamos los preexistentes en Veneer. Esta es la prueba de cuánto ha ayudado Veneer a ahorrar costes y mejorar la eficiencia: nuestra inversión resulta cinco veces más rentable.

Andrei: Cuando los equipos optan por no utilizar Veneer, esto afecta a la consistencia del producto, la escalabilidad y el desarrollo eficiente. Según nuestro VP de ingenieros, Gaurav Roy, usar Veneer ha recortado el tiempo de desarrollo un 50% de muchos proyectos. Este estudio de mercado refleja las comparaciones externas, como un estudio de IBM que observó un que se codificaba un 47% más rápido en formularios simples cuando se utiliza un sistema de diseño comparado con cuando tenían que empezar desde cero.

Antes de Dev Mode, ¿a qué retos se enfrentaba tu equipo con la adopción de Veneer?

Andrei: Un problema significativo era, y lo sigue siendo, la multitud de sub-marcas que tiene HP. Es imposible gestionar este escenario con un sistema de diseño de una sola capa. Nos llevó un tiempo estructurar Veneer para que fuera lo suficientemente flexible como para soportar una estrategia multimarcas. Sin varios niveles de adopción, no podríamos lograr alineación y coherencia entre los diferentes productos y segmentos.

Gilson:

El gran desafío era mostrarle a la gente lo mucho que puede ayudar un sistema de diseño unificado. Muchos estaban acostumbrados a tomar sus propias decisiones en diseño, como qué componentes usar o qué colores elegir. Les mostramos que si soltaban esas tareas usando Veneer, podrían focalizarse más en la creatividad y esas partes especiales de sus proyectos como la lógica empresarial y los patrones de diseño.

Para los desarrolladores fue fácil adoptar Veneer porque entendían los beneficios de re-usar el código. Aun así tuvimos que enfrentarnos al desafío de asegurarnos que Veneer era efectivo en más de 40 tecnologías UI frameworks y frontend que se usaban en HP.

¿Puede explicarnos cómo los equipos de HP han utilizado Dev Mode con su sistema de diseño?

El Dev Mode ha optimizado la forma en que nuestros desarrolladores acceden a estas especificaciones de diseño dentro de Figma, lo que reduce la necesidad de conversaciones y reuniones demasiado largas, y hace que la transición del diseño al código sea más fluida que nunca.

Andrei: Por ejemplo, añadimos soporte para componentes con forma de píldora, y con ello fue necesario ajustar los rellenos y márgenes. Usando anotaciones en Dev Mode, fue más fácil para los diseñadores señalar las actualizaciones al equipo de desarrollo y agilizar el flujo de trabajo.

La funcionalidad para comparar cambios es super útil para ver qué ha cambiado de una versión de diseño a otra, especialmente cuando estamos actualizando los productos que ya existen. Todo el mundo está en la misma página y hace que las actualizaciones sean más fluidas.

La otra parte cool es que se puede marcar las partes de diseño que están " listas para código". Le dice a nuestros desarrolladores en qué tienen que trabajar exactamente, con lo que hay menos confusión y más foco en terminar el trabajo.

¿Cómo estáis usando las variables con Dev Mode para hacer frente a los retos de una oferta multiproducto?

Andrei: Utilizamos variables vinculadas a nuestros tokens primitivos o semánticos, que se adaptan perfectamente a diferentes temas y modos como claro, oscuro y alto contraste.

Muy importante, estas variables forman un link crucial entre los elementos de diseño y el entorno de código. Nuestro equipo de Foundation gestiona los elementos centrales de Veneer, incluyendo el uso de la automatización para agilizar la transición del diseño al código. Han logrado construir un puente sólido que conecta el diseño y el desarrollo utilizando la API de Figma para leer estas variables directamente desde los diseños. Esto significa que las variables usadas en el diseño se traducen 1:1 en código, asegurando que tanto diseñadores como desarrolladores hablen literalmente el mismo idioma.

Este alineamiento no solo agiliza el proceso de desarrollo si no que también optimiza la comunicación entre equipos, permitiendo implementaciones de las especificaciones de diseño más precisas. Al mantener esta correspondencia directa entre elementos de diseño y código, se reduce significativamente las inconsistencias y mejora la calidad general y la escalabilidad de nuestros productos digitales.

Como uno de los primeros usuarios de Code Connect, ¿cómo ha sido tu experiencia hasta ahora?

Gilson: Code Connect es la funcionalidad con la que hemos vibrado más. Configurarlo fue muy fácil: solo necesitamos un ingeniero y dos semanas de tiempo.

Para ahorrar aún más tiempo, estamos automatizando aún más el proceso para cosas como los cambios en los componentes. Por ejemplo, tenemos un archivo donde todos los iconos están en su versión "editable" (utilizando múltiples capas y diferentes elementos como líneas, rectángulos, círculos, etc.). Vigilamos si hay cambios en el archivo a través de la automatización (donde los bajamos y creamos un diccionario con el código SVG), que se utiliza para crear nuestra biblioteca de iconografía en Figma y se comparte con desarrollo para ser añadido a las bibliotecas de desarrollo. Cada vez que se añade un icono al archivo, la automatización lo añade automáticamente a la biblioteca de iconos, a Code Connect, y lo distribuye a las bibliotecas de desarrollo.

Gilson: Tenemos un extenso sitio web con documentación sobre cada componente, donde los desarrolladores pueden ver las propiedades e incluso obtener demostraciones en vivo con fragmentos de código. Anteriormente, tenían que dedicar tiempo a visitar un sitio web para buscar fragmentos de código. Ahora, con Code Connect, con solo hacer clic en un componente en Figma pueden ver los fragmentos de código con todas las configuraciones correctas. Esto realmente acelera la velocidad con la que podemos desarrollar e integrar Veneer.

Andrei: Code Connect también ha sido de gran ayuda para nuestros diseñadores, ya que les ha permitido comprender mejor cómo funciona la codificación, lo que les ayuda a crear prototipos más precisos, algo que va más allá de lo que solo podemos hacer con la función de creación de prototipos de Figma.

¿Cómo ha respondido su equipo a Dev Mode?

Gilson: En HP hemos realizado una encuesta entre 400 usuarios de Dev Mode, la mayoría de los cuales eran desarrolladores. Los comentarios de la encuesta han sido abrumadoramente positivos. Un desarrollador afirma: "Dev Mode reduce el tiempo que dedico a tareas rutinarias, lo que me permite centrarme en mejorar la funcionalidad". Otro señala: "La posibilidad de generar y utilizar directamente fragmentos de código ha acelerado considerablemente nuestros ciclos de desarrollo."

También han ahorrado un promedio de 98 minutos por semana por persona al no tener que cambiar de contexto e ir a una web diferente a buscar los fragmentos de código correctos.

Estas cifras demuestran claramente que la mayoría de los equipos han experimentado mejoras sustanciales en su flujo de trabajo gracias a la adopción de Dev Mode, con porcentajes significativos que informan de un aumento de la eficiencia, la velocidad y la calidad del trabajo. Esta información cuantitativa pone de relieve los beneficios tangibles de Dev Mode, reforzando el valor que aporta a los procesos de desarrollo de HP.

Andrei: Con Dev Mode también hemos experimentado un gran cambio de mentalidad. Está ayudando a diseñadores y desarrolladores a hablar el mismo idioma, y nos ayuda a replantearnos el proceso de creación de productos. Se ha eliminado el concepto "traspasos" y la gente empieza a hablar del flujo de trabajo de diseño a código. El flujo de trabajo es más fluido y nuestro proceso de desarrollo de productos se ha acelerado.