Figma MCP Server

Instructions

Implementation Reference

• index.ts:142-193 (handler)

  The handler function that parses the Figma URL, downloads the file metadata and JSON, retrieves thumbnail, and returns a structured response with text, image, and JSON content blocks.

  async function doAddFigmaFile(url: string): Promise<CallToolResult> {
    const key = parseKeyFromUrl(url);
    const figFileJson = await downloadFigmaFile(key);
    // Claude seems to error when this is used
    // const thumbnails = await getThumbnailsOfCanvases(key, figFileJson.document);
    return {
      content: [
        {
          type: "text",
          text: JSON.stringify({
            name: figFileJson.name,
            key,
            version: figFileJson.version,
          }),
        },
        {
          type: "text",
          text: "Here is the thumbnail of the Figma file",
        },
        {
          type: "image",
          data: figFileJson.thumbnailB64,
          mimeType: "image/png",
        },
        {
          type: "text",
          text: "Here is the JSON representation of the Figma file",
        },
        {
          type: "text",
          text: JSON.stringify(figFileJson.document),
        },
        {
          type: "text",
          text: "Here are thumbnails of the canvases in the Figma file",
        },
        // ...thumbnails
        //   .map((thumbnail) => [
        //     {
        //       type: "text" as const,
        //       text: `Next is the image of canvas ID: ${thumbnail.id}`,
        //     },
        //     {
        //       type: "image" as const,
        //       data: thumbnail.b64,
        //       mimeType: "image/png",
        //     },
        //   ])
        //   .flat(),
      ],
    };
  }

• index.ts:34-47 (schema)

  Defines the Tool object for 'add_figma_file' including name, description, and input schema (object with required 'url' string).

  const ADD_FIGMA_FILE: Tool = {
    name: "add_figma_file",
    description: "Add a Figma file to your context",
    inputSchema: {
      type: "object",
      properties: {
        url: {
          type: "string",
          description: "The URL of the Figma file to add",
        },
      },
      required: ["url"],
    },
  };

• index.ts:138-140 (registration)

  Registers the ADD_FIGMA_FILE tool in the server's list of available tools for ListToolsRequest.

  server.setRequestHandler(ListToolsRequestSchema, async () => ({
    tools: [ADD_FIGMA_FILE, VIEW_NODE, READ_COMMENTS, POST_COMMENT, REPLY_TO_COMMENT],
  }));

• index.ts:264-268 (registration)

  In the CallToolRequestHandler, matches the tool name 'add_figma_file' and dispatches to the doAddFigmaFile handler.

  if (request.params.name === "add_figma_file") {
    console.error("Adding Figma file", request.params.arguments);
    const input = request.params.arguments as { url: string };
    return doAddFigmaFile(input.url);
  }