Figma Code Connect Componentspor OpenAI

Figma Code Connect Components Skill.

Deixe explícita a relação entre um componente de design e sua implementação.

Figma
Design systems
Handoff para desenvolvedores

Revisão da fonte · Figma Code Connect ComponentsSKILL.md

Tarefa Figma O que produz • Uma lista proposta de correspondências entre nós de Figma e componentes de código • Mapeamentos aprovados do Code Connect com caminhos de origem e rótulos de framework • Um resumo que separa mapeamentos conectados, ignorados e com falha Antes de começar Figma MCP conectado, acesso aos componentes publicados e ao código-fonte, além de direito de uso atual do Code Connect e permissões de edição.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Mapeie componentes publicados do Figma para o código correspondente

Um fluxo de trabalho de Figma MCP para descobrir, revisar e escrever mapeamentos aprovados do Code Connect.

Fluxo baseado na fonteNão é um benchmark de execução

Como funciona

Figma Code Connect Components é um fluxo de mapeamento, não um gerador de telas. Ele descobre componentes publicados sem mapeamento em uma seleção do Figma, pesquisa o código local e compara a estrutura e as propriedades dos componentes. Um nome igual é apenas um ponto de partida: as opções de variante, os valores padrão e a finalidade também precisam coincidir.

A fonte exige que as correspondências propostas sejam mostradas ao usuário antes de qualquer mapeamento ser criado. A aprovação parcial é suportada, e componentes ambíguos ou ausentes são informados em vez de adivinhados. O resultado é uma conexão descobrível entre design e código; ele não reescreve nenhum dos lados automaticamente nem prova que a aparência renderizada seja idêntica.

Entregas esperadas

Uma lista proposta de correspondências entre nós de Figma e componentes de código
Mapeamentos aprovados do Code Connect com caminhos de origem e rótulos de framework
Um resumo que separa mapeamentos conectados, ignorados e com falha

Ver o briefing de exemplo

Do briefing à revisão

01
Identificar componentes publicados
Use um link do Figma específico para o nó ou uma seleção no desktop compatível e descubra quais componentes continuam sem mapeamento.
02
Comparar implementações
Pesquise no repositório e inspecione as exportações, propriedades e valores padrão reais. Apresente alternativas quando mais de um componente puder servir.
03
Conectar o conjunto aprovado
Envie apenas os mapeamentos aprovados pelo usuário e informe separadamente os itens bem-sucedidos e os que falharam.

02 Quando usar

Quando usar

Figma MCP conectado, acesso aos componentes publicados e ao código-fonte, além de direito de uso atual do Code Connect e permissões de edição.

Bom para

Handoff de bibliotecasÚtil quando designers e desenvolvedores já mantêm bibliotecas de componentes correspondentes, mas os vínculos entre elas não são claros.
Limpeza incremental de mapeamentosServe para uma seleção que contém componentes já mapeados e alguns itens novos.

Limites a verificar

Componentes publicados são necessáriosO fluxo revisado é para componentes ou conjuntos de componentes publicados, não para retângulos quaisquer nem componentes de rascunho não compartilhados.
O acesso é separadoVerifique se o seu plano do Figma oferece suporte ao Code Connect e se você tem permissão de edição e uma conexão funcionando antes de criar mapeamentos.

Traga estas entradas

Seleção do FigmaForneça um link do arquivo com o ID do nó de destino ou um nó selecionado por meio de uma conexão desktop compatível.
Repositório de códigoDisponibilize os arquivos de implementação para que as exportações e props possam ser inspecionadas.
Aprovação dos mapeamentosEscolha todas, algumas ou nenhuma das correspondências sugeridas antes de elas serem gravadas.

03 Decisões importantes

Decisões importantes

Correspondência no nível das propriedades
Comparar as interfaces de variante e tamanho reduz vínculos enganosos entre componentes que apenas compartilham o nome.
Sucesso parcial explícito
Um componente que falhou ou foi ignorado continua visível no handoff, em vez de desaparecer atrás de uma mensagem geral de sucesso.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Instale a skill selecionada pelo mecanismo compatível do seu ambiente de agente e conecte o Figma separadamente. Estes materiais Beta são regidos pelos Termos para Desenvolvedores do Figma, não pelo MIT. A instalação não concede acesso ao Code Connect.

Arquivo-fonte original

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-code-connect-components/SKILL.md

Figma MCP conectado, acesso aos componentes publicados e ao código-fonte, além de direito de uso atual do Code Connect e permissões de edição.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use figma-code-connect-components para inspecionar os componentes publicados neste frame do Figma e encontrar suas implementações em nosso repositório. Compare as props de variante e os valores padrão, mostre os caminhos de origem propostos e aguarde minha aprovação antes de criar os mapeamentos. Se um componente tiver duas correspondências plausíveis, explique a diferença em vez de escolher em silêncio.

Inspecione o resultado

Compare o resultado real com estes critérios observáveis.

Cada caminho de origem proposto aponta para a exportação real do componente.
Somente os mapeamentos aceitos explicitamente são criados.
Itens não publicados, já mapeados ou bloqueados por permissão são informados com precisão.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote, nem que as ferramentas externas, credenciais e dependências de software dela estejam incluídas.

Baixar OpenDesign Ler o guia de início rápido

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos do projeto original podem mudar.

Proprietário da fonte: OpenAI
Repositório: openai/skills
Arquivo da skill: skills/.curated/figma-code-connect-components/SKILL.md
Licença: Termos do Figma
Versão revisada: 2026-10-07 · 49f948faa925

Resumo editorial da fonte

Um fluxo de trabalho de Figma MCP para descobrir, revisar e escrever mapeamentos aprovados do Code Connect.

Resumo original de OpenDesign, baseado na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Isso gera código de aplicação?

Não. Ele mapeia componentes de design para implementações existentes. Construir código a partir de um frame do Figma é um fluxo de trabalho separado.

Ele consegue conectar componentes não publicados?

A fonte revisada diz que os componentes precisam ser publicados em uma biblioteca de equipe antes que o Code Connect possa mapeá-los.

Posso aprovar apenas uma correspondência?

Sim. O fluxo oferece suporte explícito a aceitar todos, alguns ou nenhum dos mapeamentos propostos.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Ver skills de design