Figma MCP Server

/** * Component Extraction Tools * MCP tools for extracting and analyzing Figma components */ export function registerComponentExtractionTools(protocol, figmaClient) { // List components protocol.registerTool("list_components", { description: "List all components available in a Figma file", inputSchema: { type: "object", properties: { fileKey: { type: "string", description: "Figma file key", }, }, required: ["fileKey"], }, handler: async (args) => { const { fileKey } = args; const fileData = await figmaClient.getFile(fileKey); const components = fileData.components || {}; const componentSets = fileData.componentSets || {}; return { fileKey, components: Object.values(components).map((comp) => ({ key: comp.key, name: comp.name, description: comp.description || "", componentSetId: comp.componentSetId, })), componentSets: Object.values(componentSets).map((set) => ({ key: set.key, name: set.name, description: set.description || "", })), }; }, }); // Get component details protocol.registerTool("get_component_details", { description: "Get detailed information about a specific component including properties and variants", inputSchema: { type: "object", properties: { fileKey: { type: "string", description: "Figma file key", }, componentKey: { type: "string", description: "Component key (ID)", }, }, required: ["fileKey", "componentKey"], }, handler: async (args) => { const { fileKey, componentKey } = args; const fileData = await figmaClient.getFile(fileKey); const components = fileData.components || {}; const component = components[componentKey]; if (!component) { throw new Error(`Component ${componentKey} not found in file`); } // Find the node in the document tree const findNode = (node, targetId) => { if (node.id === targetId) { return node; } if (node.children) { for (const child of node.children) { const found = findNode(child, targetId); if (found) return found; } } return null; }; const componentNode = findNode(fileData.document, componentKey); return { fileKey, component: { key: component.key, name: component.name, description: component.description || "", componentSetId: component.componentSetId, documentationLinks: component.documentationLinks || [], node: componentNode ? { id: componentNode.id, name: componentNode.name, type: componentNode.type, visible: componentNode.visible, locked: componentNode.locked, } : null, }, }; }, }); // Find component usage protocol.registerTool("find_component_usage", { description: "Find all instances where a component is used in a Figma file", inputSchema: { type: "object", properties: { fileKey: { type: "string", description: "Figma file key", }, componentKey: { type: "string", description: "Component key to search for", }, }, required: ["fileKey", "componentKey"], }, handler: async (args) => { const { fileKey, componentKey } = args; const fileData = await figmaClient.getFile(fileKey); const findInstances = (node, instances = []) => { if (node.type === "INSTANCE" && node.componentId === componentKey) { instances.push({ id: node.id, name: node.name, page: node.parent?.name || "Unknown", }); } if (node.children) { node.children.forEach((child) => findInstances(child, instances)); } return instances; }; const instances = findInstances(fileData.document); return { fileKey, componentKey, instances, count: instances.length, }; }, }); }