Skip to main content
Glama

view_node

Retrieve a thumbnail image for a specific design element in a Figma file to visually identify and analyze components within your design projects.

Instructions

Get a thumbnail for a specific node in a Figma file

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
file_keyYesThe key of the Figma file
node_idYesThe ID of the node to view. Node ids have the format `<number>:<number>`

Implementation Reference

  • Defines the Tool object for 'view_node' including name, description, and input schema.
    const VIEW_NODE: Tool = { name: "view_node", description: "Get a thumbnail for a specific node in a Figma file", inputSchema: { type: "object", properties: { file_key: { type: "string", description: "The key of the Figma file", }, node_id: { type: "string", description: "The ID of the node to view. Node ids have the format `<number>:<number>`", }, }, required: ["file_key", "node_id"], }, };
  • Implements the core logic of the view_node tool: fetches thumbnail using getThumbnails and returns it as a base64 image.
    async function doViewNode(fileKey: string, nodeId: string): Promise<CallToolResult> { const thumbnails = await getThumbnails(fileKey, [nodeId]); const nodeThumb = thumbnails[nodeId]; if (!nodeThumb) { throw new Error(`Could not get thumbnail for node ${nodeId}`); } const b64 = await imageUrlToBase64(nodeThumb); return { content: [ { type: "text", text: `Thumbnail for node ${nodeId}:`, }, { type: "image", data: b64, mimeType: "image/png", }, ], }; }
  • index.ts:138-140 (registration)
    Registers the VIEW_NODE tool in the MCP server's list of available tools.
    server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ADD_FIGMA_FILE, VIEW_NODE, READ_COMMENTS, POST_COMMENT, REPLY_TO_COMMENT], }));
  • index.ts:270-273 (registration)
    Dispatches calls to the view_node tool by invoking the doViewNode handler.
    if (request.params.name === "view_node") { const input = request.params.arguments as { file_key: string; node_id: string }; return doViewNode(input.file_key, input.node_id); }

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/MatthewDailey/figma-mcp'

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