--- title: "Figma MCP — Avoid Large, Heavy Frames" aliases: [figma-mcp-large-frames, figma-selection-size] tags: [figma, mcp, performance, best-practices, context-management] sources: [raw/Avoid selecting large, heavy frames.md] created: 2026-05-15 updated: 2026-05-15 --- # Figma MCP — Avoid Large, Heavy Frames When using the [[wiki/claude-code/figma-mcp-custom-rules|Figma MCP]] to generate code, frame selection size directly impacts speed and reliability. Selecting an entire screen dumps too much context — the model slows down, errors out, or returns incomplete results. ## The Problem Large frame selections cause: - Slow tool responses or timeouts - Incomplete code output (truncated mid-generation) - Unpredictable / inconsistent results - Context overflow for the underlying LLM ## The Fix — Select Smaller Work at the **component or logical chunk** level, not the full screen: | Instead of… | Select… | |-------------|---------| | Full page layout | `Header`, `Sidebar`, `Footer` separately | | Whole card grid | Single `Card` component | | Complex modal | Modal shell, then inner form section | | Dashboard screen | Widget by widget | **Rule of thumb:** if the selection has more than ~5–7 nested layers or spans multiple logical sections, split it. ## Workflow 1. Identify the smallest self-contained unit (usually a component or named frame) 2. Select only that unit in Figma 3. Run the MCP tool (e.g. `get_design_context`) 4. If it feels slow or produces partial output → reduce selection further, retry 5. Assemble components into the full screen after each part is generated ## Debugging Output Quality If generated code looks wrong, check in this order: 1. **Figma file structure** — are layers named correctly? Nested logically? 2. **Prompt wording** — is the intent clear and unambiguous? 3. **Context sent** — is the selected frame too large? Following these basics accounts for most output quality issues. ## Key Takeaways - **Never select whole screens** — always break into components or logical chunks - **Slow / stuck = too large** — reduce selection size and retry - **Quality issues trace back to** file structure, prompt clarity, or context size - Smaller selections → more consistent, reusable code - This applies to all Figma MCP tools: `get_design_context`, `get_screenshot`, `use_figma` ## Related - [[wiki/claude-code/figma-mcp-custom-rules|Figma MCP Custom Rules]] — project-level CLAUDE.md rules for Figma MCP workflow - [[wiki/claude-code/mcp-integration|MCP Integration]] — MCP setup, transports, scopes --- *Source: [Figma Developer Docs — Avoid large frames](https://developers.figma.com/docs/figma-mcp-server/avoid-large-frames/)*