Como a DUOTONE economiza mais de 80 horas por projeto executando todo o seu fluxo de trabalho no Figma

Fundada em Seul em 2018, a DUOTONE é uma agência de design digital com 60 colaboradores, especializada em UX/UI design e design system. O estúdio é parceiro de empresas de diversos setores, incluindo finanças, comércio, automotivo e conteúdo, para desenvolver projetos digitais.

Desde a implementação do Figma em toda a empresa, há cinco anos, ele se tornou parte do seu sistema operacional. Do planejamento e da documentação à arquitetura do design system e à produção visual, a equipe executa todo o seu fluxo de trabalho no ecossistema da Figma, o que resulta em:

• Redução de 90% no tempo de elaboração dos documentos de especificações no handoff do projeto, economizando mais de 80 horas em cada projeto
• Redução de 20% no tempo dedicado ao trabalho de produção visual
• Redução do tempo de QA de relatórios, de horas para 5 a 10 minutos

De arquivos dispersos a uma única tela de trabalho

No passado, a DUOTONE trabalhava com vários envolvidos em diversos documentos, o que resultava em conflitos de versões e handoffs problemáticos. Desde que consolidaram tudo no Figma, a comunicação com clientes mudou completamente. Decisões e discussões acontecem diretamente na tela de trabalho, resultando em comunicação e handoffs mais eficientes.

Os handoffs para desenvolvedores tornaram-se muito mais eficientes também. Antes, concluir um design significava elaborar um guia de especificações separado e repassá-lo aos engenheiros. O Dev Mode eliminou essa etapa: os engenheiros podiam clicar em qualquer elemento e ver sua estrutura de componentes, valores de tokens, especificações de fontes e trechos de código prontos para uso na Web, no iOS e no Android, tudo diretamente no arquivo de design.

Como resultado, o tempo gasto na elaboração de documentos de especificações independentes durante a etapa de handoff do projeto foi reduzido em 90%, economizando mais de 80 horas em cada projeto. Quando há uma diferença entre o que a UI mostra e como ela é realmente construída, os designers também podem adicionar anotações ao lado da tela relevante para capturar a intenção ou sinalizar casos extremos. Com ferramentas como Jira, Linear e Storybook conectadas, uma alteração feita na etapa de design é encaminhada diretamente para o trabalho da equipe de desenvolvimento.

Criação de design systems que garantem a consistência dos produtos em escala

Uma solicitação comum dos clientes é que a DUOTONE construa um design system para gerenciar seus produtos. A exigência é alta, pois um sistema precisa se sustentar à medida que um produto escala entre equipes, plataformas e ao longo do tempo. A DUOTONE criou e manteve sistemas em setores como finanças, comércio, automotivo e conteúdo, com variáveis e arquitetura de componentes no centro de cada um deles.

Essa abordagem se mostrou valiosa em um projeto de sistema de infoentretenimento automotivo. Cada modelo de veículo tinha uma resolução de tela diferente, e os temas claro e escuro precisavam se adaptar perfeitamente ao ambiente de condução, por exemplo, dirigir durante o dia versus à noite, ou ao entrar em um túnel. Os requisitos eram complexos.

Ao definir tudo como variáveis — a resolução do veículo (largura e altura), as alturas dos botões e até os raios dos cantos — e dividir os componentes por tamanho (pequeno, médio e grande), ajustar alguns valores de tokens na biblioteca principal atualizaria todas as telas instantaneamente, em vez de redesenhar cada tela do zero ao longo de várias semanas.

Além da UI: extensão do Figma para a produção visual

Com o conjunto cada vez maior de ferramentas de edição de imagens com IA do Figma, a DUOTONE incorporou uma grande parte do trabalho visual, como ilustrações e gráficos promocionais, ao Figma.

Recursos como Vetorização, que converte automaticamente uma imagem bitmap em vetores, e Remover plano de fundo, que isola um objeto do seu plano de fundo, eliminaram etapas que antes faziam a equipe alternar entre ferramentas especializadas. O tom e a atmosfera finais de um recurso — exposição, temperatura de cor, sombras, clima geral — agora são ajustados dentro do mesmo arquivo do Figma em que o restante da campanha está hospedado.

O resultado: um visual de campanha pode ser levado do conceito à finalização em uma única tela de trabalho, com 20% menos tempo perdido em exportações de arquivos e troca de ferramentas.

Com o trabalho visual e da UI reunidos na mesma tela de trabalho, a equipe colabora com mais rapidez. Cada designer trabalha a partir de uma única fonte de verdade, compartilha feedback em tempo real e pode revisar várias explorações lado a lado. O mesmo se aplica à revisão do cliente: a equipe compartilha o trabalho em andamento exatamente como está, recebe feedback imediato e faz revisões na hora antes de apresentá-lo novamente.

Escalar a produtividade com plugins personalizados

A DUOTONE ampliou continuamente o que consegue fazer dentro do Figma ao incorporar plugins, desde pesquisa de recursos até manutenção de design systems. Quando um plugin da comunidade não atende exatamente às necessidades, a equipe cria o que precisa usando a API de Plugins do Figma, transformando soluções pontuais em recursos compartilhados que ampliam a produtividade em todo o estúdio.

Um exemplo recente é um corretor ortográfico alimentado por IA para entregas aos clientes. Revisar um relatório costumava ocupar o tempo de vários designers. Agora, o plugin verifica cada camada de texto na tela de trabalho de uma só vez e propõe correções, substituindo uma revisão manual trabalhosa por um único clique. Como resultado, o tempo médio de QA por relatório foi reduzido de 3 horas para 5 minutos, e as correções de última hora antes da entrega também diminuíram.

Qualquer pessoa da equipe é incentivada a criar um plugin quando encontram uma tarefa tediosa e repetitiva. E muitas vezes fazem isso, lançando a solução em questão de dias. Um exemplo recente: um designer júnior desenvolveu um plugin que compila registros de atualizações automaticamente, eliminando horas de trabalho manual de copiar e colar e os pequenos erros que isso acarretava.

O resultado é uma biblioteca personalizada e cada vez maior de plugins — corretores ortográficos, numeração automática de páginas, geradores de gráficos, compiladores de registros de atualizações e muito mais — criada, mantida e ampliada por designers de todo o estúdio. Essa cultura de desenvolver soluções com base no Figma transformou a forma como o estúdio opera. O Figma deixou de ser apenas o lugar onde o design acontece; tornou-se a plataforma que escala a forma como a DUOTONE trabalha.

De manutenção convencional à manutenção impulsionada por IA

Um design system exige mais esforço para ser mantido do que para ser criado. À medida que uma biblioteca evolui, também aumenta a sobrecarga operacional de organizar tokens, alinhar convenções de nomenclatura e verificar a consistência entre os arquivos.

A DUOTONE resolveu isso transformando o Figma na fonte de verdade que alimenta seus agentes de IA. Por meio do servidor MCP e da API de Plugins do Figma, agentes como Claude e Cursor leem a biblioteca da DUOTONE com todo o contexto do design system — seus componentes, variáveis, tokens e convenções de nomenclatura — e, em seguida, identificam inconsistências, sinalizam valores que deveriam ser transformados em tokens e propõem correções em conformidade com os padrões adotados pela equipe. Depois que a equipe revisa e aprova as propostas, as atualizações retornam ao Figma como variáveis, transformando o que antes levava dias de trabalho repetitivo no sistema em uma fração desse tempo.

A equipe está ampliando essa abordagem e testando um fluxo de trabalho no qual a IA elabora documentos de requisitos funcionais (FRDs) diretamente a partir das especificações e dos dados dos componentes presentes em um arquivo do Figma. Decisões visuais na tela de trabalho se tornam informações estruturadas automaticamente, reduzindo o atrito entre design, produto e handoff de engenharia. O mesmo fluxo contextual também permite que a IA gere novos trabalhos de design que permanecem consistentes com o sistema desde o início. O resultado: manutenção e documentação passam para a IA, e os designers permanecem focados no trabalho que só eles podem fazer.

OPENPATH: onde a expertise da DUOTONE se torna o manual da comunidade

A DUOTONE compartilha sua expertise com a comunidade de design através da OPENPATH, uma plataforma educacional interna desenvolvida a partir de projetos reais de clientes. O que começou como uma iniciativa interna de Pesquisa e Desenvolvimento agora se tornou um recurso público, moldado por anos de aprendizados adquiridos em projetos.

O currículo vai além do treinamento no uso de ferramentas. Ele aborda metodologias testadas e validadas em projetos reais de clientes, como a criação de design system avançados baseados em variáveis, a otimização de processos com plugins e a integração de agentes de IA aos fluxos de trabalho de design. Quem participa da OPENPATH não adquire apenas habilidades de design; aprende como uma agência realmente trabalha quando chega a hora de entregar o projeto. Designers iniciantes saem com uma base sólida que lhes permite contribuir desde o primeiro dia, cometendo menos dos erros típicos do início da carreira. Designers seniores descobrem novas formas de trabalhar alinhadas à evolução da disciplina — e do próprio papel do design.

Para a DUOTONE, o objetivo não é apenas ser um estúdio de destaque. É elevar o padrão do design em todo o setor. Ao lado do ecossistema da Figma, que está em constante expansão, a DUOTONE continuará abrindo novas possibilidades para que designers trabalhem em conjunto com a IA, dediquem mais tempo ao que realmente fazem de melhor e se concentrem no que de fato importa.