Name: Figma Design to Code
Author: Figma

Figma Design to Code

Implemente frames do Figma como código de produção usando o servidor MCP oficial do Figma.

Oficial do fabricantepor FigmaVerificado em 18 de outubro de 2026

Instale Figma Design to Code grátis

Deixe seu email e os passos de instalação abrem aqui mesmo: um prompt para colar na sua ferramenta de IA. Vale para as 149 skills.

A skill oficial do Figma para transformar um design do Figma em código com o servidor MCP dele. Ela explica ao Claude como puxar o contexto de design certo, mapear para os seus componentes e conferir o resultado com o frame original.

Para quem é

Desenvolvedores frontend
Designers que programam
Equipes de produto

Prompts para testar

Com a skill instalada, peça o resultado com suas palavras. Sua ferramenta de IA usa a skill sozinha.

Prompt 1

Implemente este frame do Figma como um componente React: <figma link>

Prompt 2

Monte a página de preços a partir do nosso arquivo do Figma usando nossos componentes de botão existentes

Prompt 3

Transforme esta tela mobile do Figma em SwiftUI

Como instalar

As skills seguem o padrão aberto Agent Skills, então esta não depende de uma única empresa. Escolha a ferramenta de IA que você usa. Na dúvida? A primeira aba cobre a maioria em um passo só.

Mais fácil: cole isto em sua ferramenta de IA

Instale esta skill para mim para que ela funcione em todos os projetos: rode `npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code -g -y` no meu terminal. Se faltar o Node.js, me diga primeiro como instalar. Quando terminar, confirme que a skill foi instalada e me diga como começar a usar.

Ou faça você mesmo:

Um comando instala a skill nas ferramentas de IA do seu computador. Ele encontra as que você tem e pergunta em quais adicionar: Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, OpenCode e mais de 60 outras.

$npx skills add https://github.com/figma/mcp-server-guide/tree/main/skills/figma-design-to-code -g

Você precisa ter o Node.js instalado (grátis, em nodejs.org). A opção -g deixa a skill disponível em todos os projetos.

Bom saber: O plugin do Figma traz mais skills, incluindo escrever no canvas, design systems, FigJam e Slides.

Libere os passos de instalação

Grátis. Deixe seu email uma vez para liberar os passos de instalação das 149 skills e receber as melhores skills novas todo mês.

Como verificamos

Confirmamos a skill na fonte original em 18 de outubro de 2026: o SKILL.md está onde deveria, os arquivos foram atualizados no último ano e a licença permite o uso. Ainda não a testamos em uma tarefa.