Talk to Figma MCP

Instructions

Implementation Reference

• src/cursor_mcp_plugin/code.js:674-735 (handler)

  Core handler function that fetches the Figma node by ID, exports it as image bytes using Figma's exportAsync API with specified format and scale, converts the bytes to a base64-encoded data URL, and returns the image data along with metadata.

  async function exportNodeAsImage(params) {
    const { nodeId, format = "PNG", scale = 1 } = params || {};
  
    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";
      }
  
      // Convert to base64
      const uint8Array = new Uint8Array(bytes);
      let binary = "";
      for (let i = 0; i < uint8Array.length; i++) {
        binary += String.fromCharCode(uint8Array[i]);
      }
      const base64 = btoa(binary);
      const imageData = `data:${mimeType};base64,${base64}`;
  
      return {
        nodeId,
        format,
        scale,
        mimeType,
        imageData,
      };
    } catch (error) {
      throw new Error(`Error exporting node as image: ${error.message}`);
    }
  }

• src/cursor_mcp_plugin/code.js:97-98 (registration)

  Switch case registration/dispatch in the main command handler that routes 'export_node_as_image' calls to the exportNodeAsImage function.

  case "export_node_as_image":
    return await exportNodeAsImage(params);

• src/talk_to_figma_mcp/server.ts:566-602 (registration)

  MCP server tool registration including name, description, Zod input schema validation, and wrapper handler that proxies the call to the Figma plugin via sendCommandToFigma.

    "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:759-778 (schema)

  TypeScript union type defining allowed Figma commands, including 'export_node_as_image' for type safety in command sending.

  type FigmaCommand =
    | 'get_document_info'
    | 'get_selection'
    | 'get_node_info'
    | 'create_rectangle'
    | 'create_frame'
    | 'create_text'
    | 'set_fill_color'
    | 'set_stroke_color'
    | 'move_node'
    | 'resize_node'
    | 'delete_node'
    | 'get_styles'
    | 'get_local_components'
    | 'get_team_components'
    | 'create_component_instance'
    | 'export_node_as_image'
    | 'execute_code'
    | 'join'
    | 'set_corner_radius';