UIgenie - AI-Powered Figma Plugin

Transform natural language descriptions into production-ready Figma designs using AI.

🎯 What is UIgenie?

UIgenie is a Figma plugin that generates complete UI designs from text prompts. Simply describe what you want, and UIgenie creates fully editable Figma components with proper styling, layout, and structure.

Example: "Create a modern login screen with email and password fields" → Generates a complete login screen with all elements properly styled and positioned.

✨ Key Features

• AI-Powered Generation: Uses multiple AI models (Google Gemini, OpenAI, Anthropic, OpenRouter)
• Smart Fallback: Automatically switches between providers if one is rate-limited
• Live Preview: See your design before importing to Figma
• Multiple Modes: Generate full mockups or reusable components
• Image-to-UI: Upload an image and convert it to a Figma design
• Screen Size Detection: Automatically detects device type (mobile, tablet, desktop)
• Authentication: User accounts with JWT-based authentication
• Coin System: Pay-per-use pricing with different plans
• Design History: Save and retrieve previous designs
• Refinement: Iterate on designs with additional prompts

🏗️ Architecture

┌─────────────────────────────────────────────────────────────┐
│                    FIGMA PLUGIN UI (Preact)                 │
│  User Input → Preview → Import to Figma                     │
└─────────────────────────────────────────────────────────────┘
                            ↓ HTTP
┌─────────────────────────────────────────────────────────────┐
│                 BACKEND API (Node.js/Express)               │
│  Auth → Design Service → LLM Service → AI Models            │
└─────────────────────────────────────────────────────────────┘
                            ↓ JSON
┌─────────────────────────────────────────────────────────────┐
│                    FIGMA PLUGIN CODE                         │
│  Controller → Generators → Node Creators → Figma Canvas     │
└─────────────────────────────────────────────────────────────┘

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm
• Figma Desktop App
• PostgreSQL 15+ (optional, for full features)
• API key for at least one AI provider

1. Clone and Install

# Clone repository
git clone <repository-url>
cd UIgenie

# Install frontend dependencies
npm install

# Install backend dependencies
cd backend
npm install
cd ..

2. Configure Backend

cd backend
cp .env.example .env

Edit backend/.env and add at least one API key:

# Google AI (FREE - Recommended)
GOOGLE_AI_API_KEY=your-key-from-makersuite.google.com

# OR OpenAI
OPENAI_API_KEY=your-openai-key

# OR Anthropic
ANTHROPIC_API_KEY=your-anthropic-key

# OR OpenRouter (17 free models)
OPENROUTER_API_KEY=your-openrouter-key

3. Start Backend Server

cd backend
npm start

Backend will run on http://localhost:3000

4. Build Plugin

# From root directory
npm run build

5. Load Plugin in Figma

1. Open Figma Desktop App
2. Go to Plugins → Development → Import plugin from manifest
3. Select manifest.json from the project root
4. Plugin will appear in Plugins → Development → UIgenie

6. Start Using

1. Open UIgenie plugin in Figma
2. Type a prompt: "Create a modern login screen"
3. Click Generate
4. Preview the design
5. Click Import to Figma

📦 Project Structure

UIgenie/
├── src/                          # Frontend (Preact)
│   ├── components/               # UI components
│   │   ├── LeftPanel/           # Prompt input, header
│   │   ├── RightPanel/          # Canvas preview
│   │   ├── Sidebar/             # History, plans
│   │   ├── Auth/                # Login, signup, user menu
│   │   └── shared/              # Buttons, modals, loading
│   ├── hooks/                   # React hooks
│   │   ├── usePrompt.ts         # Design generation logic
│   │   ├── useCanvas.ts         # Canvas state management
│   │   └── useHistory.ts        # Design history
│   ├── services/                # API services
│   │   ├── llmService.ts        # Backend API calls
│   │   ├── AuthService.ts       # Authentication
│   │   ├── billingService.ts    # Plans and billing
│   │   └── figmaService.ts      # Figma integration
│   ├── utils/                   # Utilities
│   │   ├── designParser.ts      # JSON parsing
│   │   ├── componentGenerator.ts # Component creation
│   │   └── responsiveHelper.ts  # Screen size detection
│   ├── shared/                  # Shared code
│   │   ├── types/               # TypeScript types
│   │   ├── schemas/             # Zod schemas
│   │   └── constants/           # Constants
│   └── __tests__/               # Tests
│
├── backend/                      # Backend API
│   ├── src/
│   │   ├── routes/              # API routes
│   │   │   ├── auth.routes.ts   # Authentication
│   │   │   ├── design.routes.ts # Design generation
│   │   │   ├── billing.routes.ts # Plans
│   │   │   └── coins.routes.ts  # Coin management
│   │   ├── services/            # Business logic
│   │   │   ├── auth.service.ts  # User auth
│   │   │   ├── design.service.ts # Design generation
│   │   │   ├── billing.service.ts # Plans
│   │   │   ├── coins.service.ts # Coins
│   │   │   ├── database.service.ts # PostgreSQL
│   │   │   └── llm/             # LLM adapters
│   │   │       ├── llm.service.ts # Orchestration
│   │   │       ├── gemini.adapter.ts # Google AI
│   │   │       ├── openai.adapter.ts # OpenAI
│   │   │       ├── anthropic.adapter.ts # Claude
│   │   │       └── openrouter.adapter.ts # OpenRouter
│   │   ├── middleware/          # Express middleware
│   │   │   └── auth.ts          # JWT verification
│   │   ├── types/               # TypeScript types
│   │   └── index.ts             # Server entry
│   ├── database/                # Database
│   │   ├── init.sql             # Schema
│   │   └── README.md            # Setup guide
│   └── .env.example             # Environment template
│
├── plugin/                       # Figma plugin code
│   ├── controller.ts            # Message handler
│   ├── generators/              # Design generators
│   │   ├── mockupMode.ts        # Full screen designs
│   │   └── componentMode.ts     # Reusable components
│   ├── figmaAPI/                # Figma API wrappers
│   │   ├── nodeCreator.ts       # Create nodes
│   │   ├── styleApplier.ts      # Apply styles
│   │   ├── layoutBuilder.ts     # Build layouts
│   │   └── frameManager.ts      # Frame management
│   └── utils/                   # Utilities
│       ├── layoutEngine.ts      # Auto-layout
│       └── constraintsHelper.ts # Responsive constraints
│
├── dist/                         # Build output
├── lib/                          # Plugin entry point
├── public/                       # Static assets
├── manifest.json                 # Figma plugin manifest
├── package.json                  # Frontend dependencies
├── tsconfig.json                 # TypeScript config
├── vite.config.ts                # Vite config
└── vitest.config.ts              # Test config

🔧 Configuration

Backend Environment Variables

# Server
PORT=3000
NODE_ENV=development

# Database (Optional - for full features)
DATABASE_URL=postgresql://user:password@localhost:5432/uigenie
DB_HOST=localhost
DB_PORT=5432
DB_NAME=uigenie
DB_USER=uigenie_user
DB_PASSWORD=your_password

# JWT (Required for auth)
JWT_SECRET=your_very_long_random_secret_min_32_characters
JWT_REFRESH_SECRET=another_very_long_random_secret_min_32_chars

# LLM Providers (At least one required)
GOOGLE_AI_API_KEY=your-google-key
OPENAI_API_KEY=your-openai-key
ANTHROPIC_API_KEY=your-anthropic-key
OPENROUTER_API_KEY=your-openrouter-key

# Coin Pricing (Optional)
COIN_PRICE_SIMPLE=5
COIN_PRICE_MEDIUM=10
COIN_PRICE_COMPLEX=20

# Plans (Optional)
FREE_PLAN_COINS=50
PRO_PLAN_COINS=300
ENTERPRISE_PLAN_COINS=1000

# CORS (Optional)
CORS_ORIGIN=http://localhost:5173

# Rate Limiting (Optional)
RATE_LIMIT_WINDOW_MS=900000
RATE_LIMIT_MAX_REQUESTS=100

Frontend Environment Variables

Create .env in root directory:

VITE_BACKEND_URL=http://localhost:3000

🗄️ Database Setup (Optional)

For full features (auth, billing, history), set up PostgreSQL:

1. Install PostgreSQL

# macOS
brew install postgresql@15
brew services start postgresql@15

# Ubuntu/Debian
sudo apt install postgresql postgresql-contrib
sudo systemctl start postgresql

# Windows
# Download from https://www.postgresql.org/download/windows/

2. Create Database

# Connect to PostgreSQL
psql -U postgres

# Create database and user
CREATE DATABASE uigenie;
CREATE USER uigenie_user WITH PASSWORD 'secure_password';
GRANT ALL PRIVILEGES ON DATABASE uigenie TO uigenie_user;
\q

3. Initialize Schema

cd backend
psql -U uigenie_user -d uigenie -f database/init.sql

4. Update Backend .env

DATABASE_URL=postgresql://uigenie_user:secure_password@localhost:5432/uigenie
DB_HOST=localhost
DB_PORT=5432
DB_NAME=uigenie
DB_USER=uigenie_user
DB_PASSWORD=secure_password

5. Restart Backend

cd backend
npm start

🎨 Usage Examples

Basic Prompts

Create a login screen
Design a product card
Build a dashboard with charts
Make a settings page

Detailed Prompts

Create a modern login screen with:
- Email input field
- Password input field
- Blue login button
- "Forgot password?" link
- Social login buttons (Google, Facebook)

Device-Specific

Create an iPhone 14 Pro login screen
Design a tablet dashboard (1024x768)
Build a desktop web app (1440x900)

With Images

1. Click the image upload button
2. Select an image
3. Type: "Convert this to a Figma design"
4. Click Generate

🔑 API Endpoints

Authentication

POST   /api/auth/signup          # Create account
POST   /api/auth/login           # Login
GET    /api/auth/user            # Get current user
POST   /api/auth/refresh         # Refresh token
POST   /api/auth/logout          # Logout

Design Generation

POST   /api/design/generate      # Generate design
POST   /api/design/refine        # Refine design
GET    /api/design/history       # Get history
GET    /api/design/:id           # Get specific design

Billing & Coins

GET    /api/billing/plans        # Get plans
POST   /api/billing/upgrade      # Upgrade plan
GET    /api/coins/balance        # Get coin balance
GET    /api/coins/transactions   # Get transactions

LLM Providers

GET    /api/llm/providers        # Get available providers
POST   /api/llm/select           # Set preferred provider

💰 Pricing & Plans

Free Plan

• 50 coins/month
• Basic AI models
• 4 design variations
• Design history

Pro Plan ($9.99/month)

• 300 coins/month
• All AI models
• 4 design variations
• Priority support

Enterprise Plan ($29.99/month)

• 1000 coins/month
• All AI models
• Unlimited variations
• Priority support
• Custom integrations

Coin Costs

• Simple designs (≤5 components): 5 coins
• Medium designs (6-15 components): 10 coins
• Complex designs (>15 components): 20 coins

🧪 Testing

Run Frontend Tests

npm test

Run Backend Tests

cd backend
npm test

Test Backend Services

cd backend
node test-backend-services.js

Test Authentication

cd backend
node test-auth.js

🛠️ Development

Frontend Development

# Start dev server with hot reload
npm run dev

Backend Development

cd backend

# Start with auto-reload
npm run dev

# Or direct TypeScript execution
npm run dev:direct

Build for Production

# Build frontend and plugin
npm run build

# Build backend
cd backend
npm run build

🐛 Troubleshooting

Backend won't start

# Check if port 3000 is in use
lsof -i :3000  # macOS/Linux
netstat -ano | findstr :3000  # Windows

# Check environment variables
cd backend
cat .env

# Verify API keys
node check-api-keys.js

Plugin not loading in Figma

1. Ensure dist/ folder exists
2. Run npm run build
3. Check manifest.json is in root
4. Restart Figma Desktop App
5. Re-import plugin manifest

Design generation fails

# Check backend logs
cd backend
npm start

# Test LLM providers
curl http://localhost:3000/api/llm/providers

# Verify API keys are valid
node check-api-keys.js

Database connection issues

# Check PostgreSQL is running
sudo systemctl status postgresql  # Linux
brew services list                # macOS

# Test connection
psql -U uigenie_user -d uigenie -c "SELECT NOW();"

# Check DATABASE_URL in .env
echo $DATABASE_URL

Preview not showing

1. Open browser console (F12)
2. Check for errors
3. Verify design JSON structure
4. Clear cache: Delete node_modules/.vite
5. Restart dev server

📚 Documentation

• UIGENIE_WORKFLOW.md - Complete workflow explanation
• PLUGIN_WORKFLOW.md - Technical workflow details
• BACKEND_SERVICES_GUIDE.md - Backend API guide
• AUTH_TESTING_GUIDE.md - Authentication testing
• backend/database/README.md - Database setup
• backend/SETUP.md - Backend setup guide

🔒 Security

• Password hashing with bcrypt
• JWT access and refresh tokens
• Token expiry (1h access, 7d refresh)
• Rate limiting (100 req/15min)
• CORS protection
• SQL injection protection
• Input validation
• Secure environment variables

🚢 Deployment

Backend Deployment

1. Set NODE_ENV=production
2. Use strong JWT secrets
3. Enable SSL for database
4. Use managed database (AWS RDS, etc.)
5. Enable HTTPS
6. Configure CORS for production domain
7. Set up monitoring and logging
8. Regular database backups

Plugin Distribution

1. Build production version: npm run build
2. Test thoroughly in Figma
3. Submit to Figma Community
4. Follow Figma's plugin guidelines

🤝 Contributing

1. Fork the repository
2. Create feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'Add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open Pull Request

📝 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

• Figma Plugin API
• Google Gemini AI
• OpenAI GPT models
• Anthropic Claude
• OpenRouter
• Preact framework
• Express.js
• PostgreSQL

📧 Support

For issues, questions, or feature requests:

• Open an issue on GitHub
• Check existing documentation
• Review troubleshooting section

---

Built with ❤️ for designers and developers