🎨 FigmaForge

Convert Figma designs into production-ready code — in seconds.

FigmaForge is an open-source CLI + REST API tool that reads your Figma file via the Figma API and outputs fully structured, dependency-pinned project code for React, Next.js, Vue, Flutter, and SwiftUI — with version compatibility enforcement built in.

✨ Features

Feature	Details
🔌 Figma API Integration	Fetch frames, components, text, colors, spacing, layout via the official Figma REST API
🌳 Design Tree Parser	Converts raw Figma JSON into a clean, normalized `ComponentTree`
⚛️ React Generator	Functional components, Tailwind classes, CSS Modules support
🔺 Next.js Generator	App Router (v13–15) + Pages Router (v12), `"use client"`, layouts, metadata
💚 Vue Generator	Vue 3 SFCs with `<script setup>`, Vite config, Tailwind
📱 Flutter Generator	Dart widgets, `pubspec.yaml`, Material 3
🍎 SwiftUI Generator	Swift view structs, `Package.swift`, previews
🔒 Version Compatibility Engine	Detects conflicts, auto-corrects, warns on deprecated combos
📦 Project Builder	Produces a full runnable project folder + zip download
⌨️ CLI (`figmaforge`)	Beautiful Typer + Rich terminal interface
🌐 REST API (FastAPI)	`POST /generate`, `POST /parse-figma`, `GET /download/{id}`
🤖 AI Optimizer (optional)	OpenAI-powered code cleanup, accessibility improvements

Requirements

Python 3.11+
A Figma Personal Access Token — free
The Figma file must be accessible by your token (own files or shared)

Installation

Option A — Install from source (recommended)

git clone https://github.com/YOUR_USERNAME/figmaforge.git
cd figmaforge

# Create virtual environment
python -m venv .venv
source .venv/bin/activate          # Windows: .venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Install the CLI tool globally (editable)
pip install -e .

Option B — pip install (once published)

pip install figmaforge

Verify Installation

figmaforge --help

 Usage: figmaforge [OPTIONS] COMMAND [ARGS]...

 🎨 FigmaForge — Convert Figma designs into production-ready code

╭─ Commands ────────────────────────────────╮
│  generate   Generate project from Figma   │
│  parse      Parse & inspect a Figma file  │
│  versions   List supported versions       │
│  check      Check version compatibility   │
╰───────────────────────────────────────────╯

Configuration

Create a .env file in the project root (or export variables):

cp .env.example .env

# Required — get at https://www.figma.com/settings (Personal Access Tokens)
FIGMA_TOKEN=your_figma_personal_access_token

# Optional — for AI code optimization
OPENAI_API_KEY=your_openai_key

Or export inline:

export FIGMA_TOKEN=fig_xxxxxxxxxxxxxxxxxxxx

CLI Usage

1. Generate a Project

figmaforge generate \
  --figma https://www.figma.com/file/abc123xyz/MyDesign \
  --framework nextjs \
  --version 14 \
  --tailwind 3 \
  --pm pnpm

All flags:

Flag	Short	Required	Default	Description
`--figma`	`-f`	✅	—	Figma URL or file key
`--framework`	`-fw`	✅	—	`react` `nextjs` `vue` `flutter` `swiftui`
`--version`	`-v`	✅	—	Framework version, e.g. `14`, `18`, `3`
`--styling`	`-s`		`tailwind`	`tailwind` `css-modules` `none`
`--tailwind`	`-tw`		`3`	Tailwind version: `2`, `3`, `4`
`--pm`			`npm`	Package manager: `npm` `yarn` `pnpm` `bun`
`--output`	`-o`		`./figmaforge-output`	Output directory
`--zip`	`-z`		false	Zip the output folder
`--token`	`-t`		env var	Figma token (overrides env)
`--ai`			false	Enable AI code optimization

Examples:

# React 18 + Tailwind 3 + pnpm
figmaforge generate -f https://figma.com/file/abc123 -fw react -v 18 --pm pnpm

# Next.js 15 + Tailwind 4 — with zip output
figmaforge generate -f abc123 -fw nextjs -v 15 --tailwind 4 --zip

# Vue 3 — custom output dir
figmaforge generate -f abc123 -fw vue -v 3 -o ~/projects/my-vue-app

# Flutter 3
figmaforge generate -f abc123 -fw flutter -v 3

# SwiftUI 5 — pass token inline
figmaforge generate -f abc123 -fw swiftui -v 5 --token fig_xxxx

# Next.js 14 + AI optimization
figmaforge generate -f abc123 -fw nextjs -v 14 --ai

Sample output:

╭──────────────────────────────────────────────╮
│  🎨 FigmaForge  v1.0.0                       │
│  Figma → Production-ready code               │
╰──────────────────────────────────────────────╯

✓ Figma design fetched
✓ Parsed 2 page(s)
✓ Generated 11 file(s)
✓ Project assembled

╭──────────────────────────────────────────────╮
│  ✓ Project generated successfully!           │
│                                              │
│  Framework:  nextjs 14                       │
│  Styling:    tailwind v3                     │
│  Files:      11                              │
│  Output:     /home/user/figmaforge-output    │
╰──────────────────────────────────────────────╯

Next steps:
  cd figmaforge-output
  pnpm install
  pnpm dev

2. Parse & Inspect a Figma File

Preview the component tree without generating code:

figmaforge parse https://figma.com/file/abc123

File: My Design System
Pages: 2

📄 Page 1
  🧭 Navbar (navbar) 1440×80
    🔤 Logo (label) "FigmaForge"
    🔘 Login Button (button) 116×40
  📦 Hero Card (container) 1440×600
    🔤 Headline (label) "Build faster with..."
  📌 Footer (footer) 1440×120

Save the parsed tree to JSON:

figmaforge parse abc123 --output design-tree.json

3. Check Version Compatibility

figmaforge check --framework nextjs --version 14 --tailwind 3

✓ Compatible: nextjs 14 + tailwind v3

Resolved dependencies:
  next: 14.2.3
  react: 18.2.0
  react-dom: 18.2.0
  tailwindcss: 3.4.1
  postcss: 8.4.35
  autoprefixer: 10.4.17

Test an incompatible combo:

figmaforge check --framework vue --version 2 --tailwind 3

✓ Compatible: vue 2 + tailwind v3

⚠  Vue 2 reached EOL December 2023. Consider upgrading to Vue 3.

4. List Supported Versions

figmaforge versions nextjs

         Next.js Supported Versions
┌─────────┬────────────────────────────────────────────┐
│ Version │ Key Dependencies                           │
├─────────┼────────────────────────────────────────────┤
│ 12      │ next: 12.3.4  react: 17.0.2               │
│ 13      │ next: 13.5.6  react: 18.2.0               │
│ 14      │ next: 14.2.3  react: 18.2.0               │
│ 15      │ next: 15.0.3  react: 18.3.1               │
└─────────┴────────────────────────────────────────────╯

Styling options: tailwind, css-modules, styled-components

REST API Usage

Start the API server

cd backend
uvicorn main:app --reload --port 8000

Interactive docs: http://localhost:8000/docs

Endpoints

`POST /generate`

Generate a full project from a Figma URL.

curl -X POST http://localhost:8000/generate \
  -H "Content-Type: application/json" \
  -d '{
    "figma_url": "https://figma.com/file/abc123",
    "framework": "nextjs",
    "version": "14",
    "styling": "tailwind",
    "tailwind_version": "3",
    "package_manager": "pnpm",
    "figma_token": "fig_xxxxxxxxxxxx"
  }'

Response:

{
  "status": "success",
  "project_id": "a1b2c3d4",
  "download_url": "/download/a1b2c3d4",
  "warnings": [],
  "framework_info": {
    "next": "14.2.3",
    "react": "18.2.0",
    "tailwindcss": "3.4.1"
  }
}

`POST /parse-figma`

Parse a Figma file and return the normalized component tree.

curl -X POST http://localhost:8000/parse-figma \
  -H "Content-Type: application/json" \
  -d '{"figma_url": "abc123", "figma_token": "fig_xxx"}'

`GET /download/{project_id}`

Download the generated project as a .zip.

curl -O http://localhost:8000/download/a1b2c3d4
# Downloads: figmaforge-a1b2c3d4.zip

`GET /compatibility`

curl "http://localhost:8000/compatibility?framework=nextjs&version=14&styling=tailwind&tailwind_version=3"

`GET /versions/{framework}`

curl http://localhost:8000/versions/nextjs

Framework + Version Matrix

Framework	Versions	Styling	Notes
`react`	17, 18, 19	tailwind 2/3/4, css-modules, emotion	Vite-based
`nextjs`	12, 13, 14, 15	tailwind 2/3/4, css-modules	v13+ = App Router, v12 = Pages Router
`vue`	2, 3	tailwind 2/3/4, scss	Vue 2 EOL warning
`flutter`	2, 3	—	Dart + Material 3
`swiftui`	4, 5, 6	—	Swift Package Manager

Compatibility rules enforced automatically:

Next.js 15 → requires Tailwind ≥ 3
Next.js 12 → capped at Tailwind 3
Tailwind 4 → requires PostCSS 8
Vue 2 → deprecation warning (EOL Dec 2023)
Flutter 2 → upgrade warning

Project Structure

figmaforge/
│
├── backend/                     # FastAPI backend
│   ├── main.py                  # FastAPI app + all endpoints
│   ├── figma_client.py          # Figma REST API client
│   ├── parser.py                # Figma JSON → ComponentTree
│   ├── version_manager.py       # Compatibility engine
│   ├── project_builder.py       # Assembles final project folder
│   └── generators/
│       ├── react_generator.py   # React component generator
│       ├── nextjs_generator.py  # Next.js generator (extends React)
│       ├── vue_generator.py     # Vue 3 SFC generator
│       ├── flutter_generator.py # Flutter/Dart widget generator
│       └── swiftui_generator.py # SwiftUI view generator
│
├── cli/
│   └── figmaforge_cli.py        # Typer CLI (figmaforge command)
│
├── templates/                   # Base project templates
│   ├── react/18/
│   ├── nextjs/14/
│   ├── vue/3/
│   ├── flutter/3/
│   └── swiftui/5/
│
├── tests/
│   └── test_figmaforge.py       # 47 pytest tests (all passing)
│
├── .env.example
├── .gitignore
├── pyproject.toml
├── requirements.txt
└── README.md

Running Tests

pytest tests/ -v

Expected: 47 passed

tests/test_figmaforge.py::TestDesignParser::test_parses_file_name PASSED
tests/test_figmaforge.py::TestVersionCompatibilityEngine::test_nextjs_14_react_18_tailwind_3_compatible PASSED
tests/test_figmaforge.py::TestReactGenerator::test_generates_files PASSED
... (47 total)
======================== 47 passed in 0.21s =========================

Contributing

Fork the repository
Create your feature branch: git checkout -b feat/your-feature
Run tests: pytest tests/ -v
Commit: git commit -m 'feat: add your feature'
Push: git push origin feat/your-feature
Open a Pull Request

Adding a new framework generator:

Create backend/generators/yourframework_generator.py
Implement a class with a generate(tree: ComponentTree) -> dict[str, str] method
Register it in backend/main.py and cli/figmaforge_cli.py under GENERATORS
Add version entries to version_manager.py
Add tests to tests/test_figmaforge.py

License

MIT — see LICENSE

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

🎨 FigmaForge

✨ Features

📋 Table of Contents

Requirements

Installation

Option A — Install from source (recommended)

Option B — pip install (once published)

Verify Installation

Configuration

CLI Usage

1. Generate a Project

2. Parse & Inspect a Figma File

3. Check Version Compatibility

4. List Supported Versions

REST API Usage

Start the API server

Endpoints

`POST /generate`

`POST /parse-figma`

`GET /download/{project_id}`

`GET /compatibility`

`GET /versions/{framework}`

Framework + Version Matrix

Project Structure

Running Tests

Contributing

License

Acknowledgements

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.github/workflows		.github/workflows
backend		backend
cli		cli
templates		templates
tests		tests
.env.example		.env.example
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
pyproject.toml		pyproject.toml
requirements.txt		requirements.txt

Folders and files

Latest commit

History

Repository files navigation

🎨 FigmaForge

✨ Features

📋 Table of Contents

Requirements

Installation

Option A — Install from source (recommended)

Option B — pip install (once published)

Verify Installation

Configuration

CLI Usage

1. Generate a Project

2. Parse & Inspect a Figma File

3. Check Version Compatibility

4. List Supported Versions

REST API Usage

Start the API server

Endpoints

POST /generate

POST /parse-figma

GET /download/{project_id}

GET /compatibility

GET /versions/{framework}

Framework + Version Matrix

Project Structure

Running Tests

Contributing

License

Acknowledgements

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

`POST /generate`

`POST /parse-figma`

`GET /download/{project_id}`

`GET /compatibility`

`GET /versions/{framework}`

Packages