npm package: @robbandi/figment
Description: ⚡ Figma to codegen bridge
Author: Figment Team
Latest version: 1.2.0

# ⚡ 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.

![Figment Plugin](https://img.shields.io/badge/Figma-Plugin-blue?logo=figma)
![Universal IDE](https://img.shields.io/badge/Universal-IDE-green?logo=code)
![MCP Integration](https://img.shields.io/badge/MCP-Integration-purple)

## ✨ 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!)
```bash
# 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)
```bash
# 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:

```bash
# 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](./CONTRIBUTING.md) for development guidelines.

### Development Setup

```bash
# 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](./LICENSE) for details.

## 🙏 Acknowledgments

- Built with [@create-figma-plugin/build](https://github.com/yuanqing/create-figma-plugin)
- Powered by [Model Context Protocol (MCP)](https://modelcontextprotocol.io/)
- Icons and design inspiration from the Figma community