Figma Context

Features•Quick Start•MCP Capabilities•Architecture•Documentation•中文文档

Figma Context MCP is aModel Context Protocol (MCP)server that bridges Figma designs with AI coding assistants likeCursor,Windsurf, andCline.

Note: This project is based onFigma-Context-MCP, with optimized data structures and intelligent layout detection algorithms.

npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude

npm install -g @yhy2001/figma-mcp-server

git clone https://github.com/1yhy/Figma-Context-MCP.git cd Figma-Context-MCP pnpm install pnpm build

- Go toFigma Account Settings
- Scroll to "Personal access tokens"
- Click "Create new token"
- Copy the token

{ "mcpServers": { "Figma": { "command": "npx", "args": ["-y", "@yhy2001/figma-mcp-server", "--stdio"], "env": { "FIGMA_API_KEY": "your-figma-api-key" } } } }

# From source (development) cp .env.example .env # Add FIGMA_API_KEY to .env pnpm install && pnpm build pnpm start # Starts on port 3333 # Or with environment variable FIGMA_API_KEY=<your-key> pnpm start # Or via global install figma-mcp --figma-api-key=<your-key> --port=3333 # Connect via SSE # URL: http://localhost:3333/sse

Please implement this Figma design: https://www.figma.com/design/abc123/MyDesign?node-id=1:234 Use React and Tailwind CSS.

This server provides full MCP capabilities support:

┌─────────────────────────────────────────────────────────────┐ │ Figma MCP Server v1.1.0 │ ├─────────────────────────────────────────────────────────────┤ │ Tools (2) AI-invoked operations │ │ ├── get_figma_data Fetch design data │ │ └── download_figma_images Download image assets │ ├─────────────────────────────────────────────────────────────┤ │ Prompts (3) User-selected templates │ │ ├── design_to_code Full design-to-code flow │ │ ├── analyze_components Component structure │ │ └── extract_styles Style token extraction │ ├─────────────────────────────────────────────────────────────┤ │ Resources (5) Lightweight data sources │ │ ├── figma://help Usage guide │ │ ├── figma://file/{key} File metadata (~200 tok) │ │ ├── figma://file/{key}/styles Design tokens (~500 tok) │ │ ├── figma://file/{key}/components Component list (~300 tok)│ │ └── figma://file/{key}/assets Asset inventory (~400 tok) │ └─────────────────────────────────────────────────────────────┘

Built-in professional prompt templates to help AI generate high-quality code:
- Project Analysis- Read theme config, global styles, component library
- Structure Analysis- Identify page patterns, component splitting strategy
- ASCII Layout Blueprint- Generate layout diagram with component and asset annotations
- Asset Management- Analyze, download, and organize images/icons
- Code Generation- Generate code following project conventions
- Accessibility Optimization- Semantic HTML, ARIA labels
- Responsive Adaptation- Mobile layout adjustments

# Get file metadata (~200 tokens) figma://file/abc123 # Get design tokens (~500 tokens) figma://file/abc123/styles # Get component list (~300 tokens) figma://file/abc123/components # Get asset inventory (~400 tokens) figma://file/abc123/assets

┌──────────────────────────────────────────────────────────────┐ │ MCP Server │ ├──────────────────────────────────────────────────────────────┤ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────────────┐ │ │ │ Tools │ │ Prompts │ │ Resources │ │ │ │ (2 tools) │ │ (3 prompts) │ │ (5 resources) │ │ │ └──────┬──────┘ └─────────────┘ └──────────┬──────────┘ │ │ │ │ │ │ └──────────────────┬───────────────────┘ │ │ ▼ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ FigmaService │ │ │ │ API Calls • Validation • Error Handling │ │ │ └────────────────────────┬───────────────────────────────┘ │ │ │ │ │ ┌─────────────────┴─────────────────┐ │ │ ▼ ▼ │ │ ┌─────────────────┐ ┌─────────────────────┐ │ │ │ CacheManager │ │ Parser + Algo │ │ │ │ L1: LRU Memory │ │ • Layout Detection │ │ │ │ L2: Disk Store │ │ • Icon Merging │ │ │ └─────────────────┘ │ • CSS Generation │ │ │ └─────────────────────┘ │ └──────────────────────────────────────────────────────────────┘

Two-layer cache architecture significantly reduces API calls:

Automatically converts absolute positioning to semantic Flexbox/Grid layouts:

Input (Figma absolute positioning): ┌─────────────────────────┐ │ ■ (10,10) ■ (110,10) │ │ ■ (10,60) ■ (110,60) │ └─────────────────────────┘ Output (Inferred Grid): display: grid grid-template-columns: 100px 100px grid-template-rows: 50px 50px gap: 10px

src/ ├── algorithms/ # Smart algorithms │ ├── layout/ # Layout detection (Flex/Grid inference) │ └── icon/ # Icon merge detection ├── core/ # Core parsing │ ├── parser.ts # Figma data parser │ ├── style.ts # CSS style generation │ ├── layout.ts # Layout processing │ └── effects.ts # Effects handling ├── services/ # Service layer │ ├── figma.ts # Figma API client │ └── cache/ # Multi-layer cache system ├── prompts/ # MCP prompt templates ├── resources/ # MCP resource handlers ├── types/ # TypeScript type definitions ├── utils/ # Utility functions ├── server.ts # MCP server main entry └── index.ts # CLI entry tests/ ├── fixtures/ # Test data │ ├── figma-data/ # Raw JSON from Figma API │ └── expected/ # Expected output snapshots ├── integration/ # Integration tests │ ├── layout-optimization.test.ts # Layout optimization tests │ ├── output-quality.test.ts # Output quality validation │ └── parser.test.ts # Parser tests └── unit/ # Unit tests ├── algorithms/ # Algorithm tests (layout, icon detection) ├── resources/ # Resource handler tests └── services/ # Service layer tests scripts/ └── fetch-test-data.ts # Figma test data fetcher

# Setup git clone https://github.com/1yhy/Figma-Context-MCP.git cd Figma-Context-MCP pnpm install # Development pnpm dev # Watch mode pnpm test # Run tests (272 test cases) pnpm lint # Lint code pnpm build # Build # Debug pnpm inspect # MCP Inspector # Test with your own Figma data pnpm tsx scripts/fetch-test-data.ts <fileKey> <nodeId> <outputName> # Commit (uses conventional commits) git commit -m "feat: add new feature"

# 1. Update version in package.json and CHANGELOG.md # 2. Commit version bump git add -A git commit -m "chore: bump version to x.x.x" # 3. Publish to npm (auto runs: type-check → lint → test → build) npm login --scope=@yhy2001 # if not logged in pnpm run pub:release # 4. Create git tag and push git tag vx.x.x git push origin main --tags # 5. Create GitHub Release (optional) # Go to https://github.com/1yhy/Figma-Context-MCP/releases/new

You can test the layout detection and optimization with your own Figma designs:

# Copy the environment template cp .env.example .env # Edit .env file with your configuration FIGMA_API_KEY=your_figma_api_key_here TEST_FIGMA_FILE_KEY=your_file_key # Optional TEST_FIGMA_NODE_ID=your_node_id # Optional

# Method 1: Using command line arguments (recommended) pnpm tsx scripts/fetch-test-data.ts <fileKey> <nodeId> <outputName> # Example: Fetch a specific node pnpm tsx scripts/fetch-test-data.ts UgtwrncR3GokKDIS7dpm4Z 402-34955 my-design # Method 2: Using environment variables TEST_FIGMA_FILE_KEY=xxx TEST_FIGMA_NODE_ID=123-456 pnpm tsx scripts/fetch-test-data.ts

https://www.figma.com/design/UgtwrncR3GokKDIS7dpm4Z/MyProject?node-id=402-34955 ↑ fileKey ↑ nodeId

# Run all tests pnpm test # Run only integration tests (validate layout optimization) pnpm test tests/integration/ # View output JSON files ls tests/fixtures/figma-data/

- Data Compression- Typically >50% compression
- Layout Detection- Flex/Grid layout recognition rate
- CSS Properties- Redundant property cleanup
- Output Quality- Structural consistency checks

If tests fail, the output may not meet expectations. Check error messages to adjust or report an issue.

- Figma-Context-MCP- Original project
- Model Context Protocol- MCP specification
- Best-README-Template- README template reference

Interact with the Figma API to access and manage design files and resources.