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: json { "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 https://youtu.be/8_wceB1maTI