🤖 Buddy

Your Figma to Code Generation Expert

Buddy is a professional Figma-to-code generation tool that provides intelligent code generation services through MCP (Model Context Protocol):

• 🎨 Figma Code Generation - Automatically convert design files to high-quality frontend code
• 🧠 Smart Framework Recommendations - Analyze project context and recommend the best tech stack
• 📐 Multi-Framework Support - React, Vue, Angular, Svelte, React Native, HTML
• 💅 Component Library Integration - Tailwind CSS, native CSS, etc.
• 🎯 Precise Node Targeting - Get design elements via nodeId
• 🖼️ Image Export - PNG, SVG, JPG, PDF formats

Core Capabilities

🎨 Figma Code Generation

• Multi-Framework Support - React, Vue, Angular, Svelte, React Native, HTML
• TypeScript Support - Generate type-safe TypeScript code
• Component Library Integration - Tailwind CSS, native CSS styles
• Precise Node Targeting - Get design elements via nodeId
• Image Export - PNG, SVG, JPG, PDF formats

🧠 Smart Tech Stack Recommendations

• Project Analysis - Analyze package.json and project structure
• Framework Recommendations - Recommend the best frontend framework based on project context
• Full-Stack Suggestions - Provide complete tech stack suggestions including frontend, backend, database, DevOps, etc.
• Architecture Recommendations - Recommend appropriate architecture patterns based on project scale

🔍 Design File Operations

• Get File Structure - Retrieve complete Figma file structure
• Node Search - Search nodes by name or type
• Node Analysis - Get detailed node information and properties
• Batch Operations - Support batch image export

🌐 Access Methods

• Stdio Mode - For local clients like Claude Desktop
• HTTP/SSE Mode - Support for remote access and web application integration

Installation

Global Installation

npm install -g code-buddy-mcp

Using npx (Recommended)

No installation required, use directly:

# Start stdio mode (default)
npx -y code-buddy-mcp

# Start HTTP server
npx -y code-buddy-mcp server

Configuration

Buddy supports two access methods:

1. Stdio Mode - For local clients like Claude Desktop
2. HTTP/SSE Mode - For remote access and web applications

Common Steps

1. Get Figma API Token

1. Visit Figma Settings - Personal Access Tokens
2. Click "Generate new token"
3. Copy the generated token

Method 1: Stdio Mode (Local Clients)

Configure MCP Client

Claude Desktop (macOS: ~/Library/Application Support/Claude/claude_desktop_config.json)

{
  "mcpServers": {
    "buddy": {
      "command": "npx",
      "args": ["-y", "code-buddy-mcp"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-token-here"
      }
    }
  }
}

Or use local development version:

{
  "mcpServers": {
    "buddy": {
      "command": "node",
      "args": ["/path/to/buddy/dist/index.js"],
      "env": {
        "FIGMA_API_KEY": "your-figma-api-token-here"
      }
    }
  }
}

Method 2: HTTP/SSE Mode (Remote Access)

1. Start HTTP Server

Using npx (Recommended)

FIGMA_API_KEY=your-token npx -y code-buddy-mcp server

With authentication:

FIGMA_API_KEY=your-token PORT=3000 npx -y buddy server

Using Installed Package

# Global installation
npm install -g code-buddy-mcp

# Start server
FIGMA_API_KEY=your-token code-buddy-mcp server

In Project

# Set environment variables
export FIGMA_API_KEY=your-figma-api-token
export PORT=3000

# Start server
npm run start:server

2. Verify Service

curl http://localhost:3000/health

3. Client Connection

Cursor Configuration (Recommended - Using Header for API Key)

Edit ~/.cursor/mcp.json:

{
  "mcpServers": {
    "buddy": {
      "url": "http://localhost:3000/sse",
      "headers": {
        "X-Figma-Api-Key": "your-figma-api-token-here"
      }
    }
  }
}

JavaScript/TypeScript Client

import { Client } from '@modelcontextprotocol/sdk/client/index.js';
import { SSEClientTransport } from '@modelcontextprotocol/sdk/client/sse.js';

const transport = new SSEClientTransport(
  new URL('http://localhost:3000/sse'),
  {
    headers: {
      'X-Figma-Api-Key': 'your-figma-api-token'  // Recommended: via header
    }
  }
);

const client = new Client({
  name: 'my-client',
  version: '1.0.0',
}, {
  capabilities: {}
});

await client.connect(transport);

Python Client

import requests

BASE_URL = "http://localhost:3000"
headers = {"X-Figma-Api-Key": "your-figma-api-token"}

response = requests.get(f"{BASE_URL}/sse", headers=headers, stream=True)
for line in response.iter_lines():
    if line:
        print(line.decode('utf-8'))

Usage

Start your configured MCP client (like Cursor), then interact with Figma using natural language:

Smart Workflow (Recommended)

1. Let AI recommend framework:

"Help me analyze the project and recommend the best framework for generating Figma code"

AI will:

• Check your package.json
• Analyze existing code structure
• Recommend the best matching framework (React/Vue/Angular/Svelte, etc.)
• Provide complete tech stack recommendations (Backend/Database/DevOps)

2. Generate code:

"Generate [recommended framework] code from Figma file [FILE_KEY] node [NODE_ID]"

Example Conversations

Get file structure:

"Get the structure of this Figma file: abc123def456"

Search design elements:

"Search all COMPONENT type nodes in file abc123def456"

Smart code generation (using nodeId):

"Generate React TypeScript code from file abc123def456 node 123:456"

Generate Tailwind CSS code:

"Generate code for file abc123def456 node 123:456 using Tailwind React"

Generate mobile code:

"Generate React Native code for file abc123def456 node 123:456"

Analyze node:

"Analyze the structure of node 123:456 in file abc123def456"

Available Tools

0. suggest_framework

Smart recommendation for frameworks and complete tech stack

Features:

• Analyze project context (package.json, tech stack, etc.)
• Recommend the best frontend framework: React, Vue, Angular, Svelte, React Native, etc.
• Provide reasoning and tech stack suggestions
• Comprehensive tech stack recommendations including:
  • 🎨 Frontend frameworks
  • 💻 Backend technologies
  • 🗄️ Database solutions
  • 🚀 DevOps & Infrastructure
  • 📊 Monitoring & Observability
  • 🏗️ Architecture patterns

1. get_figma_file

Get complete Figma file structure

{
  fileKey: string  // Figma file key
}

2. search_nodes

Search nodes in Figma file by name or type

{
  fileKey: string     // Figma file key
  searchType: 'name' | 'type'  // Search type
  query: string       // Search query
}

Common node types:

• FRAME - Frame/Container
• TEXT - Text layer
• RECTANGLE - Rectangle
• COMPONENT - Component
• INSTANCE - Component instance
• GROUP - Group

3. generate_code

Generate frontend code from design (supports smart framework selection)

{
  fileKey: string       // Figma file key
  nodeId: string        // Node ID (precise targeting)
  framework: 'react' | 'vue' | 'html' | 'tailwind-react' | 'angular' | 'svelte' | 'react-native'
  typescript?: boolean  // Whether to use TypeScript (default true)
  componentName?: string // Custom component name
}

Supported Frameworks:

• react - React + TypeScript (most popular)
• tailwind-react - React + Tailwind CSS (utility-first)
• vue - Vue 3 + Composition API
• angular - Angular + TypeScript
• svelte - Svelte (compile-time optimization)
• react-native - React Native (mobile)
• html - Plain HTML + CSS

4. analyze_node

Analyze node detailed information

{
  fileKey: string   // Figma file key
  nodeId: string    // Node ID
}

5. get_node_images

Export nodes as images

{
  fileKey: string     // Figma file key
  nodeIds: string[]   // Array of node IDs
  format?: 'png' | 'jpg' | 'svg' | 'pdf'  // Image format
  scale?: number      // Scale (1-4)
}

Supported Frameworks

React (TypeScript)

Generate modern React components with TypeScript type definitions

React + Tailwind CSS

Generate React components using Tailwind CSS classes

Vue 3

Generate Vue 3 Composition API components

Angular

Generate Angular components with TypeScript

Svelte

Generate Svelte components with compile-time optimization

React Native

Generate React Native components for mobile development

Plain HTML

Generate pure HTML + CSS

Example Output

React Component

import React from 'react';

interface ButtonProps {
  className?: string;
}

export const Button: React.FC<ButtonProps> = ({ className }) => {
  return (
    <div style={{
      width: "120px",
      height: "40px",
      backgroundColor: "rgba(59, 130, 246, 1)",
      borderRadius: "8px",
      display: "flex",
      alignItems: "center",
      justifyContent: "center"
    }}>
      <p style={{ color: "rgba(255, 255, 255, 1)" }}>Click me</p>
    </div>
  );
};

export default Button;

Development

# Install dependencies
npm install

# Build project
npm run build

# Development mode (watch file changes)
npm run watch

# Test
npm test

Project Structure

buddy/
├── src/
│   ├── index.ts           # MCP server main file (stdio)
│   ├── http-server.ts     # HTTP/SSE server
│   ├── mcp-server.ts      # MCP server core logic
│   ├── cli.ts             # CLI entry point
│   ├── figma-client.ts    # Figma API client
│   └── code-generator.ts  # Code generator
├── dist/                  # Build output
├── package.json
├── tsconfig.json
└── README.md

Tech Stack

• TypeScript - Type-safe code
• @modelcontextprotocol/sdk - MCP protocol SDK
• Axios - HTTP client (for Figma API calls)
• Express - HTTP server framework (for SSE mode)
• Figma REST API - Official Figma API

Deployment

Local Development

npm run start:server

PM2 (Production)

pm2 start dist/http-server.js --name buddy --env production

Docker

docker build -t buddy .
docker run -d -p 3000:3000 --env-file .env buddy

Kubernetes

See complete K8s configuration example in HTTP_SERVER.md

Security

Enable Authentication

Set API_TOKEN environment variable to enable Bearer token authentication (optional):

export API_TOKEN="your-secure-random-token"

All requests must include Authorization header:

Authorization: Bearer your-secure-random-token

CORS Configuration

Limit allowed domains:

export CORS_ORIGIN="https://your-domain.com"

HTTPS

Use Nginx or other reverse proxy to add HTTPS in production environment.

Roadmap

• [ ] More CSS framework support (Bootstrap, Material-UI, Ant Design, etc.)
• [ ] Responsive design code generation
• [ ] Animation and interaction code generation
• [ ] Design system code generation
• [ ] Component library batch export
• [ ] Custom code templates
• [x] HTTP/SSE transport support
• [ ] WebSocket transport support
• [ ] Graphical management interface
• [ ] Better code optimization and formatting

Contributing

Issues and Pull Requests are welcome!

License

MIT License

Links

• Model Context Protocol
• Figma API Documentation
• GitHub Repository

Author

Made with ❤️ by developers, for developers

Buddy - Your Full-Stack Software Engineering & DevOps Expert 🤖