Lollypop acompaña a sus clientes desde el briefing hasta la creación en Figma

Lollypop Design Studio Lollypop Design Studio es una agencia global de diseño UX/UI que cuenta con un equipo de más de 180 diseñadores e ingenieros repartidos por la India, los Estados Unidos, los Emiratos Árabes Unidos y Vietnam. A lo largo de más de una década, el estudio ha prestado servicios a más de 1000 clientes, ha ganado más de 50 premios internacionales de diseño y ha influido en la vida de más de dos mil millones de personas, colaborando con startups y empresas de la lista Fortune 500 en 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 los diseñadores, desarrolladores y clientes trabajando en la misma dirección, sin perder calidad ni impulso.

Cuando comenzaron a diseñar una plataforma de operaciones minoristas en línea y multirregional para un cliente, necesitaban una forma más rápida de pasar del briefing a la implementación sin perder la alineación. Al consolidar 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 tres y cuatro veces, acortó los ciclos de feedback de varios días a un solo día y redujo los plazos de desarrollo front-end de meses a semanas.

El desafío: gestionar flujos de trabajo de productos complejos entre equipos y clientes

Antes de Figma, los diseñadores, los desarrolladores y las partes interesadas de los clientes revisaban el trabajo en diferentes herramientas y documentos, lo que dificultaba la sincronización de las decisiones y ralentizaba el feedback en etapas críticas.

Los retos se multiplicaron cuando comenzaron 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 proporcionar a los gerentes de negocios una visibilidad clara del desempeño comercial en todos los puntos de venta, mientras que los datos de las actividades 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 e hilos de correo electrónico, lo que generaba discrepancias entre lo que se diseñaba, lo que se desarrollaba y lo que necesitaba la empresa.

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

Lollypop reestructuró todo su flujo de trabajo de proyectos en torno a un único entorno integrado. El equipo trasladó todo a Figma: utilizó FigJam para la fase de descubrimiento y la alineación, Figma Design para la creación de prototipos y la validación, Dev Tools para agilizar los traspasos y Figma Make para acelerar la entrega del front-end.

El resultado fue un proceso en el que las decisiones tomadas durante 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.

Cómo crear un proceso de exploración estructurado en FigJam

El equipo comenzó cada proyecto con talleres moderados en FigJam. Los diseñadores y las partes interesadas trabajaron juntos para trazar los recorridos de los minoristas, definir los disparadores que influyen en el rendimiento, modelar escenarios de intervención e identificar 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 al formato JPEG, importar todos esos archivos JPEG a otra herramienta, realizar la codificación rígida y crear los prototipos”, explicó Naseer Ahmed, director sénior de diseño de Lollypop.

Al integrar la creación de prototipos de forma nativa en Figma, el equipo eliminó por completo esa fase.

Las animaciones inteligentes también hicieron que los prototipos se acercaran más a la experiencia del producto final, lo que permitió obtener feedback más claro de las partes interesadas y redujo los malentendidos en la práctica.

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

Anteriormente, 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 las especificaciones, los recursos y las anotaciones.

Al consolidarse en Figma, el equipo sustituyó ese flujo de trabajo por un único entorno conectado, en el que los desarrolladores podían acceder a especificaciones precisas, detalles de 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—, lo que redujo la ambigüedad y mantuvo el diseño y el código sincronizados 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 última instancia, nos ha permitido ahorrar tiempo y mejorar la eficiencia en la entrega”, afirmó Sri Chandra Dronavalli, director de Servicios de Software de Lollypop.

El equipo también conectó el servidor MCP de Figma a sus entornos de desarrollo integrado (IDE), lo que permitió a los agentes de 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 realizar aproximaciones a partir de capturas de pantalla o especificaciones manuales. Al utilizar 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 de los componentes del 90 % en tan solo uno o dos intentos. El resultado fue menos trabajo de reelaboración, menos errores por discrepancias en los tokens y una iteración más rápida en respuesta al feedback de los usuarios.

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

En el caso de 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.

Mediante Figma Make, el equipo generó una estructura inicial de front-end a partir de los diseños aprobados. Los ingenieros utilizaron esta estructura como punto de partida para perfeccionarla e integrarla con los sistemas de backend, en lugar de crear la capa de interfaz desde cero.

Reducción de los ciclos de feedback con archivos compartidos

El feedback siempre había sido un obstáculo persistente, y el hecho de exportar las pantallas a PDF y esperar días para recibir respuestas hacía que el proceso de iteración siempre tuviera que ir a contrarreloj para cumplir con los plazos del cliente.

“Antes, solíamos enviar presentaciones, exportar todas las pantallas a formato JPEG y convertirlas a PDF, y esperar un par de días para recibir feedback y revisiones”, explicó 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. Los debates y las decisiones se registraron directamente en el archivo, lo que permitió crear un registro trazable sin la carga administrativa que supone la documentación adicional.

La mirada hacia el futuro: ampliar la colaboración y mejorar los flujos de trabajo

A medida que Lollypop asume proyectos de clientes más complejos y que abarcan varias regiones, Figma se está convirtiendo en la capa común que une la forma en que los equipos colaboran, presentan y entregan sus trabajos. La consolidación de su flujo de trabajo ha creado una base que ahora están ampliando a nuevas áreas del negocio.

“Cuando entregamos más rápido y mejor, eso influye en cómo nos posicionamos en el mercado. Los flujos de trabajo y los procesos que creamos en Figma nos han ayudado a desarrollar rápido, lanzar rápido y mostrar nuestro mejor trabajo en todo momento. Eso es lo que construye la marca”, dijo Charan Babu N., Gerente sénior de Marketing Global y Alianzas en Lollypop.

Con Figma Slides, el equipo también está acercando las presentaciones para las partes interesadas al proceso de diseño, lo que ayuda a los equipos a alinearse a través de las regiones sin cambiar de herramientas. Además, utilizan Figma Buzz para gestionar las plantillas y la distribución de contenidos, lo que garantiza que se mantenga el tono y la coherencia de la marca en todas las campañas, formatos y regiones sin tener que volver a crear los recursos desde cero.