Figwright: MCP Figma bidirecional grátis, lê o design e escreve a tela

Para quem

Se você quer que um agente de IA faça mais do que «olhar» o Figma — conectar o plugin oficial por um relé WebSocket local, ler designs e escrever a tela — este MCP bidirecional grátis combina. Ele mira Claude Code, Cursor, Codex e qualquer cliente MCP. Há 113 ferramentas cobrindo leitura, escrita e grounding, então um agente pode implementar a partir do design e também montar na tela. Roda no plano grátis do Figma, ao contrário do Dev Mode MCP oficial que pede assento pago. Serve para colaboração de design nesta máquina. Não serve chamar ferramentas de escrita sem desktop ou com o plugin desconectado, nem tratar as 113 ferramentas não nomeadas como uma API conhecida. O resumo diz que os dados ficam nesta máquina; ler arquivos e escrever a tela ainda são uma fronteira de privacidade local, não «sem leituras locais».

Primeira tentativa em 3 minutos

Confirme primeiro um cliente MCP, o Figma desktop e Node.js 20.19+ ou 22.12+. O texto oficial diz que Node 18/21 e 22.0–22.11 não são suportados; o servidor é puxado à parte pelo npx e essa versão pode diferir do Node de build do projeto. O plano grátis basta, mas importar o plugin precisa do app desktop. A configuração principal do cliente é:

npx -y @figwright/mcp@latest

Não precisa de instalação global. Após iniciar, importe o plugin no Figma desktop conforme o repo e confirme que o relé WebSocket local está conectado. Faça primeiro uma leitura de baixo risco: escolha uma ferramenta somente leitura ou grounding na lista do cliente e inspecione a seleção ou a estrutura da página. A evidência não nomeia as 113 ferramentas; se faltarem, chame a lista e não invente uma API de camadas. O sinal de sucesso é uma estrutura de design devolvida, não uma tela reescrita. Você deve ver uma leitura bem-sucedida antes de escrever a tela. O opcional npx skills add awdr74100/figwright/skills não é o caminho principal e o skill exige MCP já conectado. Repositório: https://github.com/awdr74100/figwright

Casos de uso

Caso 1: implementar a partir do design. Com o plugin conectado, use ferramentas de leitura/grounding para entender a estrutura framework-aware e produzir código nesta máquina. O título diz que o design pode virar código framework-aware. A evidência não escreve quais nomes de framework são suportados; se faltarem, siga a estrutura que o cliente devolver e não invente um formato de exportação.

Caso 2: escrever o resultado de volta na tela. Quando o agente deve montar no Figma ou devolver código, use ferramentas de escrita da tela. Isso muda o arquivo de design e tem efeitos colaterais: confirme primeiro que o arquivo atual é uma cópia descartável ou o que você quer mudar, depois execute. A evidência só garante bidirecional, não somente leitura; não há passo de desfazer. Se falhar, use o histórico do Figma; não invente um comando undo.

Limites de uso

Sem desktop não se importa o plugin e o relé não conecta. Não force uma versão de Node sem suporte. Os 113 nomes de ferramenta não estão publicados; não os invente. Escrita muda a tela; não escreva em lote antes de uma leitura bem-sucedida. Os limites pagos do Dev Mode MCP oficial não se aplicam ao Figwright, mas o Figwright também não substitui um assento oficial do Figma. O pacote de skill é extra e não substitui @figwright/mcp. Não presuma que o agente não vê seus arquivos de design. A primeira tentativa usa só npx -y @figwright/mcp@latest; o sucesso é um retorno de estrutura somente leitura.