MCPInstall

figma-context-mcp

by vladmdgolamFrontend & Design

Expert guide for using the Figma Context MCP (Framelink) efficiently while avoiding 429 rate-limit errors. Activate when: (1) using Framelink Figma MCP tools (getfigmadata, downloadfigmaimages), (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.

Installs
41
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/vladmdgolam/agent-skills --skill figma-context-mcp
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads figma-context-mcp automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the figma-context-mcp skill do?

Expert guide for using the Figma Context MCP (Framelink) efficiently while avoiding 429 rate-limit errors. Activate when: (1) using Framelink Figma MCP tools (getfigmadata, downloadfigmaimages), (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.

How do I install figma-context-mcp?

Run npx skills add https://github.com/vladmdgolam/agent-skills --skill figma-context-mcp in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/figma-context-mcp/ (personal) or .claude/skills/figma-context-mcp/ (project).

Which AI agents can use figma-context-mcp?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is figma-context-mcp safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains figma-context-mcp?

It is published by vladmdgolam in vladmdgolam/agent-skills. It has 41 recorded installs.

More from vladmdgolam/agent-skills

View all →

blender-mcp

vladmdgolam/agent-skills

Blender MCP expert for scene inspection, Python scripting, GLTF export, and material/animation extraction. Activate when: (1) using Blender MCP tools (getsceneinfo, executepython, screenshot, etc.), (2) writing Blender Python scripts for extraction or manipulation, (3) exporting scenes to GLTF/GLB for web (Three.js, R3F), (4) debugging material or texture export losses, (5) optimizing GLB files with gltf-transform, (6) using asset integrations (PolyHaven, Sketchfab, Hyper3D Rodin, Hunyuan3D). Covers critical export gotchas, material mapping survival, texture optimization pipeline, headless CLI patterns, and known failure modes.

AI & Agents2.4K installs

cinema4d-mcp

vladmdgolam/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents92 installs

visual-feedback-loop

vladmdgolam/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents51 installs

pdf-look-scanned

vladmdgolam/agent-skills

Open the skill to read its SKILL.md instructions.

Docs & Writing49 installs

time-lens

vladmdgolam/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents45 installs

reverse-engineer-js

vladmdgolam/agent-skills

Reverse-engineer minified or obfuscated JavaScript bundles. Primary tool: humanify (humanifyjs) — uses an LLM to rename mangled identifiers back to meaningful names. Default model: gemini-3.8-flash. Use when the user says 'deobfuscate this bundle', 'humanify this', 'rename minified vars', 'reverse engineer this JS', 'what does bundle.js do', or is working in a project with a deobfuscated og/ or modules/ folder fed by humanify. Covers humanify CLI invocation, the pseudo-TTY workaround for cursorTo crashes, single-module extraction from a bundle, and chaining with beautifiers.

AI & Agents45 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs