Design
Figma Context
Bridges Figma designs into AI agents — read layouts, components, and design tokens for design-to-code workflows.
Install
npx -y figma-developer-mcp --figma-api-key=<YOUR_KEY>
Figma Context MCP is the highest-starred Figma integration (15K+) for AI agents. It extracts design data from Figma files — layouts, components, styles, and tokens — so agents can generate accurate, design-faithful code.
## Capabilities
- Read Figma file structure and layers
- Extract design tokens (colors, spacing, typography)
- Get component properties and variants
- Retrieve layout and positioning data
- Support for auto-layout and constraint information
## Usage
```json
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=<YOUR_KEY>"]
}
}
}
```
## Getting a Token
1. Go to Figma → Settings → Personal Access Tokens
2. Generate a new token
3. Use it in the `--figma-api-key` flag