AI导哈

Figma组件生成工具

FigmaForge是一个多框架代码生成工具，能够从Figma设计中生成生产就绪的组件，支持Angular、React、Vue和Web Components。

  • by bipuldikshit
  • Python
  • 本地部署
  • 1 星标
  • 更新于
在 GitHub 查看 bipuldikshit/FigmaForge

使用说明

🔥 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

✨ 特性

核心功能

特性 描述
🎯 像素完美 从您的设计中精确定位、颜色、排版
🤖 AI驱动 通过VS Code Copilot自然语言聊天生成
⌨️ CLI支持 用于脚本和CI/CD的命令行界面
🎨 设计代币 提取颜色、字体、间距作为SCSS变量
📦 资产导出 具有内联优化的SVG/PNG自动提取
🔄 无损检测 重新生成而不丢失自定义代码

多框架支持

框架 输出文件 标志
Angular .ts, .html, .scss --framework angular
反应 .tsx, .module.css --framework react
视图3 .vue （SFC） --framework vue
Web组件 .js （自定义元素） --framework webcomponent

高级功能

特性 描述
⚡ API缓存 支持ETag的本地缓存，可实现更快的再生
🌐 响应模式 Flexbox布局而非绝对定位
🎨 Tailwind CSS 生成尾风公用事业类，而不是SCSS
👀 观看模式 Figma文件更改时自动重新生成组件
🔀 组件变体 检测Figma变体→ typed @Input() 物业
🎭 互动状态 将悬停/聚焦/禁用变体映射到CSS伪类
📐 Figma变量 从Figma Variables API中提取设计令牌

🚀 快速开始

选项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

ID 位置 示例
文件密钥 网址： figma.com/design/ABC123XYZ/... ABC123XYZ
节点ID 右键单击→ “复制链接”→ ?node-id=1-23 1:23

📂 项目结构

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

⚙️ 配置

变量 描述 默认值
FIGMA_TOKEN 您的Figma个人访问令牌 必填
ANGULAR_OUTPUT_PATH 组件输出目录 ./src/app/components
ASSETS_OUTPUT_PATH 资产输出目录 ./src/assets/figma

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

工具 说明
generate_component 生成组件（任何框架）
sync_figma 同步文件并提取令牌
list_components 列出文件中的所有组件
preview 获取原始设计JSON
extract_tokens 导出SCSS变量

MCP参数

参数 值 说明
framework 角度、反应、vue、网络组件 目标框架
styleFormat scss，顺风 样式输出格式
responsive true/false 使用flexbox布局
dryRun true/false 不写预览
noCache true/false 绕过API缓存

🧪 测试

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

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

📚 文档

📄 许可证

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

🔥 FigmaForge — Forging code from designs

相关 MCP