Quatro formas de usar o servidor MCP na Figma

Dois meses após abrir a tela de trabalho para agentes, o servidor do Figma MCP agora funciona com o Figma Slides, FigJam, Figma Make e o novo agente Figma. Isso significa que apresentações, quadros do FigJam e protótipos do Make podem ser criados ou atualizados usando um prompt. O servidor MCP também aceita fontes personalizadas e permite baixar imagens e ícones, como SVG, PDF, JPG ou PNG, de arquivos de design usando a nova ferramenta download_assets.

Veja a seguir quatro fluxos de trabalho que os Figmates estão executando agora que usam esses novos recursos.

1. Criar e atualizar apresentações de slides no Figma Slides

Mallory Dean, uma embaixadora de designers na Figma, mantém uma apresentação sempre atualizada cobrindo os lançamentos de produtos de IA da Figma. É uma apresentação dinâmica que ela atualiza a cada poucas semanas, garantindo que sua participação em palestras de design e reuniões com clientes mostrem sempre os dados mais atuais sobre os nossos lançamentos.

Após lançarmos o agente Figma, ela digitou este prompt no editor de código: “Atualize minha apresentação Figma AI para incluir nosso novo agente Figma. Extraia conteúdo do Slack, Google Drive, do nosso blog Shortcut e da página de Release Notes. Forneça sugestões sobre o que atualizar, além de ideias para novos slides.” O agente acessou conversas, briefings e mensagens de lançamento relevantes. Em seguida, usou a ferramenta use_figma e a habilidade /figma-use-slides no Figma Slides para atualizar a apresentação de acordo com o modelo dela.

Os novos slides ainda precisavam de uma revisão, de imagens para substituir os textos de apoio e edições no texto, mas os primeiros 80% do trabalho de conteúdo já estavam prontos quando ela chegou. Com o novo suporte a fontes personalizadas, o agente renderizou a tipografia usando as fontes personalizadas enviadas, em vez de aproximações seguras para a web, mantendo a fidelidade à marca durante a apresentação.

Essa mesma configuração aparece em todo o processo de desenvolvimento de produto, tanto na construção de algo desde o início quanto na atualização de um documento existente. Um GP construindo uma apresentação de início de projeto. Um designer apresentando uma exploração de design. Marketing montando um plano de GTM para um recurso. Vendas atualizando uma apresentação voltada ao cliente com as últimas mudanças de produto. Além de ficar mais rápido, o trabalho é feito com a identidade da marca e elaborado a partir do design system da equipe.

2. Gere quadros FigJam a partir de dados em tempo real

Como gerente de produto na Figma, Prasant Lokinendi realiza com frequência workshops de início de projeto de recursos. Preparar um FigJam envolvente para esses workshops (reunir contexto de toda a empresa e formatar seções para adequá-las à sessão) é um processo demorado. Por isso, ele criou a /figjam-builder, uma habilidade personalizada com essas instruções para que ele não precise recriar o prompt a cada vez.

Para o lançamento da conversão de voz em texto do Make no início deste ano, ele solicitou ao agente que gerasse um quadro do FigJam com base no contexto extraído do Slack, Asana e Notion (estrutura do projeto) e do Hex (análises). Em vez de um FigJam vazio, ele começou com os dados mais atualizados, incluindo visão do produto, insights dos clientes e decisões mais importantes.

3. Mova designs entre código e tela de trabalho com o Figma Make

Agora, o servidor MCP também funciona no Figma Make, fechando o ciclo de edições de design até PRs de produção sem precisar sair do Figma. Iris Lin, uma designer de produto na Figma, utiliza este ciclo em trabalhos reais de produtos.

Por exemplo, quando Iris e um colega de equipe construíram recentemente um exemplo de editor de áudio como arquivo de demonstração, o colega enviou uma primeira versão, mas Iris queria atualizar os designs. É difícil mostrar interações em um arquivo estático. Portanto, ela ramificou o código e construiu a versão real no Figma Make: clipes de áudio que você pode arrastar e reordenar, um painel com controles de nível e um indicador de reprodução que permite avançar/recuar na linha do tempo.

Como Iris queria editar o design system para o arquivo de demonstração, ela trouxe a visualização do Make para a tela de trabalho enviando este prompt ao Make: “Você pode trazer a visualização de volta para o Figma como camadas de design?” A tela foi posicionada na tela de trabalho, reconstruída com os componentes relevantes da biblioteca. Iris alterou o componente de clipe de áudio seguindo seus padrões normais de design na tela de trabalho, atribuindo estados claros para padrão, passar o mouse e arrastar. Em seguida, ela enviou as alterações para a outra direção: “Implemente esses novos estados no código.” O agente leu as três mudanças no design dela e as escreveu no componente, deixando tudo pronto para enviar um PR ao GitHub.

Com esse fluxo de trabalho, você controla as entregas de dentro do Figma. O agente lê e escreve seus componentes reais nas duas extremidades, assim como o Code Connect mapeia a sua biblioteca para o código de produção. Decisões de design que costumavam perder a fidelidade entre o handoff e a revisão agora percorrem intactas todo o caminho até o PR.

4. Divida o trabalho com o agente Figma

Como gerente de produto do servidor do Figma MCP, Yarden Katz sabe como levar nosso MCP ao limite. Um cenário ao qual ela sempre retorna é uma tela que existe apenas em código, sem representação na tela de trabalho. O objetivo é colocá-la no Figma, vinculada ao design system correto, para que os designers possam trabalhar com ela.

Trabalhando em um exemplo de app com um fluxo de login e um painel, ela enviou este prompt do editor de código: “Envie este painel e o fluxo de login para o Figma. Reutilize meus componentes e variáveis existentes onde eles existirem, e gere conjuntos de componentes e variáveis adequados onde não existirem.” O plugin do Figma tem habilidades que oferecem ao agente contexto sobre como usar o Figma. Depois de ler a biblioteca dela no Figma e na base de código, ele decidiu o que reutilizar e o que construir novamente, em vez de duplicar o trabalho que ela já tinha feito.

Dessa forma, ela recebeu uma primeira rodada sólida, mas não finalizada. O layout automático, as fontes e algumas cores não mapeadas ainda precisavam ser trabalhados. Foi nesse ponto que o agente Figma entrou em ação, trabalhando ao lado dela na tela de trabalho, com um contexto detalhado do design system. Ela enviou um prompt solicitando a correção do layout, o ajuste da tipografia e o mapeamento de todas as cores para a variável correta. Quando conseguiu o resultado desejado, ela o enviou de volta ao código por meio do servidor MCP. Se necessário, ela também poderia obter imagens e ícones da origem diretamente do agente com a nossa nova ferramenta download_assets, sem precisar exportá-los separadamente.

Neste caso de uso, o servidor MCP e o agente Figma trabalham em conjunto para chegar aos designs finais. O servidor conecta o Figma ao agente em que você já está e traz uma tela exclusivamente de código para a tela de trabalho, construída a partir de componentes reais. Em seguida, o agente Figma cuida do resto. Nativo da tela de trabalho, ele explora direções enquanto continua usando seus componentes e tokens como referência, no mesmo local em que você e a equipe criaram o design.

O agente Figma e a integração da base de código de produção do Figma Make estão atualmente em beta fechado. Os recursos de escrita do servidor do Figma MCP estão em beta aberto. Confira nosso guia de configuração para começar. Gostaríamos muito de ver os resultados que você conseguiu.