MCP server to generate design systems, tokens, and provide Figma layout information to AI coding agents like Cursor
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add figma-by-bao-to-generate-design-systems- -- npx -y @tothienbao6a0/figma-mcp-server --figma-api-key=YOUR-KEY --stdio~/.codex/config.toml
[mcp_servers.figma-by-bao-to-generate-design-systems-]
command = "npx"
args = ["-y", "@tothienbao6a0/figma-mcp-server", "--figma-api-key=YOUR-KEY", "--stdio"]
# codex mcp add figma-by-bao-to-generate-design-systems- -- npx -y @tothienbao6a0/figma-mcp-server --figma-api-key=YOUR-KEY --stdio~/.cursor/mcp.json
{
"mcpServers": {
"figma-by-bao-to-generate-design-systems-": {
"command": "npx",
"args": [
"-y",
"@tothienbao6a0/figma-mcp-server",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}.vscode/mcp.json
{
"servers": {
"figma-by-bao-to-generate-design-systems-": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@tothienbao6a0/figma-mcp-server",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"figma-by-bao-to-generate-design-systems-": {
"command": "npx",
"args": [
"-y",
"@tothienbao6a0/figma-mcp-server",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"figma-by-bao-to-generate-design-systems-": {
"command": "npx",
"args": [
"-y",
"@tothienbao6a0/figma-mcp-server",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"figma-by-bao-to-generate-design-systems-": {
"command": "npx",
"args": [
"-y",
"@tothienbao6a0/figma-mcp-server",
"--figma-api-key=YOUR-KEY",
"--stdio"
]
}
}
}