Claude Talk to Figma, o meu primeiro servidor MCP

Publicado a
🦑 Podes ler este post em espanhol. 🐙 You can read this post in english.
Theodore a pensar

Na semana passada o Marc, colega da incrível equipa UX/UI da Making Science, passou-nos um servidor MCP para conectar Cursor ao Figma e proporcionar aos seus agentes a capacidade não só de ver designs no Figma, mas também de os manipular 😳

O MCP era o Cursor Talk to Figma, do Sunny Lazuardi. Se estás à procura da forma de conectar Cursor com Figma não procures mais, este é o teu MCP 👌🏻

Como tenho uma licença do Cursor, disse-lhe que podia instalá-lo e fazer com eles uma prova. A prova correu bem, a verdade é que foi bastante surpreendente ver o agente do Cursor tomar o controlo do Figma e modificar um design, mas pouco depois entrou-me a dúvida se seria a forma correta da equipa de UX/UI introduzir no seu fluxo de trabalho a IA, fundamentalmente porque Cursor é uma ferramenta focada no desenvolvimento de código.

Revisando o código do MCP vi que talvez se pudesse adaptar para usá-lo no Claude Desktop, já que os meus colegas de UX/UI têm licenças desta ferramenta. O certo é que o original já se podia conectar ao Claude, mas a forma de o fazer não era evidente e não estava descrita na documentação, por isso com ânimo de mexer um pouco e aprender como funciona um servidor MCP por dentro, pus-me a trabalhar:

  1. Escrevi um script para configurar Claude de forma automática lançando um comando via terminal: bun run configure-claude.
  2. Ampliei as características do socket:
    1. Logging melhorado
    2. Criação de endpoint de estado /status
    3. Sistema de canais para permitir que diferentes clientes se juntem a canais específicos
    4. Inclusão de estatísticas de cada canal
  3. Adicionei testes para comprovar a correta integração do projeto.
  4. Redigi um README.md com a documentação já orientada para o seu uso no Claude.
  5. Publiquei o servidor MCP como pacote de npm.
  6. Publiquei o projeto no GitHub...

E voilá, o meu primeiro servidor MCP: Claude Talk To Figma MCP 🥳

Atualização, 11 de abril

Depois de uns dias de testes, a equipa de UX/UI detetou que na coleção inicial de ferramentas para modificar designs faltavam algumas importantes como auto layout (layoutMode, paddingTop, paddingBottom, etc.), controlo tipográfico (fontName, fontSize, fontWeight, etc.) ou criação de formas (createEllipse, createPolygon, createStar, etc.), por isso atualmente estamos a adicioná-las pouco a pouco. Podes seguir o progresso no changelog do projeto.