visão geral_
Esta é uma ferramenta criada para automatizar uma das partes mais suscetíveis a erros do processo de handoff de design: cálculos de viewport e validação de acessibilidade.
Ao se conectar à API do Figma, o gerador extrai dados de layout de um frame selecionado e calcula automaticamente valores baseados no viewport para largura, altura, espaçamento, padding e tamanhos de ícones. Ele também coleta tokens de tipografia e cor, e verifica a acessibilidade de contraste entre fundos e elementos de superfície.
Ele foi construído com o Figma Make, combinando prompts orientados ao design com uma lógica estruturada focada na comunicação com desenvolvedores. O objetivo era simples: reduzir cálculos manuais, agilizar a documentação e eliminar erros humanos.
o problema_
Durante uma reformulação do sistema de design, precisei documentar o comportamento responsivo detalhado e os requisitos de acessibilidade para vários componentes.
Calculando manualmente unidades de viewport e verificando contraste de cores:
Em larga escala, isso se tornou insustentável.


a solução_
O Geredor de Viewport foi projetado para atuar como uma camada de tradução entre design e desenvolvimento. Ao inserir um token da API do Figma e o link do frame, a ferramenta recupera programaticamente propriedades de layout, valores de espaçamento, dimensões de ícones, tokens de tipografia e variáveis de cor aplicadas. Em seguida, calcula dimensões proporcionais com base no viewport e avalia as relações de contraste entre elementos de plano de fundo e superfície para validar a conformidade com acessibilidade.
O resultado é estruturado para reutilização imediata, seja colado diretamente na documentação, compartilhado com engenheiros ou transformado em especificações estruturadas usando fluxos de trabalho de IA no FigJam. Em vez de derivar e formatar especificações manualmente, trata-se de um sistema repetível que garante que a lógica responsiva e os padrões de acessibilidade estejam incorporados em cada entrega.
Responsividade
Garante que os layouts dimensionem corretamente em diferentes níveis de zoom e tamanhos de tela
Acessibilidade
Valida automaticamente a conformidade com o contraste de cores
Precisão
Elimina erros de cálculo manual
Clareza para desenvolvedores
Fornece especificações estruturadas e prontas para implementação
Velocidade
Reduz significativamente o tempo de documentaçã
