figma-use

Visão geral do skill figma-use

Para que serve o figma-use

figma-use é o skill obrigatório para chamar use_figma com segurança e de forma correta em fluxos da Plugin API do Figma. Ele foi criado para agentes que precisam escrever, atualizar, inspecionar ou estruturar arquivos do Figma com JavaScript, em vez de fazer isso manualmente. Se a sua tarefa envolve editar nós, vincular variáveis, ajustar auto layout, criar componentes ou ler a estrutura do arquivo de forma programática, este skill é o ponto de entrada certo.

Quem deve instalar

Instale o figma-use skill se você precisa de operações confiáveis em arquivos do Figma durante execuções do agente, especialmente em trabalhos de Design Implementation, em que orientações só por prompt são vagas demais. Ele é mais útil quando o resultado depende do contexto do arquivo, de componentes já existentes ou de restrições específicas do Figma que prompts genéricos de código costumam ignorar.

Por que isso importa na prática

O principal valor do figma-use não é só dar acesso à API; é a proteção sobre quando chamar use_figma e qual contexto carregar primeiro. Isso reduz chamadas quebradas, pré-requisitos ausentes e iterações desperdiçadas. Ele é especialmente útil quando você precisa de execução previsível em arquivos vivos do Figma, onde a ordem das operações e o estado do arquivo podem mudar o resultado.

Como usar o skill figma-use

Instale e carregue primeiro

Use o caminho de instalação fornecido pelo seu gerenciador de skills e, antes de qualquer chamada à ferramenta use_figma, garanta que o agente carregou figma-use. A regra do próprio repositório é explícita: passe skillNames: "figma-use" ao invocar use_figma. Se a tarefa for uma página inteira ou uma tela com várias seções, carregue também figma-generate-design para combinar as regras da API com o fluxo de construção de telas.

Comece pelos arquivos certos

Para usar o figma-use corretamente, leia primeiro references/plugin-api-standalone.index.md para entender a superfície da API. Depois, consulte references/common-patterns.md, references/gotchas.md e references/validation-and-recovery.md antes de escrever código. Se você estiver lidando com componentes, variáveis ou estilos, vá direto aos documentos de padrão relevantes em vez de vasculhar o repositório inteiro.

Transforme um pedido vago em um prompt útil

Uma boa entrada para o figma-use deve nomear a área alvo do arquivo, os tipos de objeto e a mudança esperada. Por exemplo: “No frame selecionado, crie um layout horizontal de 3 cards usando componentes locais existentes, mantenha o espaçamento consistente com a página atual e retorne os IDs dos nós criados.” Isso é melhor do que “deixe isso mais bonito”, porque o skill precisa de estrutura acionável, não de direção subjetiva.

Fluxo de trabalho que melhora a qualidade da saída

Um bom fluxo de trabalho com figma-use é: inspecionar o arquivo ou os nós selecionados, confirmar componentes e estilos disponíveis, fazer a menor alteração segura e depois validar o resultado. Para Design Implementation, prefira montagem incremental em vez de geração de uma vez só. Leia agents/openai.yaml para entender o contexto da ferramenta e use a pasta references como fonte de verdade para o comportamento da API e os casos comuns de falha.

FAQ do skill figma-use

O figma-use serve só para escrever código?

Não. O figma-use skill serve para qualquer operação no Figma que exija a Plugin API em JavaScript, incluindo leituras específicas, como inspeção programática do arquivo ou descoberta de estrutura. Se a tarefa depender do estado vivo do documento, ela pertence aqui.

Quando eu não devo usar?

Não use figma-use para conselhos estáticos simples, críticas soltas de design ou tarefas que possam ser concluídas sem tocar no arquivo. Se você não for realmente chamar use_figma, o skill acrescenta pouco valor e pode atrasar o fluxo.

Ele é amigável para iniciantes?

Sim, desde que você siga a ordem do repositório e mantenha os pedidos específicos. Iniciantes normalmente travam quando pedem um design final pronto sem informar o frame de destino, as escolhas de componentes existentes ou as restrições. O skill fica mais fácil de usar quando você parte do estado atual do arquivo e de um objetivo bem delimitado.

Em que ele é diferente de um prompt normal?

Um prompt normal pode descrever a intenção; o figma-use ajuda a executar de acordo com as regras reais da API do Figma. Isso faz diferença em Design Implementation porque muitas ações no Figma dependem do tipo de nó, do contexto da página ou dos métodos suportados da Plugin API. O skill reduz o chute ao ancorar o fluxo em padrões documentados e em gotchas conhecidos.

Como melhorar o skill figma-use

Dê melhor contexto do arquivo

A melhoria mais importante vem de nomear o que já existe: frame selecionado, nome da página, biblioteca de componentes, coleção de variáveis ou conjunto de estilos locais. Se você omitir isso, o agente precisa adivinhar se deve criar novos ativos ou reutilizar os existentes. Para usar figma-use, o contexto normalmente pesa mais do que a verbosidade.

Especifique a estrutura, não só a estética

Pedidos como “deixe mais limpo” são fracos. Entradas melhores parecem com isto: “Converta a seção de marketing selecionada em um frame responsivo de 12 colunas, reutilize estilos locais de texto e mantenha o CTA alinhado ao componente de botão existente.” Isso ajuda o figma-use a escolher o caminho certo da API e evita saídas que parecem polidas, mas não se encaixam no sistema do arquivo.

Fique atento aos modos de falha comuns

Os problemas mais comuns são chamar use_figma sem carregar o skill, pular o índice de referência da API e tentar fazer coisa demais em uma única passada. Outro problema frequente é não verificar gotchas sobre posicionamento de nós, propriedades de componentes ou modos de variáveis. Se o resultado sair errado, consulte as referências que correspondem à operação que falhou antes de tentar de novo.

Itere com correções concretas

Depois da primeira saída, melhore dizendo o que deve ser mantido, o que deve ser substituído e o que não pode ser alterado. Por exemplo: “Mantenha as instâncias atuais dos componentes, reduza o espaçamento vertical em 8px e altere apenas o estilo de texto do rótulo secundário.” Esse tipo de correção faz o figma-use render mais na segunda passada do que pedir um redesenho do zero.