Saltar hasta el contenido principal

Sistema de diseño 104: Hacer que los métricos importen

Una ilustración digital abstracta que presenta formas geométricas interconectadas en una paleta de colores vibrantes. La composición está formada de estructuras azules, altas y tridimensionales que se asemejan a columnas o vigas, dispuestas en un patrón escalonado. Estas estructuras tienen extensiones angulares que están conectadas por delgadas varillas anaranjadas, creando un efecto similar a una telaraña. Dos grandes formas circulares y rectangulares amarillas están presentes en el fondo, posiblemente asemejándose al sol y una puerta, situadas contra un fondo texturado verde. La obra de arte tiene una sensación mecánica y arquitectónica, con una energía surrealista, casi cinética.Una ilustración digital abstracta que presenta formas geométricas interconectadas en una paleta de colores vibrantes. La composición está formada de estructuras azules, altas y tridimensionales que se asemejan a columnas o vigas, dispuestas en un patrón escalonado. Estas estructuras tienen extensiones angulares que están conectadas por delgadas varillas anaranjadas, creando un efecto similar a una telaraña. Dos grandes formas circulares y rectangulares amarillas están presentes en el fondo, posiblemente asemejándose al sol y una puerta, situadas contra un fondo texturado verde. La obra de arte tiene una sensación mecánica y arquitectónica, con una energía surrealista, casi cinética.

Detrás de cada sistema de diseño exitoso se oculta un secreto sorprendente: los números. Descubre cómo el seguimiento de las métricas adecuadas puede convertir tu sistema de diseño de un recurso útil en un motor potente para la eficiencia.

Compartir Sistema de diseño 104: Hacer que los métricos importen

Más allá del considerable ahorro de tiempo, el experimento reveló un beneficio cualitativo: los participantes informaron una mayor confianza en sus diseños al usar un sistema de diseño, sabiendo que estaban alineados con el producto en general.

Los datos hablan por sí solos: el equipo de ciencia de datos de Figma halló que los diseñadores con acceso a un sistema de diseño completaban las tareas un 34 % más rápido que aquellos sin acceso. Para poner esto en perspectiva, considere un equipo de siete diseñadores de productos, cada uno con 20 horas de tiempo de diseño enfocado por semana. Con un aumento de la eficiencia del 34 % gracias a un sistema de diseño, es como añadir 3,5 diseñadores al equipo cada semana. En empresas como Vanguard, donde las actualizaciones de diseño son un 50% más rápidas con los sistemas adecuados en su lugar, estas ganancias se multiplican radicalmente.

Con un aumento de la eficiencia del 34 % gracias a un sistema de diseño, es como añadir 3,5 diseñadores al equipo cada semana.

Aunque los equipos a menudo se centran en crear componentes y documentación al principio al construir un sistema de diseño, medir la adopción y el uso revela el verdadero impacto empresarial. Empresas como Headspace han visto ahorros de tiempo del 20%–30% % en tareas sencillas y hasta un 50% en proyectos complejos a través de su uso de tokens y variables, mientras que Swiggy redujo el tiempo de lanzamiento de funciones a la mitad después de implementar un seguimiento robusto. Estas métricas iluminan caminos claros hacia una mejor consistencia, eficiencia y escalabilidad.

Una ilustración digital abstracta que presenta una composición geométrica de estructuras en capas, similares a libros. Una gran forma rectangular azul domina el centro, creando la sensación de que se está abriendo o desplegando. Debajo y alrededor de él, múltiples capas apiladas en verde, naranja y amarillo se extienden hacia afuera en un patrón escalonado, asemejando páginas desplegadas o formas arquitectónicas. Algunas de las capas contienen marcas abstractas en negro, evocando una sensación de información codificada o de texto digital. El fondo es de un vibrante color naranja, realzando el contraste entre los elementos estructurados y su entorno.Una ilustración digital abstracta que presenta una composición geométrica de estructuras en capas, similares a libros. Una gran forma rectangular azul domina el centro, creando la sensación de que se está abriendo o desplegando. Debajo y alrededor de él, múltiples capas apiladas en verde, naranja y amarillo se extienden hacia afuera en un patrón escalonado, asemejando páginas desplegadas o formas arquitectónicas. Algunas de las capas contienen marcas abstractas en negro, evocando una sensación de información codificada o de texto digital. El fondo es de un vibrante color naranja, realzando el contraste entre los elementos estructurados y su entorno.

Os damos la bienvenida a la cuarta parte de nuestra introducción a los sistemas de diseño. Si te perdiste nuestros artículos anteriores, consulta ¿Qué es un sistema de diseño?, Cómo construir tu sistema de diseño, y Documentación que impulsa la adopción.

Interpretar las señales

En los sistemas de diseño, existen métricas de uso, tasas de adopción, puntuaciones de consistencia y otros indicadores de rendimiento. Sin embargo, ¿cuáles son los adecuados para tu organización? La cantidad de veces que se utilizan componentes o se aplican tokens de diseño puede ofrecer información sobre qué partes de tu sistema de diseño son los verdaderos pilares. Y también se ahorra un tiempo valioso gracias a la reutilización de componentes, un beneficio medible que convence tanto a las partes interesadas como a los equipos.

Las métricas clave que se deben considerar para el seguimiento incluyen:

  • Uso de biblioteca y componentes: Monitorea qué componentes, variables y estilos se utilizan más y cuáles no. Estos datos ayudan a identificar oportunidades para mejorar o dejar de utilizar elementos subutilizados.
  • Eficacia de la documentación: Rastrea cómo los equipos interactúan con tu documentación. Las páginas populares y las consultas de búsqueda comunes pueden revelar dónde los equipos necesitan más orientación.
  • Medidas de coherencia: busca patrones en la separación de componentes o en las modificaciones de estilo que puedan indicar áreas en las que el sistema de diseño no satisface las necesidades del equipo.

Para Veronica Agne, Diseñadora de UX Senior en athenahealth, las tasas de desapego de componente ofrecen datos particularmente valiosos: “Si alguien en nuestra organización está separando un componente, quiero saber por qué”, explica. “Puede significar una de tres cosas: Hay un bug, las personas desean una mejora en la funcionalidad que no está presente, o las personas están combinando elementos existentes de maneras que yo no esperaba. Me importan esas tres respuestas.”

Este trabajo detectivesco dio sus frutos recientemente cuando Verónica notó un aumento en las desconexiones de un componente de contenedor. "Tuvimos un pequeño problema con la disposición automática, ya que no envolvía como lo necesitábamos", recuerda. "Vi a un grupo de personas separándola y me di cuenta de que probablemente esa era la razón. No tuve que esperar a que alguien me dijera específicamente que era un problema antes de poder solucionarlo". Tras trabajar en ciencia de datos y análisis y, ahora, liderar el diseño del sistema de diseño Forge de athenahealth, Veronica aporta una perspectiva única para medir el éxito de un sistema que funciona a escala y que presta servicios a cientos de diseñadores, desarrolladores y gerentes de producto, con alrededor de 100 000 inserciones de componentes al mes.

Aprovechar herramientas y automatización

Los puntajes de consistencia y el cumplimiento de la accesibilidad son indicadores vitales del estado de un sistema de diseño. Al tratar la supervisión como parte de una rutina continua, en lugar de un chequeo periódico, es más probable que detectes problemas potenciales antes de que se agraven. La automatización puede liberar a los equipos para que se dediquen a lo que mejor saben hacer: diseñar e innovar, en lugar de enfangarse con las minucias del seguimiento de datos. Con plugins, scripts de construcción y marcos de prueba, las tareas manuales dan paso a la eficiencia y precisión.

A partir del 11 de febrero de 2025 las analíticas de biblioteca actualizadas de Figma brindan a los clientes de Organización y Empresa datos más profundos sobre cómo se están utilizando sus bibliotecas publicadas sin salir de su entorno de diseño. Los equipos ahora pueden rastrear la adopción de variables y estilos, además de las analíticas de componentes existentes, directamente en Figma, haciendo que sea más fácil que nunca entender el uso del sistema de diseño en toda su organización. Los análisis de biblioteca incluyen:

  • Componentes: supervisa los patrones de uso e identifica qué elementos utilizan más los equipos
  • Estilos: realiza un seguimiento de cómo se implementan los estilos de color, tipo y efecto en los archivos
  • Variables: comprende cómo se aprovechan los tokens y las propiedades dinámicas

Para los clientes de Empresa, la nueva API de análisis de bibliotecas ofrece aún más flexibilidad para personalizar vistas de análisis. Los equipos pueden ver patrones de uso en periodos de tiempo específicos, combinar diferentes tipos de datos e integrar métricas del sistema de diseño con sus herramientas y flujos de trabajo existentes.

Hacer los datos procesables

En athenahealth, Veronica y su equipo han sido algunos de los primeros en probar las últimas adiciones de análisis de biblioteca de Figma, utilizándolo como parte de su proceso para convertir métricas en mejoras. “Utilizo las analíticas de biblioteca actualizadas de Figma para tener un control más detallado sobre cómo, cuándo y por qué las personas están desenganchando componentes”, explica. Su equipo utiliza scripts personalizados para transformar los datos de la API en informes detallados, añadiendo contexto como tipos de componentes y tasas de desenganche esperadas, luego visualizándolos y revisándolos mensualmente a través de un panel de Tableau.

Estos datos impulsan un proceso de tres pasos:

  1. Diagnóstico: examen de componentes en busca de problemas obvios
  2. Alcance a los usuarios: conectar con los equipos para comprender sus necesidades
  3. Implementación: creación de tickets para las mejoras necesarias, ya sea en Figma o código

"Intentamos constantemente asegurarnos de que no haya problemas en nuestro sistema de diseño", afirma Verónica. "La gente no va a informar de todos los problemas que tenga. Si tengo otra métrica que puede señalar un problema, no necesito depender de la voluntad de la gente para decirme que algo va mal".

En Squarespace, el equipo de sistemas de diseño aprovecha el filtro de comparación de bibliotecas para rastrear la migración entre diferentes versiones. Esto les permite monitorear el uso entre iteraciones antiguas y nuevas, y asegurar que las versiones más antiguas se descontinúen de forma adecuada.

Microsoft también utiliza el análisis del sistema de diseño como una forma de recabar comentarios. "Hay tantos equipos en Microsoft que utilizan el Fluent Design System, y no siempre recibimos opiniones de ellos sobre lo que funciona y lo que no", asegura Damien Aistrope de Microsoft, quien anteriormente fue Diseñador Principal de Fluent. "Por lo tanto, es útil para nosotros ver qué componentes no se están utilizando y no son importantes de mantener, así como qué componentes se suelen separar y pueden necesitar una actualización".

"Hay muchos equipos en Microsoft que utilizan el sistema de diseño Fluent y no siempre recibimos comentarios de ellos sobre qué funciona y qué no".
Damien Aistrope, anteriormente diseñador principal del Fluent Design System Studio en Microsoft
Se muestra una captura de pantalla de un panel de análisis del sistema de diseño titulado "Bibliotecas" sobre un fondo naranja. El panel está abierto en la pestaña "Análisis" y se centra en "Inserciones de variables", mostrando un gráfico de líneas que sigue las tendencias de inserción durante un período de 30 días. Debajo del gráfico, una sección de "Equipos principales" clasifica a los equipos por la cantidad de inserciones de variables, con el "Equipo Core" liderando con 372,516 inserciones (94%). Una tabla de "Estadísticas de uso" enumera variables de color como "Cian", "Granate" y "Neon Green", junto con datos sobre instancias totales, inserciones en los últimos 30 días y desvinculaciones. La variable más utilizada es "Cian", con 917,580 instancias totales y 109,630 inserciones en los últimos 30 días.Se muestra una captura de pantalla de un panel de análisis del sistema de diseño titulado "Bibliotecas" sobre un fondo naranja. El panel está abierto en la pestaña "Análisis" y se centra en "Inserciones de variables", mostrando un gráfico de líneas que sigue las tendencias de inserción durante un período de 30 días. Debajo del gráfico, una sección de "Equipos principales" clasifica a los equipos por la cantidad de inserciones de variables, con el "Equipo Core" liderando con 372,516 inserciones (94%). Una tabla de "Estadísticas de uso" enumera variables de color como "Cian", "Granate" y "Neon Green", junto con datos sobre instancias totales, inserciones en los últimos 30 días y desvinculaciones. La variable más utilizada es "Cian", con 917,580 instancias totales y 109,630 inserciones en los últimos 30 días.
El panel de análisis de biblioteca actualizado de Figma revela el uso de su sistema de diseño por su equipo, rastreando de inserciones de variables a tokens de color dentro de su entorno de diseño.

Prácticas recomendadas para medir el impacto

El aprendizaje de modelos es un proceso de construcción y entrenamiento de programas informáticos para reconocer patrones, hacer predicciones o comprender comportamientos a partir de datos.

Para los equipos que deseen iniciar o mejorar el seguimiento de sus métricas, Verónica sugiere adoptar un enfoque histórico: "Mirar hacia atrás antes de intentar mirar hacia adelante". Usando la analítica de bibliotecas, puede retroceder un año y examinar lo que ocurrió durante un período del que ya conoce los resultados. "Es casi como el aprendizaje de modelos: puedes observar lo que podría haber señalado esos resultados y usar eso para identificar qué buscar en el futuro".

Usando la analítica de bibliotecas, puede retroceder un año y examinar lo que ocurrió durante un período del que ya conoce los resultados.
Veronica Agne , Diseñadora UX sénior, athenahealth

Aunque los beneficios de seguir las métricas son evidentes, el proceso presenta desafíos, como mantener la calidad de los datos, lograr la aceptación de las partes interesadas y convertir los datos en acción. Otras prácticas recomendadas incluyen:

  • Mide temprano y con frecuencia: No esperes hasta después del lanzamiento para comenzar a rastrear métricas. Las mediciones tempranas ayudan a identificar barreras de adopción y oportunidades de mejora antes de que se conviertan en problemas sistémicos.
  • Establezca metas claras alineadas con los objetivos comerciales: Vincule los indicadores a resultados específicos. ¿Está tratando de aumentar la adopción? ¿Mejorar la consistencia? ¿Reducir la deuda de diseño? Tus objetivos deben informar qué métricas importan más.
  • Mirar más allá de los números de superficie para obtener contexto: una tasa de separación alta no siempre es negativa, podría indicar que un componente diseñado para la personalización está funcionando según lo previsto. El contexto importa.
  • Compartir ampliamente su información con las partes interesadas: consigue apoyo para tu sistema de diseño y demuestra su impacto en la eficiencia y la coherencia compartiendo sus métricas.
Se muestra una captura de pantalla de un panel de análisis de diseño titulado "Earthling SDS" sobre un fondo verde con un sutil efecto de sombra paralela. El panel está abierto a la pestaña 'Análisis', mostrando un gráfico de líneas etiquetado como 'Inserciones de componentes' con un pico visible a principios de enero. Un menú desplegable está abierto, revelando tres opciones: 'Componentes', 'Estilos' y 'Variables', con 'Variables' siendo resaltado. Debajo del gráfico, una sección de 'Equipos principales' lista equipos y sus recuentos de inserción de componentes, con el 'Equipo de Aplicaciones' liderando con 55 inserciones (93%). Más abajo, una tabla de 'Estadísticas de componentes' detalla los nombres de los componentes, los total de variantes, total de instancias y el número de inserciones y despegues en los últimos 30 días. El componente 'Pie de página' tiene la mayor actividad con 25 instancias totales, 9 inserciones y 8 despegues.Se muestra una captura de pantalla de un panel de análisis de diseño titulado "Earthling SDS" sobre un fondo verde con un sutil efecto de sombra paralela. El panel está abierto a la pestaña 'Análisis', mostrando un gráfico de líneas etiquetado como 'Inserciones de componentes' con un pico visible a principios de enero. Un menú desplegable está abierto, revelando tres opciones: 'Componentes', 'Estilos' y 'Variables', con 'Variables' siendo resaltado. Debajo del gráfico, una sección de 'Equipos principales' lista equipos y sus recuentos de inserción de componentes, con el 'Equipo de Aplicaciones' liderando con 55 inserciones (93%). Más abajo, una tabla de 'Estadísticas de componentes' detalla los nombres de los componentes, los total de variantes, total de instancias y el número de inserciones y despegues en los últimos 30 días. El componente 'Pie de página' tiene la mayor actividad con 25 instancias totales, 9 inserciones y 8 despegues.

Obtén más información sobre la analítica de bibliotecas actualizada de Figma para equipos organización y empresa.

Planificar para la escala

A medida que tu sistema de diseño madura, tu estrategia de métricas también debería evolucionar. La revisión regular de tu estrategia de métricas asegura que estás supervisando lo que realmente importa para tu etapa de desarrollo actual. Considera segmentar los datos por equipo o producto para obtener información más detallada. Esto puede ayudar a identificar dónde se podría necesitar asistencia o personalización adicional.

Recuerda que las métricas son un medio para un fin: deben ayudarte a construir un sistema de diseño más efectivo y ampliamente adoptado que haga que tu equipo sea más eficiente y tus productos más consistentes. Utiliza estas mediciones para guiar las mejoras, demostrar el valor y garantizar que tu sistema de diseño continúe satisfaciendo las necesidades cambiantes de tu organización.

Create and collaborate with Figma

Get started for free