{
    "id": "bhaskar/figma-mcp-server",
    "kind": "mcp",
    "title": "Figma MCP Server",
    "summary": "Framelink server that gives your AI coding tool the layout, styles and assets of a Figma design so it can build the UI accurately.",
    "author": "Admin",
    "stars": 0,
    "url": "https://ownlyplans.com/bhaskar/figma-mcp-server/",
    "stack": [
        "Node.js"
    ],
    "tools": [
        "claude-code",
        "cursor"
    ],
    "difficulty": "beginner",
    "license": "see-source",
    "version": "1.0",
    "overview": "This server reads a Figma file or frame through the Figma API and returns a simplified view of layout, colors, typography and spacing. Your AI tool uses it to build the component instead of guessing from a screenshot.\n\nPaste a Figma link into your prompt and ask for the component. You need a Figma personal access token with read access. Keep the token in your own config and never commit it.",
    "steps": [],
    "files": [
        {
            "type": "mcp",
            "name": "Figma MCP Server config",
            "note": "Add this to your MCP client's config, or use the install line.",
            "file": "figma-mcp-server-config",
            "url": "https://ownlyplans.com/bhaskar/figma-mcp-server/figma-mcp-server-config/"
        },
        {
            "type": "link",
            "name": "Official setup docs",
            "note": "Client-specific setup, options and permissions.",
            "url": "https://github.com/GLips/Figma-Context-MCP#readme"
        }
    ],
    "install": "claude mcp add-json figma '{\"command\":\"npx\",\"args\":[\"-y\",\"figma-developer-mcp\",\"--figma-api-key=YOUR-FIGMA-TOKEN\",\"--stdio\"]}'",
    "how_to_use": "Run the install command, or read files with get_asset first."
}