agentleFS
vladmdgolamvladmdgolam/agent-skills/skills/figma-context-mcp/SKILL.md

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.

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
  1. Very specific:

    When a user provides a Figma URL like figma.com/design/FILEKEY/Name?node-id=123-456, always extract and pass the nodeId.

    line 37
  2. Very specific:

    Always set depth to limit tree traversal:

    line 45
  3. Distinctive:

    After receiving the initial response:

    line 54
  4. Distinctive:

    If a specific child node needs more detail, fetch just that node:

    line 61
  5. Distinctive:

    Only request images for the final deduplicated set of visual assets you actually need:

    line 69
  6. Very specific:

    Use pngScale=1 unless the user specifically needs @2x/@3x assets

    line 72
  7. Distinctive:

    Check if the file is owned by a Starter/free-plan user (limits are per-owner)

    line 89
  8. Distinctive:

    If the user has a Pro/Org plan, suggest duplicating the file into their own workspace

    line 90
  9. Very specific:

    Wait for Retry-After header duration before retrying

    line 91
  10. Distinctive:

    When retrying, use the minimal-depth pipeline above

    line 92
  11. Very specific:

    If images needed: download_figma_images for just the raster fills (1 call)

    line 99

≈ “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.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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

ToolPurposeAPI Tier
get_figma_dataFetch file/node structure, layout, componentsTier 1 (most restricted)
download_figma_imagesExport PNG/SVG renders of specific nodesTier 2-3

Critical: Rate Limits

Figma enforces per-plan rate limits. Limits apply based on the file owner's plan, not yours:

TierStarterProOrg
Tier 1 (files)10/min15/min20/min
Tier 2 (images)25/min50/min100/min
Tier 350/min100/min150/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=1 unless 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:

  1. Stop all Figma API calls immediately — additional calls extend the lockout
  2. Check if the file is owned by a Starter/free-plan user (limits are per-owner)
  3. If the user has a Pro/Org plan, suggest duplicating the file into their own workspace
  4. Wait for Retry-After header duration before retrying
  5. When retrying, use the minimal-depth pipeline above

Common Patterns

Design-to-code (single component)

  1. get_figma_data with specific nodeId + depth=2 (1 call)
  2. Generate code from response — no image calls unless the component contains raster assets
  3. If images needed: download_figma_images for just the raster fills (1 call)
  4. Total: 1-2 API calls

Design-to-code (full page)

  1. get_figma_data with page nodeId + depth=1 to get frame list (1 call)
  2. Identify the 2-3 key frames that matter
  3. get_figma_data for each key frame with depth=2 (2-3 calls)
  4. Extract tokens locally, download only unique raster assets (1 call)
  5. Total: 4-5 API calls

Extract design tokens only

  1. get_figma_data with nodeId + depth=2 (1 call)
  2. Parse colors, typography, spacing from the response — no image calls needed
  3. Total: 1 API call

Anti-Patterns

PatternProblemFix
Omitting depthReturns entire subtree (MB of data)Always set depth=2 or less
Omitting nodeIdFetches entire fileAlways extract nodeId from URL
Downloading all images upfrontBursts of image requests hit Tier 2 limitsDownload only final deduplicated set
Retrying on 429Extends lockout durationStop, wait for Retry-After, then resume with minimal calls
Fetching library componentsRemote library nodes trigger extra API callsUse local component data from initial response

Download now (ZIP)

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
What did you use it for? e.g. Reviewing pull requests in a Rails app

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.