extract-svg-assets
Extract SVG assets from Figma files by analyzing the SDL structure and downloading resources using specified file keys and node IDs.
Instructions
分析figma SDL中的结构，并调用download-svg-assets工具下载Figma文件中使用的SVG资源
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fileKey | Yes | The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/... | |
| nodeId | No | The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided |
Implementation Reference
- src/services/utility/index.ts:152-186 (handler)The main handler function for the 'extract-svg-assets' tool. It fetches the Figma DSL (YAML) for the given fileKey and optional nodeId, then constructs an XML prompt using the imported extractSVGAssetsPrompt and the DSL, returning it as text content.
execute: async ({ fileKey, nodeId, }, { session, }: { session: any }) => { try { const yamlResult = await this.figmaToolsCore.figmaToCode({ fileKey, nodeId: nodeId || '', }) const prompt: string = ` <xml> <prompt>${extractSVGAssetsPrompt}</prompt> <Figma-DSL>${yamlResult}</Figma-DSL> </xml> ` return { content: [ { type: 'text', text: prompt }, ], } } catch (error) { const message = error instanceof Error ? error.message : JSON.stringify(error) Logger.error(`Error fetching file ${fileKey}:`, message) return { isError: true, content: [{ type: 'text', text: `Error fetching file: ${message}` }], } } }, - Zod schema defining the input parameters for the tool: required fileKey (Figma file key) and optional nodeId (node ID).
parameters: z.object({ fileKey: z .string() .describe( 'The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...', ), nodeId: z .string() .optional() .describe( 'The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided', ), }), - src/services/utility/index.ts:135-188 (registration)The private method that registers the 'extract-svg-assets' tool on the MCP server using server.addTool().
private extractSVGAssets(): void { this.server.addTool({ name: 'extract-svg-assets', description: '分析figma SDL中的结构，并调用download-svg-assets工具下载Figma文件中使用的SVG资源', parameters: z.object({ fileKey: z .string() .describe( 'The key of the Figma file to fetch, often found in a provided URL like figma.com/(file|design)/<fileKey>/...', ), nodeId: z .string() .optional() .describe( 'The ID of the node to fetch, often found as URL parameter node-id=<nodeId>, always use if provided', ), }), execute: async ({ fileKey, nodeId, }, { session, }: { session: any }) => { try { const yamlResult = await this.figmaToolsCore.figmaToCode({ fileKey, nodeId: nodeId || '', }) const prompt: string = ` <xml> <prompt>${extractSVGAssetsPrompt}</prompt> <Figma-DSL>${yamlResult}</Figma-DSL> </xml> ` return { content: [ { type: 'text', text: prompt }, ], } } catch (error) { const message = error instanceof Error ? error.message : JSON.stringify(error) Logger.error(`Error fetching file ${fileKey}:`, message) return { isError: true, content: [{ type: 'text', text: `Error fetching file: ${message}` }], } } }, }) } - src/services/utility/index.ts:34-34 (registration)Call to register the extract-svg-assets tool within the public registerTools() method of UtilityTools class.
this.extractSVGAssets() - src/services/utility/index.ts:12-12 (helper)Import of the prompt template XML file used within the tool handler to instruct on extracting SVG assets.
import extractSVGAssetsPrompt from './prompt/extract-svg-assets.xml'