Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Figma MCP
Use the Figma MCP server for Figma-driven implementation. For setup and debugging details (env vars, config, verification), see `references/figma-mcp-config.md`.
## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.
### Implementation rules
…
The line at the top of this page pins the label git:20260502.38d5305, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
GET https://markdownregistry.com/api/v1/artifacts/art_zl6glbgzxjdxmi5s
GET https://markdownregistry.com/api/v1/resolve?ref=vodailocz/kilo-kit-mcp/figma
GET https://markdownregistry.com/api/v1/blob/5b11f7c8d0ce4c047b401323e7b8fe6559bd3162a3397bf5248634a5444609d5
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
vodailocz/kilo-kit-mcp · skills/agent-frameworks/agent-memory/SKILL.md · Use when implementing or managing persistent, hierarchical memory systems for AI agents. Covers cross-session state…
vodailocz/kilo-kit-mcp · skills/agent-frameworks/mcp-agent-patterns/SKILL.md · Use when integrating or optimizing Model Context Protocol (MCP) servers and clients. Keywords: MCP, Model Context…
vodailocz/kilo-kit-mcp · skills/agent-frameworks/workflow-state-machines/SKILL.md · Use when designing, implementing, or debugging complex agentic workflows using state machine patterns. Keywords: state…
vodailocz/kilo-kit-mcp · skills/ai-media/ai-multimodal/SKILL.md · Process and generate multimedia content using Google Gemini API. Capabilities include analyze audio files…
vodailocz/kilo-kit-mcp · skills/ai-media/screenshot/SKILL.md · Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel…
heygen-com/hyperframes · skills/figma/SKILL.md · Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed…
tech-leads-club/agent-skills · packages/skills-catalog/skills/(design)/figma/SKILL.md · Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma…
letta-ai/skills · tools/figma/SKILL.md · Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma…
seaworld008/commonly-used-high-value-skills · openclaw-skills/figma/SKILL.md · Fetch Figma design context, variables, screenshots, and assets through MCP when working from Figma URLs or node IDs, or…
ulises-jeremias/agent-toolkit · plugins/agent-toolkit-complete/.opencode/skills/figma/SKILL.md · Use the Figma MCP server to fetch design context, screenshots, variables, and assets, and
