add_figma_file
Add a Figma file to your AI assistant's context by providing its URL, enabling design analysis and collaboration within chat interfaces.
Instructions
Add a Figma file to your context
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | The URL of the Figma file to add |
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); }