Figma une design e código num só canvas. Cursor apostou diferente

O Code Layers, novo recurso do Figma, faz algo que há dois anos teria parecido impossível: permite clonar um repositório do GitHub diretamente no canvas de design. Com o repositório no canvas, é possível extrair frames de design editáveis do código existente, fazer alterações visualmente e sincronizá-las de volta ao repositório — tudo dentro de um único arquivo Figma, com a colaboração em tempo real intacta. Design e desenvolvimento na mesma janela.

Para designers que passaram anos escrevendo notas de entrega, copiando especificações em tickets do Jira ou enviando links do Zeplin para a equipe de engenharia, o Code Layers muda onde acontece a conversa entre design e código. Alterações no Figma atualizam o código subjacente; alterações no código atualizam a camada de design. A ponte entre as duas disciplinas sempre exigiu troca de contexto — agora essa troca ficou menor.

Figma Motion transforma animações em código pronto para produção

O Figma também anunciou o Motion, uma linha do tempo de animação baseada em keyframes integrada diretamente ao canvas. Os designers criam transições, estados de hover e animações de rolagem com uma linha do tempo e uma biblioteca de predefinições, depois exportam em sete formatos: CSS, JSON, React, MP4, WebM, SVG animado e GIF. Uma animação de carregamento feita no Figma não é mais um documento de referência para um desenvolvedor interpretar — ela é a própria animação.

O terceiro anúncio importante foi o Shader Effects, preenchimentos acelerados por GPU alimentados pelo WebGPU — o padrão gráfico mais recente do navegador — que permitem aplicar texturas visuais complexas e matematicamente geradas diretamente às camadas do Figma. O agente de IA do Figma consegue gerar esses preenchimentos personalizados a partir de uma descrição em texto ou de uma imagem enviada. Ao digitar uma frase como ‘vidro fosco com padrões de interferência azul suave’, o canvas produz algo que renderiza ao vivo e pode ser ajustado de forma interativa.

O agente de IA ganha habilidades, ferramentas e conexões externas

O agente de IA em si ficou consideravelmente mais abrangente. Agora ele constrói ‘habilidades’ reutilizáveis a partir de instruções em linguagem natural — ferramentas personalizadas que automatizam tarefas de design repetitivas sem precisar de conhecimentos de API — e se conecta diretamente a serviços externos como Notion, GitHub e Microsoft Excel. Uma atualização prevista para o final de 2026 vai adicionar o Weavy, um criador de workflows que o Figma adquiriu no ano passado, para automação baseada em nós dentro dos arquivos de design.

Nem tudo está disponível hoje. O Code Layers está em acesso antecipado, com inscrições abertas em julho de 2026; ele exige um assento Full num plano pago do Figma. O Shader Effects e o agente de IA aprimorado já estão disponíveis nos planos pagos. O Figma Motion está disponível agora para quem tem assento Full, com disponibilidade geral do Code Layers prevista para mais tarde em 2026.

A ambição do Figma de absorver partes do fluxo de trabalho do editor de código esbarra numa questão concreta: escrever código e projetar interfaces são atividades cognitivas diferentes, e o Cursor — o editor de código com IA que a SpaceX adquiriu por US$ 60 bilhões na semana passada — construiu sua audiência entre engenheiros, não designers. Se essas duas comunidades vão convergir num canvas compartilhado ainda é uma pergunta em aberto.

Tags: GitHub, Code Layers, Config 2026, Cursor, ferramentas de design, Figma