Cómo Lollypop acompaña a los clientes del concepto a la creación en Figma

Lollypop Design Studio es una agencia global de diseño de IU/UX con un equipo de más de 180 diseñadores e ingenieros repartidos por la India, EE. UU., los Emiratos Árabes Unidos y Vietnam. Durante más de una década, el estudio ha prestado servicio a más de 1000 clientes, ha ganado más de 50 premios internacionales de diseño y ha llegado a más de dos mil millones de personas, trabajando con startups y empresas de la lista Fortune 500 de los sectores de la salud, la tecnología financiera y el comercio electrónico para convertir requisitos empresariales complejos en productos digitales escalables.

A medida que la cartera de clientes de Lollypop crecía y los proyectos se volvían más complejos, también lo hacía el reto de mantener a diseñadores, desarrolladores y clientes trabajando en la misma dirección, sin perder fidelidad ni impulso.

Cuando empezaron a diseñar una plataforma multirregional de operaciones minoristas en línea para un cliente, necesitaban una forma más rápida de pasar del concepto a la creación sin perder la coherencia. Con la consolidación de su flujo de trabajo dentro de Figma —a través de FigJam, Figma Design, Dev Tools y Figma Make—, Lollypop redujo el esfuerzo dedicado a la creación de prototipos entre 3 y 4 veces, acortó los ciclos de comentarios de varios días a un solo día y redujo los plazos de desarrollo front-end de meses a semanas.

El reto: gestionar flujos de trabajo complejos de productos entre equipos y clientes

Antes de usar Figma, los diseñadores, desarrolladores y partes interesadas de los clientes revisaban el trabajo en diferentes herramientas y documentos, por lo que era más difícil sincronizar las decisiones y se ralentizaba el proceso de intercambio de comentarios en etapas críticas.

Los retos se agravaron cuando empezaron a diseñar una plataforma de operaciones de venta minorista en línea para un cliente que opera en varias regiones. La plataforma debía ofrecer a los gerentes comerciales visibilidad sobre el rendimiento minorista en todos los puntos de venta, mientras que los datos de actividad sobre el terreno alimentaban continuamente la lógica y los flujos de trabajo del producto.

Sin un espacio de trabajo compartido, el progreso solía registrarse mediante hojas de cálculo, presentaciones y cadenas de correo electrónico, lo que generaba discrepancias entre lo que se diseñaba, lo que se desarrollaba y las necesidades de la empresa.

La solución: diseñar, validar y entregar en un único flujo de trabajo integrado

Lollypop reestructuró todo su flujo de trabajo del proyecto en torno a un único entorno integrado. El equipo lo trasladó todo a Figma: utilizaron FigJam para la fase de descubrimiento y alineación, Figma Design para la creación de prototipos y la validación, Dev Tools para entregas más ágiles y Figma Make para acelerar la entrega del front-end.

El resultado fue un proceso en el que las decisiones tomadas en la fase de descubrimiento se trasladaban directamente al diseño, y tanto los diseñadores como los desarrolladores podían pasar a la implementación sin que se perdieran recursos ni contexto por el camino.

Creación de un proceso de descubrimiento estructurado en FigJam

El equipo comenzaba cada proyecto con talleres guiados dentro de FigJam. Los diseñadores y las partes interesadas trabajaban juntos para trazar los recorridos de los usuarios, definir los factores determinantes del rendimiento, modelar escenarios de intervención y detectar casos extremos, todo ello antes de diseñar una sola pantalla.

Validación de los flujos de trabajo con prototipos nativos de Figma

“Antes teníamos que exportar las 100 pantallas a formato JPEG, importar todos esos archivos JPEG a otra herramienta, y crear los prototipos”, explica Naseer Ahmed, director sénior de diseño de Lollypop.

Al pasar a crear los prototipos directamente en Figma, el equipo eliminó por completo esa fase.

Las animaciones inteligentes también acercaron los prototipos a la experiencia del producto final, lo que permitió obtener comentarios más claros de las partes interesadas y redujo los malentendidos sobre el terreno.

Mantener el diseño y el código en el mismo lienzo con Dev Mode, Code Connect y el servidor MCP de Dev Mode de Figma

Antes, Lollypop trabajaba con diferentes herramientas que obligaban a los diseñadores a mantener archivos separados y a los desarrolladores a navegar por múltiples plataformas para acceder a especificaciones, recursos y anotaciones.

Al consolidarse en Figma, el equipo sustituyó ese flujo de trabajo por un único entorno integrado, en el que los desarrolladores podían acceder a especificaciones precisas, detalles de los componentes y recursos directamente desde el archivo de diseño —y lo que se creaba también podía volver a Figma para su revisión—, con lo que se reducía la ambigüedad y se mantenía la sincronización entre el diseño y el código a lo largo de todo el proyecto.

“Figma ha cambiado la forma en que el diseño y el desarrollo se mantienen sincronizados a lo largo de todo el proceso de creación. El contexto del diseño se integra directamente en nuestro flujo de trabajo de desarrollo, y lo que se crea puede volver a Figma para su revisión. Esto ha reducido la ambigüedad, minimizado las idas y venidas para aclarar dudas y garantizado una mayor alineación entre el diseño y la implementación, lo que, en definitiva, nos ahorra tiempo y mejora la eficiencia en la entrega”, afirmó Sri Chandra Dronavalli, director de Servicios de software en Lollypop.

El equipo también conectó el servidor MCP de Figma a sus entornos de desarrollo integrado (IDE), lo que permitió a los agentes IA consultar los archivos de diseño directamente y generar código basado en el contexto real del sistema de diseño, en lugar de hacer aproximaciones a partir de capturas de pantalla o especificaciones manuales. Utilizando Code Connect para vincular los componentes de Figma con su código de producción, las herramientas de IA reutilizaron elementos exactos del código base en lugar de crear otros nuevos, lo que dio como resultado una precisión del 90 % en los componentes en solo uno o dos intentos. El resultado fue menos trabajo de reelaboración, menos bugs por discrepancias en los tokens y una iteración más rápida en respuesta a los comentarios de los usuarios.

Aceleración de la entrega del front-end con Figma Make

En los módulos en los que ya existían sistemas de backend, Figma Make facilitó el siguiente paso al reducir la cantidad de código de la capa front-end que había que crear desde cero.

Con Figma Make, el equipo generó una estructura inicial de front-end a partir de los diseños aprobados. Los ingenieros lo utilizaron como punto de partida, perfeccionándolo e integrándolo con los sistemas de backend en lugar de crear la capa de interfaz desde cero.

Reducción de los ciclos de comentarios con archivos compartidos

Los comentarios siempre habían sido un obstáculo persistente, y exportar las pantallas a PDF y esperar días para recibir respuestas significaba que el proceso de iteración siempre se quedaba atrás con respecto a los plazos del cliente.

“Antes, solíamos enviar presentaciones, exportar todas las pantallas a JPEG y convertirlas a PDF, y esperar un par de días para recibir comentarios y revisiones”, dijo Naseer.

Al compartir archivos de Figma en tiempo real con las partes interesadas, el equipo pudo trasladar las revisiones al propio espacio de trabajo de diseño. Las discusiones y decisiones se registraban directamente en el archivo, creando un historial trazable sin la carga administrativa que supone la documentación adicional.

De cara al futuro: ampliar la colaboración y mejorar los flujos de trabajo

A medida que Lollypop asume proyectos para clientes más complejos y en varias regiones, Figma se está convirtiendo en la plataforma común que utilizan los equipos para colaborar, presentar y entregar sus trabajos. La consolidación de su flujo de trabajo ha sentado unas bases que ahora están ampliando a otras áreas del negocio.

“Cuando lanzamos productos más rápido y mejor, eso influye en cómo nos posicionamos en el mercado. Los flujos de trabajo y los procesos que hemos creado en Figma nos han ayudado a crear y lanzar con rapidez y dar lo mejor de nosotros mismos en todo momento. Eso son los cimientos de la marca”, afirma Charan Babu N., director sénior, Marketing Global y Asociaciones de Lollypop.

Con Figma Slides, el equipo también está integrando las presentaciones para las partes interesadas en el proceso de diseño, facilitando la coordinación entre equipos de diferentes regiones sin tener que cambiar de herramienta. Además, utilizan Figma Buzz para gestionar las plantillas y la distribución de contenidos, asegurándose de que el tono y la coherencia de la marca se mantengan en todas las campañas, formatos y regiones sin tener que volver a crear los recursos desde cero.