Cursor Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:954-1012 (handler)

  Actual Figma plugin handler that exports the specified node as an image (PNG by default), applies scale constraint, converts bytes to base64, and returns image data with MIME type.

  async function exportNodeAsImage(params) {
    const { nodeId, scale = 1 } = params || {};
  
    const format = "PNG";
  
    if (!nodeId) {
      throw new Error("Missing nodeId parameter");
    }
  
    const node = await figma.getNodeByIdAsync(nodeId);
    if (!node) {
      throw new Error(`Node not found with ID: ${nodeId}`);
    }
  
    if (!("exportAsync" in node)) {
      throw new Error(`Node does not support exporting: ${nodeId}`);
    }
  
    try {
      const settings = {
        format: format,
        constraint: { type: "SCALE", value: scale },
      };
  
      const bytes = await node.exportAsync(settings);
  
      let mimeType;
      switch (format) {
        case "PNG":
          mimeType = "image/png";
          break;
        case "JPG":
          mimeType = "image/jpeg";
          break;
        case "SVG":
          mimeType = "image/svg+xml";
          break;
        case "PDF":
          mimeType = "application/pdf";
          break;
        default:
          mimeType = "application/octet-stream";
      }
  
      // Proper way to convert Uint8Array to base64
      const base64 = customBase64Encode(bytes);
      // const imageData = `data:${mimeType};base64,${base64}`;
  
      return {
        nodeId,
        format,
        scale,
        mimeType,
        imageData: base64,
      };
    } catch (error) {
      throw new Error(`Error exporting node as image: ${error.message}`);
    }
  }

• src/talk_to_figma_mcp/server.ts:830-872 (registration)

  MCP server tool registration, input schema validation (nodeId required, optional format and scale), and proxy handler that forwards the request to the Figma plugin via WebSocket and returns image content.

  // Export Node as Image Tool
  server.tool(
    "export_node_as_image",
    "Export a node as an image from Figma",
    {
      nodeId: z.string().describe("The ID of the node to export"),
      format: z
        .enum(["PNG", "JPG", "SVG", "PDF"])
        .optional()
        .describe("Export format"),
      scale: z.number().positive().optional().describe("Export scale"),
    },
    async ({ nodeId, format, scale }) => {
      try {
        const result = await sendCommandToFigma("export_node_as_image", {
          nodeId,
          format: format || "PNG",
          scale: scale || 1,
        });
        const typedResult = result as { imageData: string; mimeType: string };
  
        return {
          content: [
            {
              type: "image",
              data: typedResult.imageData,
              mimeType: typedResult.mimeType || "image/png",
            },
          ],
        };
      } catch (error) {
        return {
          content: [
            {
              type: "text",
              text: `Error exporting node as image: ${error instanceof Error ? error.message : String(error)
                }`,
            },
          ],
        };
      }
    }
  );

• src/talk_to_figma_mcp/server.ts:834-841 (schema)

  Zod schema for tool inputs: nodeId (string), format (PNG|JPG|SVG|PDF optional), scale (positive number optional).

  {
    nodeId: z.string().describe("The ID of the node to export"),
    format: z
      .enum(["PNG", "JPG", "SVG", "PDF"])
      .optional()
      .describe("Export format"),
    scale: z.number().positive().optional().describe("Export scale"),
  },

• src/cursor_mcp_plugin/code.js:1013-1063 (helper)

  Custom base64 encoder for Uint8Array bytes returned from Figma's exportAsync, used because standard methods may not work reliably in Figma plugin context.

  function customBase64Encode(bytes) {
    const chars =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
    let base64 = "";
  
    const byteLength = bytes.byteLength;
    const byteRemainder = byteLength % 3;
    const mainLength = byteLength - byteRemainder;
  
    let a, b, c, d;
    let chunk;
  
    // Main loop deals with bytes in chunks of 3
    for (let i = 0; i < mainLength; i = i + 3) {
      // Combine the three bytes into a single integer
      chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
  
      // Use bitmasks to extract 6-bit segments from the triplet
      a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
      b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
      c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
      d = chunk & 63; // 63 = 2^6 - 1
  
      // Convert the raw binary segments to the appropriate ASCII encoding
      base64 += chars[a] + chars[b] + chars[c] + chars[d];
    }
  
    // Deal with the remaining bytes and padding
    if (byteRemainder === 1) {
      chunk = bytes[mainLength];
  
      a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
  
      // Set the 4 least significant bits to zero
      b = (chunk & 3) << 4; // 3 = 2^2 - 1
  
      base64 += chars[a] + chars[b] + "==";
    } else if (byteRemainder === 2) {
      chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
  
      a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
      b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
  
      // Set the 2 least significant bits to zero
      c = (chunk & 15) << 2; // 15 = 2^4 - 1
  
      base64 += chars[a] + chars[b] + chars[c] + "=";
    }
  
    return base64;
  }