68 lines
2.7 KiB
Markdown
68 lines
2.7 KiB
Markdown
---
|
||
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/)*
|