Guia de leitura localizado
figma-code-connect-componentsFinalidade, utilização e fonte
Conecta componentes de design do Figma a componentes de código usando as ferramentas de mapeamento do Code Connect. Use quando o usuário disser "conectar código", "conectar este componente ao código", "mapear este componente", "vincular componente ao código", "criar mapeamento do Code Connect" ou quiser estabelecer mapeamentos entre designs do Figma e implementações de código. Para escritas em tela viause_figma, usarfigma-use.
Fonte recuperada:
- Repositório de origem
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Estrelas do repositório
- 28,420
- Atualização do repositório
- 2026-10-29
- Classificação de Habilidades
- Design
- Última coleta
Licença: Não especificado
Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.
Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.
O que esta habilidade faz
Conecta componentes de design do Figma a componentes de código usando as ferramentas de mapeamento do Code Connect. Use quando o usuário disser "conectar código", "conectar este componente ao código", "mapear este componente", "vincular componente ao código", "criar mapeamento do Code Connect" ou quiser estabelecer mapeamentos entre designs do Figma e implementações de código. Para escritas em tela viause_figma, usarfigma-use.
Como funciona o fluxo de trabalho upstream
Fluxo de trabalho necessário
Siga estes passos na ordem indicada. Não pule nenhuma etapa.
Passagem a montante · L29 ↗Visão geral
Essa habilidade ajuda você a conectar componentes de design do Figma às suas respectivas implementações de código usando o recurso Code Connect do Figma. Ela analisa a estrutura do design do Figma, busca componentes correspondentes em sua base de código e estabelece mapeamentos que mantêm a consistência entre o design e o código.
Passagem a montante · L8 ↗Etapa1: Obtenha sugestões do Code Connect
Chamarget_code_connect_suggestionsPara identificar todos os componentes não mapeados em uma única operação, esta ferramenta realiza automaticamente as seguintes ações: busca informações dos componentes no gráfico de cena do Figma; identifica os componentes publicados na seleção; verifica os mapeamentos existentes do Code Connect e filtra os componentes já conectados.
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Requisitos e configuração
Pré-requisitos
O servidor Figma MCP deve estar conectado e acessível. O usuário deve fornecer um URL do Figma com o ID do nó:https://figma.com/design/:fileKey/:fileName?node-id=1-2
Limites e verificações de qualidade
Nenhuma passagem de limites separada foi selecionada deste arquivo. Isso não significa que a Skill seja segura para todas as entradas ou ambientes. Analise o código-fonte completo e valide seus próprios resultados.
Comece com um teste seguro.
- Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
- Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
- Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
- Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.
Leia mais na fonte.
- Visão geral
- Limites de Competência
- Pré-requisitos
- Fluxo de trabalho necessário
- Etapa1: Obtenha sugestões do Code Connect
- Opção A: Usando
figma-desktopMCP (sem URL fornecida) - Opção B: Quando um URL do Figma é fornecido
- Etapa2Analisar o código-fonte em busca de componentes correspondentes
- Etapa3Apresentar resultados ao usuário
- Etapa4Criar mapeamentos de conexão de código
- Exemplo1Conectando um componente de botão
- Exemplo2Componentes múltiplos com seleção parcial
- Exemplo3: Criação de Componentes
- Descoberta proativa de componentes
- Correspondência de estrutura precisa
- Comunicação clara
- Lidar com a ambiguidade
- Degradação graciosa
- Problema: "Nenhum componente publicado encontrado nesta seleção"
- Problema: "O Code Connect está disponível apenas nos planos Organization e Enterprise"
- Problema: Nenhum componente correspondente encontrado na base de código
- Problema: "Componente publicado não encontrado" (CODE_CONNECT_ASSET_NOT_FOUND)
- Problema: "O componente já está mapeado para o código" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Problema: "Permissões insuficientes para criar o mapeamento" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Problema: O mapeamento do Code Connect falha com erros de URL.
- Problema: Vários componentes semelhantes encontrados
- Entendendo o Code Connect
- Recursos adicionais
Habilidades relacionadas
Tradução e escopo
Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.
Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.
- Fonte fixada
- Leia o original ↗
- Fonte recuperada
- Commit de origem
49f948faa9258a0c61caceaf225e179651397431- Fonte SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d