MCP Server Not Using Code Connect Mappings for Angular Components

[Flya]

Issue Summary: MCP server returns generic React/Tailwind code instead of configured Angular Code Connect mappings when using get-design-context.

Steps to Reproduce:

• Set up Code Connect CLI mapping for Angular component using @figma/code-connect/html
• Successfully publish mapping with figma connect publish (no errors)
• Verify connection shows in Figma Dev Mode with "connected" label
• Select connected component in Dev Mode
• Call get-design-context from MCP server

Expected Result: MCP server should return Angular component code (e.g., ) as defined in Code Connect mapping.

Actual Result: MCP server returns generic React/Tailwind HTML instead of the mapped Angular component code.

Environment:

• Code Connect CLI: v1.3.9
• Figma: v125.9.10
• Framework: Angular
• Code Connect mapping language: HTML
• OS: macOS

Additional Context:

Code Connect mapping works correctly in Figma UI (shows connected Angular code) Issue occurs for both individual component selection and frame-level selections Mapping successfully published and visible in Dev Mode Node mapping confirmed: 3:2230 → custom-select from @components/custom-select

[ki-ichino-nec]

I have the same problem.

Figma MCP server returned Angular code inside <CodeConnectSnippet> three days ago. But, the server now returns <CodeConnectSnippet> including React code.

The Code Connect mapping has been published successfully, and the connected code is shown correctly in Dev Mode.

[mogohuu]

It’s been two weeks. Any updates?

[adbutterfield]

I hit this issue as well, and after digging into it a bit, it seems that custom parser/no-parser templates are not evaluated by the MCP.

I tested by creating two code connect files which give the same output in the Figma UI:

• One using the React parser
• One using a custom parser (essentially equivalent to no-parser)

Using the React parser, we get code correct code returned from the MCP, with custom parser we only get the "default" code.

Investigating further, it appears that the React parser templates use a different figma API (it appears to be an "internal" API) than custom parser templates use.

Following that I (by that I mean Claude) set up a custom parser that uses the the same internal APIs as the React parser. After publishing that template I was able to get the MCP to return the correct code.

I filed a support ticket with Figma. Not totally clear if this is solely an issue with this library, or the MCP, or both.

[ki-ichino-nec]

The following template (no parser) is successful.

const figma = require('figma');

export default figma.tsx`<p>Hello</p>`;

But, figma.tsx will be an internal tag function used in the React parser. I don't know the difference between figma.html and figma.tsx.

[adbutterfield]

The following template (no parser) is successful.

const figma = require('figma');

export default figma.tsx<p>Hello</p>; But, figma.tsx will be an internal tag function used in the React parser. I don't know the difference between figma.html and figma.tsx.

Interesting. I've been using the figma.code, like documented in the docs

[adbutterfield]

Oh!!! I just figured out the fix for my problem. A simple change to the templates:

- example: figma.code`${code}`,
+ ...figma.code`${code}`,

Now the MCP returns the correct code. 🙇

[ki-ichino-nec]

FYI

I examined values of figma.html, figma.code and figma.tsx.

• The only difference is language value.
• They don't have example property.

figma.html

// Value of figma.html`<p>Hello</p>`
{
  "sections": [
    {
      "type": "CODE",
      "code": "<p>Hello</p>"
    }
  ],
  "language": "html",
  "type": "SECTIONS"
}

figma.code

// Value of figma.code`<p>Hello</p>`
{
  "sections": [
    {
      "type": "CODE",
      "code": "<p>Hello</p>"
    }
  ],
  "language": "custom",
  "type": "SECTIONS"
}

figma.tsx

// Value of figma.tsx`<p>Hello</p>`
{
  "sections": [
    {
      "type": "CODE",
      "code": "<p>Hello</p>"
    }
  ],
  "language": "jsx",
  "type": "SECTIONS"
}