j4ckp0t85/Figma-Context-MCP-tokens
If you are the rightful owner of Figma-Context-MCP-tokens 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.
The Figma MCP Server allows AI-powered coding tools to access Figma files, enhancing design-to-code translation.
The Figma MCP Server is a Model Context Protocol server that provides AI-powered coding tools like Cursor, Windsurf, and Cline with access to Figma design files. This server enhances the ability of these tools to accurately translate Figma designs into code by extracting detailed CSS properties and generating design tokens. By providing a more precise representation of design elements, the server improves the accuracy of design implementations compared to traditional methods like using screenshots. The server can be quickly set up using NPM, and it supports various configuration options to tailor its functionality to specific needs. It also offers advanced features like gradient support, multi-layered backgrounds, and text styling, making it a comprehensive solution for design-to-code workflows.
Features
- Detailed CSS Properties: Extracts exact CSS values for all elements, including colors, dimensions, borders, shadows, and typography.
- Accurate Rendering: Provides better translation from Figma to code with proper styles instead of screenshots.
- Design Tokens Generation: Automatically generates design tokens from Figma designs, exportable in various formats like CSS, SCSS, TypeScript, and JSON.
- Gradient and Effects Support: Accurate extraction of gradients, multi-layered backgrounds, text styling, and effects like box-shadow and blur.
Usages
usage with Cursor
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}usage with Windsurf
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}usage with Cline
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}usage with Claude Desktop
{
"mcpServers": {
"figma-developer-mcp": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--stdio"],
"env": {
"FIGMA_API_KEY": "<your-figma-api-key>"
}
}
}
}Tools
get_figma_data
Fetches information about a Figma file, with options to extract detailed CSS properties.
generate_design_tokens
Generates design tokens from a Figma file and exports them in specified formats.
