Figma integra GitHub no canvas de design com Code Layers

O Code Layers, a nova funcionalidade da Figma, permite fazer algo que há dois anos teria parecido improvável: clonar um repositório GitHub directamente no canvas de design. Uma vez transferido, é possível extrair frames de design editáveis do código existente, modificá-los visualmente e sincronizar as alterações de volta ao repositório — tudo dentro de um único ficheiro Figma, com a colaboração em tempo real intacta. Design e desenvolvimento na mesma janela.

Para os designers que passaram anos a redigir notas de entrega, a copiar especificações para tickets Jira ou a enviar ligações Zeplin à equipa de desenvolvimento, o Code Layers muda o local onde acontece a conversa entre design e código. As alterações no Figma actualizam o código subjacente; as alterações no código actualizam a camada de design. A ponte entre as duas disciplinas sempre exigiu mudar de contexto — agora essa mudança torna-se menos custosa.

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

A Figma anunciou também o Motion, uma linha do tempo de animação baseada em keyframes integrada directamente no canvas. Os designers criam transições, estados de hover e animações de scroll 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 criada no Figma deixa de ser um documento de referência que um programador tem de interpretar — é a animação em si.

O terceiro grande anúncio 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 directamente às camadas Figma. O agente de IA da Figma gera esses preenchimentos personalizados a partir de uma descrição textual ou de uma imagem carregada. Ao escrever uma frase como ‘vidro fosco com padrões de interferência azul suave’, o canvas produz algo que é renderizado ao vivo e pode ser ajustado de forma interactiva.

O agente de IA ganha competências, ferramentas e ligações externas

O agente de IA em si tornou-se consideravelmente mais abrangente. Pode agora construir ‘competências’ reutilizáveis a partir de instruções em linguagem natural — ferramentas personalizadas que automatizam tarefas de design repetitivas sem exigir conhecimentos de API — e liga-se directamente a serviços externos como Notion, GitHub e Microsoft Excel. Uma actualização prevista para mais tarde em 2026 adicionará o Weavy, um construtor de workflows adquirido pela Figma no ano passado, para automação baseada em nós dentro dos ficheiros de design.

Nem tudo está disponível hoje. O Code Layers encontra-se em acesso antecipado, com candidaturas a abrir em Julho de 2026; requer um lugar Full num plano pago da Figma. O Shader Effects e o agente de IA melhorado já estão disponíveis nos planos pagos. O Figma Motion está disponível agora para titulares de lugar Full, com disponibilidade geral do Code Layers esperada para mais tarde em 2026.

A ambição da Figma de absorver partes do fluxo de trabalho do editor de código depara-se com uma questão concreta: escrever código e conceber interfaces são actividades cognitivas distintas, e o Cursor — o editor de código com IA que a SpaceX adquiriu por 60 mil milhões de dólares na semana passada — construiu a sua audiência entre engenheiros, não designers. Se essas duas comunidades convergirem em torno de um canvas partilhado é, por agora, uma questão em aberto.

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