Ferramenta interna · Handoff
Gerador de Specs Responsivas & Acessibilidade
Uma ferramenta no Figma Make que transformou uma semana de documentação de handoff em dois dias, gerando specs responsivas e notas de acessibilidade a cada sprint.
- Papel
- Líder de design
- Duração
- 2 meses
- 2025
- Foco
- IA
- Documentação
- Design systems
- Habilidades e ferramentas
- Figma Make
- Prompt orientado por design
- Protótipo
- Design systems
- Documentação
01contexto
Uma semana sempre perdida em um problema que acontecia toda sprint
O redesign de um sistema de PDV 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 semanaTempo de documentação por entrega grande (antes da ferramenta)
- Toda sprintFrequência com que o problema reaparecia
- Uso internoFerramenta criada pela própria equipe, por quem sofria o problema
02o 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 à mão as conversões para unidades de viewport (vw/vh) e rem
- Verificar o contraste de cada par de cores (fundo/superfície) em ferramentas externas
- Formatar tudo isso em documentação legível para o dev
Até plugins nativos do Figma foram testados, mas nenhum resolvia o problema por completo. 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 o tornava suscetível a erros. Um valor calculado errado no início de uma sprint se transformava em retrabalho no final.
como poderíamos
Como eliminar o tempo de documentação manual sem abrir mão da precisão, e fazer isso de dentro do Figma, sem mudar o fluxo de trabalho da equipe?
03processo
A solução estava na API. O desafio estava no prompt.
A ideia surgiu quando percebemos 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 conectada diretamente à Figma API, extraindo os dados de layout de um frame selecionado e aplicando o cálculo de viewport e a validação de contraste de forma automática.
Vale lembrar que esse projeto começou muito antes de os MCPs estarem amplamente disponíveis nos principais agentes de IA. Uma solução rápida era necessária, e o Figma já tinha os conectores para construí-la.
O maior desafio foi escrever prompts orientados por design que guiassem a ferramenta a entender os valores e a lógica por trás deles. O objetivo não era só gerar documentação: era fazer a ferramenta documentar e raciocinar como um designer.
01. Diagnóstico
Mapeamento do fluxo manual para entender onde o tempo era perdido e onde os erros aconteciam com mais frequência.
02. Exploração
Teste de plugins nativos do Figma, descartados por não cobrirem o escopo completo do problema.
03. Prototipação
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 até o output ficar preciso, estruturado e legível para os devs.
05. Adoção
Ferramenta integrada ao fluxo recorrente da equipe e usada ativamente em cada entrega de sprint.
04soluçã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.
Lê diretamente do Figma
Conectada à Figma API, a ferramenta extrai largura, altura, padding, espaçamento e tamanhos de ícones do frame selecionado, sem ninguém copiar valores à mão.
Verifica contraste automaticamente
Coleta os tokens de cor aplicados e avalia o contraste entre fundo e superfície, sinalizando conformidade ou falha com os padrões de acessibilidade.
Calcula vw, vh e rem
Converte as dimensões absolutas para unidades de viewport e rem, garantindo que os layouts escalem corretamente em diferentes telas e níveis de zoom.
Documentação pronta para dev
O resultado sai como texto, prompt ou frame no Figma, pronto para colar na documentação, compartilhar com engenheiros ou usar em fluxos de IA no FigJam.
05resultado
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 apareceu na velocidade de entrega e na capacidade da equipe: em vez de ficar travada em documentação, a equipe de design voltou a 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
- Atraso recorrente
depois
- Documentação completa por entrega
- 2 dias
- Verificação pontual por componente
- Menos de 5 minutos
- Processo
- Automatizado, repetível, auditável
- Risco
- Eliminado nos cálculos de viewport e de contraste
- Impacto na sprint
- Entrega dentro do ciclo
- 5× mais rápidoNa documentação completa por entrega (1 semana → 2 dias)
- 12× mais rápidoEm verificações pontuais por componente (1 hora → 5 minutos)
- 0 pluginsPlugins externos: tudo dentro do ecossistema Figma