01 _ contexto
Uma semana sempre perdida em um problema que acontecia toda sprint.
O processo de redesign de um sistema de POS exigia documentar o comportamento responsivo e os requisitos de acessibilidade de cada componente antes do handoff com desenvolvimento.
Calcular manualmente unidades de viewport, verificar contraste de cores e formatar as specs para os devs era uma tarefa recorrente que aparecia toda sprint, para cada componente novo ou atualizado.
Em projetos grandes, essa etapa sozinha consumia quase uma semana de trabalho da equipe de design. Uma semana parada em documentação, enquanto a sprint esperava.
~1 semana
Tempo de documentação por entrega grande (antes da ferramenta)
Toda sprint
Frequência com que o problema reaparecia
Ferramenta criada para a própria equipe, por quem sofria o problema
02 _ o problema
Manual, repetitivo e com margem de erro humano.
O fluxo de documentação envolvia:
Abrir o frame no Figma manualmente
Anotar cada valor de largura, altura, padding, espaçamento e tamanho de ícone
Calcular as conversões para unidades de viewport (vw/vh) e REM à mão
Verificar o contraste de cada par de cor (fundo/superfície) consultando ferramentas externas
Formatar tudo isso em documentação legível para o dev
Até mesmo, plugins nativos do Figma foram testados, mas nenhum resolvia o problema completamente. E quando um dev precisava confirmar um valor específico de um componente, levava cerca de 1 hora para atualizar, verificar e confirmar a informação.
O processo era repetitivo, e isso torna o processo suscetível ao erro. Um valor calculado errado no início de uma sprint se transforma em retrabalho no final.
Como eliminar o tempo de documentação manual sem abrir mão da precisão e fazer isso diretamente de dentro do Figma, sem mudar o fluxo de trabalho da equipe?
03 _ processo
A solução estava na API.
O desafio estava no prompt.
A ideia surgiu quando foi percebido que todas as informações necessárias já existiam no Figma. O problema era de extração, cálculo e formatação.
A abordagem foi construir com o Figma Make uma camada de automação que conectasse diretamente com a Figma API extraindo os dados de layout de um frame selecionado e aplicando a lógica de cálculo de viewport e validação de contraste de forma automática.
Lembrando que esse projeto foi iniciado muito antes de MCPs serem amplamente adicionadas nos maiores agentes existentes. Uma solução rápida era necessária e o Figma tinha os conectivos necessários para a criação.
O maior desafio mesmo foi escrever os prompts orientados por design que guiassem a ferramenta a entender os valores e a lógica por trás deles, era fazer a ferramenta documentar e trabalhar como um designer.
01
Diagnóstico
Mapeamento do fluxo manual era onde estava o tempo perdido e onde ocorriam os erros mais frequentes
02
Exploração
Teste de plugins nativos do Figma foram descartados por não cobrirem o escopo completo do problema
03
Prototipação
Construção da primeira versão com Figma Make + Figma API com extração de dados de layout e cálculo de viewport
04
Refinamento
Iteração nos prompts orientados por design, criando o output necessário para ser legível para devs
05
Adoção
Ferramenta integrada ao fluxo recorrente da equipe e usada ativamente em cada entrega de sprint
04 _ solução
Selecionar o frame. Rodar a ferramenta. Documentação pronta.
O Gerador funciona como uma camada de tradução entre design e desenvolvimento, automatizando o que era repetitivo para liberar tempo para o que é criativo!
Ferramenta em uso: extração, cálculo e output em menos de 5 minutos
05 _ resultado
De uma semana para dois dias. De uma hora para cinco minutos.
A ferramenta foi integrada ao fluxo recorrente da equipe e usada ativamente em cada sprint desde então.
O impacto foi na velocidade de entrega, na capacidade porque agora a equipe de design parou de ficar travada em documentação e voltou a conseguir entregar projetos e documentação dentro do mesmo ciclo.
ANTES
Documentação completa por entrega: ~1 semana
Verificação pontual por componente: ~1 hora
Processo: manual, linear, dependente de atenção contínua
Risco: erro humano em cálculos repetitivos
Impacto na sprint: delay recorrente
DEPOIS
5× mais rápido
Na documentação completa por entrega (1 semana → 2 dias)
12× mais rápido
Em verificações pontuais por componente (1 hora → 5 minutos)
Tudo dentro do ecossistema Figma