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
| Name | Required | Description | Default |
|---|---|---|---|
| nodeId | Yes | The ID of the node to export | |
| format | No | Export format | |
| scale | No | Export scale |
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) }`, }, ], }; } } );
- 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; }