Figma lança Code Layers na Config 2026, permitindo que designers escrevam e executem código diretamente no canvas

A Figma passou a última década convencendo designers e engenheiros a trabalharem no mesmo arquivo. Na Config 2026, realizada em 24 de junho, a empresa deu seu passo mais agressivo para eliminar completamente a linha entre eles.

O anúncio central é o Code Layers: um sistema que traz código executável diretamente para o canvas colaborativo do Figma. Os usuários podem converter qualquer camada de design em uma camada de código interativa com um clique, clonar repositórios para extrair fluxos de produção e executar pacotes npm sem sair do Figma. O chat de IA pode construir e modificar camadas de código sob demanda. O resultado é entregue dentro do Figma Sites, apoiado por código React personalizado.

“O código deve ser tratado como qualquer outro material de design”, disse Dylan Field, CEO da Figma. “O Code Layers trata designers e engenheiros como colaboradores em uma superfície compartilhada onde a lógica de design e produção coexistem.”

A implicação prática é que a etapa tradicional de entrega (handoff) se torna opcional. As equipes podem duplicar camadas de código para explorar múltiplas direções simultaneamente, extrair frames de design de volta para camadas editáveis e manter elementos interativos dentro do mesmo arquivo onde as decisões de design foram tomadas.

Junto com o Code Layers, a Figma lançou um construtor de plugins de IA em linguagem natural que permite aos usuários descrever a funcionalidade desejada e receber um plugin funcional sem escrever JavaScript. O sistema suporta Skills reutilizáveis — fluxos de trabalho empacotados que o assistente de IA pode executar sob demanda. O assistente se conecta a Notion, Slack, GitHub, Atlassian, Granola e Excel para contexto mais rico. O agente está disponível hoje para todos os usuários; o acesso ao FigJam e Slides está em lista de espera.

O terceiro grande lançamento é o Figma Motion, um sistema de animação nativo baseado em linha do tempo e keyframes disponível imediatamente. O Modo Dev suporta exportações em CSS, JSON, React, MP4, WebM, SVG animado e GIF, além de compatibilidade com MCP. Preenchimentos de shader gerados por IA e transformações 3D estão incluídos. Anteriormente, o trabalho de animação exigia ferramentas externas como After Effects ou Rive.

A resposta da Figma às ferramentas de design nativas de IA na Config 2026 é tornar o canvas o local onde o código de produção chega. O Code Layers já está em lista de espera com implantação começando em julho de 2026. O Figma Motion está disponível hoje. Nenhuma alteração de preço foi anunciada.