Automação para especificações responsivas e verificações de acessibilidade

PRODUTO DE AI

DOCUMENTAÇÃO

DESIGN SYSTEMS

sobre_

MEU PAPEL

LÍDER DE DESIGN

CRONOGRAMA

2 MESES

HABILIDADES/FERRAMENTAS

FIGMA MAKE, PROMPT ORIENTADO POR DESIGN, PROTÓTIPO, DESIGN SYSTEMS, DOCUMENTAÇÃO

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:

Levou tempo

Foi repetitivo

Aumentou o risco de erros (especialmente quando cansado)

Desacelerou a entrega para engenharia

Levou tempo

Foi repetitivo

Aumentou o risco de erros (especialmente quando cansado)

Desacelerou a entrega para engenharia

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çã