Skip to main content
Glama
paragdesai1

Cursor Talk to Figma MCP

by paragdesai1

export_node_as_image

Export Figma design elements as images in PNG, JPG, SVG, or PDF formats for use in documentation, presentations, or development workflows.

Instructions

Export a node as an image from Figma

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
nodeIdYesThe ID of the node to export
formatNoExport format
scaleNoExport scale

Implementation Reference

  • 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}`); } }
  • 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) }`, }, ], }; } } );
  • 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"), },
  • 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; }

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/paragdesai1/parag-Figma-MCP'

If you have feedback or need assistance with the MCP directory API, please join our Discord server