5 dicas para usar o servidor MCP do Dev Mode do Figma

Pense no seu primeiro dia em um novo emprego. Provavelmente seguiu um padrão familiar: você conheceu seus novos colegas de equipe, recebeu alguns materiais de onboarding e começou a pensar na melhor forma de abordar o trabalho que tinha pela frente. Agora imagine fazer isso sem qualquer estrutura ou contexto—apenas uma enxurrada de novas ferramentas e informações e nenhum mapa para fazer sentido disso.

É um pouco como o que esperamos que agentes de IA façam quando lhes fornecemos dados de design brutos e não estruturados. O servidor MCP do Dev Mode do Figma traz contexto dos arquivos de design para os agentes de IA, viabilizando um fluxo de trabalho de design-para-código mais eficiente e preciso. E, assim como uma boa experiência de onboarding depende de documentação organizada e expectativas claras, podemos adotar medidas para melhorar a qualidade da entrada — o que, em última instância, eleva a qualidade da saída. Aqui, compartilhamos cinco dicas práticas de como ajudar os agentes de IA que você utiliza para programar com mais consistência e alinhamento para o que sua equipe realmente precisa.

1. Comece com uma estrutura de design sólida

Os mundos do design e da programação têm, cada um, sua própria definição de estrutura. No design, estrutura se refere a uma visão mais holística: a disposição de cada elemento, como eles se articulam em um layout e a experiência que proporcionam como um todo. Ao programar, estrutura diz respeito a regras específicas, composição e sintaxe que precisam ser seguidas para que o código compile e funcione corretamente. Não existe uma abordagem “certa” única para estruturar, mas é importante reconhecer essas diferenças e reduzir essa distância sempre que possível.

Formas de alinhar design e código

Aqui estão algumas maneiras de pensar a estruturação de designs para que sejam traduzidos com mais facilidade em código:

• Adote uma abordagem de fora para dentro: qual é a seção mais externa de um elemento? É um cartão? É uma seção de uma página da web? Seja o que for, comece pelo exterior e aninhe os elementos adicionais dentro dessa camada de nível superior.
• Nomeie suas camadas: o que o design está representando? Do que ele é composto? Por exemplo, em uma caixa de formulário, etiquetar coisas como entradas, botões e links produz melhores resultados.
• Use componentes: os componentes não só ajudam na tradução de design para código, como também criam padrões reutilizáveis para designs futuros.

Um conto de duas caixas de formulário

Vamos mostrar um exemplo desses princípios em prática. Aqui, temos duas caixas de formulário:

À primeira vista, esses formulários parecem muito semelhantes. Eles estão organizados da mesma forma, contêm os mesmos elementos e, em geral, transmitem a mesma coisa. Embora ambos estejam estruturados “corretamente” do ponto de vista do design, um está otimizado para código, e o outro não. Vamos nos aprofundar na estrutura de camadas:

À esquerda, há uma estrutura clara e nomes distintos para as camadas de componentes. À direita, os elementos estão agrupados em uma única camada. Ser específico na nomeação das camadas e na estrutura pode não impactar visualmente o design, mas torna muito mais fácil para um agente de IA gerar código relevante e de alta qualidade para o design à esquerda.

No design da direita, é provável que um agente de IA interprete tudo isso como um único elemento div e tente adicionar todos os elementos contidos dentro desse mesmo contêiner. Como resultado, é provável que surjam problemas de espaçamento e layout que um desenvolvedor terá de voltar e corrigir manualmente.

2. Alinhar em uma linguagem de variável compartilhada

Em nosso recente guia sobre handoff entre design e desenvolvimento, falamos sobre a importância de encontrar alinhamento por meio de uma linguagem compartilhada entre as equipes. De muitas formas, você pode encarar o servidor MCP do Dev Mode como uma ferramenta de handoff entre designers e agentes de IA. Assim como no handoff entre design e desenvolvimento, esse repasse para agentes de IA depende da criação de uma linguagem compartilhada para coisas como estilos e variáveis. Dessa forma, você garante que os agentes de IA estejam alinhados aos padrões de design que sua organização estabeleceu.

Tradução de variáveis para código

Uma ótima maneira de otimizar as saídas do seu servidor MCP é configurar a sintaxe de código nas variáveis. Quando você usa variáveis com sintaxe de código em um design, tanto o valor da variável quanto essa sintaxe são enviados ao agente de IA como parte da nossa saída de código. Veja como ajudar os agentes de IA a entender melhor o contexto de design e alcançar resultados mais consistentes:

• Aplicar convenções de nomenclatura: garanta que as novas variáveis estejam alinhadas com suas variáveis do design system existente.
• Comunicar a sintaxe: alguns frameworks exigem sintaxes diferentes para o uso de variáveis em código, portanto, certifique-se de que os agentes saibam a forma correta de estruturá-las.
• Criar responsividade: evite dimensionamento de código manual em geração de código de IA. Diga aos agentes como os componentes devem ser estruturados de forma alinhada aos pontos de corte corretos.

Aplicar alterações em variáveis em larga escala

Em geral, procure evitar valores hardcoded; isso cria uma superfície de manutenção maior e potencialmente difícil de gerenciar. Por exemplo, se você decidir atualizar sua marca futuramente, incluindo a paleta de cores e estilo de fonte, você pode se ver obrigado a atualizar várias interfaces da web. Com variáveis, essas mudanças são mais simples: basta atualizar suas folhas de estilo, e os novos valores são aplicados em todos os lugares onde a variável é usada. Com a capacidade da IA de gerar grandes volumes de código, garantir esse nível de consistência é fundamental.

Aplicando sua nova linguagem comum

Mas, indo além da geração, e quanto à auditoria? Você também pode usar o servidor MCP do Dev Mode para identificar quando há desalinhamento entre as variáveis de design e a base de código. O servidor oferece uma ferramenta chamada get_variable_defs, que pode ser usada para verificar as variáveis em uma determinada seleção em relação à folha de estilos da sua base de código e reforçar o uso consistente de padrões.

3. Comunique a intenção do design com anotações

Os designs costumam ser representações visuais estáticas de algo mais dinâmico. Além do que você vê no design visual, também existem estados invisíveis — lógica de estados, responsividade, diretrizes de acessibilidade — que precisam ser considerados ao traduzir para código. Embora um colaborador possa ser capaz de inferir a lógica de estados a partir do design, os LLMs não funcionam dessa forma: eles veem os dados brutos que você fornece por meio do servidor MCP e os utilizam para concluir a tarefa descrita no prompt. Uma forma de os usuários lidarem com isso é criando prompts cada vez mais complexos. Curiosamente, porém, os LLMs tendem a ter um desempenho melhor quando os prompts contêm instruções mais concisas e específicas.

Anotações como dicas para LLMs

Anotações são essenciais para fornecer contexto aos agentes de IA, pois permitem comunicar a intenção de design que não é imediatamente visível em um design. Os dados de anotações, incluindo categorias, são incluídos nas respostas do servidor MCP do Dev Mode. Aqui estão alguns exemplos simples de anotações para orientar a criação de código:

• Destaque animações e efeitos de hover: você pode especificar um efeito de zoom para linhas de tabela ou que o plano de fundo mude para preto 200 ao passar o mouse.
• Indique mudanças de estado: sinalize que botões de navegação devem ficar desativados se o usuário estiver na página cujo nome corresponde ao valor do botão.
• Dê diretrizes sobre as fontes de conteúdo: forneça instruções de conteúdo para uma determinada seção, anotando que ela é alimentada dinamicamente por um CMS e que deve usar paginação a partir de determinados tamanhos.

Um ganha-ganha para designers e ferramentas

Além de comunicar a intenção aos agentes de IA, usar anotações dessa forma pode, de fato, economizar tempo dos designers. Considere o exemplo do botão de navegação acima. Dependendo de quantas opções o painel de navegação tenha, pode ser necessário criar um design para cada estado individual. Com anotações, você pode fazer com que o agente construa esses estados para você dentro do contexto do design.

4. Crie limites com regras

Embora as anotações sejam ótimas para comunicar a intenção de design e expressar a funcionalidade que você quer ver, elas são menos eficazes para comunicar aspectos como o funcionamento de layouts no código real ou como as estruturas de dados de backend são organizadas. É aí que entram as regras. Se as anotações são como dicas de ferramentas — fornecendo instruções que podem variar de quadro a quadro ou de iteração para iteração —, as regras são como manuais que criam um framework para como os dados devem ser interpretados e as tarefas executadas. Para determinar o que deve ser uma regra e o que deve ser apenas uma instrução no prompt, pergunte a si mesmo: “Quero que o agente execute exatamente essa ação toda vez que eu fizer esse tipo de solicitação?”

Como estruturar suas regras

Regras para editores como Cursor, Windsurf e VS Code (chamadas de instruções Copilot) são relativamente simples de criar. Você escreve um arquivo em markdown simples, salva em um diretório específico e define como a regra será chamada, manual ou automaticamente. Algumas das coisas que você pode especificar nesses arquivos de regras são:

• Uso de componentes existentes: indique aos agentes onde procurar código já existente e evite duplicações.
• Primitivas de layout preferidas e diretrizes de estilo: você já tomou medidas para garantir designs responsivos, então certifique-se de que elas estejam sendo usadas.
• Fontes de dados a incorporar: comunicar estruturas de dados dentro da base de código é mais eficaz do que tentar usar apenas prompts.
• Organização de arquivos e padrões de nomenclatura: à medida que novos códigos são escritos, certifique-se de que eles estejam em conformidade com a estrutura de diretórios existente.

5. Não tenha medo de iterar

Se agentes de IA são como um novo engenheiro na sua equipe, é importante pensar na forma como engenheiros trabalham na prática. É improvável que um agente de IA resolva um problema em uma única tentativa; os prompts geralmente são apenas o início de uma conversa. Na maioria das vezes, o primeiro prompt vai gerar alguns bons resultados, mas você provavelmente precisará fazer ajustes e reenviar o prompt ao agente para corrigir alguns pontos. E isso não é algo ruim! Você pode executar novamente chamadas de ferramentas para garantir que o agente esteja vendo as informações corretas ou ajustar o prompt para mudar a abordagem de construção. O benefício de usar o servidor MCP do Dev Mode é que, à medida que você continua refinando os prompts, o agente de IA passa a contar com o contexto de design necessário para gerar resultados relevantes. Como resultado desse contexto, você atingirá seus critérios de sucesso com menos chamadas ao agente.

Lembre-se de que o cenário de IA está em constante mudança

Os avanços em IA estão evoluindo em um ritmo impressionante. E, embora esse ritmo acelerado de mudança seja empolgante, é importante lembrar que o que existe hoje pode não ter a mesma aparência amanhã. Durante o período beta, já introduzimos diversas melhorias e novos recursos como resultado de ótimos feedbacks dos usuários e de mudanças nas especificações. Manter a flexibilidade à medida que as coisas evoluem é fundamental para alcançar uma geração de código ainda mais bem informada pelo design.