Ir para o conteúdo principal

Config 2026: novos materiais, novas ferramentas e uma tela de trabalho mais expressiva

Dylan FieldCo-founder & Chief Executive Officer, Figma
Gráfico de produto estilo colagem mostrando fluxos de trabalho de design e desenvolvimento assistidos por IA, com prompts de criação de plugins, controles de efeitos visuais, ferramentas de geração de código e componentes de UI interativos dispostos em uma área de trabalho criativa.Gráfico de produto estilo colagem mostrando fluxos de trabalho de design e desenvolvimento assistidos por IA, com prompts de criação de plugins, controles de efeitos visuais, ferramentas de geração de código e componentes de UI interativos dispostos em uma área de trabalho criativa.

Vá além do que você pensava ser possível com camadas de código, Figma Motion, sombreadores, plugins generativos e ferramentas do Weave em uma tela de trabalho.

Compartilhar Config 2026: novos materiais, novas ferramentas e uma tela de trabalho mais expressiva

Design é saber fazer as perguntas difíceis. No momento, essas perguntas parecem maiores do que nunca. O que está mudando? O que é possível? Afinal, o que significa criar? Aqui na Figma, sempre voltamos a um princípio simples: nenhuma ferramenta deve limitar o alcance de uma ideia.

O foco dos anúncios do Config deste ano é a expressão ilimitada na tela de trabalho. Estamos oferecendo novos materiais para expressar qualquer coisa que você possa imaginar e introduzindo novas ferramentas para moldar e desenvolver esses materiais mais do que nunca: código, movimento, sombreadores, plugins generativos e ferramentas do Weave, tudo na tela de trabalho do Figma.

Nos Configs anteriores, falamos sobre como a IA reduz barreiras de entrada e maximiza as possibilidades. No entanto, a IA reduziu as barreiras de entrada, mas não maximizou as possibilidades.

Designers, criativos, construtores: são vocês que maximizarão as possibilidades.

Nos próximos meses e anos, acredito que haverá uma explosão de criatividade, riscos assumidos e ousadia de expressão. Na Figma, o nosso objetivo é ajudar você a projetar de forma totalmente irrestrita com materiais e ferramentas que trabalham em conjunto, permitindo que você improvise e jogue na velocidade do seu pensamento. A tela de trabalho é mais do que onde seu trabalho reside. É também onde tudo se conecta.

Confira uma visão geral de tudo o que anunciamos no Config 2026.

Código na tela de trabalho

Há anos, o setor de design fala sobre "design x código". As ferramentas (incluindo o Figma!) forçaram uma escolha. Mas esse debate é falso. Design é um processo. Código é material, assim como imagens, vetores e camadas de design. Por muito tempo, o código residiu em ambientes com um único jogador, construídos para o pensamento linear. Ou, falando de outra forma, o material foi separado do processo. Acreditamos que o código deve ser tratado como qualquer outro material de design. Por isso, estamos introduzindo camadas de código no Figma.

Na tela de trabalho, você pode transformar qualquer camada de design em uma camada de código interativa com apenas um clique (ou um comando). Você pode duplicar rapidamente uma camada de código para explorar múltiplas direções lado a lado, assim como faria com um quadro de design.

A partir daí, tudo funciona como a tela de trabalho já funcionava: você pode improvisar, comentar e iterar com todos os colegas no mesmo arquivo.

Para os momentos em que você deseja voltar do código para as camadas de design, basta extrair quadros de design em camadas de design editáveis. Então, quando tudo estiver pronto para voltar, um clique implementa as alterações na camada de código.

Inscreva-se na lista de espera em figma.com/config-betas para ter acesso antecipado quando as camadas de código forem lançadas a partir de julho.

Leia mais →

Conceito de produto em tela dividida mostrando a página de uma exposição, uma interface gerada para reserva de ingressos e a implementação correspondente em código React lado a lado, ilustrando o fluxo de trabalho do design à programação.Conceito de produto em tela dividida mostrando a página de uma exposição, uma interface gerada para reserva de ingressos e a implementação correspondente em código React lado a lado, ilustrando o fluxo de trabalho do design à programação.
Explore opções com camadas de código na tela de trabalho do Figma.

Dê vida ao design com o Figma

Os designers de movimento fazem as coisas parecerem vivas de formas difíceis de explicar, muito menos imitar. Muitos de nós gostariam de fazer esse mesmo tipo de mágica, mas isso parecia fora de alcance. E, frequentemente, isso significava mudar para outras ferramentas. A partir de hoje, você pode construir com movimento diretamente no Figma.

No Figma Design, adicionamos uma linha do tempo, incluindo keyframes, predefinições e muito mais. Você pode construir movimento do zero, sobrepor esse movimento em designs existentes ou pedir ao agente Figma que gere um ponto de partida. Espero que você ache o Figma Motion avançado, intuitivo e um prazer de usar. Se você já é um designer de movimento, o Figma remove o trabalho repetitivo para que você possa manter o foco em expandir ainda mais sua criatividade.

Como o movimento é construído na plataforma do Figma, ele agora pode ser um elemento fundamental de design systems. É só animar um componente uma vez para que esse movimento atravesse todas as telas e todos os arquivos dos colaboradores, da mesma forma que os preenchimentos e a tipografia.

Por fim, o Figma Motion também foi desenvolvido para funcionar com código. Quando você muda para o Dev Mode, a linha do tempo completa fica visível e pode ser inspecionada: todos os valores de tempo, todas as curvas de suavização, todos os keyframes podem ser lidos, sem interpretação. Você pode copiar o código de animação diretamente para CSS, JSON ou React preparado para frameworks. Além disso, o Motion é compatível com MCP. Você pode passar qualquer quadro animado diretamente para implementação por um agente de codificação. Você também pode exportar como MP4, WebM, SVG animado ou GIF. Já estamos trabalhando para oferecer mais formatos e tipos de exportação.

Leia mais →

Anime seus designs usando a nova linha do tempo no Figma Design.

Preenchimentos e efeitos de sombreador

O Figma sempre teve sombreadores fazendo o trabalho de bastidores da renderização nas telas de trabalho. Mas criar sombreadores pode parecer um desafio e eles são difíceis de compartilhar com a equipe.

Agora, você pode descrever o que deseja, ou usar uma imagem como referência, e o agente Figma criará um para você. Um efeito transforma o que já está na camada, e um preenchimento atua como um novo material. Como tudo isso é construído com o agente Figma, os preenchimentos e efeitos de sombreador são parametrizados por padrão. Dessa forma, você pode adicionar controles diretamente na tela de trabalho e modelá-los como quiser.

O resultado parece e se comporta como se sempre fizesse parte do Figma. Os parâmetros são exibidos como controles, empilháveis com outros efeitos, e prontos para uma conversão perfeita em código e formatos populares.

Também estamos trabalhando nos sombreadores interativos, mas ainda falta acertar o desempenho.

Leia mais →

Interface do editor de gráficos do Motion mostrando um efeito visual generativo com parâmetros ajustáveis de grade de partículas, controles de animação de keyframes e uma linha do tempo para animação de arte procedural.Interface do editor de gráficos do Motion mostrando um efeito visual generativo com parâmetros ajustáveis de grade de partículas, controles de animação de keyframes e uma linha do tempo para animação de arte procedural.
Empilhe efeitos de sombreador como Mapa de gradiente, Impressão Riso e Partículas de luminância.

Plugins generativos

Observamos cada vez mais equipes construírem suas próprias ferramentas e achamos isso incrível! Todo designer tem fluxos de trabalho únicos. Com os plugins generativos, você pode criar todas as ferramentas que deseja. Para construir um plugin generativo, basta descrever a ferramenta necessária: o comportamento, os controles e os parâmetros. Não é necessário ter nenhum ambiente de desenvolvimento local ou conhecimento da API do plugin. Ele parece ser nativo na tela de trabalho, como qualquer outra ferramenta do Figma.

Você pode construir plugins generativos e sombreadores para seu uso e compartilhá-los com outras pessoas no seu arquivo. Em breve, você poderá publicar ferramentas para sua equipe, organização ou a comunidade em geral.

Leia mais →

Um plugin gerador de layout de imagens ajuda a organizar recursos.

Ferramentas do Figma Weave

As ferramentas do Figma Weave aplicam a mesma abordagem ao conteúdo visual, permitindo que você construa e reutilize fluxos de trabalho expressivos. E agora elas estão disponíveis na tela de trabalho do Figma.

Como contexto, o Weave é uma tela de trabalho baseada em nós onde você cria fluxos de trabalho generativos. Você pode conectar modelos, transformar recursos, refinar resultados e comparar abordagens. Em vez de solicitar um único resultado, você modela os resultados do modelo como argila para criar um fluxo de trabalho multimodelo que permite transformar o que está na sua mente em um processo visível que você pode inspecionar, iterar e reutilizar.

Hoje, você pode criar fluxos de trabalho no Weave e publicá-los como modelos para que outros usem ou façam remix. Em breve, você poderá publicá-los como ferramentas para a equipe, organização ou comunidade. Para começar, adicionamos algumas ferramentas do Weave para inspirar você.

Leia mais →

Interface de transferência de estilo mostrando uma imagem de destino, uma imagem de referência de estilo e uma visualização da página gerada, ilustrando a aplicação de estilo visual orientado por IA em recursos de design.Interface de transferência de estilo mostrando uma imagem de destino, uma imagem de referência de estilo e uma visualização da página gerada, ilustrando a aplicação de estilo visual orientado por IA em recursos de design.
Use Transferir estilo, uma ferramenta do Weave, para aplicar um estilo de uma imagem de origem a uma imagem de destino.

Um agente que sabe como você trabalha

O agente Figma (lançado para todos ontem) foi construído para entender a tela de trabalho.

As habilidades organizam seus fluxos de trabalho e convenções em instruções reutilizáveis para o agente. Você pode criar as suas próprias habilidades, usar as habilidades da equipe ou recorrer à comunidade. Os conectores permitem que o agente acesse as ferramentas já existentes na pilha (por exemplo, Notion, Slack, Granola, Hex, GitHub, Atlassian e muitas outras) e depois devolva as atualizações. Os anexos podem trazer pesquisas, resumos ou qualquer artefato relevante.

Agora, por padrão, os chats dos agentes também são visíveis para seus colegas para que você possa ver quais direções os outros estão explorando e desenvolver o raciocínio deles. Obviamente, você também pode tornar os chats privados quando precisar.

O agente também será disponibilizado em mais superfícies, como FigJam e Slides. Entre na lista de espera para o acesso antecipado em figma.com/config-betas.

Leia mais →

Um design de pôster móvel cercado por ações de assistente de IA, com prompts de tarefas flutuantes para criar plugins, aplicar estilos, gerar efeitos personalizados e verificar acessibilidade dentro de um fluxo de trabalho de design.Um design de pôster móvel cercado por ações de assistente de IA, com prompts de tarefas flutuantes para criar plugins, aplicar estilos, gerar efeitos personalizados e verificar acessibilidade dentro de um fluxo de trabalho de design.
Anexe arquivos, conecte outras ferramentas e use habilidades para dar mais contexto ao agente de design.

Com mais possibilidades do que nunca na tela de trabalho do Figma, estamos ansiosos para ver como você vai maximizar as possibilidades. Construa algo que só você pode fazer.

Visite nosso centro de ajuda para ver um resumo do que lançamos, a disponibilidade e como começar. Encontre respostas e inspiração sobre tudo o que é relacionado ao Figma no Figma Learn.

Create and collaborate with Figma

Get started for free