extract-color-vars
Extract color variables from Figma DSL files and export them to formats like UnoCSS, TailwindCSS, or custom standards for streamlined design-to-code workflows.
Instructions
从Figma DSL文件中提取颜色变量，并输出在用户指定的文件中（比如unocss、tailwindcss或者自定义标准文件中等）
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:207-241 (handler)Handler function that executes the tool: fetches Figma DSL code using figmaToCode and constructs an XML prompt with extractColorVarsPrompt and the DSL for further processing.
execute: async ({ fileKey, nodeId, }, { session, }: { session: any }) => { try { const yamlResult = await this.figmaToolsCore.figmaToCode({ fileKey, nodeId: nodeId || '', }) const prompt: string = ` <xml> <prompt>${extractColorVarsPrompt}</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: fileKey (required) and nodeId (optional).
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:190-243 (registration)Full registration of the 'extract-color-vars' tool in UtilityTools class via this.server.addTool, called from registerTools().
private extractColorVars(): void { this.server.addTool({ name: 'extract-color-vars', description: '从Figma DSL文件中提取颜色变量，并输出在用户指定的文件中（比如unocss、tailwindcss或者自定义标准文件中等）', 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>${extractColorVarsPrompt}</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:33-33 (registration)Invocation of extractColorVars() registration method within UtilityTools.registerTools().
this.extractColorVars() - src/services/utility/index.ts:11-11 (helper)Import of the XML prompt template used in the tool's execute function.
import extractColorVarsPrompt from './prompt/extract-color-vars.xml'