Claude Talk to Figma, my first MCP server

Published on
🦀 Puedes leer este post en español.
Theodore thinking

Last week Marc, a colleague from the amazing UX/UI team at Making Science, shared with us an MCP server to connect Cursor to Figma and provide its agents with the ability not only to view designs in Figma, but also to manipulate them 😳

The MCP was Cursor Talk to Figma, by Sunny Lazuardi. If you're looking for a way to connect Cursor with Figma, look no further, this is your MCP 👌🏻

Since I have a Cursor license, I told him I could install it and do a test with them. The test went well, it was actually quite surprising to see Cursor's agent take control of Figma and modify a design, but shortly after I began to wonder if this was the right way for the UX/UI team to introduce AI into their workflow, mainly because Cursor is a tool focused on code development.

Reviewing the MCP code, I saw that perhaps it could be adapted for use in Claude Desktop, since my UX/UI colleagues have licenses for this tool. The truth is that the original could already connect to Claude, but the way to do it wasn't obvious and wasn't described in the documentation, so with the aim of tinkering a bit and learning how an MCP server works from the inside, I got to work:

  1. I wrote a script to configure Claude automatically by running a command via terminal: bun run configure-claude.
  2. Extended the socket features:
    1. Improved logging
    2. Creation of status endpoint /status
    3. Channel system to allow different clients to join specific channels
    4. Inclusion of statistics for each channel
  3. Added tests to verify correct project integration.
  4. Wrote a README.md with documentation now oriented toward its use in Claude.
  5. Published the MCP server as an npm package.
  6. Published the project on GitHub...

And voilà, my first MCP server: Claude Talk To Figma MCP 🥳

Update, April 11

After a few days of testing, the UX/UI team detected that in the initial collection of tools for modifying designs, some important ones were missing such as auto layout (layoutMode, paddingTop, paddingBottom, etc.), typography control (fontName, fontSize, fontWeight, etc.) or shape creation (createEllipse, createPolygon, createStar, etc.), so we are currently adding them little by little. You can follow the progress in the project's changelog.