claude mcp add ranoaiung-figma-ui-mcp -- npx -y figma-ui-mcp
{
"mcpServers": {
"ranoaiung-figma-ui-mcp": {
"command": "npx",
"args": ["-y", "figma-ui-mcp"]
}
}
}
{
"mcpServers": {
"ranoaiung-figma-ui-mcp": {
"command": "npx",
"args": ["-y", "figma-ui-mcp"]
}
}
}
{
"mcpServers": {
"ranoaiung-figma-ui-mcp": {
"command": "npx",
"args": ["-y", "figma-ui-mcp"]
}
}
}
About This MCP Server
The figma-ui-mcp server enables bidirectional communication between Figma and AI coding assistants, allowing AI to generate UI designs on the Figma canvas and read back design elements. This server connects to Figma through the Model Context Protocol, facilitating seamless interaction between human designers and AI tools. Developers would use this server to integrate AI-driven design capabilities into their workflows, particularly when working with Figma and AI coding assistants.
Bidirectional Figma MCP — AI draws UI on Figma canvas, reads designs back. This is a Model Context Protocol (MCP) server that extends AI assistants like Claude with developer tools capabilities via the stdio transport.
Package
figma-ui-mcp on npm
HOW TO USE
Select your AI client above to get the install command. This MCP server uses the stdio transport and is available on npm.
What tools does it provide?
The figma-ui-mcp server extends your AI assistant with developer tools capabilities. Once installed, your AI can use its tools automatically.
