Lollypop leva os clientes do briefing à construção no Figma

A Lollypop Design Studio é uma agência global de UI/UX design com uma equipe de mais de 180 designers e engenheiros distribuídos pela Índia, EUA, Emirados Árabes Unidos e Vietnã. Ao longo de uma década, o estúdio atendeu mais de 1.000 clientes, ganhou mais de 50 prêmios globais de design e afetou mais de dois bilhões de vidas, trabalhando com startups e empresas da Fortune 500 nos setores de saúde, fintech e e-commerce para traduzir requisitos de negócios complexos em produtos digitais escaláveis.

Com o crescimento da lista de clientes e da complexidade dos projetos da Lollypop, também aumentava o desafio de manter designers, desenvolvedores e clientes no mesmo rumo sem comprometer a fidelidade e o impulso.

Quando a agência começou a projetar uma plataforma de operações de varejo multirregional online para um cliente, precisou agilizar o processo do briefing até a construção sem perder esse alinhamento. Ao consolidar os fluxos de trabalho dentro do Figma, utilizando FigJam, Figma Design, Dev Tools e Figma Make, a Lollypop reduziu os esforços de prototipagem em três a quatro vezes, encurtou os ciclos de feedback de vários dias para um dia e encurtou os prazos de desenvolvimento de front-end de meses para semanas.

O desafio: gerenciar fluxos de trabalho complexos de produtos em equipes e clientes

Antes do Figma, designers, desenvolvedores e envolvidos dos clientes revisavam o trabalho em diferentes ferramentas e documentos, dificultando o sincronismo das decisões e atrasando o feedback em fases críticas.

Os desafios se multiplicaram quando a agência começou a projetar uma plataforma de operações de varejo online para um cliente que atuava em várias regiões. A plataforma precisava fornecer aos gerentes de negócios visibilidade sobre o desempenho do varejo em todos os pontos de venda, enquanto os dados de atividade de campo alimentavam continuamente a lógica e os fluxos de trabalho dos produtos.

Sem uma área de trabalho compartilhada, o progresso era geralmente acompanhado por meio de planilhas, apresentações e conversas de e-mail, o que criava lacunas entre o projeto, a construção e as necessidades de negócios.

A solução: projetar, validar e entregar em um fluxo de trabalho conectado

A Lollypop reestruturou todo o fluxo de trabalho de projeto em torno de um único ambiente conectado. A equipe transferiu tudo para o Figma: FigJam para descoberta e alinhamento, Figma Design para prototipagem e validação, Dev Tools para transferências mais eficientes e Figma Make para acelerar a entrega do front-end.

O resultado foi um processo em que as decisões tomadas na fase de descoberta eram incorporadas diretamente ao design, permitindo que designers e desenvolvedores prosseguissem para a implementação sem perda de recursos ou contextos ao longo do caminho.

Construção de um processo de descoberta estruturado no FigJam

A equipe começava cada engajamento com workshops facilitados no FigJam. Designers e envolvidos trabalhavam juntos para mapear as jornadas do varejista, definir gatilhos de desempenho, modelar cenários de intervenção e revelar casos extremos. Tudo isso, antes de projetar uma única tela.

Validação de fluxos de trabalho com protótipos nativos do Figma

“Antes, era preciso exportar todas as 100 telas em formato JPEG, inserir todos esses JPEGs em outra ferramenta e codificar manualmente para criar os protótipos”, lembrou Naseer Ahmed, gerente sênior de design da Lollypop.

Com a migração para a prototipagem nativa do Figma, a equipe eliminou completamente essa fase.

Além disso, as animações inteligentes aproximam os protótipos da sensação do produto final, possibilitando maior clareza no feedback dos envolvidos e redução de mal-entendidos no campo.

Design e código na mesma tela de trabalho com Dev Mode, Code Connect e servidor MCP do Figma

Anteriormente, a Lollypop trabalhava com várias ferramentas. Os designers precisavam manter arquivos separados e os desenvolvedores tinham que navegar em várias plataformas para acessar especificações, recursos e anotações.

Ao consolidar essas ferramentas no Figma, a equipe substituiu esse fluxo de trabalho por um único ambiente conectado, onde os desenvolvedores podem acessar especificações precisas, detalhes dos componentes e recursos diretamente do arquivo de design. As novas construções voltam ao Figma para revisão. Dessa forma, as ambiguidades são reduzidas e o design e o código ficam alinhados durante todo o projeto.

“O Figma mudou a forma como design e desenvolvimento permanecem em sintonia ao longo do projeto. O fluxo de design se integra diretamente ao fluxo de trabalho de desenvolvimento e o que é construído pode voltar para revisão no Figma. Esses recursos reduziram a ambiguidade, minimizaram interações para esclarecimentos e garantiram um alinhamento mais próximo entre design e implementação, economizando tempo e aumentando a eficiência da entrega”, disse Sri Chandra Dronavalli, diretor de serviços de software da Lollypop.

Além disso, a equipe também conectou o servidor MCP do Figma aos IDEs. Assim, os agentes de IA podiam consultar diretamente arquivos de design e gerar código com base no contexto real do design system, em vez de funcionalidades aproximadas usando capturas de tela ou especificações manuais. Ao usar o Code Connect para vincular componentes do Figma ao código de produção, as ferramentas de IA reutilizam elementos exatos da base de código em vez de criar aproximações, proporcionando uma precisão de 90% nos componentes em apenas uma ou duas tentativas. Como resultado, menos retrabalho, redução de bugs devido à incompatibilidade de tokens e mais agilidade de iteração com base no feedback dos usuários.

Redução do tempo de entrega de front-ends com Figma Make

Para módulos em que os sistemas de backend já estavam implementados, o Figma Make ajudou na próxima etapa, reduzindo a parte da camada de front-end que precisava ser reconstruída do zero.

Usando o Figma Make, a equipe gerou uma estrutura inicial de front-end com base nos designs aprovados. Os engenheiros usaram essa estrutura como ponto de partida para refinar e integrar sistemas de backend, em vez de reconstruir a camada de interface do zero.

Redução dos ciclos de feedback com arquivos compartilhados

O feedback sempre foi um gargalo persistente. Com a exportação de telas para PDFs e a espera de dias para receber as respostas, a iteração estava sempre correndo atrás do cronograma dos clientes.

“O processo anterior consistia em enviar apresentações, exportar todas as telas em JPEGs e converter tudo isso em PDFs. Depois, aguardar alguns dias para receber feedbacks e revisões”, comentou Naseer.

Ao compartilhar arquivos Figma em tempo real com os envolvidos, a equipe conseguiu transferir as revisões para a própria área de trabalho de design. As discussões e decisões são registradas diretamente no arquivo, criando um registro rastreável sem a necessidade de documentação adicional.

Olhando para o futuro: ampliar a colaboração e aprimorar os fluxos de trabalho

Com a crescente complexidade dos engajamentos assumidos em várias regiões pela Lollypop, o Figma está se tornando uma camada compartilhada usada pelas equipes para colaborar, apresentar e entregar. A consolidação dos fluxos de trabalho criou uma base que agora é levada para outros setores da agência.

“Quando aceleramos e aprimoramos as entregas, afetamos a forma como nos apresentamos ao mercado. Os fluxos de trabalho e processos que criamos no Figma ajudaram a construir com rapidez, lançar em menos tempo e apresentar sempre o nosso melhor trabalho. É assim que fortalecemos nossa marca”, afirmou Charan Babu N., gerente sênior de marketing global e parcerias da Lollypop.

Com o Figma Slides, a equipe também reduz a distância entre as apresentações para os envolvidos e o processo de design, ajudando as equipes a manter o alinhamento em diversas regiões sem alternar ferramentas. A equipe também usa o Figma Buzz para gerenciar modelos e entrega de conteúdo, garantindo a manutenção do tom e da consistência da marca em todas as campanhas, formatos e regiões, sem precisar recriar os recursos do zero.