Skip to main content
Glama
arinspunk

Claude Talk to Figma MCP

by arinspunk

export_node_as_image

Export Figma design elements as PNG, JPG, SVG, or PDF images by specifying node ID and scale for design documentation and asset creation.

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

  • The main handler function for the 'export_node_as_image' MCP tool. It forwards the parameters to the Figma plugin via sendCommandToFigma and returns the resulting image data in MCP format.
    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 input validation of the 'export_node_as_image' tool parameters.
    {
      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"),
    },
  • Registration of the 'export_node_as_image' tool with the MCP server using server.tool(), specifying name, description, input schema, and handler.
    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)}`,
              },
            ],
          };
        }
      }
    );
  • The 'export_node_as_image' command is included in the FigmaCommand type union used for TypeScript typing of Figma plugin commands.
    | "export_node_as_image"
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries full burden for behavioral disclosure. It states 'Export' but doesn't clarify if this is a read-only operation (likely, but not confirmed), what happens on failure, whether it requires specific permissions, or how the image is delivered (e.g., as data, file path). The description adds minimal context beyond the basic action, leaving key behavioral traits unspecified.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, front-loaded sentence with zero waste—it directly states the tool's purpose without fluff. Every word earns its place, making it highly efficient and easy to parse. This is an example of optimal conciseness for a straightforward tool.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given 3 parameters with full schema coverage and no output schema, the description is minimally complete for a basic export operation. It lacks details on output (e.g., image data format, error handling), permissions, or integration with sibling tools, which would be helpful for an agent. However, for a tool with clear parameters and no annotations, it meets the bare minimum without being misleading.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the schema fully documents parameters (nodeId, format, scale). The description adds no meaning beyond what the schema provides—it doesn't explain parameter interactions, default behaviors, or practical examples (e.g., typical scale values). Baseline 3 is appropriate as the schema does the heavy lifting, but the description doesn't compensate with extra insights.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Export') and resource ('a node as an image from Figma'), making the purpose immediately understandable. It distinguishes from siblings like 'get_node_info' or 'delete_node' by focusing on export functionality. However, it doesn't specify what types of nodes can be exported or the exact output nature beyond 'image'.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites (e.g., needing a valid node ID from another operation), compare with sibling tools like 'flatten_node' for preprocessing, or specify use cases (e.g., for sharing visuals vs. editing). Usage is implied only by the tool name and basic purpose.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

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/arinspunk/claude-talk-to-figma-mcp'

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