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.
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.
Key capabilities
- Includes SKILL.md support
- Reusable instructions support
- Design and media
- Design and media use cases
Technical details
- 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
Explore related resources
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.
Auto-fetched from GitHub.
