Figma Forge

🔥 FigmaForge

Forge production-ready components from Figma designs

Multi-framework code generation (Angular, React, Vue, Web Components) via CLI & Copilot Chat

Features • Quick Start • Usage • Frameworks • Docs

______________________________________________________________________

✨ 特性

核心功能

多框架支持

高级功能

______________________________________________________________________

🚀 快速开始

选项1：从PyPI安装（推荐）

pip install figmaforge

选项2：克隆存储库

git clone https://github.com/bipuldikshit/FigmaForge.git
cd FigmaForge
python -m venv .venv
.venv\Scripts\activate        # Windows
source .venv/bin/activate     # Mac/Linux
pip install -r requirements.txt

配置Figma令牌

# Set environment variable
export FIGMA_TOKEN=your-token-here  # Mac/Linux
$env:FIGMA_TOKEN="your-token-here"  # Windows

💡 获取您的Figma代币 figma.com/settings

______________________________________________________________________

🎮 用法

🤖 人工智能驱动（VS代码复制聊天）

1. 在VS Code中打开项目
2. 重新加载窗口(Ctrl+Shift+P → “开发人员：重新加载窗口”）
3. 打开Copilot聊天(Ctrl+Shift+I)
4. 自然聊天：

📝 "List all components in file ABC123XYZ"

🔥 "Generate a React component called hero-section from node 1:23 in file ABC123XYZ"

🎯 "Generate button from node 2:45 in file ABC123XYZ with tailwind styling and responsive layout"

⌨️ CLI命令

# Generate Angular component (default)
python cli.py generate -f FILE_KEY -n "1:23" -m my-button

# Generate React component
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --framework react

# Generate Vue component
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --framework vue

# Generate Web Component
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --framework webcomponent

# With Tailwind CSS
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --style tailwind

# Responsive flexbox layout
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --responsive

# Dry run (preview without writing)
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --dry-run

# Bypass cache
python cli.py generate -f FILE_KEY -n "1:23" -m my-button --no-cache

# Cache management
python cli.py cache          # View cache stats
python cli.py cache --clear  # Clear all cached data

# Watch mode (auto-regenerate on changes)
python cli.py watch -f FILE_KEY -n "1:23" -m my-button --interval 30

# Sync file and extract design tokens
python cli.py sync -f FILE_KEY

# Initialize project directories
python cli.py init

______________________________________________________________________

🔧 框架

角度（默认）

python cli.py generate -f FILE -n NODE -m button

生成： button.component.ts, button.component.html, button.component.scss

反应

python cli.py generate -f FILE -n NODE -m button --framework react

生成： Button.tsx, Button.module.css

视图3

python cli.py generate -f FILE -n NODE -m button --framework vue

生成： Button.vue （具有组合API的单个文件组件）

Web组件

python cli.py generate -f FILE -n NODE -m button --framework webcomponent

生成： Button.js （带Shadow DOM的自定义元素）

______________________________________________________________________

🔍 查找Figma ID

______________________________________________________________________

📂 项目结构

FigmaForge/
├── cli.py                    # CLI entry point
├── mcp_stdio_server.py       # MCP server for Copilot Chat
├── .vscode/mcp.json          # VS Code MCP configuration
├── src/
│   ├── figma/                # Figma API client & normalizer
│   ├── generators/           # Angular, React, Vue, WebComponent generators
│   ├── extractors/           # Tokens, variants, assets, interaction states
│   └── utils/                # CSS utilities, console output
├── tests/                    # Unit tests (33+ tests)
└── docs/                     # Documentation

______________________________________________________________________

⚙️ 配置

______________________________________________________________________

🛠️ MCP工具（副驾驶聊天）

MCP参数

______________________________________________________________________

🧪 测试

# Run all tests
python -m pytest tests/ -v

# Run with coverage
python -m pytest tests/ --cov=src --cov-report=term-missing

______________________________________________________________________

📚 文档

• 测试指导 -完整的测试说明
• MCP集成 -Copilot聊天设置
• 建筑 -系统设计概述

______________________________________________________________________

📄 许可证

此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。

______________________________________________________________________

🔥 FigmaForge — Forging code from designs