Figma expande plugins e shaders generativos com publicação e MCP

{ "resumo": "## Novidades anunciadas\n\nA Figma anunciou, em texto do designer de produto Rogie King, um conjunto de atualizações para plugins generativos e shaders: é possível agora publicar esses artefatos no Figma Community ou, em planos Organization e Enterprise, de forma privada dentro da organização. Os shaders ganharam suporte a movimento e interatividade, criados pelo agente de design a partir de uma descrição. Os usuários também podem ver e baixar o código por trás de qualquer shader ou plugin criado, para editá-lo em um agente externo.\n\nJunto disso vieram atualizações no Figma MCP server: ele permite visualizar e alterar plugins e shaders generativos usando um agente próprio, ou exportar shaders para um agente que os implemente em código React. Para usar os recursos, é preciso ter acesso ao agente de design da Figma, que está em beta aberto para usuários Full seat de todos os planos (assentos Collab, Dev e View podem usá-lo em seus drafts). O agente é gratuito durante o beta, mas passará a consumir créditos de IA em algumas semanas.\n\n## O que são shaders\n\nShaders permitem manipular visualmente camadas no Figma Design, seja como preenchimento ou como efeito. São programas de GPU capazes de transformar pixels em tempo real. Rogie já havia construído em 2022 o plugin Noise & Texture, mas à época não havia caminho para uma integração mais profunda.\n\n## Do protótipo à aprovação\n\nRogie conta que foi com o avanço dos LLMs que conseguiu demonstrar (e não apenas explicar) sua visão. Ele criou via vibe coding um ambiente WebGPU que se comportava como o Figma, aplicando efeitos de shader a qualquer camada do canvas, incluindo vetores, camadas 3D e sistemas de partículas. O protótipo, chamado "FigGPU", focava em três pontos: composabilidade (a saída de um shader alimenta o próximo), ergonomia de editor (controles dinâmicos gerados para manipular o design) e criação agêntica (LLMs sugerem controles ajustáveis).\n\nEle então buscou o engenheiro de renderização Yassir Solomah, com dúvidas sobre viabilidade e impacto na performance - afinal, um protótipo com vibe coding não se compara à renderização real, em escala empresarial, do Figma. Yassir aderiu, substituiu o sistema original de fragment shaders em WebGL 2 por um pipeline WebGPU, no qual shaders funcionam como miniaturas de programas: renderizam objetos 3D e aplicam lógica baseada na posição do mouse e no tempo. Essa arquitetura isola os scripts de geração gráfica em sandboxes próprias, permitindo scripts mais seguros, sistemas de partículas, compute shaders e suporte a 3D.\n\nCom a validação da tecnologia, a gerente de produto Georgia Rust organizou a iniciativa: percebeu que o designer Jason Calleiro trabalhava em protótipos de plugins adaptativos e generativos no Figma Design e incentivou a combinação dos esforços sob o guarda-chuva de "ferramentas generativas". O time montou uma apresentação com demonstração ao vivo da criação de shaders por agentes, a implementação central, o modelo de segurança e o plano de produto, foi aprovado e teve como prazo de entrega a Config, com dois meses de desenvolvimento.\n\n## Novo processo de trabalho\n\nCom prazo curto, o time aboliu PRDs e críticas formais, apostando em prototipagem e demonstrações, com apresentações semanais a patrocinadores internos e um grande canal de Slack. A equipe inicial de 15 pessoas cresceu conforme as demos circulavam.\n\nPlugins usaram a API de plugins existente, mas shaders exigiam uma API nova; Rogie construiu o PropsKit, um kit de interface em web components que os agentes podiam usar. Uma lição do processo: protótipos com vibe coding funcionaram bem para designers validarem hipóteses, mas não serviram como referência para desenvolvedores e gestores. O time passou então a produzir mocks estáticos no Figma para alinhar estados e funcionalidades, seguidos de protótipos em código funcional para refinar soluções. O próprio Rogie chegou a escrever código de produção e abrir PRs.\n\n## Reta final e lições\n\nDuas semanas antes da Config, o projeto estava 90% pronto, com os últimos 10% sendo os mais difíceis - revisores recebiam versões já desatualizadas e houve risco de cancelamento. O time decidiu rápido, fez cortes (por exemplo, trocando controles de propriedade personalizados por uma lista simples) e abriu PRs para ajustes de design.\n\nO microsite da Config para shaders usou extensivamente o Figma MCP server, com engenheiros lendo o design por meio de get_design_context. A conclusão de Rogie: código no canvas não é tão diferente de design no canvas, e esse projeto mostrou uma nova forma de construir em colaboração com IA, alternando entre design e código.", "hook": "A Figma agora permite publicar plugins generativos e shaders criados pelo agente de design no Figma Community ou de forma privada em planos corporativos. O agente também passou a construir shaders com movimento e interatividade, e o Figma MCP server permite visualizar e alterar esses artefatos com agentes externos, incluindo exportação para React. O anúncio vem com uma história interna: a entrega desses recursos na Config, com dois meses de prazo.", "entities": ["Figma", "Figma MCP", "WebGPU", "Figma Design"], "themes": ["design-e-ux", "agentes-e-automacao"], "story_key": "figma-generative-plugins-shaders", "reasoning": { "story_key": "Fato canônico: Figma expande plugins generativos e shaders com publicação na Community e integração via MCP.", "themes": { "design-e-ux": "Anúncio de recursos de craft visual no Figma Design: shaders, efeitos na tela, kit de UI PropsKit e fluxo de design.", "agentes-e-automacao": "Agente de design cria plugins e shaders; Figma MCP server permite a agentes externos ler e alterar artefatos e implementar em React, com protocolo MCP como parte do anúncio." }, "entities": { "Figma": "Empresa e sujeito central do anúncio.", "Figma MCP": "Componente anunciado que conecta agentes ao design para ler e alterar plugins e shaders.", "WebGPU": "Tecnologia central da nova arquitetura de pipeline de shaders.", "Figma Design": "Produto onde shaders e plugins generativos funcionam como preenchimento ou efeito." }, "excluded": { "Rogie King, Yassir Solomah, Georgia Rust, Jason Calleiro": "Pessoas são autores/colaboradores da narrativa, não sujeitos do fato anunciado.", "Noise & Texture, FigGPU, PropsKit": "Menções secundárias/exemplos internos dentro da história." } } }