Figma Integration

feuse-mcp provides powerful Figma design-to-code capabilities for frontend developers through built-in integration with Figma-Context-MCP.

Prerequisites

Before using Figma integration features, you need:

1. Figma API Key: Obtain from Figma Developer Settings
2. Design File Access: Ensure you have access to the Figma files you want to process
3. File Key and Node ID: Know how to get this information from Figma URLs

Automatically Get Figma File Information

File Key (fileKey)

Extract from Figma file URL:

https://www.figma.com/file/ABC123/Design-File-Name
                           ^^^^^^
                      This is the fileKey

Node ID (nodeId)

Get from URL parameters when selecting specific elements:

https://www.figma.com/file/ABC123/Design-File-Name?node-id=11675-21664
                                                           ^^^^^^^^^^^
                                                           This is the nodeId

Core Figma Tools

Figma-To-Code

Convert Figma designs directly to frontend code.

Parameters:

• fileKey (required): Figma file identifier
• nodeId (optional): Specific node ID, processes entire page if not specified

Usage Example:

<!-- vscode:  -->
#Figma-To-Code https://www.figma.com/file/ABC123/Design-File-Name?node-id=11675-21664

extract-svg-assets

Intelligently analyze and extract SVG resources from Figma files.

Parameters:

• fileKey (required): Figma file identifier
• nodeId (optional): Specific node ID

Features:

• 🔍 Smart Recognition: Get Figma DSL structure based on FTC capability and automatically identify SVG icons and vector graphics
• 📁 Batch Processing: Support extracting multiple resources at once
• 🏗️ Directory Organization: Automatically create reasonable folder structure

Usage Example:

<!-- vscode:  -->
#extract-svg-assets https://www.figma.com/file/ABC123/Design-File-Name?node-id=11675-21664

extract-color-vars

Extract color variables from Figma and convert to CSS variables or design tokens.

Parameters:

• fileKey (required): Figma file identifier
• nodeId (optional): Specific node ID

Supported Output Formats:

• UnoCSS: Generate uno.config.ts compatible color configuration
• TailwindCSS: Generate tailwind.config.js color extension
• CSS Variables: Generate standard CSS custom properties
• Custom Format: Custom output structure based on project requirements

Usage Example:

<!-- vscode:  -->
#extract-color-vars https://www.figma.com/file/ABC123/Design-File-Name?node-id=11675-21664

similarity-figma

Compare visual similarity between generated code pages and original Figma designs.

Parameters:

• url (required): URL of the current project page
• fileKey (required): Figma file identifier
• nodeId (optional): Specific node ID

Features:

• 📊 Similarity Comparison: Provide quantified similarity analysis
• 📈 Detailed Reports: Generate improvement reports with suggestions
• 🎯 Precise Comparison: Support precise comparison of local regions
• 🔍 Difference Detection: Highlight major difference areas (#TODO)

Usage Example:

<!-- vscode:  -->
#similarity-figma 
http://localhost:8080
https://www.figma.com/file/ABC123/Design-File-Name?node-id=11675-21664

Workflow Recommendations

1. Complete Design-to-Code Process

graph TD
    A[Get Figma Design] --> B[Extract Color Variables]
    B --> C[Download Resources]
    C --> D[Generate Base Code]
    D --> E[Local Development and Debugging]
    E --> F[Similarity Verification]
    F --> G[Iterative Optimization]

2. Batch Resource Processing

For design systems containing many icons:

1. Use extract-svg-assets to batch extract all icons
2. Establish color system through extract-color-vars
3. Use Figma-To-Code to generate component library framework

3. Component Development Verification

When developing individual components:

1. Use Figma-To-Code to generate component base code
2. Local debugging and feature improvement
3. Verify visual restoration through similarity-figma
4. Adjust based on comparison results

Best Practices

Design File Preparation

• Unified Naming Convention: Use clear naming for layers and components
• Reasonable Hierarchical Structure: Maintain clear design hierarchy
• Component-based Design: Use Figma component features to improve reusability

Code Generation Optimization

• Local Configuration Check: Ensure ESLint, Prettier and other configurations are correct
• Dependency Installation: Install necessary UI libraries and toolkits
• Unified Style System: Use consistent CSS solutions (like TailwindCSS)

Quality Control

• Regular Similarity Checks: Perform visual comparisons regularly during development
• Multi-device Testing: Verify responsive design effects
• Performance Optimization: Optimize generated code and resources

Common Issues

Q: How to handle complex Figma designs?

A: It's recommended to split complex designs into multiple smaller components, convert them separately, then combine.

Q: What if the generated code doesn't match the design?

A: Use the similarity-figma tool for comparison analysis and make targeted adjustments based on the difference report.

Q: How to handle custom fonts and special effects?

A: Ensure the local environment has the corresponding fonts installed; special effects may need manual CSS adjustments.

Q: Which frontend frameworks are supported?

A: Currently supports React, Vue, HTML/CSS and other mainstream frontend technology stacks, automatically adapting based on project configuration.