Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Figma Code Connect skill
O Figma passa a mostrar, pra cada componente, o trecho de código do seu projeto com as propriedades certas, em vez de um código genérico.
- instalações
- 3.400
- estrelas no GitHub
- 2.112
- No skills.sh desde
- março de 2026
- Licença
- Sem licença declarada
Atualizada no GitHub em 20 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
Publicada pelo próprio Figma, a skill faz o Claude criar arquivos .figma.ts que ligam um componente do Figma a um componente do seu código. Você manda o link do Figma; pelo servidor MCP do Figma, o Claude acha quais componentes publicados ainda não têm ligação e puxa as propriedades de cada um.
Depois procura no projeto o componente que bate, comparando nome e propriedades, e confirma com você antes de escrever. No arquivo, cada propriedade do Figma (texto, liga e desliga, variante, troca de ícone, área de conteúdo) vira a propriedade correspondente do código, com todas as variantes mapeadas; o que não tem par no código fica de fora.
No fim, o Claude relê o arquivo e confere uma lista de erros comuns: propriedade inventada, ícone escrito à mão em vez de puxado do Figma, variante esquecida e formato errado (.figma.tsx no lugar de .figma.ts).
Nas palavras de quem fez
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component…
Quando usar
- Ligar o design system do Figma aos componentes React do projeto
- Fazer o Figma mostrar o código real do botão, do card e do campo
- Mapear um componente que acabou de ser publicado na biblioteca
- Passar uma tela inteira e ligar todos os componentes que ainda faltam
Depois de instalar, é só pedir assim
- Liga este componente do Figma ao nosso Button: [link do Figma com node-id]
- Vê quais componentes desta tela do Figma ainda não têm Code Connect e cria os arquivos
- Conecta o Card desta tela ao componente Card de src/components e confere se todas as variantes entraram: [link do Figma]
Segurança
Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.
- Gen Agent Trust HubPassou
- SocketPassou
- SnykPassou
Perguntas
Como instalar a Figma Code Connect no Claude Code?
Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Figma Code Connect, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.
O que a figma-code-connect precisa pra funcionar?
Do servidor MCP do Figma conectado, de componentes publicados numa biblioteca de equipe e de conta Figma no plano Organization ou Enterprise: o Code Connect não existe nos planos Free e Professional. O link precisa ter o node-id.
Ela desenha ou cria componente?
Não. Ela só cria o arquivo que liga um componente que já existe no Figma a um que já existe no código. Se o componente não está publicado ou já está ligado, ela avisa e para.
Roda no Codex e no Antigravity?
Roda em agente que leia skills e tenha o MCP do Figma ligado, porque o trabalho todo depende das ferramentas desse servidor. Sem o MCP, a skill não começa.
Levar essa skill
1x figma-code-connectR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/figma/mcp-server-guide
Aprenda a usar
- Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.
Na mesma prateleira
Ver as 1.414 skills do corredorFigma
figma-
O Claude lê o código do seu site ou app e monta no Figma as cores, espaçamentos e componentes iguais aos do código, prontos pra quem desenha usar.OficialAuditada4.400 instalações, grátisgenerate- library ibelick
create-
O Claude lê o código ou o site e registra num DESIGN.md as cores, fontes e regras visuais, pra toda tela nova sair no mesmo padrão.Auditada4.400 instalações, grátisdesign- md agents365-ai
tldraw-
Você descreve um processo ou um sistema e recebe o diagrama em imagem, com traço de quadro branco, pronto pra explicar pro time, pro cliente ou num post.Auditada3.700 instalações, grátisskill hairyf
tailwindcss
O Claude estiliza suas páginas com o Tailwind v4 do jeito atual, com o tema da sua marca, versão de celular e modo escuro, sem cair na sintaxe da versão 3.Auditada3.600 instalações, grátishamen
material-
As telas do seu app Android, Flutter ou web saem com cores, fontes, cantos e componentes no padrão do Google, e com nota de conformidade se você pedir.3.300 instalações, grátis3 nexu-io
apple-
Indica pro agente o pacote com as regras de interface da Apple, em 14 skills, pra desenhar app de iPhone, Mac, Apple Watch, Vision Pro e Apple TV.Auditada3.200 instalações, grátishig yetone
kill-
Varre o projeto, aponta arquivo e linha de tudo que denuncia site feito por IA e corrige só o que você aprovar.Auditada3.200 instalações, grátisai- slop mindrally
framer-
O Claude anima o seu site React do jeito que roda liso: movimento que não engasga, molas naturais e respeito a quem prefere menos movimento.Auditada3.000 instalações, grátismotion
Mais da loja Figma
Ver a loja Figmafigma-
O Claude cria e ajusta telas, componentes e variáveis direto no seu arquivo do Figma, seguindo o padrão que o arquivo já tem.OficialAuditada9.100 instalações, grátisuse figma-
A tela do seu app vira um arquivo editável no Figma, com os componentes e as cores do design system em vez de print ou caixa solta.OficialAuditada5.900 instalações, grátisgenerate- design implement-
Transforma designs do Figma em código pronto pra produção, com fidelidade visual 1:1Oficial5.900 instalações, grátisdesign figma-
Cria um arquivo novo no Figma, seja Design, FigJam ou SlidesOficialAuditada3.500 instalações, grátiscreate- new- file figma-
A tela que sai do Figma fica igual ao desenho, usa os componentes que o seu projeto já tem e não deixa imagem faltando nem link temporário.Oficial2.500 instalações, grátisdesign- to- code figma-
Carrega as regras obrigatórias antes de qualquer chamada generate_diagram do Figma para gerar diagramasOficialAuditada2.000 instalações, grátisgenerate- diagram figma-
Ensina o agente a usar a ferramenta use_figma do MCP do Figma no contexto do FigJamOficialAuditada2.000 instalações, grátisuse- figjam figma-
Ensina o agente a usar o MCP do Figma em Slides, com a Plugin API, para criar e editar apresentaçõesOficialAuditada1.700 instalações, grátisuse- slides create-
Gera regras de design system sob medida pro seu código, pros agentes de IA produzirem interfaces consistentesOficial1.300 instalações, grátisdesign- system- rules figma-
Traduz designs do Figma em código SwiftUI e também faz o caminho contrárioOficialAuditada1.300 instalações, grátisswiftui figma-
Transforma animações e transições do Figma em código de aplicação pronto para produçãoOficialAuditada1.200 instalações, grátisimplement- motion figma-
Anima nós do Figma pela ferramenta use_figma, com keyframes, estilos de animação, easing e duraçãoOficialAuditada1.100 instalações, grátisuse- motion