add_figma_file
Add a Figma file URL to your context using the Figma MCP Server, enabling AI assistants to view, comment, and analyze designs directly in 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 primary handler function for the 'add_figma_file' tool. Parses the Figma file key from the input URL, downloads the file data and thumbnail using imported helpers, and constructs a multimodal response containing file metadata, thumbnail image, document JSON, and placeholders for canvas thumbnails.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)The Tool object definition for 'add_figma_file', including name, description, and input schema specifying a required 'url' string parameter.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)Registration of the 'add_figma_file' tool (as ADD_FIGMA_FILE) in the MCP server's listTools request handler.server.setRequestHandler(ListToolsRequestSchema, async () => ({ tools: [ADD_FIGMA_FILE, VIEW_NODE, READ_COMMENTS, POST_COMMENT, REPLY_TO_COMMENT], }));
- figma_api.ts:55-66 (helper)Helper function that fetches the Figma file JSON from the Figma API using the file key and converts the thumbnail URL to base64 for inclusion in the tool response.export async function downloadFigmaFile(key: string): Promise<FigFile> { const response = await axios.get(`https://api.figma.com/v1/files/${key}`, { headers: { "X-FIGMA-TOKEN": getFigmaApiKey(), }, }); const data = response.data; return { ...data, thumbnailB64: await imageUrlToBase64(data.thumbnailUrl), }; }
- figma_api.ts:11-21 (helper)Helper function to parse and extract the Figma file key from the provided URL using a regular expression.export function parseKeyFromUrl(url: string) { // Extract key from URLs like: // https://www.figma.com/board/vJzJ1oVCzowAKAayQJx6Ug/... // https://www.figma.com/design/8SvxepW26v4d0AyyTAw23c/... // https://www.figma.com/file/8SvxepW26v4d0AyyTAw23c/... const matches = url.match(/figma\.com\/(board|design|file)\/([^/?]+)/); if (matches) { return matches[2]; // Return the second capture group which contains the key } throw new Error("Could not parse Figma key from URL"); }