Figma Mcp Server

Figma Mcp Server

Figma MCP Server Tool will be usefull for convert any Figma Design Files into Working Html or other programing code . you can use this mcp tool with Cursor and Claude and Other AI Tools

The **Figma MCP Server Tool ** provides seamless integration between AI assistants and the Figma API. Using the Model Context Protocol, this Actor enables natural-language control of Figma files—extracting components, exporting assets, reading metadata, posting comments, and more, all from tools like Claude Desktop, ChatGPT, Cursor, or any MCP-capable client.

🚀 Key Features

🧩 Direct Figma API Integration

Access file structure, components, nodes, comments, and metadata with simple MCP commands.

📤 Automated Asset Export

Export Figma nodes as PNG, SVG, JPG, or PDF, including multiple nodes at once.

🔍 Design Insight Tools

List components, inspect nodes, and extract design structure for dev hand-off or design audits.

💬 Collaboration Ready

Read comments, analyze comment threads, and post new comments directly through MCP.

🔐 Secure Token Handling

Persistent and secure token storage using the MCP tool save_figma_token.

🧩 Tools Exposed by the Figma MCP Server

Tool Name	Description
save_figma_token(token)	Securely save your Figma Personal Access Token (PAT).
get_file(file_key)	Retrieve the full JSON structure of a Figma file.
get_node_info(file_key, node_ids_json)	Fetch metadata for one or more nodes by ID.
list_components(file_key)	List all components published within a file.
export_node_images(file_key, node_ids_json, format, scale)	Export nodes as PNG/SVG/JPG/PDF with custom scaling.
list_comments(file_key)	Retrieve all comments associated with a Figma file.
post_comment(file_key, message, x, y, page_id)	Post a comment to a precise coordinate or node.

⚙️ MCP Configuration

MCP SERVER URL

https://bhansalisoft--figma-mcp-server.apify.actor/mcp

To connect this Actor to Claude Desktop or any MCP client, add to your config:

{
    "mcpServers": {
        "figma-mcp-server": {
            "command": "npx",
            "args": [
                "mcp-remote",
                "https://bhansalisoft--figma-mcp-server.apify.actor/mcp?token=[Your APIFY KEY]"
            ],
            "env": {
           "FIGMA_TOKEN": "[Your FIGMA_TOKEN]"
         }
        }
    }
}

Replace your [Your APIFY KEY] and [Your FIGMA_TOKEN]

Once connected, you’ll see all Figma MCP tools automatically listed in your client.

🔑 How to Get Your Figma API Token (PAT)

1. Visit: https://www.figma.com/developers/api#access-tokens

2. Click Generate a personal access token

3. Copy the token

4. Use either method:

   • Add to Apify input
   • Or run tool

Check Demo Video Figma MCP Tool use with Cursor For generate Read html design