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}` }],
    }
  }
},

src/services/utility/index.ts:194-206 (schema)

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'
```

feuse-mcp