get_full_page_context
Retrieve complete Figma page data including sections, screenshots, assets, and design tokens in a single API call for efficient multi-agent implementation workflows.
Instructions
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:
get_full_page_context → get everything at once
Distribute sections to multiple agents using agentInstructions
Each agent implements their section with all necessary context
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| file_key | Yes | Figma file key from URL | |
| page_name | Yes | Page name (partial match) | |
| frame_name | Yes | Frame name (partial match) | |
| scale | No | Screenshot scale 1-4 (default: 2) |
Implementation Reference
- 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";