Figma MCP server via desktop app
## Figma Desktop MCP Server: Design Tool Integration The **Figma Desktop MCP Server** integrates Figma Desktop into Google Antigravity, enabling design file access, component inspection, and asset export directly from your development environment. ### Why Figma Desktop MCP? - **Direct Access**: Work with Figma files locally - **Component Library**: Access design system components - **Asset Export**: Export assets in multiple formats - **Design Tokens**: Extract colors, typography, spacing - **Real-Time Sync**: Stay in sync with team designs ### Key Features #### 1. File Operations ```python # Open Figma file file = await mcp.open_file(key="abc123xyz") # Get file info info = await mcp.get_file_info(file_key="abc123xyz") print(f"Name: {info['name']}") print(f"Pages: {len(info['document']['children'])}") # List pages for page in info["document"]["children"]: print(f"Page: {page['name']}") ``` #### 2. Component Access ```python # Get components components = await mcp.get_components(file_key="abc123xyz") for comp in components["meta"]["components"]: print(f"Component: {comp['name']} - {comp['key']}") # Get component sets sets = await mcp.get_component_sets(file_key="abc123xyz") for s in sets["meta"]["component_sets"]: print(f"Set: {s['name']}") ``` #### 3. Export Operations ```python # Export frames as images exports = await mcp.export_images( file_key="abc123xyz", ids=["1:2", "1:3", "1:4"], format="png", scale=2 ) for node_id, url in exports["images"].items(): print(f"Node {node_id}: {url}") # Export as SVG await mcp.export_svg( file_key="abc123xyz", node_id="1:5", output_path="/exports/icon.svg" ) ``` #### 4. Style Extraction ```python # Get styles styles = await mcp.get_styles(file_key="abc123xyz") # Extract colors for style in styles["meta"]["styles"]: if style["style_type"] == "FILL": print(f"Color: {style['name']} - {style['key']}") # Get typography for style in styles["meta"]["styles"]: if style["style_type"] == "TEXT": print(f"Text: {style['name']}") ``` ### Configuration ```json { "mcpServers": { "figma-desktop": { "command": "npx", "args": ["-y", "@anthropic/mcp-figma-desktop"], "env": { "FIGMA_PERSONAL_ACCESS_TOKEN": "your-figma-token" } } } } ``` ### Use Cases **Design Handoff**: Extract specs and assets from designs. **Component Library**: Access shared component libraries. **Design Tokens**: Generate design tokens from Figma. **Asset Pipeline**: Automate asset exports. The Figma Desktop MCP enables design tool integration within your development environment.
{
"mcpServers": {
"figma-desktop": {
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp",
"type": "http"
}
}
}
}
}