⚡ Wireframe

Universal Figma to Code bridge for design-to-code workflows

Transform your Figma designs into production-ready code with the power of AI. Wireframe bridges the gap between design and development by providing a beautiful, minimal interface that exports your designs for any IDE or development environment.

✨ Features

• 🎨 Beautiful UI - Modern, minimal interface designed for productivity
• ⚡ One-Click Export - Export wireframes for any IDE or development environment
• 🤖 AI-Powered - Generate React, Vue, and HTML code with MCP tools
• 📊 Design System Analysis - Extract colors, typography, and spacing
• 🔄 Real-time Integration - Seamless workflow from Figma to code
• 📱 Responsive Design - Works with any component, frame, or group
• 🌐 Universal Compatibility - Works with any IDE, editor, or development tool

🚀 Quick Start

Option 1: Simple File Export (No Setup Required!)

1. Install the Plugin from Figma Community
2. Select your design in Figma
3. Click "Export Wireframe" - that's it!
4. Use the exported JSON in your development workflow

Option 2: Advanced AI Integration (Recommended)

1. Install the Plugin

• Open Figma
• Go to Plugins → Browse plugins in Community
• Search for "Wireframe" and install

2. Install & Setup (One Command!)

# Install and setup everything automatically
npx wireframe-mcp@latest

That's it! This will:

• ✅ Install the package globally
• ✅ Configure MCP for all IDEs
• ✅ Set up export directories
• ✅ Test the connection

3. Manual Setup (Alternative)

# If npx doesn't work, install manually
npm install -g wireframe-mcp@latest
wireframe-setup

4. Troubleshooting

If you get "command not found", the setup script will automatically fix your PATH. Just restart your terminal after running the setup.

🎯 Usage

Basic Export

1. Select any component, frame, or group in Figma
2. Run the Wireframe plugin
3. Click "Export Wireframe" for immediate file download
4. Use the JSON/YAML in your development workflow

AI-Powered Code Generation

1. Start the bridge server: npm run bridge:start
2. Export with "⚡ Real-time Export" in the plugin
3. Use MCP tools in your IDE to generate code

🔧 Development Setup

For developers who want to contribute or customize:

# Clone and install
git clone https://github.com/robbandi/blueprint.git
cd blueprint
npm install

# Build everything
npm run build

# Start development
npm run dev

📁 File Locations

• Exports: ~/.figma-exports/
• Tokens: ~/.figma-exports/tokens.json
• Latest Export: ~/.figma-exports/real-time-export.json

🤝 Contributing

See CONTRIBUTING.md for development guidelines.

📄 License

MIT License - see LICENSE for details.