Cómo Decagon usa la IA para impulsar la adopción de su sistema de diseño
La plataforma de experiencia del cliente, de rápido crecimiento, explica cómo Figma MCP y Figma Make le permitieron escalar un nuevo sistema de diseño y mantenerse al ritmo de las necesidades de sus clientes.
Compartir Cómo Decagon usa la IA para impulsar la adopción de su sistema de diseño
El servicio de atención al cliente es el próximo gran sector que la IA está llamado a transformar, y Decagon está desarrollando la plataforma para hacerlo posible. En apenas tres años, sus agentes de IA ya gestionan voz, chat y correo electrónico, sustituyendo las colas de tickets y los tiempos de espera que durante décadas definieron la atención al cliente. Así fue como Decagon consiguió un lugar en la lista CNBC Disruptor 50. Pero lo que la llevó hasta allí no fue solo lo que desarrolla, sino también la forma en que lo hace.
Crear un sistema de diseño para garantizar la calidad a escala
En una empresa nativa de IA como Decagon, el ciclo de diseño a código avanza muy rápido, pero también puede romperse con la misma facilidad. Los agentes de programación necesitan entradas precisas para generar resultados confiables. Pero sin un sistema de diseño, cada componente queda sujeto al criterio de quien lo implementa, y eso no escala. Cuando Jennifer Xu se incorporó a Decagon como diseñadora de producto, no existía ningún sistema de diseño: solo había un producto en rápido crecimiento y un equipo que avanzaba a un ritmo suficiente como para notar su ausencia. Las inconsistencias en toda la plataforma afectaban el nivel de calidad que necesitaban ofrecer a los clientes empresariales, y las constantes idas y vueltas entre diseño y desarrollo consumían tiempo y esfuerzo. Para crear su sistema de diseño, llamado Deco, diseñadores e ingenieros trabajaron codo a codo desde el principio. "Pudimos pensar desde el inicio en muchos de los casos límite y en todo lo que ya existía en el código", afirma Jennifer. Eso implicó resolver desde el comienzo preguntas que habría sido fácil posponer, pero muy costoso retomar más adelante. ¿Qué ocurre en el modo de foco? ¿Qué estados necesita cada componente: deshabilitado, solo lectura, error o advertencia? ¿Debe incluir un marcador de posición o no?
El resultado fue una biblioteca de Figma compartida por toda la organización que hoy reúne cientos de componentes, estilos y variables, capaces de cubrir la gran mayoría de los casos de uso de toda la plataforma para múltiples equipos. Según la analítica de uso de bibliotecas de Figma, la biblioteca registró decenas de miles de inserciones en apenas treinta días, una señal clara de que el equipo la utiliza activamente. "Con una biblioteca completa ya no debatimos estilos ni detalles de implementación", afirma Jennifer. "Los ingenieros saben exactamente qué botón o qué tabla deben usar. Además, todos compartimos el mismo vocabulario. Como diseñadora, puedo basarme en los mismos elementos fundamentales que un ingeniero, así que cuando diseñamos un producto o pensamos un flujo resulta mucho más fácil comunicarnos".
Deco está publicada para toda la organización, lo que permite a los diseñadores crear nuevas pantallas a partir de componentes existentes, en lugar de construirlas desde cero. "También facilita que los desarrolladores creen soluciones alineadas con nuestros objetivos de diseño", afirma Jennifer. "Como queremos lanzar funcionalidades rápidamente, necesitamos asegurarnos de que todo siga siendo coherente, y un sistema de diseño es una excelente manera de contar con una única fuente de verdad".
Cerrar el ciclo entre diseño y código
Los agentes de programación no interpretan las especificaciones como lo haría un desarrollador: solo trabajan con la información que reciben. Si esa información es inconsistente, el resultado también lo será. En Decagon, esa transferencia entre diseño y desarrollo implicaba un proceso ya conocido: los diseñadores exportaban las especificaciones, los desarrolladores las interpretaban, las diferencias aparecían durante la revisión y el ciclo volvía a empezar. El servidor MCP de Figma cambió eso.
El equipo de ingeniería de Decagon trasladó los componentes del sistema de diseño a Storybook y creó una habilidad para que sus agentes de programación utilizaran exactamente esos componentes al implementar los diseños. Otra habilidad permite a los diseñadores incorporar nuevos componentes, manteniendo Figma y el código permanentemente sincronizados. "Nuestros agentes tienen habilitado Figma MCP, por lo que todas las especificaciones, el código y el lienzo permanecen dentro de un mismo flujo, sin necesidad de estar yendo y viniendo constantemente", explica Jennifer.
"Nuestros agentes tienen habilitado Figma MCP, por lo que todas las especificaciones, el código y el lienzo permanecen dentro de un mismo flujo, sin necesidad de estar yendo y viniendo constantemente".
Conectarse a Deco mediante Figma MCP aceleró significativamente el ritmo de iteración. Ahora los agentes de programación pueden leer directamente los diseños de Figma para generar implementaciones iniciales de alta fidelidad. "Con MCP solo tengo que copiar y pegar el enlace de mi archivo de Figma en el agente de programación. Además de utilizar la habilidad que aporta el contexto del diseño, también lo relaciona con los componentes de nuestro sistema de diseño", explica Jennifer. "Puede generar resultados muy fieles a nuestros diseños sin necesidad de hacer innumerables ajustes".
La obsesión por el cliente, llevada a la práctica
Aproximadamente el 70 % de la hoja de ruta de producto de Decagon proviene directamente de sus clientes. No se trata solo de una filosofía: es un principio fundamental de su forma de desarrollar productos. "Realizamos sesiones de planificación de la hoja de ruta directamente con los equipos de nuestros clientes para asegurarnos de que las funcionalidades que desarrollamos respondan realmente a sus necesidades", afirma Bihan Jiang, directora de Producto de Decagon. La posibilidad de presentar maquetas y prototipos funcionales en Figma es fundamental para ese proceso. "Herramientas como Figma Make y los conectores con todos los sistemas que utilizamos nos permiten ampliar enormemente lo que somos capaces de construir", continúa.
En lugar de recopilar requisitos y presentar únicamente un producto final, el equipo ahora puede crear diez prototipos distintos y mostrárselos a diez clientes diferentes. "El resultado es un mejor producto, desarrollado mucho más rápido".
"Herramientas como Figma Make y los conectores con todos los sistemas que utilizamos nos permiten ampliar enormemente lo que somos capaces de construir".
Los paneles interactivos, las métricas y los insights generados mediante IA forman parte esencial de la propuesta de Decagon para clientes que necesitan comprender tanto datos cuantitativos como cualitativos, como las puntuaciones de satisfacción del cliente o el sentimiento expresado en conversaciones mantenidas a través de distintos canales. Uno de los gerentes de producto de Decagon utiliza Figma Make para crear prototipos de nuevos gráficos y rediseñar páginas con el fin de mostrar distintos conjuntos de datos según las necesidades expresadas por los clientes. "El PM puede escribir una indicación como Quiero que lo hagas con el estilo de esta página, pegar una captura de pantalla de Figma y eso nos permite pensar el gráfico y la herramienta dentro del contexto de toda la plataforma", explica Jennifer. "Después podemos conversar con el equipo de ingeniería y con quienes trabajan de cara al cliente para validar si realmente aporta valor antes de invertir una cantidad importante de recursos de diseño e ingeniería".
Ese mismo enfoque se aplicó cuando quisieron rediseñar un gráfico interactivo para hacerlo más limpio y fácil de usar. El PM proporcionó el gráfico original a Make, describió los cambios deseados y luego envió el resultado directamente al desarrollador. "Fue mucho más sencillo que el proceso tradicional de explicárselo a un diseñador, esperar a que preparara una maqueta y después pedirle al ingeniero que la desarrollara", afirma Jennifer. "Redujimos considerablemente el tiempo de desarrollo".
Los prototipos de alta fidelidad permiten que el equipo trabaje desde el primer momento en un entorno visual, sin tener que traducir ideas desde documentos a wireframes. "Como diseñadora, pienso visualmente, y cuando trabajas con analítica, el problema también es visual", explica Jennifer. "Lo veo como una imagen, no como un documento. Por eso resulta tan útil empezar a pensar desde el principio en el mismo medio en el que existirá el producto final". Esa tendencia a materializar rápidamente las ideas y mostrárselas cuanto antes a los clientes ya forma parte del ADN de Decagon. "Usar Figma como parte de nuestras sesiones de lluvia de ideas es una parte muy importante de nuestra cultura. Nos permite colaborar mucho más rápido y con un nivel de fidelidad mucho mayor que antes".
Decagon sitúa la IA en el centro no solo de la plataforma que ofrece, sino también de la manera en que desarrolla sus productos. El sistema de diseño mantiene la calidad y la coherencia a medida que el equipo crece. MCP mantiene alineados el diseño y el código para que nada se pierda durante la implementación. Y Figma Make pone el pensamiento visual al alcance de cualquier persona que tenga una idea que merezca ponerse a prueba. "Este nuevo mundo del diseño es realmente emocionante", concluye Jennifer. "Y creo que estamos a la vanguardia de este cambio. Nos permite lanzar productos de alta calidad con muchísima rapidez". Para Decagon, aumentar la velocidad sin renunciar a la calidad es la verdadera ventaja competitiva.
