Figma MCP Server

Instructions

Implementation Reference

• index.ts:49-66 (schema)

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

• index.ts:195-215 (handler)

  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);
  }