Figma MCP — Avoid Large, Heavy Frames

When using the wiki/claude-code/figma-mcp-custom-rules 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

Identify the smallest self-contained unit (usually a component or named frame)
Select only that unit in Figma
Run the MCP tool (e.g. get_design_context)
If it feels slow or produces partial output → reduce selection further, retry
Assemble components into the full screen after each part is generated

Debugging Output Quality

If generated code looks wrong, check in this order:

Figma file structure — are layers named correctly? Nested logically?
Prompt wording — is the intent clear and unambiguous?
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

wiki/claude-code/figma-mcp-custom-rules — project-level CLAUDE.md rules for Figma MCP workflow
wiki/claude-code/mcp-integration — MCP setup, transports, scopes

Source: Figma Developer Docs — Avoid large frames

2.7 KiB Raw Permalink Blame History Unescape Escape