Cómo Dev Mode ahorra 1,5 horas del flujo de trabajo de diseño a código de HP

HP, una auténtica gigante de la industria electrónica, ha sido pionera en tecnología con sus impresoras, computadoras portátiles, sistemas de juegos y mucho más. De hecho, el pequeño garaje en Palo Alto donde tuvo su humilde comienzo es ahora un monumento histórico de California por ser el “Lugar de nacimiento de Silicon Valley”. Sin embargo, contar con una variedad tan amplia de productos, cada uno con su propia base de clientes especial, hace que sea difícil mantener una experiencia cohesiva para todos a medida que la empresa sigue innovando. Ahí es donde entra en juego el sistema de diseño de HP: Veneer. Nos sentamos con el equipo para saber cómo hicieron lo siguiente:

• Construyeron un sistema de diseño multicapa para dar soporte a más de 70 productos y conectar a los equipos.
• Usaron Dev Mode para ahorrarles a desarrolladores y diseñadores un promedio de 98 minutos por semana.
• Implementaron Code Connect para escalar la adopción de Veneer y reducir los cambios de contexto para desarrolladores.
• Alcanzaron un 500 % de ROI en ahorro de tiempo anual y redujeron el tiempo de desarrollo en un 50 % con Veneer.

Cuéntennos sobre su equipo y cómo abordan el control de calidad de los productos en HP.

Gilson Hoffmeister, estratega de Sistemas de Diseño en HP: Nuestro equipo gestiona la experiencia completa del sistema de diseño de HP, desde capacitación en diseño hasta plataformas específicas como Android, iOS, Windows y web.

Nos enfocamos en capacitar a los equipos de HP para que creen experiencias excepcionales, de alta calidad, consistentes y eficientes para cada cliente. Esto puede ser difícil; HP es una empresa grande con más de 100 líneas de producto diferentes. Cada producto de HP tiene un ADN diferente. En el caso de las computadoras de negocios, son elegantes y funcionales para su uso diario, con el objetivo de generar confianza en los usuarios. En el caso de los accesorios de juego, deben ser divertidos y de alta calidad, para que los usuarios sientan orgullo y quieran mostrarlos.

Andrei Garcia, gerente sénior de Diseño en HP: Enfrentamos desafíos con las diferentes unidades de negocio en HP, cada una estaba enfocada en lo suyo y en sus propias necesidades. Solían trabajar de forma aislada y sin mucha coordinación sobre cómo HP se debería ver y sentir a nivel digital. Si bien no era intencional, debíamos reunirlas a todas bajo un mismo estándar.

¿Pueden contarnos sobre Veneer, el sistema de diseño de HP?

Gilson: En HP, nuestro principal objetivo es la satisfacción de los clientes. Con Veneer, podemos garantizar que todos nuestros software se sientan consistentes y funcionen bien juntos. Ayuda a que todos sigan las mismas pautas de diseño, lo que hace que todo sea más fácil para nuestros diferentes clientes.

Andrei: Veneer les ofrece a todos–diseñadores, desarrolladores, escritores y otros profesionales–un punto de partida y los ayuda durante el proceso de desarrollo de software.Lo que comenzó como una simple “biblioteca de componentes frontend” ha evolucionado hasta convertirse en un sistema multifacético que ahorra tiempo, previene trabajo redundante y genera cohesión.

¿Cómo miden la 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 interacción obtenidos de la analítica de la biblioteca de Figma y seguir las descargas de nuestros paquetes de desarrollo, descubrimos qué tanto y con qué efectividad se utiliza el sistema. Por ejemplo, en el caso de nuestra biblioteca de iconografía, observamos que 320 equipos de HP utilizan 915 componentes de íconos, con un promedio de 85 000 inserciones por semana, lo cual prueba su uso extendido. Un dato curioso: el ícono de puntos suspensivos se destaca por ser el más utilizado, con más de 1,2 millones de inserciones.

¿Por qué es importante impulsar la adopción?

Gilson: Utilizar Veneer es clave porque hace que nuestro proceso de desarrollo de productos sea más rápido y mantiene la consistencia en HP. Con Veneer, tanto diseñadores como desarrolladores tienen un punto de partida. Crear componentes desde cero toma tiempo, y nosotros eliminamos esa carga: los diferentes estados de los componentes y las mejores prácticas de accesibilidad ya están integrados, por lo que los equipos no tienen que desarrollar ni probar lo que ya hemos probado en Veneer. Esto les libera tiempo para que se enfoquen en su negocio y en lo que necesitan entregar.

Gilson: Por ejemplo, desde enero a diciembre de 2023, observamos que usar Veneer ahorró un 500 % más de tiempo en los proyectos en comparación con el tiempo que se invertía en crear los componentes. En lugar de dedicar el mismo tiempo a crearlos desde cero en cada proyecto, se utilizaron los componentes que ya estaban disponibles en Veneer. Esto demuestra cuánto ha ayudado Veneer a ahorrar costos y mejorar la eficiencia, haciendo que nuestra inversión sea cinco veces más valiosa.

Andrei: Cuando los equipos eligen no usar Veneer, esto perjudica la consistencia del producto, la escalabilidad y la eficiencia en el desarrollo. Según nuestro vicepresidente de Ingeniería, Gaurav Roy, usar Veneer ha reducido el tiempo de desarrollo en un 50 % en muchos proyectos. Este punto de referencia coincide con comparaciones externas, como un estudio de IBM, que notó que el desarrollo es un 47 % más rápido en formularios simples cuando se utiliza un sistema de diseño en comparación con empezar de cero.

Antes de Dev Mode, ¿a qué desafíos se enfrentaban los equipos al impulsar la adopción de Veneer?

Andrei: Un problema importante era, y continúa siendo, la cantidad de submarcas de HP. Es imposible dar soporte a este escenario con un sistema de diseño de capa única. Nos tomó algo de tiempo estructurar Veneer para que sea lo suficientemente flexible como para funcionar con una estrategia multimarca. Sin varios niveles de adopción, no podríamos impulsar la alineación y la consistencia en todos los productos y segmentos.

Gilson: No fue fácil lograr que los diseñadores comenzaran a usar Veneer porqueles importaban mucho sus productos y usuarios. Cuando algo externo intenta interferir con lo que han estado creando, les preocupa porque creen que ese enfoque podría dañar su relación con los usuarios.

El gran desafío fue mostrarles a las personas cuánto ayudaría el tener un sistema de diseño unificado. Muchos estaban acostumbrados a tomar sus propias decisiones de diseño, como qué componentes usar o qué colores elegir. Tuvimos que mostrarles que si dejaban de hacer esas tareas y utilizaban Veneer, podrían enfocarse más en las partes creativas y únicas de sus proyectos, como la lógica de negocio y los patrones de diseño.

A los desarrolladores les resultó más fácil adoptar Veneer porque comprendieron los beneficios de reutilizar códigos. Sin embargo, nos enfrentamos al desafío de garantizar que Veneer fuera efectivo para los más de 40 marcos de UI y tecnologías frontend utilizadas en HP.

¿Pueden compartir cómo los equipos de HP vienen utilizando Dev Mode con su sistema de diseño?

Dev Mode ha acelerado la forma en que los desarrolladores acceden a estas especificaciones de diseño en Figma, reduciendo la necesidad de largos debates y reuniones, y facilitando como nunca antes la transición del diseño al código.

Andrei: Por ejemplo, agregamos compatibilidad para componentes en forma de píldora, y para eso debimos ajustar los espaciados y los márgenes. Con las anotaciones en Dev Mode, fue más fácil para los diseñadores señalar las actualizaciones a los desarrolladores y optimizar el flujo.

La función para comparar cambios es muy útil para ver qué ha cambiado de una versión de diseño a otra, especialmente al momento de actualizar nuestros productos existentes. Mantiene a todos en la misma página y facilita el proceso de actualización.

Otro aspecto para destacar es la capacidad de marcar partes del diseño como “listas para desarrollar”. Les indica a los desarrolladores exactamente en qué trabajar, lo que reduce las confusiones y ayuda a todos a enfocarse en su trabajo.

¿Cómo utilizan las variables en Dev Mode para ayudar con los desafíos que presenta ofrecer una variedad productos?

Andrei: Utilizamos variables relacionadas con nuestros tokens primitivos o semánticos, lo que se puede escalar perfectamente en diferentes temas y modos, como claro, oscuro y de alto contraste.

Aún más importante, estas variables crean un vínculo fundamental entre los elementos de diseño y el entorno de codificación. Nuestro equipo de Foundation gestiona los elementos centrales de Veneer, incluida la utilización de la automatización para acelerar la transición del diseño al código. Han creado satisfactoriamente un puente sólido que conecta el diseño y el desarrollo mediante el uso de la API de Figma para leer las variables directamente desde los diseños. Esto significa que las variables utilizadas en los diseños se convierten directamente en código, lo que garantiza que tanto diseñadores como desarrolladores hablen literalmente el mismo idioma.

Esta alineación no solo optimiza el proceso de desarrollo, sino que también mejora la comunicación entre los equipos, lo que a su vez permite una implementación más precisa de las especificaciones del diseño. Al mantener una correspondencia directa entre los elementos de diseño y el código, reducimos significativamente las inconsistencias y mejoramos la calidad y escalabilidad generales de nuestros productos digitales.

Al ser una de las primeras empresas en adoptar Code Connect, ¿pueden compartir su experiencia hasta ahora?

Gilson: Code Connect es la función que más nos ha entusiasmado. Configurarla fue muy fácil: solo necesitamos un ingeniero y dos semanas de tiempo.

Para ahorrar aún más tiempo, estamos automatizando todavía más el proceso para cuestiones como los cambios en los componentes. Por ejemplo, tenemos un archivo fuente en el que todos los íconos están en su versión “editable” (con varias capas y diferentes elementos, como líneas, rectángulos, círculos, etc.). Observamos los cambios en el archivo fuente mediante la automatización, en la que los simplificamos y creamos un diccionario con el código SVG, que se utiliza para crear nuestra biblioteca de iconografía de Figma y compartirla con los desarrolladores para agregarla a las bibliotecas de desarrollo. Cada vez que se agrega un ícono al archivo fuente, la automatización lo agrega directamente a la biblioteca de íconos, a Code Connect, y lo envía en cascada a las bibliotecas de desarrollo.

Gilson: Contamos con un sitio web enorme con documentación sobre cada componente, donde los desarrolladores pueden ver sus propiedades e incluso obtener demostraciones en directo con fragmentos de código. Antes, tenían que perder tiempo dirigiéndose a un sitio web para buscar fragmentos de código. Ahora, con Code Connect, solo tienen que hacer clic en un componente de Figma para ver fragmentos de código con la configuración adecuada. 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 funcionan los códigos, lo que a su vez les ayuda a crear prototipos más precisos; algo que va más allá de lo que podemos hacer solo con la función de prototipado de Figma.

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

Gilson: Hemos encuestado a unas 400 personas que usan Dev Mode en HP, de las cuales la mayoría son desarrolladores. El feedback de la encuesta ha sido abrumadoramente positivo. Un desarrollador afirma: “Dev Mode reduce el tiempo que dedico a tareas rutinarias, lo que me permite enfocarme en mejorar la funcionalidad”. Otro observa: “La posibilidad de generar y utilizar directamente fragmentos de código ha acelerado significativamente nuestros ciclos de desarrollo”.

En promedio, también han ahorrado 98 minutos por semana por persona al no tener que cambiar de contexto e ir a un sitio web diferente para obtener los fragmentos de código necesarios.

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

Andrei: Con Dev Mode, también hemos tenido un gran cambio de mentalidad. Ayuda a diseñadores y desarrolladores a hablar el mismo idioma, y también a replantearnos el proceso de desarrollo de productos. Hemos eliminado la idea de las entregas y se ha comenzado a hablar del flujo de trabajo de diseño a desarrollo. El trabajo ahora es más fluido y nuestro proceso de desarrollo de productos se ha acelerado.