Simplified Figma context for Cursor
## Framelink Figma MCP Server: Design Context Integration The **Framelink Figma MCP Server** provides enhanced Figma integration for Google Antigravity, enabling contextual design information, component documentation, and design-to-code workflows directly from your development environment. ### Why Framelink Figma MCP? - **Context Aware**: Get relevant design context for development - **Component Docs**: Access component documentation and usage - **Design Tokens**: Automatic design token extraction - **Code Generation**: Generate code from Figma designs - **Version Tracking**: Track design changes over time ### Key Features #### 1. Contextual Queries ```python # Get design context for component context = await mcp.get_design_context( file_key="abc123xyz", component_name="Button" ) print(f"Component: {context['name']}") print(f"Variants: {context['variants']}") print(f"Properties: {context['properties']}") ``` #### 2. Component Information ```python # Get component details component = await mcp.get_component_details( file_key="abc123xyz", component_key="comp_123" ) print(f"Description: {component['description']}") print(f"Documentation: {component['documentationLinks']}") # Get variant properties variants = await mcp.get_variant_properties( component_key="comp_123" ) for variant in variants: print(f"Variant: {variant['name']} - {variant['properties']}") ``` #### 3. Design Tokens ```python # Extract design tokens tokens = await mcp.extract_tokens(file_key="abc123xyz") # Colors for color in tokens["colors"]: print(f"Color: {color['name']} - {color['value']}") # Typography for text in tokens["typography"]: print(f"Text: {text['name']} - {text['fontSize']}px") # Spacing for space in tokens["spacing"]: print(f"Space: {space['name']} - {space['value']}px") ``` #### 4. Code Generation ```python # Generate React component code = await mcp.generate_code( file_key="abc123xyz", node_id="1:5", framework="react", style_format="tailwind" ) print(code["jsx"]) print(code["styles"]) # Generate CSS css = await mcp.generate_css( file_key="abc123xyz", node_id="1:5" ) ``` ### Configuration ```json { "mcpServers": { "figma-context": { "command": "npx", "args": ["-y", "@anthropic/mcp-framelink-figma"], "env": { "FIGMA_ACCESS_TOKEN": "your-figma-token", "OUTPUT_FORMAT": "tailwind" } } } } ``` ### Use Cases **Design-to-Code**: Convert Figma designs to code. **Component Documentation**: Access design system documentation. **Token Generation**: Generate design tokens automatically. **Design Context**: Get relevant design context while coding. The Framelink Figma MCP enables design context integration within your development environment.
{
"mcpServers": {
"figma-context": {
"mcpServers": {
"figma-context": {
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_TOKEN"
},
"args": [
"-y",
"@anthropic/figma-context-mcp"
],
"command": "npx"
}
}
}
}
}