figma-context-mcp
Skill9 starsChanged 31 days agoMITView on GitHub
Expert guide for using the Figma Context MCP (Framelink) efficiently while avoiding 429 rate-limit errors. Activate when: (1) using Framelink Figma MCP tools (get_figma_data, download_figma_images), (2) fetching Figma designs for code generation, (3) user hits 429 rate limits from Figma API, (4) extracting design tokens or component data from Figma, (5) downloading Figma assets/images, (6) any design-to-code workflow involving Figma URLs. Covers metadata-first fetching, depth-limited node trees, batch image downloads, rate-limit diagnostics, and plan-tier awareness.
In this repository13 other files it gives its agents.
- AGENTS.mdAGENTS.md
- CLAUDE.mdCLAUDE.md
- agent-sessionsSkill
- apple-books-mcpSkill
- blender-mcpSkill
- cinema4d-mcpSkill
- figma-bridgeSkill
- fluid-interfacesSkill
- pdf-look-scannedSkill
- reverse-engineer-jsSkill
- threejs-perf-loadingSkill
- time-lensSkill
- visual-feedback-loopSkill
The file
We split this skill into the rules it gives an agent
11 rules. About 0 are common, 6 are distinctive, and 5 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈6
Distinctive · estimate
This author's own choices. Worth a look.
5
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 37
When a user provides a Figma URL like figma.com/design/FILEKEY/Name?node-id=123-456, always extract and pass the nodeId.
- Very specific: line 45
Always set depth to limit tree traversal:
- Distinctive: line 54
After receiving the initial response:
- Distinctive: line 61
If a specific child node needs more detail, fetch just that node:
- Distinctive: line 69
Only request images for the final deduplicated set of visual assets you actually need:
- Very specific: line 72
Use pngScale=1 unless the user specifically needs @2x/@3x assets
- Distinctive: line 89
Check if the file is owned by a Starter/free-plan user (limits are per-owner)
- Distinctive: line 90
If the user has a Pro/Org plan, suggest duplicating the file into their own workspace
- Very specific: line 91
Wait for Retry-After header duration before retrying
- Distinctive: line 92
When retrying, use the minimal-depth pipeline above
- Very specific: line 99
If images needed: download_figma_images for just the raster fills (1 call)
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Figma Context MCP
Expert guide for the Figma Context MCP (also known as Framelink). Teaches efficient API usage patterns that prevent 429 rate-limit lockouts.
Tools
| Tool | Purpose | API Tier |
get_figma_data | Fetch file/node structure, layout, components | Tier 1 (most restricted) |
download_figma_images | Export PNG/SVG renders of specific nodes | Tier 2-3 |
Critical: Rate Limits
Figma enforces per-plan rate limits. Limits apply based on the file owner's plan, not yours:
| Tier | Starter | Pro | Org |
| Tier 1 (files) | 10/min | 15/min | 20/min |
| Tier 2 (images) | 25/min | 50/min | 100/min |
| Tier 3 | 50/min | 100/min | 150/min |
View/Collab seats get only 6 Tier-1 calls/month. If accessing files owned by someone on a Starter/free plan, their limits apply to you.
429 lockouts can last 4-5 days. Prevention is essential.
Workflow: Metadata-First Pipeline
Never fetch everything upfront. Adopt this pipeline to keep most jobs under 2-3 API calls and <500 KB:
1. Start with a targeted node, not the whole file
When a user provides a Figma URL like figma.com/design/FILEKEY/Name?node-id=123-456, always extract and pass the nodeId. Never fetch the entire file when a specific node is available.
get_figma_data(fileKey="ABC123", nodeId="123-456", depth=2)2. Use minimal depth
Always set depth to limit tree traversal:
- depth=1: Top-level frame only (layout structure, component names)
- depth=2: Frame + direct children (usually sufficient for code generation)
- depth=3: Maximum recommended — only when nested auto-layouts require it
Default if omitted: the API returns the ENTIRE subtree — often megabytes for complex frames with 50-200+ children. This is the #1 cause of 429 errors.
3. Analyze locally before fetching more
After receiving the initial response:
- Identify which child nodes actually need detail (skip hidden, decorative, or library-referenced nodes)
- Extract design tokens (colors, spacing, typography) directly from the response — no extra calls needed
- Build your component structure from what you already have
4. Fetch deeper nodes only if necessary
If a specific child node needs more detail, fetch just that node:
get_figma_data(fileKey="ABC123", nodeId="child-node-id", depth=1)5. Download images last, in small batches
Only request images for the final deduplicated set of visual assets you actually need:
- Deduplicate by
imageRef— multiple nodes can reference the same fill image - Batch into groups of 5-10 nodes per call
- Use
pngScale=1unless the user specifically needs @2x/@3x assets
download_figma_images(
fileKey="ABC123",
nodes=[{nodeId: "1:2", fileName: "hero", ...}], # max 5-10 per call
localPath="./assets",
pngScale=1
)When You Hit a 429
See references/rate-limit-recovery.md for diagnostics and recovery steps.
Quick checklist:
- Stop all Figma API calls immediately — additional calls extend the lockout
- Check if the file is owned by a Starter/free-plan user (limits are per-owner)
- If the user has a Pro/Org plan, suggest duplicating the file into their own workspace
- Wait for
Retry-Afterheader duration before retrying - When retrying, use the minimal-depth pipeline above
Common Patterns
Design-to-code (single component)
get_figma_datawith specificnodeId+depth=2(1 call)- Generate code from response — no image calls unless the component contains raster assets
- If images needed:
download_figma_imagesfor just the raster fills (1 call) - Total: 1-2 API calls
Design-to-code (full page)
get_figma_datawith pagenodeId+depth=1to get frame list (1 call)- Identify the 2-3 key frames that matter
get_figma_datafor each key frame withdepth=2(2-3 calls)- Extract tokens locally, download only unique raster assets (1 call)
- Total: 4-5 API calls
Extract design tokens only
get_figma_datawithnodeId+depth=2(1 call)- Parse colors, typography, spacing from the response — no image calls needed
- Total: 1 API call
Anti-Patterns
| Pattern | Problem | Fix |
Omitting depth | Returns entire subtree (MB of data) | Always set depth=2 or less |
Omitting nodeId | Fetches entire file | Always extract nodeId from URL |
| Downloading all images upfront | Bursts of image requests hit Tier 2 limits | Download only final deduplicated set |
| Retrying on 429 | Extends lockout duration | Stop, wait for Retry-After, then resume with minimal calls |
| Fetching library components | Remote library nodes trigger extra API calls | Use local component data from initial response |
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

