figma Skill
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. Published by openai in skills.
Decision snapshot
Is this a fit?
Design and media, Includes SKILL.md, Reusable instructions
Compatibility not yet detected.
Permission behavior not yet detected.
Copy skill directory
2 months ago
No specific cautions were detected. Review the source and requested permissions before installing.
What is figma Skill?
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. Published by openai in skills. This profile combines repository metadata with install, compatibility, and usage signals so developers can quickly decide whether it fits their agent workflow before opening the source repository.
Automated repository signals based on public metadata such as recency, license, installation evidence, and adoption. These are not a security audit or endorsement. See how SkillIndex evaluates profiles.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Design and media use cases
Declared skill metadata
- Source file: skills/.curated/figma/SKILL.md
These fields retain source and confidence evidence from the indexed SKILL.md.
Compatibility and setup
- Install or run with Copy skill directory
When to use figma Skill
- Use it for design and media.
Built with
Editorial notes
Source
- Creator: openai
- Repository: openai/skills
- Skill file: skills/.curated/figma/SKILL.md
What it does
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.
Skill instructions
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 getdesigncontext first to fetch the structured representation for the exact node(s). 2. If the response is too large or truncated, run getmetadata to get the high-level node map and then re-fetch only the required node(s) with getdesigncontext. 3. Run getscreenshot for a visual reference of the node variant being implemented. 4. Only after you have both getdesigncontext and getscreenshot, 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. Valid
Verified compatibility and discovery
Frequently asked questions
What is figma?
figma is a open-source AI agent skill with Copy skill directory. Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code.
Who is figma best for?
figma is best for reusing agent instructions, scripts, and references, design and media workflows.
How do I install figma?
Install or run figma using Copy skill directory. Check figma for the latest setup command.
Is figma actively maintained?
figma may need a closer maintenance check before production use.
Project health auto-fetched from the source repository.
Maintain this resource?
Review this source-backed profile, send a correction with evidence, or link to it from your documentation. Claims verify your relationship to the project; profile facts still require source evidence and editorial review.
