Figma Design To Code skill

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.

por FigmaPublicada pela própria empresa

instalações: 2.500
estrelas no GitHub: 2.112
No skills.sh desde: julho 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.

Figma
figma-design-to-code
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átis

O que ela faz

Skill oficial do Figma que o agente lê antes de chamar o get_design_context, a ferramenta do MCP do Figma que entrega o desenho como código. Ela obriga a pedir um print da tela junto, que vira o alvo visual, e, quando a resposta vem incompleta, a buscar de novo cada parte visível.

Na hora de programar, o código que vem do Figma é tratado como protótipo: o agente adapta ao jeito do projeto, troca posição fixa por layout de verdade e reaproveita componentes, cores e espaçamentos que já existem, respeitando o Code Connect. Cada imagem e SVG vai no lugar exato, baixado pro projeto.

No fim, confere só a tela pedida: cada imagem tem arquivo, posição e tamanho certos. Uma imagem trocada ou desproporcional já reprova a entrega, e o que estava errado fora do escopo é anotado, não alterado.

Nas palavras de quem fez

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user…

Figma, no SKILL.md

Quando usar

Transformar uma landing page desenhada no Figma em código
Passar um componente do Figma pro design system do projeto
Construir uma página nova a partir do protótipo do designer
Refazer uma tela que saiu diferente do desenho do Figma

Depois de instalar, é só pedir assim

Implementa essa tela do Figma no meu projeto Next.js usando os componentes que já existem: <link do Figma>
Transforma esse frame do Figma em código e confere se ficou igual ao print
Constrói o card de preço desse link do Figma e baixa os ícones pro projeto

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
SnykAlerta

Perguntas

Como instalar a Figma Design To Code 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 Design To Code, 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-design-to-code skill precisa pra funcionar?

Do servidor MCP do Figma conectado ao agente e de acesso ao arquivo. No plano Starter, ou com assento View ou Collab em plano pago, o Figma limita a 6 chamadas por mês; com assento Dev ou Full nos planos Professional, Organization ou Enterprise, o limite é por minuto.

Ela cria o design no Figma?

Não. O caminho é do Figma pro código. Pra desenhar ou mexer no arquivo do Figma existem outras skills no mesmo repositório, como a figma-generate-design.

Roda no Codex e no Antigravity?

Roda em qualquer agente com o MCP do Figma conectado. O guia oficial mostra a instalação no VS Code, no Cursor, no Claude Code e no Gemini CLI, e explica como ligar em outros editores.

Levar essa skill

1x figma-design-to-codeR$ 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

Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.