Figma MCP Tool

Instructions

Implementation Reference

• src/index.ts:430-484 (handler)

  The main MCP tool handler for 'get_node_svg'. Parses the Figma URL from args, validates node-id, fetches SVG via elementExtractor, logs progress, and returns structured JSON response with success/error handling.

  private async handleGetNodeSVG(args: any) {
    const { url } = args;
  
    try {
      console.error(`开始获取节点SVG数据: ${url}`);
      
      const urlInfo = this.figmaService.parseUrl(url);
      if (!urlInfo.nodeId) {
        throw new Error('URL中缺少node-id参数');
      }
  
      const svgData = await this.elementExtractor.getNodeAsSVG(urlInfo.fileId, urlInfo.nodeId);
  
      console.error(`成功获取SVG数据，长度: ${svgData.length} 字符`);
      
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              success: true,
              data: {
                svg: svgData,
                fileId: urlInfo.fileId,
                nodeId: urlInfo.nodeId,
                dataLength: svgData.length,
              },
            }, null, 2),
          },
        ],
      };
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : '未知错误';
      console.error(`获取SVG数据失败: ${errorMessage}`);
      
      return {
        content: [
          {
            type: 'text',
            text: JSON.stringify({
              success: false,
              error: errorMessage,
              troubleshooting: {
                commonIssues: [
                  '检查节点是否为矢量图形或可导出为SVG',
                  '确认Figma token权限是否充足',
                  '验证节点ID格式是否正确',
                ],
              }
            }, null, 2),
          },
        ],
      };
    }
  }

• src/index.ts:154-167 (schema)

  Input schema and metadata for the 'get_node_svg' tool, defined in the tools list returned by ListToolsRequestHandler. Requires a single 'url' property.

  {
    name: 'get_node_svg',
    description: '获取节点的SVG数据',
    inputSchema: {
      type: 'object',
      properties: {
        url: {
          type: 'string',
          description: 'Figma文件URL，必须包含node-id参数',
        },
      },
      required: ['url'],
    },
  },

• src/index.ts:212-213 (registration)

  Registration of the tool handler in the CallToolRequestSchema switch statement, dispatching calls to handleGetNodeSVG.

  case 'get_node_svg':
    return await this.handleGetNodeSVG(args);

• src/figma-service.ts:201-216 (helper)

  Core helper function in FigmaService that implements SVG export by calling Figma's images API with format='svg', retrieves the temporary SVG URL, and fetches the SVG content.

  async getNodeAsSVG(fileId: string, nodeId: string): Promise<string> {
    try {
      const images = await this.exportImage(fileId, [nodeId], { format: 'svg' });
      const svgUrl = images[nodeId];
      
      if (!svgUrl) {
        throw new Error(`无法获取节点 ${nodeId} 的SVG数据`);
      }
  
      // 下载SVG内容
      const response = await axios.get(svgUrl);
      return response.data;
    } catch (error) {
      throw new Error(`获取SVG数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
    }
  }

• src/element-extractor.ts:66-72 (helper)

  Thin wrapper in FigmaElementExtractor that delegates SVG extraction to the underlying FigmaService.

  async getNodeAsSVG(fileId: string, nodeId: string): Promise<string> {
    try {
      return await this.figmaService.getNodeAsSVG(fileId, nodeId);
    } catch (error) {
      throw new Error(`获取SVG数据失败: ${error instanceof Error ? error.message : '未知错误'}`);
    }
  }