When AI tools can access Figma design data directly, they generate more accurate code on the first try—far better than using screenshots.
figma-context-mcp is an MCP project maintained in the 1yhy/figma-context-mcp repository. The maintainer describes its purpose as “When AI tools can access Figma design data directly, they generate more accurate code on the first try—far better than using screenshots”. Read the project documentation for the complete scope.
The documented npm package is @yhy2001/figma-mcp-server. The configuration below comes from the maintainer’s example; adapt its paths and account values to your environment.
The example declares FIGMA_API_KEY. Secret-looking values have been replaced with placeholders. Required and optional labels are shown only when the documentation states them.
Project documentation · Repository · Discovery listing. This profile records the public documentation checked on 2026-10-08.
Check the linked publisher documentation and your connected client's tool list. Names and availability can vary with the server version and account permissions.
| Tool | What it does |
|---|---|
| get_figma_data | Fetch simplified design data |
| download_figma_images | Download images and icons |
{
"mcpServers": {
"Figma": {
"command": "npx",
"args": [
"-y",
"@yhy2001/figma-mcp-server",
"--stdio"
],
"env": {
"FIGMA_API_KEY": "YOUR_FIGMA_API_KEY"
}
}
}
}From the project documentation. Replace placeholders and example paths before connecting.
| Variable | Description | Required |
|---|---|---|
| FIGMA_API_KEY | Declared in the maintainer’s client configuration. | Check documentation |
Feed real design data to your coding assistant — layout, tokens and components straight from Figma files.
Integrates Figma's API with Claude and other Model Context Protocol (MCP) compatible clients, providing read-only access to Figma files and projects.
Manages courses, assignments, enrollments, and grades within Canvas using the Canvas API.
Provides a unified TypeScript interface for LLMs to interact with various 3D software applications.
Generates Vue 3 components from Figma designs, adhering to Hostinger's design system.
Enables Cursor AI to interact with Figma, allowing programmatic design modification and data extraction.