Figma MCP

Instructions

Implementation Reference

• src/tools/handlers/styles.js:48-93 (handler)

  Core handler function that fetches Figma file styles using figmaClient.getStyles, categorizes them into colors, text, effects, and grids, and returns a formatted JSON response.

  export async function getFileStyles(ctx, fileKey) {
    const { chunker, figmaClient } = ctx;
  
    const styles = await figmaClient.getStyles(fileKey);
  
    const organized = {
      colors: [],
      text: [],
      effects: [],
      grids: [],
    };
  
    for (const style of styles.meta?.styles || []) {
      const category =
        style.style_type === "FILL"
          ? "colors"
          : style.style_type === "TEXT"
            ? "text"
            : style.style_type === "EFFECT"
              ? "effects"
              : style.style_type === "GRID"
                ? "grids"
                : null;
  
      if (category) {
        organized[category].push({
          name: style.name,
          key: style.key,
          description: style.description,
        });
      }
    }
  
    const totalStyles = organized.colors.length + organized.text.length + organized.effects.length + organized.grids.length;
  
    const response = chunker.wrapResponse(
      { fileKey, styles: organized },
      {
        step: "File styles retrieved",
        progress: `${totalStyles} styles`,
        nextStep: "Use extract_styles(frame) for frame-specific tokens",
      }
    );
  
    return { content: [{ type: "text", text: JSON.stringify(response, null, 2) }] };
  }

• src/tools/schemas.js:200-219 (schema)

  Tool schema defining the name, description, and input schema (requiring file_key) for the get_file_styles tool.

      name: "get_file_styles",
      description: `Get all published styles defined in the file.
  
  HOW IT WORKS:
  - Returns design system tokens: colors, text styles, effects
  - These are the official styles defined in Figma
  - Compact output, no chunking needed
  
  TYPICAL WORKFLOW:
  1. get_file_styles → global design tokens
  2. extract_styles(frame) → frame-specific tokens
  3. Combine for complete design system`,
      inputSchema: {
        type: "object",
        properties: {
          file_key: { type: "string", description: "Figma file key" },
        },
        required: ["file_key"],
      },
    },

• src/index.js:66-67 (registration)

  Switch case registration in the main server handler that dispatches calls to the getFileStyles handler function.

  case "get_file_styles":
    result = await handlers.getFileStyles(this.ctx, args.file_key);

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

  Re-export of the getFileStyles handler from styles.js, making it available via the handlers namespace.

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