Figma lança extensão para Chrome que transforma páginas web em camadas editáveis

A extensão do Figma para Chrome não é só um 'copiar e colar inteligente'. Ela extrai a estrutura real da página, Auto Layout, espaçamentos, hierarquia de camadas, tipografia com família e peso preservados, cores em múltiplos formatos (HEX, OKLCH, Tailwind) e até contraste acessível em tempo real. Isso muda o jogo para auditorias de UX: designers agora podem comparar layouts concorrentes lado a lado no mesmo canvas, ajustar componentes diretamente com base no sistema de design, e testar variações sem depender de dev ou de ferramentas externas como o Web Inspector.

O modo de inspeção integrado mostra sobreposições de padding/margin em tempo real e ativa o scanner de tipografia ao clicar em qualquer texto, algo que antes exigia extensões separadas ou análise manual. E, diferentemente de capturas de tela ou PDFs, essas camadas são vetoriais e respondem a alterações de escala, redimensionamento e reutilização em componentes. É menos uma cópia e mais uma importação estruturada, como se o navegador fosse um novo 'fonte' para o Figma Design.

Em maio, o Figma Design Agent já permitia gerar telas com base no sistema de design interno. Agora, com a extensão do Chrome, o fluxo se inverte: você parte da web real, não de um prompt, e traz para dentro do Figma um modelo fiel, editável e alinhado ao seu sistema. Antes era 'gerar a partir do zero'; agora é 'reimaginar a partir do existente'. Também é a primeira vez que o Figma oferece extração de tokens (cores, tipografia, espaçamento) diretamente de páginas externas, algo que antes só funcionava dentro de arquivos Figma ou com plugins de terceiros.

Isso reduz drasticamente o atrito entre pesquisa, benchmark e entrega. Um designer pode analisar três landing pages concorrentes numa manhã, extrair os padrões de botões e cards, aplicar variáveis do próprio sistema de design e entregar um protótipo funcional em horas, sem precisar pedir um HTML ou esperar por um dev. Para equipes de produto, significa validar hipóteses de UI com dados reais de mercado, não com suposições. E para quem trabalha com acessibilidade, o verificador WCAG embutido na extensão permite auditar contraste *enquanto navega*, não depois de exportar.