O agente de design do Figma, agora com ferramentas personalizadas e contexto

A diferença entre um agente que ajuda você a trabalhar de forma mais eficiente e um que realmente entende como você trabalha é o contexto. Quando um agente conhece o jeito de trabalhar da sua equipe, ele pode fazer mais do que simplesmente produzir. Ele pode colaborar.

Onde essa colaboração se torna interessante é na própria tela de trabalho do Figma, criando ferramentas, efeitos e experiências que não teriam sido possíveis antes. O agente de design do Figma

agora está disponível para mais usuários em beta aberto, dando a você mais flexibilidade, precisão e controle criativo sobre seu trabalho.

Crie suas próprias ferramentas

Cada pessoa trabalha de maneira diferente, mas as ferramentas de design são muitas vezes padronizadas. Layouts, texturas e efeitos são todos determinados pelo que é compatível nativamente na sua ferramenta de design. Começando hoje, você pode moldar suas ferramentas assim como faz com os seus designs. Isso abre mais espaço para experimentar visualmente e compartilhar o que você constrói com a sua equipe.

Plugins generativos

Um plugin estende o que é possível na tela de trabalho do Figma, mas construir um sempre exigiu habilidades técnicas e uma configuração de desenvolvimento que muitos designers não têm. Agora, você pode enviar prompts ao agente de design para criar plugins reutilizáveis.

Por usarem o PropsKit, esses plugins generativos parecem e funcionam como nativos no Figma. E, como eles vivem na tela de trabalho, oferecem um controle mais direto enquanto você itera. Para qualquer coisa que vá além do Figma Design, como serviços de IA ou APIs de terceiros, continue usando os plugins clássicos.

Efeitos e preenchimentos de shaders

O agente também pode criar shaders, pequenos programas personalizáveis alimentados por WebGPU

que definem como os pixels são renderizados. Pense em dither, metal líquido, ruído fractal. Eles vêm em dois tipos:

• Efeitos de shaders são como efeitos nativos do Figma, mas totalmente construídos por você, como estiramento de partículas, distorção de lente, contorno de cor e muito mais. Você pode empilhá-los, ajustar as propriedades e combiná-los com efeitos nativos para alcançar o resultado desejado.

• Preenchimentos de shaders são dinâmicos e gerativos, indo muito além de cores sólidas e gradientes, incluindo aquarela, moiré, grades de padrões e muito mais.

Shaders e plugins generativos residem em uma nova aba Ferramentas, ao lado de plugins clássicos, ferramentas Weave

e widgets. O Figma tem mais de 30 plugins e shaders para você começar, mas os mais úteis são aqueles que você mesmo cria.

Ao criar com o agente de design, você decide o tipo de shader que deseja construir e quais propriedades precisa manipular, e o agente constrói tudo para você. Mas o que o agente consegue fazer na tela depende do que você dá pra ele trabalhar.

Traga mais contexto para cada conversa

Um bom contexto não só informa o agente, como também molda o que o agente cria. Quanto mais próximo o agente estiver do seu projeto, da sua marca e do seu jeito de trabalhar, mais preciso será o resultado.

• Anexe arquivos diretamente: solte arquivos como uma entrevista de usuário, documento de cópia de UX ou relatório de dados no chat do agente. O agente usa isso como referência durante toda a conversa, então o trabalho reflete o contexto e a direção do seu projeto.
• Faça referência a outros arquivos do Figma: quando você cola um link do arquivo do Figma, o agente obtém toda a estrutura (componentes, tokens, layout e estilos) e pode entender e reproduzir padrões de design, não apenas aproximá-los de uma imagem plana.
• Pesquisa na Web: o agente pode obter dados ao vivo sem sair do Figma, como nomes reais de restaurantes e fotos para uma lista, padrões atuais de UX de concorrentes e conteúdo atualizado para protótipos realistas.
• Conecte suas ferramentas: conectores MCP trazem contexto do GitHub, Atlassian, Slack e outras ferramentas diretamente para o agente e podem postar atualizações de volta. Extraia tíquetes de produtos do Linear para usar como base no projeto ou consulta os dados do Hex sem precisar copiar e colar.

Amplie seu ponto de vista

Um bom prompt traz um ponto de vista. Skills permitem que você salve esse pensamento, compartilhe com sua equipe e coloque sua direção criativa para funcionar além de seus próprios arquivos.

• Crie skills personalizadas:Skills transformam os comandos que você usa com frequência em comandos de barra reutilizáveis, seja aplicando uma estética específica, revisando designs ou automatizando algo que você já descobriu.
• Publique skills para sua equipe: compartilhe uma habilidade e seu pensamento se torna parte de como a equipe inteira trabalha. Uma filosofia de design, uma estética distintiva, uma lente de feedback, transformada em algo que qualquer colega pode implementar, aprender e desenvolver.
• Veja os prompts dos seus colaboradores: o histórico de iterações não é apenas um registro, é uma janela para entender como alguém pensa. Conversas dos agentes são visíveis por padrão para seus colaboradores de arquivo, transformando o processo em um recurso compartilhado. Torne-os privados sempre que necessário.

O melhor momento no design é quando o que está na sua cabeça aparece na tela. Hoje, você tem mais maneiras de dar vida a essa ideia. Seu código, seus plugins, seus shaders, seu contexto, tudo na tela de trabalho do Figma. É isso que o agente de design do Figma possibilita.

O agente de design do Figma está disponível em beta aberto para usuários com licença Full nos planos Professional, Organization e Enterprise. As licenças Collab, Dev e View podem usar o agente nos seus rascunhos. O agente é gratuito durante a fase beta. Explore o arquivo de playground do agente ou aprenda maneiras práticas de usar a IA em seu fluxo de trabalho de design. Leia mais sobre o agente Figma e plugins e shaders generativos em nossa central de ajuda.