Figma MCP

Instructions

Implementation Reference

• src/tools/handlers/styles.js:3-46 (handler)

  The main handler function that executes the extract_styles tool: fetches Figma file, page, and frame; collects design tokens (colors, fonts, sizes, radii, spacing, shadows) using collectStyles; formats and returns chunked JSON response.

  export async function extractStyles(ctx, fileKey, pageName, frameName) {
    const { chunker, figmaClient } = ctx;
  
    const file = await figmaClient.getFile(fileKey, 2);
    const page = figmaClient.findPageByName(file, pageName);
    if (!page) throw new Error(`Page "${pageName}" not found`);
  
    const frameRef = figmaClient.findFrameByName(page, frameName);
    if (!frameRef) throw new Error(`Frame "${frameName}" not found`);
  
    const frame = await figmaClient.getNode(fileKey, frameRef.id);
  
    const styles = {
      colors: new Set(),
      fonts: new Set(),
      fontSizes: new Set(),
      borderRadii: new Set(),
      spacing: new Set(),
      shadows: [],
    };
  
    collectStyles(frame, styles);
  
    const response = chunker.wrapResponse(
      {
        frame: frame.name,
        designTokens: {
          colors: [...styles.colors].sort(),
          fonts: [...styles.fonts].sort(),
          fontSizes: [...styles.fontSizes].sort((a, b) => a - b),
          borderRadii: [...styles.borderRadii].sort((a, b) => a - b),
          spacing: [...styles.spacing].sort((a, b) => a - b),
          shadows: styles.shadows,
        },
      },
      {
        step: "Design tokens extracted",
        progress: `${styles.colors.size} colors, ${styles.fonts.size} fonts`,
        nextStep: "Use these tokens to build your theme/CSS, or extract_assets for icons/images",
      }
    );
  
    return { content: [{ type: "text", text: JSON.stringify(response, null, 2) }] };
  }

• src/tools/schemas.js:123-144 (schema)

  The input schema and description for the extract_styles tool, defining required parameters: file_key, page_name, frame_name.

      name: "extract_styles",
      description: `Extract all design tokens from a frame.
  
  HOW IT WORKS:
  - Collects colors, fonts, spacing, border radius, shadows
  - Returns organized JSON ready for CSS/theme generation
  - No chunking needed (compact output)
  
  TYPICAL WORKFLOW:
  1. get_frame_info → understand structure
  2. extract_styles → design tokens
  3. Use tokens to build theme/CSS`,
      inputSchema: {
        type: "object",
        properties: {
          file_key: { type: "string", description: "Figma file key" },
          page_name: { type: "string", description: "Page name (partial match)" },
          frame_name: { type: "string", description: "Frame name (partial match)" },
        },
        required: ["file_key", "page_name", "frame_name"],
      },
    },

• src/index.js:57-59 (registration)

  The dispatch registration in the main server request handler switch statement, mapping 'extract_styles' tool name to handlers.extractStyles function call.

  case "extract_styles":
    result = await handlers.extractStyles(this.ctx, args.file_key, args.page_name, args.frame_name);
    break;

• src/tools/handlers/index.js:4-4 (registration)

  Export of the extractStyles handler from styles.js, making it available via the handlers namespace imported in src/index.js.

  export { extractStyles, getFileStyles } from "./styles.js";