get_section_screenshot
Capture isolated screenshots of specific sections within Figma frames for focused analysis. Identify sections first, then capture cropped images showing only the target area with optional transition context.
Instructions
Capture screenshot of a specific section within a frame.
HOW IT WORKS:
First call analyze_page_structure to identify sections
Makes other sections transparent (shows only target section)
Optionally includes transition elements context
Returns cropped image focused on section
Useful for parallel analysis of large frames
TYPICAL WORKFLOW:
analyze_page_structure → identify sections
get_section_screenshot(sectionId) → capture isolated section
get_frame_info with section context → implementation details
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) | |
| section_id | Yes | Section ID from analyze_page_structure (e.g., 'section-0') | |
| include_transition_context | No | Include margin context for transition elements (default: true) | |
| scale | No | Image scale 1-4 (default: 2) |
Implementation Reference
- Core handler function: Captures screenshot of specified section in Figma frame. Uses Figma API to get image, sharp for cropping, includes optional context margin.export async function getSectionScreenshot( ctx, fileKey, pageName, frameName, sectionId, includeTransitionContext = true, scale = 2 ) { const { chunker, figmaClient, session } = ctx; const file = await figmaClient.getFile(fileKey, 2); const page = figmaClient.findPageByName(file, pageName); if (!page) throw new Error(`Page "${pageName}" not found`); const frame = figmaClient.findFrameByName(page, frameName); if (!frame) throw new Error(`Frame "${frameName}" not found`); const operationId = `section_structure:${fileKey}:${pageName}:${frameName}`; let sections = session.getCachedData(operationId); if (!sections) { sections = calculateSections(frame); session.setCachedData(operationId, sections); } const section = sections.find((s) => s.id === sectionId); if (!section) { const availableIds = sections.map((s) => s.id).join(", "); throw new Error(`Section "${sectionId}" not found. Available: ${availableIds}`); } const frameWidth = (frame.absoluteBoundingBox?.width || 0) * scale; const frameHeight = (frame.absoluteBoundingBox?.height || 0) * scale; const imageData = await figmaClient.getImage(fileKey, frame.id, "png", scale); const imageUrl = imageData.images[frame.id]; if (!imageUrl) throw new Error("Failed to generate image"); const response = await axios.get(imageUrl, { responseType: "arraybuffer" }); let bounds = { x: Math.round(section.bounds.x * scale), y: Math.round(section.bounds.y * scale), width: Math.round(section.bounds.width * scale), height: Math.round(section.bounds.height * scale), }; if (includeTransitionContext) { const margin = 20; bounds.x = Math.max(0, bounds.x - margin); bounds.y = Math.max(0, bounds.y - margin); bounds.width = Math.min(frameWidth - bounds.x, bounds.width + margin * 2); bounds.height = Math.min(frameHeight - bounds.y, bounds.height + margin * 2); } const croppedImage = await sharp(response.data) .extract({ left: bounds.x, top: bounds.y, width: Math.round(bounds.width), height: Math.round(bounds.height), }) .png() .toBuffer(); const navInfo = chunker.wrapResponse( { sectionId: section.id, sectionName: section.name, bounds: { x: bounds.x, y: bounds.y, width: Math.round(bounds.width), height: Math.round(bounds.height), }, scale, format: "png", originalBounds: { x: Math.round(section.bounds.x), y: Math.round(section.bounds.y), width: Math.round(section.bounds.width), height: Math.round(section.bounds.height), }, }, { step: "Section screenshot captured", progress: "Complete", nextStep: "Use get_frame_info with section context for implementation details", } ); return { content: [ { type: "text", text: JSON.stringify(navInfo, null, 2) }, { type: "image", data: croppedImage.toString("base64"), mimeType: "image/png", }, ], }; }
- src/tools/schemas.js:308-354 (schema)Tool schema defining name, description, and input parameters (file_key, page_name, frame_name, section_id, include_transition_context, scale).{ name: "get_section_screenshot", description: `Capture screenshot of a specific section within a frame. HOW IT WORKS: - First call analyze_page_structure to identify sections - Makes other sections transparent (shows only target section) - Optionally includes transition elements context - Returns cropped image focused on section - Useful for parallel analysis of large frames TYPICAL WORKFLOW: 1. analyze_page_structure → identify sections 2. get_section_screenshot(sectionId) → capture isolated section 3. get_frame_info with section context → implementation details`, 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)", }, section_id: { type: "string", description: "Section ID from analyze_page_structure (e.g., 'section-0')", }, include_transition_context: { type: "boolean", description: "Include margin context for transition elements (default: true)", default: true, }, scale: { type: "number", description: "Image scale 1-4 (default: 2)", default: 2, }, }, required: ["file_key", "page_name", "frame_name", "section_id"], },
- src/index.js:72-74 (registration)Dispatch registration in MCP server CallToolRequestSchema handler: maps tool name to handlers.getSectionScreenshot call.case "get_section_screenshot": result = await handlers.getSectionScreenshot(this.ctx, args.file_key, args.page_name, args.frame_name, args.section_id, args.include_transition_context !== false, args.scale || 2); break;
- src/tools/handlers/index.js:3-3 (registration)Export of handler function, making it available via handlers.getSectionScreenshot in main index.js.export { getSectionScreenshot } from "./sectionScreenshot.js";