Figma MCP Tool

Instructions

Implementation Reference

• src/style-extractor.ts:88-122 (handler)

  Core handler that parses Figma URL, fetches file and node, extracts relevant styled nodes, and computes style data for the get_figma_styles tool.
  async getStylesFromUrl(figmaUrl: string): Promise<ComponentStyles> { try { const urlInfo = this.figmaService.parseUrl(figmaUrl); const { fileId, nodeId } = urlInfo; const file = await this.figmaService.getFile(fileId); let targetNodes: FigmaNode[] = []; if (nodeId) { // 获取特定节点 const node = await this.figmaService.getNode(fileId, nodeId); if (node) { targetNodes = [node]; } } else { // 获取整个文件的主要组件 targetNodes = this.extractMainComponents(file.document); } const styles = targetNodes.map(node => this.extractNodeStyle(node)); return { fileInfo: { fileId, fileName: file.name, lastModified: file.lastModified, }, styles, globalStyles: file.styles, }; } catch (error) { throw new Error(`获取样式数据失败: ${error instanceof Error ? error.message : '未知错误'}`); } }
• src/index.ts:294-326 (handler)

  Tool dispatch handler in switch statement that calls the style extractor and formats response, optionally generating CSS.
  private async handleGetStyles(args: any) { const { url, generateCSS = false } = args; const styleData = await this.styleExtractor.getStylesFromUrl(url); let cssCode = ''; if (generateCSS && styleData.styles.length > 0) { const cssRules = styleData.styles.map(style => { const selector = `.${style.nodeName.toLowerCase().replace(/\\s+/g, '-')}`; const css = this.styleExtractor.generateCSS(style); return css ? `${selector} {\\n ${css}\\n}` : ''; }).filter(rule => rule); cssCode = cssRules.join('\\n\\n'); } return { content: [ { type: 'text', text: JSON.stringify({ success: true, data: { fileInfo: styleData.fileInfo, styles: styleData.styles, globalStyles: styleData.globalStyles, ...(cssCode && { generatedCSS: cssCode }), }, }, null, 2), }, ], }; }
• src/index.ts:75-93 (registration)

  Tool registration including name, description, and input schema in the ListTools response.
  { name: 'get_figma_styles', description: '根据Figma URL获取节点的样式数据', inputSchema: { type: 'object', properties: { url: { type: 'string', description: 'Figma文件URL，可以包含node-id参数指定特定节点', }, generateCSS: { type: 'boolean', description: '是否生成CSS代码', default: false, }, }, required: ['url'], }, },
• src/style-extractor.ts:3-80 (schema)

  Type definitions for style data structures used as output schema for the tool.
  export interface StyleData { nodeId: string; nodeName: string; nodeType: string; position?: { x: number; y: number; width: number; height: number; }; fills?: Array<{ type: string; color?: { r: number; g: number; b: number; a: number; }; gradientStops?: Array<{ color: { r: number; g: number; b: number; a: number }; position: number; }>; }>; strokes?: Array<{ type: string; color?: { r: number; g: number; b: number; a: number; }; }>; strokeWeight?: number; cornerRadius?: number; effects?: Array<{ type: string; visible: boolean; radius?: number; color?: { r: number; g: number; b: number; a: number; }; offset?: { x: number; y: number; }; }>; textStyle?: { fontFamily?: string; fontSize?: number; fontWeight?: number; letterSpacing?: number; lineHeight?: number; textAlign?: string; textColor?: { r: number; g: number; b: number; a: number; }; }; constraints?: { vertical: string; horizontal: string; }; } export interface ComponentStyles { fileInfo: { fileId: string; fileName: string; lastModified: string; }; styles: StyleData[]; globalStyles?: Record<string, any>; }
• src/style-extractor.ts:286-380 (helper)

  Helper function to generate CSS from extracted style data, used when generateCSS=true.
  generateCSS(styleData: StyleData): string { const cssRules: string[] = []; // 位置和尺寸 if (styleData.position) { cssRules.push(`width: ${styleData.position.width}px`); cssRules.push(`height: ${styleData.position.height}px`); } // 背景色 if (styleData.fills && styleData.fills.length > 0) { const fill = styleData.fills[0]; if (fill.color) { const { r, g, b, a } = fill.color; if (a === 1) { cssRules.push(`background-color: rgb(${r}, ${g}, ${b})`); } else { cssRules.push(`background-color: rgba(${r}, ${g}, ${b}, ${a})`); } } } // 边框 if (styleData.strokes && styleData.strokes.length > 0) { const stroke = styleData.strokes[0]; const weight = styleData.strokeWeight || 1; if (stroke.color) { const { r, g, b, a } = stroke.color; if (a === 1) { cssRules.push(`border: ${weight}px solid rgb(${r}, ${g}, ${b})`); } else { cssRules.push(`border: ${weight}px solid rgba(${r}, ${g}, ${b}, ${a})`); } } } // 圆角 if (styleData.cornerRadius !== undefined) { cssRules.push(`border-radius: ${styleData.cornerRadius}px`); } // 文本样式 if (styleData.textStyle) { const textStyle = styleData.textStyle; if (textStyle.fontFamily) { cssRules.push(`font-family: "${textStyle.fontFamily}"`); } if (textStyle.fontSize) { cssRules.push(`font-size: ${textStyle.fontSize}px`); } if (textStyle.fontWeight) { cssRules.push(`font-weight: ${textStyle.fontWeight}`); } if (textStyle.letterSpacing) { cssRules.push(`letter-spacing: ${textStyle.letterSpacing}px`); } if (textStyle.lineHeight) { cssRules.push(`line-height: ${textStyle.lineHeight}px`); } if (textStyle.textAlign) { cssRules.push(`text-align: ${textStyle.textAlign.toLowerCase()}`); } if (textStyle.textColor) { const { r, g, b, a } = textStyle.textColor; if (a === 1) { cssRules.push(`color: rgb(${r}, ${g}, ${b})`); } else { cssRules.push(`color: rgba(${r}, ${g}, ${b}, ${a})`); } } } // 阴影效果 if (styleData.effects && styleData.effects.length > 0) { const shadows = styleData.effects .filter(effect => effect.type === 'DROP_SHADOW' && effect.visible) .map(effect => { const x = effect.offset?.x || 0; const y = effect.offset?.y || 0; const blur = effect.radius || 0; if (effect.color) { const { r, g, b, a } = effect.color; return `${x}px ${y}px ${blur}px rgba(${r}, ${g}, ${b}, ${a})`; } return ''; }) .filter(shadow => shadow); if (shadows.length > 0) { cssRules.push(`box-shadow: ${shadows.join(', ')}`); } } return cssRules.length > 0 ? cssRules.join(';\n ') + ';' : ''; }