⚡ Figment

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

Transform your Figma designs into production-ready code with the power of AI. Figment 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 figments 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 Figment" - 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 "Figment" and install

2. Install & Setup (One Command!)

# Install and setup everything automatically
npx figment@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 figment@latest
figment-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 Figment plugin
3. Click "Export Figment" 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/rbnnghs/Figment.git
cd Figment
npm install

# Build everything
npm run build

# Start development
npm run dev

Development Notes

• Console Logging: The project includes extensive console logging for debugging. For production builds, consider implementing a proper logging system or environment-based logging.
• TypeScript: All source code is written in TypeScript with strict type checking.
• Build Process: The project uses @create-figma-plugin/build for the Figma plugin and custom TypeScript compilation for the MCP server.

📁 File Locations

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

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for development guidelines.

Development Setup

# Clone the repository
git clone https://github.com/rbnnghs/Figment.git
cd Figment

# Install dependencies
npm install

# Build the project
npm run build

# Start development mode
npm run dev

📄 License

MIT License - see LICENSE for details.

🙏 Acknowledgments

• Built with @create-figma-plugin/build
• Powered by Model Context Protocol (MCP)
• Icons and design inspiration from the Figma community