FigmaTrace: Capturing Creative Nuances in Human Figma Design Workflows

Resumo Técnico: FIGMATRACE

Declaração do Problema

Os Modelos de Linguagem e Visão (VLMs) demonstraram proficiência significativa em domínios objetivos e verificáveis, como detecção de objetos e compreensão de documentos. No entanto, eles continuam a ter um desempenho inferior em tarefas de design subjetivas e criativas. Os autores identificam um gargalo primário: a falta de dados de fluxo de trabalho humano de alta qualidade que capturem as diversas preferências, decisões e o "gosto" que distinguem os especialistas humanos. Embora trabalhos anteriores tenham tentado gerar dados de design por meio da anotação automatizada de arquivos Figma existentes ou pela conversão de HTML para JSON, essas abordagens sofrem de validação ambígua, falta de diretrizes de qualidade exaustivas e incapacidade de capturar os processos de tomada de decisão matizados dos designers humanos. Além disso, os conjuntos de dados existentes frequentemente focam no artefato final, em vez da trajetória de decisões necessária para criá-lo.

Metodologia

1. Taxonomia de Habilidades e Curadoria de Tarefas

Para abordar a lacuna de dados, os autores primeiro definiram uma taxonomia única e curada por especialistas de 10 habilidades de design de alto nível (ex: Percepção Visual, Ofício Estrutural de Figma, Especialidade em Acessibilidade, Ofício de Vetor e Ativos). Com base nessa taxonomia, eles construíram 126 tarefas de longo horizonte, abertas e subjetivas. Essas tarefas foram categorizadas em:

• Tarefas Verificáveis: Replicação pixel-perfeita, reparo de falhas e remediação de acessibilidade.
• Tarefas Não-Verificáveis: Adaptação de plataforma, tematização, conversão de esboço para Figma e fiação de protótipo, que dependem de julgamento e viés de especialistas.

2. Coleta e Processamento de Dados (FIGMATRACE)

O conjunto de dados, FIGMATRACE, foi construído capturando mais de 200 horas de gravações de tela e ações de especialistas em nível de SO enquanto os designers completavam essas tarefas. Os dados brutos passaram por um rigoroso pipeline de processamento de múltiplos estágios:

• Filtragem de Ações: Movimentos aleatórios de mouse e passagens de mouse (hovers) foram filtrados, retendo apenas interações significativas (cliques, digitação, rolagem) mapeadas para o conjunto de ferramentas Playwright MCP.
• Extração de Quadros: Um método de extração de duas passagens foi empregado para identificar estados "estabilizados" após as ações, garantindo que os quadros fossem capturados apenas quando a UI estivesse estável, em vez de em intervalos de tempo arbitrários.
• Filtragem de Efeito: Mudanças nos valores de pixels foram analisadas para distinguir entre ações que alteraram o artefato e aquelas que não o fizeram.
• Segmentação Baseada em Fases: Uma contribuição inovadora deste trabalho é a conversão de dados de vídeo em trajetórias baseadas em fases de design (ex: "Componentização", "Polimento de Refinamento", "Coleta de Referência") em vez de simples fragmentação por comprimento máximo de contexto. Os autores utilizaram o Gemini-3.6-Flash para categorizar intervalos de vídeo em 11 fases distintas. Essa abordagem foi escolhida para ensinar habilidades e limites de intenção específicos aos VLMs, evitando o ruído introduzido por pausas aleatórias no vídeo.

3. Treinamento e Avaliação

Os autores treinaram quatro VLMs (QWEN3.6-35BA3B, QWEN3.8-27B, GEMMA-4-31B e MUSE-GLIMMER-30B) usando o framework ms-swift em 92.472 ações amostradas de 35 sessões. Os modelos foram avaliados em quatro ambientes de GUI agênticos fora de distribuição (OOD):

• GUI-Odyssey: Navegação multi-aplicativo, multi-viewport.
• AndroidControl: Granularidade de instrução e navegação móvel.
• Mind2Web: Ancoragem de instrução em dados abertos da web.
• VideoGUI: Planejamento e narração de ação.

Principais Resultados

Melhorias de Desempenho

O treinamento no FIGMATRACE rendeu ganhos de desempenho significativos em todos os benchmarks avaliados:

• Dominância em Benchmarks: O modelo treinado QWEN3.8-27B superou modelos fechados de fronteira como CLAUDE-OPUS-5 e GPT-5.6-SOL em tarefas específicas. Notavelmente, ele alcançou um aumento absoluto de 6,4% no GUI-Odyssey e um aumento absoluto de 11,8% no AndroidControl em comparação com as linhas de base fechadas.
• Ganhos In-Domain: No split criativo ScreenSpot-Pro, o QWEN3.8-27B treinado mostrou um aumento absoluto de 7,4% sobre seu modelo base (36,7% vs. 29,3%).
• Generalização: As melhorias se generalizaram através de diferentes arquiteturas de modelos, com todos os quatro modelos testados mostrando ganhos positivos.

Estudo de Ablação: Baseado em Fase vs. Baseado em Comprimento

Os autores conduziram um estudo de ablação crítico comparando sua curadoria de trajetória baseada em fase contra a fragmentação padrão por comprimento máximo de contexto.

• Resultado: A abordagem baseada em fase superou a abordagem baseada em comprimento por 7,3 pontos absolutos em média.
• Análise: A análise qualitativa revelou que a fragmentação baseada em comprimento frequentemente corta tarefas no meio de uma ação, obscurecendo a intenção da tarefa. Em contraste, a segmentação baseada em fase preservou a ancoragem baseada em habilidades, permitindo que os modelos entendessem melhor instruções como "Continue o trabalho" e referências não direcionadas.

Análise Qualitativa

A avaliação humana do melhor modelo (QWEN3.8-27B) identificou três padrões principais que impulsionaram o sucesso:

1. Precisão de Seleção de Elementos: O modelo base frequentemente selecionava elementos de UI incorretos (erro mediano de ~457 px), enquanto o modelo treinado atingia dentro de ~15 px do alvo.
2. Compreensão de Coordenadas: O modelo base frequentemente emitia coordenadas de pixels brutos que excediam os limites da grade normalizada (ex: $y > 1000$), enquanto o modelo treinado aderiu ao sistema de coordenadas norm-1000.
3. Decisividade: O modelo treinado consistentemente fornecia coordenadas mesmo em cenários ambíguos onde o modelo base falhou em agir.

No entanto, os autores também notaram modos de falha introduzidos pelo conjunto de dados, incluindo repetição (prevendo o mesmo pixel duas vezes) e um viés de foco no centro da tela, provavelmente artefatos de ruído no processamento do vídeo bruto.

Significância e Alegações

O artigo afirma que o FIGMATRACE é o primeiro conjunto de dados a fornecer pares de sequências de ações de ouro e gravações segmentadas por intenção de fluxos de trabalho de especialistas em Figma. Sua principal significância reside em demonstrar que:

1. Qualidade de Dados sobre Quantidade: Capturar fluxos de trabalho humanos de alta qualidade e curados por especialistas, com foco em fases de design, é mais eficaz para treinar agentes criativos do que simplesmente escalar dados brutos ou usar anotação automatizada.
2. Curadoria Baseada em Fase: Estruturar dados de treinamento em torno de fases de design (habilidades), em vez de janelas de tempo arbitrárias, melhora significativamente a capacidade de um modelo de entender intenções de tarefas de longo horizonte.
3. Generalização: O treinamento em fluxos de trabalho de design específicos (Figma) transfere-se efetivamente para tarefas de navegação agêntica mais amplas (Android, Web), sugerindo que as habilidades subjacentes de análise visual e raciocínio estrutural são transferíveis.

Os autores disponibilizaram o conjunto de dados e o melhor modelo (QWEN3.8-27B) para facilitar novas pesquisas em agentes de IA criativa.