figma
Use the Figma MCP server to fetch design context, screenshots, variables and assets, and to translate Figma nodes into production code.
- Kind
- Skill
- Works with
- Codex, Claude Code
- Source
- openai/skills @ 49f948faa925
- Path
- skills/.curated/figma/SKILL.md
- License
- Apache-2.0
- Jobs
- UI/UX work, Implementation
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# 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 …