toddle-edu/figma-mcp-server
If you are the rightful owner of figma-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.
Node.js server implementing Model Context Protocol (MCP) for Figma design assets.
The Figma MCP Server is a Node.js-based server that leverages the Model Context Protocol (MCP) to interact with Figma design assets. It connects to the Figma API to retrieve pseudo-code and images for given designs, facilitating a seamless design-to-code workflow. By simply sharing a Figma Design URL with an MCP client, the server automatically extracts the file key and node ID, enabling it to fetch the necessary pseudo-code and/or images. This server is particularly useful for developers and designers looking to integrate Figma designs into their projects efficiently, providing tools to convert design elements into code-like representations and visual assets.
Features
- Connects to Figma API to retrieve design assets.
- Automatically extracts file key and node ID from Figma URLs.
- Generates JSX and CSS pseudo-code from Figma designs.
- Fetches PNG images of Figma nodes or frames.
- Facilitates design-to-code workflow automation.
Usages
npx with MCP Clients
"Figma MCP Server": {
"command": "npx",
"args": ["-y", "figma-codegen-mcp", "--figma_api_key=<YOUR-FIGMA-PERSONAL-ACCESS-TOKEN>"]
}Tools
fetch_figma_node_image
Downloads a visual representation of any Figma design element as a PNG image.
generate_pseudo_code_from_figma_frame
Analyzes Figma design elements and generates corresponding Pseudo HTML + CSS code.