figma-mcp
Figma design platform integration. Access design files, extract component information, read design tokens, and translate designs into code. Bridge the gap between design and development workflows.
Summary
Integrate Figma design files directly into Claude Code to access components, extract design tokens, and translate visual designs into production-ready code.
- This skill bridges the gap between design and development, enabling seamless handoff and reducing manual work.
Overview
A curated directory of high-quality plugins for Claude Code.
⚠️ Important: Make sure you trust a plugin before installing, updating, or using it. Anthropic does not control what MCP servers, files, or other software are included in plugins and cannot verify that they will work as intended or that they won't change. See each plugin's homepage for more information.
Structure
- •`/plugins` - Internal plugins developed and maintained by Anthropic
- •`/external_plugins` - Third-party plugins from partners and the community
Installation
Plugins can be installed directly from this marketplace via Claude Code's plugin system.
To install, run /plugin install {plugin-name}@claude-plugins-official
or browse for the plugin in /plugin > Discover
Contributing
Internal Plugins
Internal plugins are developed by Anthropic team members. See /plugins/example-plugin for a reference implementation.
External Plugins
Third-party partners can submit plugins for inclusion in the marketplace. External plugins must meet quality and security standards for approval. To submit a new plugin, use the plugin directory submission form.
Plugin Structure
Each plugin follows a standard structure:
plugin-name/
├── .claude-plugin/
│ └── plugin.json # Plugin metadata (required)
├── .mcp.json # MCP server configuration (optional)
├── commands/ # Slash commands (optional)
├── agents/ # Agent definitions (optional)
├── skills/ # Skill definitions (optional)
└── README.md # DocumentationSkill-bundle plugins
When a plugin's source repository ships skills (SKILL.md files) without a .claude-plugin/plugin.json manifest, the marketplace entry can declare the skills directly using strict: false and an explicit skills array.
{
"name": "example-bundle",
"description": "Brief description of the bundled skills.",
"author": { "name": "Author Name" },
"category": "development",
"source": {
"source": "git-subdir",
"url": "https://github.com/example-org/sdk.git",
"path": "packages/agent-skills",
"ref": "main",
"sha": "<commit sha>"
},
"strict": false,
"skills": [
"./skill-a",
"./skill-b",
"./skill-c"
],
"homepage": "https://github.com/example-org/sdk"
}Each path in skills is relative to source.path and points at a directory containing a SKILL.md. Paths can reach deeper than a single level — for example, ["./libA/skill-1", "./libB/skill-2"] exposes a curated subset across multiple library subdirectories. Each skill is registered as <plugin-name>:<skill-name> in Claude Code.
For the underlying schema, see Strict mode in the marketplace documentation.
License
Please see each linked plugin for the relevant LICENSE file.
Documentation
For more information on developing Claude Code plugins, see the official documentation.
Install & Usage
~/.claude.jsonAdd the configuration to "mcpServers": { "figma-mcp": { "command": "...", "args": [] } }
/mcpUse Cases
Usage Examples
/figma-mcp extract tokens from file 'App Design' and output as CSS custom properties
Get all button component variants from the latest Figma file and generate a React component with props
Translate the 'Homepage Hero' frame into a Tailwind CSS layout
Security Audits
Frequently Asked Questions
What is figma-mcp?
Integrate Figma design files directly into Claude Code to access components, extract design tokens, and translate visual designs into production-ready code. This skill bridges the gap between design and development, enabling seamless handoff and reducing manual work.
How to install figma-mcp?
To install figma-mcp: open your mcp config (~/.claude.json), then add the config to "mcpServers": { "figma-mcp": { "command": "...", "args": [] } }. Finally, /mcp in Claude Code.
What is figma-mcp best for?
figma-mcp is a mcp categorized under General. It is designed for: design, mcp. Created by Anthropic.
What can I use figma-mcp for?
figma-mcp is useful for: Extract all color tokens from a Figma file to generate a CSS or Tailwind theme.; Retrieve component properties and variants from a Figma design to scaffold React components.; Convert a Figma frame's layout and styles into responsive HTML/CSS code.; Compare design token values between two Figma files to ensure consistency across projects.; Generate a list of all icons used in a Figma file with their export URLs for asset management.; Pull typography styles from Figma to set up a design system's text styles in code..