Figma to Code REST API

A REST API server that converts Figma designs into production-ready code with automatic image export and screenshot capabilities. Generate responsive layouts in Flutter, HTML, React (JSX), Tailwind, SwiftUI, and Compose directly from Figma URLs.

Features

🎨 Multi-Framework Support: Generate code for Flutter, HTML, React, Tailwind, SwiftUI, and Compose
📱 Automatic Image Export: Extract and export all images with multi-scale support (1x-4x)
📸 Screenshot API: Generate high-quality screenshots of specific Figma nodes
🔄 Smart Layout Detection: Automatically detects auto-layouts and generates appropriate widgets (Column/Row vs Stack)
🚫 Conflict-Free Naming: Node ID-based image naming prevents filename conflicts
⚡ Concurrent Processing: Parallel image downloads for optimal performance
🎯 Selective Export: Filter and export specific images by name
📁 Organized Output: Structured directory layout for different scales and formats

How it works

The API uses a sophisticated multi-step process to transform Figma designs into production-ready code:

Figma API Integration: Fetches design data directly from Figma using REST API endpoints
Node Analysis: Converts Figma nodes into optimized intermediate representations
Layout Intelligence: Detects auto-layouts, containers, and positioning patterns
Image Processing: Extracts, downloads, and optimizes all image assets
Code Generation: Transforms the structure into framework-specific code with proper image integration

This approach ensures clean, maintainable output with proper asset management and framework-specific optimizations.

Quick Start

Install dependencies:
```
cd apps/api-server
npm install
```

Configure environment:

cp .env.example .env
# Edit .env and add your Figma token
echo "FIGMA_TOKEN=your_figma_token_here" > .env

Start the API server:

npm run dev  # Development mode (port 3001)
npm run start  # Production mode

Convert your first design:

curl -X POST http://localhost:3001/api/convert \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.figma.com/design/YOUR_FILE_KEY/Design?node-id=NODE_ID",
    "exportImages": true,
    "settings": { "framework": "Flutter" }
  }'

Architecture

The REST API is built on a monorepo structure:

apps/api-server - Express.js REST API server with TypeScript
packages/backend - Core business logic for Figma API integration and code generation
packages/types - Shared TypeScript interfaces and types

Key Components

FigmaClient: Handles Figma REST API communication and authentication
ImageExporter: Manages multi-scale image downloads with conflict-free naming
CodeGenerator: Transforms Figma nodes into framework-specific code
FigmaAdapter: Converts Figma API responses to internal node representations

API Endpoints

1. Convert to Code (`POST /api/convert`)

Converts Figma designs to code with optional image export.

Request Body:

{
  "url": "https://www.figma.com/design/FILE_KEY/Design-Name?node-id=NODE_ID",
  "token": "figd_xxxxx",  // Optional if FIGMA_TOKEN env var is set
  "settings": {
    "framework": "Flutter",  // HTML, Tailwind, Flutter, SwiftUI, Compose
    "showLayerNames": false,
    "responsiveRoot": false,
    "flutterGenerationMode": "snippet"
  },
  "exportImages": true,
  "exportImagesOptions": {
    "scales": ["1x", "2x", "3x", "4x"],
    "formats": ["png"],
    "directory": "./images",
    "pathPrefix": "assets/"
  },
  "output": {
    "saveToFile": true,
    "directory": "./output",
    "filename": "generated_widget.dart"
  }
}

Response:

{
  "code": "Container(\n  width: 375,\n  height: 812,\n  child: ...\n)",
  "htmlPreview": "<div>...</div>",
  "colors": ["#000000", "#FFFFFF"],
  "gradients": [],
  "warnings": [],
  "exportedImages": {
    "40614:121024": {
      "1x": { "png": "1x/40614-121024_iphone_13_mini.png" },
      "2x": { "png": "2x/40614-121024_iphone_13_mini_2x.png" }
    }
  },
  "filePath": "./output/generated_widget.dart"
}

2. Export Images (`POST /api/export-images`)

Standalone image export with node mapping for flexible usage.

Request Body:

{
  "url": "https://www.figma.com/design/FILE_KEY/Design-Name?node-id=NODE_ID",
  "token": "figd_xxxxx",  // Optional if FIGMA_TOKEN env var is set
  "imageNames": ["40614-121089_ellipse_14499", "40614-121152_google-messages-icon"],  // Optional: filter specific images
  "exportOptions": {
    "scales": ["1x", "2x", "3x", "4x"],
    "formats": ["png", "svg"],
    "directory": "./exported-images"
  }
}

Response:

{
  "images": {
    "40614:121089": {
      "1x": { "png": "1x/40614-121089_ellipse_14499.png", "svg": "1x/40614-121089_ellipse_14499.svg" },
      "2x": { "png": "2x/40614-121089_ellipse_14499_2x.png" }
    },
    "40614:121152": {
      "1x": { "png": "1x/40614-121152_google-messages-icon.png" }
    }
  },
  "mapping": {
    "40614-121089_ellipse_14499": "40614:121089",
    "40614-121152_google-messages-icon": "40614:121152"
  },
  "totalNodes": 12,
  "exportedNodes": 2
}

Use Cases:

Export all images first, then selectively re-export specific ones as SVG
Get node mapping to understand which images correspond to which Figma nodes
Batch export images without generating code

3. Screenshot (`POST /api/screenshot`)

Generate screenshots of specific Figma nodes using direct Figma API.

Request Body:

{
  "url": "https://www.figma.com/design/FILE_KEY/Design-Name?node-id=NODE_ID",
  "token": "figd_xxxxx",  // Optional if FIGMA_TOKEN env var is set
  "scale": 2,  // 0.5-4, default: 2
  "format": "png",  // png, svg, jpg
  "saveToFile": true,  // Optional: save locally
  "directory": "./screenshots"  // Optional: custom directory
}

Response:

{
  "imageUrl": "https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/xxx",
  "nodeId": "40614:121023",
  "scale": 2,
  "format": "png",
  "filePath": "./screenshots/screenshot_40614-121023_2x.png"  // If saveToFile=true
}

Key Features

Image Naming Convention

All exported images use the format {nodeId}_{originalName} to prevent naming conflicts:

40614-121089_ellipse_14499.png
40614-121093_ellipse_14499.png
40614-121097_ellipse_14499.png

This ensures unique filenames even when multiple nodes have identical names.

Multi-Scale Support

Images are exported in multiple scales with proper directory structure:

images/
├── 1x/
│   ├── 40614-121089_ellipse_14499.png
│   └── 40614-121152_google-messages-icon.png
├── 2x/
│   ├── 40614-121089_ellipse_14499_2x.png
│   └── 40614-121152_google-messages-icon_2x.png
├── 3x/
└── 4x/

Generated Code Integration

The convert API automatically integrates exported images into the generated code:

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage("1x/40614-121024_iphone_13_mini.png"),
      fit: BoxFit.cover,
    ),
  ),
)

Error Handling

All endpoints include comprehensive error handling with meaningful messages:

Invalid Figma URLs
Authentication failures
Missing nodes
Export failures
File system errors

Example Workflows

Complete Flutter App Generation

# Generate Flutter widget with all images exported
curl -X POST http://localhost:3001/api/convert \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.figma.com/design/YOUR_FILE_KEY/Design?node-id=NODE_ID",
    "exportImages": true,
    "exportImagesOptions": {
      "scales": ["1x", "2x", "3x"],
      "formats": ["png"],
      "directory": "./assets/images"
    },
    "settings": {
      "framework": "Flutter",
      "flutterGenerationMode": "snippet"
    },
    "output": {
      "saveToFile": true,
      "filename": "home_screen.dart"
    }
  }'

Selective Image Export for Icons

# Export specific icons as SVG for scalability
curl -X POST http://localhost:3001/api/export-images \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.figma.com/design/YOUR_FILE_KEY/Design?node-id=NODE_ID",
    "imageNames": ["40614-121152_google-messages-icon", "40614-121146_path"],
    "exportOptions": {
      "formats": ["svg"],
      "directory": "./assets/icons"
    }
  }'

Design Documentation Screenshots

# Generate high-resolution design screenshots
curl -X POST http://localhost:3001/api/screenshot \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://www.figma.com/design/YOUR_FILE_KEY/Design?node-id=NODE_ID",
    "scale": 4,
    "format": "png",
    "saveToFile": true,
    "directory": "./docs/screenshots"
  }'

Development

Running Locally

# Install dependencies
pnpm install

# Start API server
cd apps/api-server
npm run dev

Testing

# Type checking
npm run typecheck

# Linting
npm run lint

Contributing

Found a bug or have an idea for improvement? Feel free to open an issue or submit a pull request. Contributions are welcome!

Name		Name	Last commit message	Last commit date
Latest commit History 389 Commits
.claude		.claude
.github		.github
apps		apps
assets		assets
packages		packages
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.node-version		.node-version
.prettierrc		.prettierrc
LICENSE		LICENSE
README.md		README.md
manifest.json		manifest.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
turbo.json		turbo.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Figma to Code REST API

Features

How it works

Quick Start

Architecture

Key Components

API Endpoints

1. Convert to Code (`POST /api/convert`)

2. Export Images (`POST /api/export-images`)

3. Screenshot (`POST /api/screenshot`)

Key Features

Image Naming Convention

Multi-Scale Support

Generated Code Integration

Error Handling

Example Workflows

Complete Flutter App Generation

Selective Image Export for Icons

Design Documentation Screenshots

Development

Running Locally

Testing

Contributing

About

Uh oh!

Contributors

Uh oh!

Languages

Folders and files

Latest commit

History

Repository files navigation

Figma to Code REST API

Features

How it works

Quick Start

Architecture

Key Components

API Endpoints

1. Convert to Code (POST /api/convert)

2. Export Images (POST /api/export-images)

3. Screenshot (POST /api/screenshot)

Key Features

Image Naming Convention

Multi-Scale Support

Generated Code Integration

Error Handling

Example Workflows

Complete Flutter App Generation

Selective Image Export for Icons

Design Documentation Screenshots

Development

Running Locally

Testing

Contributing

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Contributors

Uh oh!

Languages

1. Convert to Code (`POST /api/convert`)

2. Export Images (`POST /api/export-images`)

3. Screenshot (`POST /api/screenshot`)