Figma MCP

Instructions

Implementation Reference

• src/tools/handlers/fullPageContext.js:373-498 (handler)

  The main handler function that executes the tool logic: fetches Figma file and frame data, identifies sections by background and position, extracts assets (icons/images), styles, generates per-section screenshots, builds asset map and agent-specific instructions, and returns comprehensive JSON context for the entire page/frame.

  export async function getFullPageContext(ctx, fileKey, pageName, frameName, scale = 2) {
    const { session, chunker, figmaClient } = ctx;
  
    session.setCurrentFile(fileKey);
    const file = await figmaClient.getFile(fileKey, 3);
    const page = figmaClient.findPageByName(file, pageName);
  
    if (!page) {
      const available = file.document.children.map((p) => p.name).join(", ");
      throw new Error(`Page "${pageName}" not found. Available: ${available}`);
    }
  
    const frameRef = figmaClient.findFrameByName(page, frameName);
    if (!frameRef) {
      const available = (page.children || [])
        .filter((c) => c.type === "FRAME" || c.type === "COMPONENT")
        .map((f) => f.name)
        .join(", ");
      throw new Error(`Frame "${frameName}" not found. Available: ${available}`);
    }
  
    const frame = await figmaClient.getNode(fileKey, frameRef.id);
    const frameChildren = frame.children || [];
  
    const sectionGroups = groupNodesBySection(frameChildren);
  
    const frameImageBuffer = await captureFullFrameImage(ctx, fileKey, frame, scale);
  
    const sections = [];
  
    for (let idx = 0; idx < sectionGroups.length; idx++) {
      const sectionGroup = sectionGroups[idx];
      const firstNode = sectionGroup.nodes[0];
      const sectionName = inferSectionName(firstNode.name) || `Section ${idx + 1}`;
  
      const sectionBounds = {
        x: sectionGroup.minY,
        y: sectionGroup.minY,
        width: frame.absoluteBoundingBox?.width || 0,
        height: sectionGroup.maxY - sectionGroup.minY,
      };
  
      const { icons, images } = extractSectionAssets(
        sectionGroup.nodes,
        fileKey,
        sectionName,
        `section-${idx}`
      );
  
      const sectionNodes = [];
      for (const node of sectionGroup.nodes) {
        const collectNodes = (n) => {
          sectionNodes.push(n);
          if (n.children) {
            n.children.forEach(collectNodes);
          }
        };
        collectNodes(node);
      }
  
      const styles = extractSectionStyles(sectionNodes);
      const mainElements = extractMainElements(sectionGroup.nodes);
  
      const screenshot = frameImageBuffer
        ? await extractSectionScreenshot(frameImageBuffer, sectionBounds, scale)
        : null;
  
      sections.push({
        id: `section-${idx}`,
        name: sectionName,
        bgColor: sectionGroup.bgColor || "#FFFFFF",
        bounds: {
          x: Math.round(sectionBounds.x),
          y: Math.round(sectionBounds.y),
          width: Math.round(sectionBounds.width),
          height: Math.round(sectionBounds.height),
        },
        screenshot: screenshot,
        assets: {
          icons,
          images,
        },
        styles,
        mainElements,
      });
    }
  
    const totalAssets = countTotalAssets(sections);
    const transitionElements = findTransitionElements(sectionGroups, frameChildren);
    const assetMap = buildAssetMap(sections);
  
    const recommendedAgentCount = Math.max(1, Math.min(sections.length, Math.ceil(sections.length / 2)));
  
    const agentInstructions = sections.map((section, idx) =>
      buildAgentInstructions(section, idx, sections.length, section.assets, section.styles)
    );
  
    const overview = {
      frameName: frame.name,
      frameSize: {
        width: Math.round(frame.absoluteBoundingBox?.width || 0),
        height: Math.round(frame.absoluteBoundingBox?.height || 0),
      },
      sectionCount: sections.length,
      totalAssets,
      recommendedAgents: recommendedAgentCount,
      transitionElementCount: transitionElements.length,
    };
  
    const result = {
      overview,
      sections,
      assetMap,
      agentInstructions,
      transitionElements,
    };
  
    const response = chunker.wrapResponse(result, {
      step: "Full page context prepared",
      progress: `${sections.length} sections, ${totalAssets.icons} icons, ${totalAssets.images} images`,
      nextStep: `Distribute to ${recommendedAgentCount} agent${recommendedAgentCount > 1 ? "s" : ""} for parallel implementation`,
      strategy: `Each agent has complete section context including screenshots, assets, and design tokens`,
    });
  
    return { content: [{ type: "text", text: JSON.stringify(response, null, 2) }] };
  }

• src/tools/schemas.js:413-466 (schema)

  JSON schema defining the tool name, description, and input parameters (file_key, page_name, frame_name, optional scale).

    {
      name: "get_full_page_context",
      description: `Get complete page context in ONE call with all sections, assets, screenshots, and styles.
  
  WHAT YOU GET IN ONE CALL:
  - Complete page structure with all sections identified
  - Screenshots for each section (base64 encoded)
  - All assets organized by section with unique names
  - Design tokens per section
  - Asset map for quick lookup
  - Agent instructions ready for parallel implementation
  - Transition elements that span multiple sections
  
  PERFECT FOR:
  - Getting full context before implementation
  - Preparing data for parallel multi-agent work
  - Quick assessment of page complexity
  - One-call solution for complete page understanding
  
  RETURNS:
  - overview: Frame metadata and recommendations
  - sections: Array with all section details including screenshots
  - assetMap: Quick lookup table for assets by unique name
  - agentInstructions: Pre-written instructions for each agent
  - transitionElements: Elements spanning multiple sections
  
  TYPICAL WORKFLOW:
  1. get_full_page_context → get everything at once
  2. Distribute sections to multiple agents using agentInstructions
  3. Each agent implements their section with all necessary context`,
      inputSchema: {
        type: "object",
        properties: {
          file_key: {
            type: "string",
            description: "Figma file key from URL",
          },
          page_name: {
            type: "string",
            description: "Page name (partial match)",
          },
          frame_name: {
            type: "string",
            description: "Frame name (partial match)",
          },
          scale: {
            type: "number",
            description: "Screenshot scale 1-4 (default: 2)",
            default: 2,
          },
        },
        required: ["file_key", "page_name", "frame_name"],
      },
    },

• src/index.js:86-94 (registration)

  Registration in the main MCP server request handler: switch case that dispatches 'get_full_page_context' tool calls to the getFullPageContext handler function with parsed arguments.

  case "get_full_page_context":
    result = await handlers.getFullPageContext(
      this.ctx,
      args.file_key,
      args.page_name,
      args.frame_name,
      args.scale || 2
    );
    break;

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

  Re-export of the getFullPageContext handler from its module for aggregation in the handlers index, allowing import * as handlers.

  export { getFullPageContext } from "./fullPageContext.js";