Transforms Figma designs into Angular code with support for standalone components, Signals, modern templates, and TypeScript.
Automatically generates CSS from Figma design properties including padding, margins, borders, and effects.
Converts Figma designs to Electron applications with security hardening, IPC patterns, and native integration.
Extracts design data from Figma, including layout properties, styling, structure, and responsive design specifications. Enables accessing designer comments, downloading design assets, and analyzing designs for code generation.
Converts Figma designs into React code with TypeScript, Hooks, Custom Hooks, and performance optimization support.
Converts Figma designs to Svelte code with support for Svelte 5 runes, TypeScript, SvelteKit, and Stores.
Supports downloading SVG assets from Figma designs with original export settings preserved.
Converts Figma designs to Swift code with support for SwiftUI patterns, state management, MVVM, and accessibility features.
Transforms Figma designs into Tauri applications with Rust commands, event system, security features, and WebView implementation.
Provides TypeScript support for various frameworks when converting Figma designs to code.
Transforms Figma designs into UIKit implementations with modern concurrency, SwiftUI interoperability, and Auto Layout support.
Figma MCP PRO
Professional Model Context Protocol (MCP) server for AI-optimized Figma design analysis. Clean 5-step workflow for comprehensive design-to-code conversion with smart comment processing and asset downloads.
🚀 Key Features
5-Step Workflow: Framework selection → Design data → Comments → Assets → Reference analysis
AI-Optimized: Structured data specifically formatted for AI code generation
10 Framework Support: React, Vue, Angular, Svelte, HTML/CSS/JS, SwiftUI, UIKit, Electron, Tauri, NW.js
Smart Comments: Coordinate-based matching of designer comments to UI elements
Asset Downloads: Batch download with original Figma export settings
CSS Generation: Automatic CSS from Figma properties (padding, margins, borders, effects)
Related MCP server: Figma MCP Server
📦 Installation
Installing via Smithery
To install figma-mcp-pro for Claude Desktop automatically via Smithery:
Manual Installation
⚙️ Quick Setup
1. Get Your Figma API Key
Get your API token from Figma Account Settings → Personal access tokens
2. Copy & Paste MCP Configuration
📋 Use the copy button on the code block below, then replace your-api-key-here with your actual API key:
Configuration File Locations:
Claude Desktop:
claude_desktop_config.jsonClaude Code (VS Code): VS Code MCP settings
Cursor, Windsurf, TRAE: Application MCP configuration settings
📝 Tool Reference
Core Tools
show_frameworks
Shows available frameworks. Call first to choose target framework.
get_figma_data
Extracts AI-optimized design data with framework-specific processing.
Input: Figma URL + framework
Output: Design structure, CSS properties, layout data
process_design_comments
Matches designer comments to design elements with AI implementation prompts.
Input: Figma URL + framework
Output: Comment-to-element mapping with actionable instructions
download_design_assets
Downloads export-ready assets with original Figma settings + reference image.
Input: Figma URL + local path
Output: Asset files + reference.png for visual context
check_reference
Analyzes reference.png for design understanding and development guidance.
Input: Assets folder path + framework
Output: Design analysis and framework-specific development recommendations
🎯 What You Get
Design Data
Layout: Padding, margins, gaps, auto-layout properties
Styling: Colors, borders, shadows, effects, typography
Structure: Component hierarchy, semantic roles
Responsive: Flexible sizing, constraints, breakpoints
Smart Comments
Coordinate Matching: Comments linked to specific design elements
AI Instructions: "Add hover animation to Button component"
Implementation Context: Element details + positioning
Asset Downloads
Export Settings: Respects Figma's configured export settings
Original Names: Uses actual node names as filenames
Visual Reference: reference.png shows complete design context
Multiple Formats: SVG, PNG, JPG, PDF support
🌟 Framework Optimizations
React: TypeScript, Hooks, Custom Hooks, Performance optimization
Vue: Composition API, TypeScript, Pinia stores, Composables
Angular: Standalone components, Signals, Modern templates, TypeScript
Svelte: Svelte 5 runes, TypeScript, SvelteKit, Stores
HTML/CSS/JS: Design tokens, Modern CSS, Accessibility-first
SwiftUI: State management, MVVM, Accessibility, Modern patterns
UIKit: Modern concurrency, SwiftUI interop, Auto Layout
Electron: Security hardening, IPC patterns, Native integration
Tauri: Rust commands, Event system, Security, WebView
NW.js: Unified context, Node.js integration, Chromium APIs
📄 License
MIT License
🆘 Support
Issues: GitHub Issues
NPM: figma-mcp-pro