f2c-mcp-server

Instructions

Implementation Reference

• src/server/figma/tools/f2c.ts:11-135 (registration)

  Registers the 'figma_to_code' MCP tool with server, providing description, input schema using Zod, and the execution handler.
  export const registerF2cServer = (server: McpServer) => { // Register Figma to HTML conversion tool server.tool( 'figma_to_code', 'Transform Figma designs into production-ready code. This tool converts selected Figma nodes into HTML,enabling seamless design-to-code workflow.', { fileKey: z .string() .describe( 'The Figma file identifier found in the file URL (e.g., https://www.figma.com/file/XXXXXXXXXXXX/). Extract the XXXXXXXXXXXX portion as the fileKey.', ), ids: z .string() .describe( 'Comma-separated list of Figma node IDs for conversion. To obtain node IDs, select elements in Figma, right-click and select "Copy/Paste as" → "Copy ID".', ), format: z .enum(['html', 'react-cssmodules', 'react-tailwind']) .default('html') .describe( 'Specify the output format: "html" generates semantic HTML/CSS, "react-cssmodules" creates React components with scoped CSS modules, "react-tailwind" produces React components with utility-first Tailwind classes.', ), personalToken: z .string() .optional() .describe( 'Figma personal access token for API authentication.The parameters are not required when the tool is called.', ), localPath: z .string() .optional() .describe( 'Absolute path for image asset storage. Directory will be created if non-existent. Path must follow OS-specific format without special character escaping. When set, all static resources will be saved to the images directory under this path.', ), imgFormat: z .enum(['png', 'jpg', 'svg']) .default('png') .describe( 'Export format for image assets: "png" for lossless quality, "jpg" for compressed files, or "svg" for vector graphics.', ), scaleSize: z .number() .min(1) .max(4) .default(2) .describe( 'Image export scale factor (1-4). Higher values yield better quality at the cost of larger file sizes.', ), }, async (o): Promise<CallToolResult> => { downloader.setup({...o, format: 'html'}) try { // const cb: NodeToCodeFile[] = (await api.nodeToCode({...o, format: 'react-tailwind'})) || [] const cb: NodeToCodeFile[] = (await api.nodeToCode(o)) || [] await downloader.checkLocalAndDownload(cb) if (!cb) { return { content: [ { type: 'text', text: 'Failed to generate any code. Please check if the provided Figma node IDs are correct or if the nodes can be converted to code.', }, ], } } const files = Array.isArray(cb) ? cb : [cb] // Handle case when returned file array is empty if (files.length === 0) { return { content: [ { type: 'text', text: 'Conversion succeeded but no files were generated. Please check if the selected Figma nodes contain convertible content.', }, ], } } // Create file summary const summary = files.map((file, index) => `${index + 1}. ${file.path}`).join('\n') // If local path is specified, return save location information instead of detailed content if (o.localPath) { return { content: [ { type: 'text', text: `# Files Saved Locally ## Save Location ${o.localPath} ## Generated Files ${summary}. Convert the Tailwind to vanilla CSS if not already used in the codebase. Do not install any dependencies.`, }, ], } } // Create detailed file content (only when local path is not specified) const fileDetails = files .map((file, index) => { const fileExtension = file.path.split('.').pop() || '' return `## File ${index + 1}: ${file.path}\n\`\`\`${fileExtension}\n${file.content}\n\`\`\`` }) .join('\n\n') return { content: [ { type: 'text', text: `# Generated Files Summary\n${summary}\n\n# File Details\n${fileDetails}. Convert the Tailwind to vanilla CSS if not already used in the codebase. Do not install any dependencies.`, }, ], } } catch (error: any) { logger.error('Tool execution error:', error) return { content: [{type: 'text', text: `Error: ${error.message}`}], } } }, ) }
• src/server/figma/tools/f2c.ts:60-133 (handler)

  The tool execution handler. Sets up downloader, calls the F2C API via api.nodeToCode, downloads assets if localPath provided, formats response with file contents or paths.
  async (o): Promise<CallToolResult> => { downloader.setup({...o, format: 'html'}) try { // const cb: NodeToCodeFile[] = (await api.nodeToCode({...o, format: 'react-tailwind'})) || [] const cb: NodeToCodeFile[] = (await api.nodeToCode(o)) || [] await downloader.checkLocalAndDownload(cb) if (!cb) { return { content: [ { type: 'text', text: 'Failed to generate any code. Please check if the provided Figma node IDs are correct or if the nodes can be converted to code.', }, ], } } const files = Array.isArray(cb) ? cb : [cb] // Handle case when returned file array is empty if (files.length === 0) { return { content: [ { type: 'text', text: 'Conversion succeeded but no files were generated. Please check if the selected Figma nodes contain convertible content.', }, ], } } // Create file summary const summary = files.map((file, index) => `${index + 1}. ${file.path}`).join('\n') // If local path is specified, return save location information instead of detailed content if (o.localPath) { return { content: [ { type: 'text', text: `# Files Saved Locally ## Save Location ${o.localPath} ## Generated Files ${summary}. Convert the Tailwind to vanilla CSS if not already used in the codebase. Do not install any dependencies.`, }, ], } } // Create detailed file content (only when local path is not specified) const fileDetails = files .map((file, index) => { const fileExtension = file.path.split('.').pop() || '' return `## File ${index + 1}: ${file.path}\n\`\`\`${fileExtension}\n${file.content}\n\`\`\`` }) .join('\n\n') return { content: [ { type: 'text', text: `# Generated Files Summary\n${summary}\n\n# File Details\n${fileDetails}. Convert the Tailwind to vanilla CSS if not already used in the codebase. Do not install any dependencies.`, }, ], } } catch (error: any) { logger.error('Tool execution error:', error) return { content: [{type: 'text', text: `Error: ${error.message}`}], } } },
• src/server/figma/tools/f2c.ts:16-59 (schema)

  Zod schema for tool inputs defining parameters like fileKey, node ids, output format, token, local save path, image options.
  { fileKey: z .string() .describe( 'The Figma file identifier found in the file URL (e.g., https://www.figma.com/file/XXXXXXXXXXXX/). Extract the XXXXXXXXXXXX portion as the fileKey.', ), ids: z .string() .describe( 'Comma-separated list of Figma node IDs for conversion. To obtain node IDs, select elements in Figma, right-click and select "Copy/Paste as" → "Copy ID".', ), format: z .enum(['html', 'react-cssmodules', 'react-tailwind']) .default('html') .describe( 'Specify the output format: "html" generates semantic HTML/CSS, "react-cssmodules" creates React components with scoped CSS modules, "react-tailwind" produces React components with utility-first Tailwind classes.', ), personalToken: z .string() .optional() .describe( 'Figma personal access token for API authentication.The parameters are not required when the tool is called.', ), localPath: z .string() .optional() .describe( 'Absolute path for image asset storage. Directory will be created if non-existent. Path must follow OS-specific format without special character escaping. When set, all static resources will be saved to the images directory under this path.', ), imgFormat: z .enum(['png', 'jpg', 'svg']) .default('png') .describe( 'Export format for image assets: "png" for lossless quality, "jpg" for compressed files, or "svg" for vector graphics.', ), scaleSize: z .number() .min(1) .max(4) .default(2) .describe( 'Image export scale factor (1-4). Higher values yield better quality at the cost of larger file sizes.', ), },
• src/server/figma/apis/f2c.ts:10-30 (helper)

  Core helper function that builds query parameters and calls external F2C API (https://f2c-figma-api.yy.com/api/nodes) to convert Figma nodes to code files.
  async nodeToCode(o: NodeToCodeWithF2COptions): Promise<NodeToCodeFile[]> { const op = { fileKey: o.fileKey, nodeIds: o.ids, personal_token: o.personalToken || config.personalToken, option: { cssFramework: 'inlinecss', imgFormat: o.imgFormat || 'png', scaleSize: o.scaleSize || 2, }, format: 'files', // format: 'allFiles', } if (o.format === 'react-cssmodules') { op.option.cssFramework = 'cssmodules' } else if (o.format === 'react-tailwind') { op.option.cssFramework = 'tailwindcss' } const url = this.opToUrl(`${this.f2cHost}/nodes`, op) return this.fetch(url, 'json', o.ideInfo || 'other') }
• src/server/figma/helpers/downloader.ts:102-119 (helper)

  Downloader helper that replaces remote Figma image URLs in generated code with local files and saves the code files to localPath if provided.
  public async checkLocalAndDownload(files: NodeToCodeFile[]) { if (!this.op.localPath) return await Promise.all( files.map(async f => { f.content = await this.downLoadImageAndReplaceContent(f.content) }), ) for (const file of files) { try { const savedPath = await this.saveContentToFile(file.content, file.path) logger.debug(`Successfully saved: ${savedPath}`) } catch (error) { logger.error(`Failed to save file ${file.path}:`, error) } } }